/* #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; } @media screen and (min-width: 375px) { .gtm-wrapper { padding-left: var(--space-lg); padding-right: var(--space-lg); } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// TYPOGRAPHIES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ @font-face { font-family: 'lato-regular'; src: url('../fonts/lato-regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'lato-light'; src: url('../fonts/lato-light.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'lato-bold'; src: url('../fonts/lato-bold.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'roboto-regular'; src: url('../fonts/roboto-regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'roboto-light'; src: url('../fonts/roboto-light.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'roboto-bold'; src: url('../fonts/roboto-bold.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'new-rubrik'; src: url('../fonts/New_Rubrik_SemiBold.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'nunito'; src: url('../fonts/Nunito-Regular.woff2') format('woff2'); font-display: swap; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VARIABLES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------- TYPOGRAPHIES -------------------------------------------------- */ :root { /* Polices ------------------------------------- */ --font-primary: 'nunito', sans-serif; /* police principale */ --font-secondary: 'nunito-Black', sans-serif; --font-heading: 'new-rubrik', 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: #0173E5; --color-secondary: #2BD2BA; --color-third: #FFAE43; --color-fourth: #69C467; --color-fifth: #9978EB; --color-sixth: #F25646; /* Fonts ----------------- */ --color-font: #020055; --color-light: white; --color-heading: #020055; --color-form: #000; /* Liens ----------------- */ --color-link: #2BD2BA; --color-link-hover: #0173E5; --color-link-visited: #2BD2BA; --color-link-light: whitesmoke; --color-link-light-hover: lightgrey; --color-link-light-visited: grey; /* Boutons ----------------- */ --color-button: #0173E5; --color-button-hover: #2BD2BA; --color-texte-button: #ffffff; /* Background ----------------- */ --color-background-classic: #eae58a; --color-background-opacity: rgba(0, 0, 0, .5); --color-background-gradient: linear-gradient(to bottom, transparent, #2BD2BA40); --color-background-1: #e7acac; --color-background-2: #b9dfb9; --color-background-3: #b9b9d8; /* Menu ----------------- */ --color-background-menu: #fff; --color-background-sub-menu: lightgrey; --color-background-burger: #0173E5; --color-background-burger-line: #fff; --color-menu-contact: #0173E5; --color-menu-texte-contact: #fff; --color-menu-texte-contact-hover : #020055; --color-menu-contact-hover: #2BD2BA; --color-link-menu: #0173E5; --color-link-menu-hover: #2BD2BA; --color-link-menu-active: #2BD2BA; --color-link-sub-menu: darkblue; --color-link-sub-menu-hover: purple; --color-link-sub-menu-active: darkcyan; /* FAQ ----------------- */ --color-background-question-faq: transparent; --color-background-reponse-faq: transparent; --color-texte-question-faq: #0173E5; --color-texte-reponse-faq: #020055; /* Copyright ----------------- */ --color-background-copyright: #2BD2BA40; /* 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: 9999999999; } .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: #0173E5; --color-secondary: #2BD2BA; --color-third: #FFAE43; --color-fourth: #69C467; --color-fifth: #9978EB; --color-sixth: #F25646; /* Fonts ----------------- */ --color-font: #020055; --color-light: white; --color-heading: #020055; --color-form: #000; /* Liens ----------------- */ --color-link: #0173E5; --color-link-hover: #2BD2BA; --color-link-visited: #0173E5; --color-link-light: whitesmoke; --color-link-light-hover: lightgrey; --color-link-light-visited: grey; /* Boutons ----------------- */ --color-button: #0173E5; --color-button-hover: #2BD2BA; --color-texte-button: #fff; /* Background ----------------- */ --color-background-classic: #eae58a; --color-background-opacity: rgba(0, 0, 0, .5); --color-background-gradient: linear-gradient(to bottom, transparent, #2BD2BA40); --color-background-1: #e7acac; --color-background-2: #b9dfb9; --color-background-3: #b9b9d8; /* Menu ----------------- */ --color-background-menu: #fff; --color-background-sub-menu: lightgrey; --color-background-burger: #0173E5; --color-background-burger-line: #fff; --color-menu-contact: #0173E5; --color-menu-texte-contact: #fff; --color-menu-texte-contact-hover : #020055; --color-menu-contact-hover: #2BD2BA; --color-link-menu: #0173E5; --color-link-menu-hover: #2BD2BA; --color-link-menu-active: #2BD2BA; --color-link-sub-menu: darkblue; --color-link-sub-menu-hover: purple; --color-link-sub-menu-active: darkcyan; /* FAQ ----------------- */ --color-background-question-faq: transparent; --color-background-reponse-faq: transparent; --color-texte-question-faq: #0173E5; --color-texte-reponse-faq: #020055; /* Copyright ----------------- */ --color-background-copyright: var(#2BD2BA40); } [data-theme="dark"] { /* Body ----------------- */ --color-background-body: #202020; /* Gestimark ----------------- */ --color-gestimark-primary: #bd7913; --color-gestimark-secondary: #a93a30; /* Général ----------------- */ --color-primary: #0173E5; --color-secondary: #2BD2BA; --color-third: #FFAE43; --color-fourth: #69C467; --color-fifth: #9978EB; --color-sixth: #F25646; /* Fonts ----------------- */ --color-font: #fff; --color-heading: #fff; --color-form: #000; /* Liens ----------------- */ --color-link: #0173E5; --color-link-hover: #2BD2BA; --color-link-visited: #0173E5; /* Boutons ----------------- */ --color-button: #2BD2BA; --color-button-hover: #0173E5; --color-texte-button: #000; /* Background ----------------- */ --color-background-classic: darkred; --color-background-opacity: rgba(0, 0, 0, .5); --color-background-gradient: linear-gradient(to bottom, transparent, #2BD2BA40); --color-background-1: #8e6565; --color-background-2: #728c72; --color-background-3: #666682; /* Menu ----------------- */ --color-background-menu: #202020; --color-background-sub-menu: #3d3d3d; --color-background-burger: #0173E5; --color-background-burger-line: #fff; --color-menu-contact: #2BD2BA; --color-menu-texte-contact: #000; --color-menu-texte-contact-hover : #fff; --color-menu-contact-hover: #0173E5; --color-link-menu: #2BD2BA; --color-link-menu-hover: #0173E5; --color-link-menu-active: #0173E5; --color-link-menu-btn-hover: #FFF; --color-link-sub-menu: white; --color-link-sub-menu-hover: lightgrey; --color-link-sub-menu-active: grey; /* FAQ ----------------- */ --color-background-question-faq: transparent; --color-background-reponse-faq: transparent; --color-texte-question-faq: #0173E5; --color-texte-reponse-faq: #fff; /* Copyright ----------------- */ --color-background-copyright: var(#2BD2BA40); } [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-menu-centre li.item-210 { display: flex; } [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-heading); color: var(--color-heading); /* Gestion des mots longs */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: none; word-break: normal; overflow-wrap: normal; } h2 { font-size: var(--font-size-4xl); font-family: var(--font-heading); 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; hyphens: none; word-break: normal; overflow-wrap: normal; } h3 { font-size: var(--font-size-3xl); font-family: var(--font-heading); color: var(--color-heading); 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; hyphens: none; word-break: normal; overflow-wrap: normal; } h4 { font-size: var(--font-size-xl); font-family: var(--font-heading); color: var(--color-heading); 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; hyphens: none; word-break: normal; overflow-wrap: normal; } h5 { font-size: var(--font-size-lg); font-family: var(--font-heading); color: var(--color-heading); 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; hyphens: none; word-break: normal; overflow-wrap: normal; } h6 { font-size: var(--font-size-md); font-family: var(--font-heading); color: var(--color-heading); 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; hyphens: none; word-break: normal; overflow-wrap: normal; } /* Textes ------------------------------------- */ p { margin-bottom: var(--space-sm); word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: none; word-break: normal; overflow-wrap: normal; } blockquote { font-size: var(--font-size-lg); font-family: var(--font-secondary); margin-bottom: var(--space-sm); } figcaption { font-size: 12px; text-align: center; } /* 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; } ul.gtm-liste-picto { margin-left: var(--space-xs); } ul.gtm-liste-picto li { list-style: none; padding-bottom: 5px; background: url(/images/gtm-list-pict.png) no-repeat 0 6px; background-size: 15px; padding-left: var(--space-xs); font-size: var(--font-size-base); } /* 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 { position: relative; opacity: 0; transform: scale(0.8); transition: opacity 0.6s ease-out, transform 0.6s ease-out; background-image: url(/images/image_4_section_2_background_texte_bulles_peinture-2.jpg); background-repeat: no-repeat; background-size: cover; padding: var(--space-2xl); mask-image: url(/images/masque_4_section_2_background_texte_site_nora.svg); mask-repeat: no-repeat; } .gtm-anim-3::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-background-opacity); } */ /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 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; /* coins arrondis masque les caractères */ padding-left: 15px; padding-right: 15px; } .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: var(--border-radius); 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; /* border-radius: var(--border-radius); */ } .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; } .gtm-form-carriere { padding-left: var(--space-lg); padding-right: var(--space-lg); } @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-container-copyright { background: var(--color-background-copyright); } .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; } .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: 100%; height: 50px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 30px; background-position: center; background-color: var(--color-background-copyright) !important; order: 999999; -webkit-animation: cookie 0.4ss .8s both; animation: cookie 0.4s .8s both; transition: background-image 0.3s ease; border-radius: 0; } .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; } div.cc-window.cc-floating { padding: 2em 1.8em 3.5em 1.8em; } @media screen and (min-width: 650px) { div.cc-window.cc-floating { padding: 2em 1.8em; } .cc-floating .cc-message { margin-bottom: 0; } div.cc-compliance > a.cc-btn, div.cc-compliance > ul.cc-compliance-list a.cc-btn { margin-bottom: 0; } ul.cc-compliance-list li { margin-bottom: 0; } } /* 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); } .sitemap { padding-left: var(--space-lg); padding-right: var(--space-lg); } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 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; z-index: 9999999999; } .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); background-color: var(--color-background-menu); transition: top .2s ease-in-out; border-radius: 0 0 25px 0; } .gtm-logo-header .mod-custom .mod-custom { line-height: 0; } .gtm-lien-logo { line-height: 0; } .gtm-logo-header a { margin-bottom: 0; display: block; } .gtm-logo-header img { max-width: 120px; } .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-lg); 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); padding-left: var(--space-lg); padding-right: var(--space-lg); } @media screen and (max-width: 1023px) { #nora h1 { display: none; } #nora .gtm-hero-1 .gtm-hero-texte-content { padding-top: var(--space-xl); } } /* 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; margin-top: var(--space-xl); } .gtm-hero-1 .gtm-hero-texte-content { width: 60%; } .gtm-hero-1 .gtm-hero-images { width: 40%; padding-right: var(--space-xs); } .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; opacity: 0; animation: fadeDownGroup 0.6s forwards; animation-delay: 0.1s; /* ombre subtile */ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); } /* 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; } .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-4xl) 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-light); } .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-light); } /* .gtm-hero-light .gtm-hero-images { width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 0; top: 0; left: 0; mask-image: url(/images/masque_6_section_4_background_site_nora.svg); mask-size: 100%; mask-repeat: no-repeat; mask-position: bottom; } */ /* .gtm-hero-light .gtm-hero-images img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; } */ .gtm-hero-light .mod-custom .gtm-hero-container { position: relative; min-height: 420px; /* ou la vraie hauteur voulue */ overflow: hidden; } .gtm-hero-light .gtm-hero-images { position: absolute; inset: 0; z-index: 0; overflow: hidden; --wave-depth: 36px; clip-path: shape( from 0% 0%, line to 100% 0%, line to 100% calc(100% - var(--wave-depth)), curve to 72% calc(100% - 12px) with 92% calc(100% - var(--wave-depth)) / 82% 100%, curve to 40% calc(100% - 8px) with 62% calc(100% - 24px) / 52% 100%, curve to 0% calc(100% - 20px) with 28% calc(100% - 28px) / 16% 100%, close ); } .gtm-hero-light .gtm-hero-images img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .gtm-hero-light .mod-custom .gtm-hero-images::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-background-opacity); } /* 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 */ } @keyframes fadeIn { to { opacity: 1; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ARTICLES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* Retour en arrière */ .gtm-retour { text-align: center; padding: var(--space-xl) var(--space-md) 0; } /* Introduction */ .gtm-article-introduction { text-align: center; padding-bottom: var(--space-xl); } .gtm-article-introduction .gtm-texte-introduction { font-size: var(--font-size-lg); } /* 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; text-align: center; } /* 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; grid-template-columns: repeat(3, 1fr); justify-content: center; gap: var(--space-md, 20px); max-width: 80%; margin: 0 auto; text-align: center; } .gtm-appel-action > div { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-xl); } @media (max-width: 600px) { .gtm-appel-action { grid-template-columns: 1fr; gap: var(--space-xl, 30px); } } /* 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-img-section { position: sticky; top: 70px; } } /* Appel à l'action */ .gtm-appel-action { display: grid; gap: var(--space-md, 20px); margin: 0 auto; text-align: center; position: relative; z-index: 0; } .gtm-appel-action.gtm-nb-btn-3 { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(1, 1fr); gap: var(--space-md, 20px); margin: 0 auto; text-align: center; position: relative; z-index: 0; } .gtm-bouton1-wrapper { grid-area: 1 / 1 / 2 / 7; } .gtm-bouton2-wrapper { grid-area: 1 / 7 / 2 / 13; } .gtm-bouton3-wrapper{ grid-area: 2 / 1 / 3 / 13; } .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; justify-content: center; align-items: center; text-align: center; gap: 20px; aspect-ratio: 1 / 1; 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 */ } .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 { position: absolute; inset: 0; z-index: 1; } .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 { width: 100%; height: 100%; object-fit: cover; /* équivalent background-size: cover */ object-position: center; } .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; } .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(0,0,0,0.35); z-index: 1; } @media (max-width: 600px) { .gtm-appel-action { display: flex; flex-direction: column; align-items: center; column-gap: var(--space-xl); } } @media screen and (min-width: 768px) { .gtm-appel-action.gtm-nb-btn-3 { .gtm-appel-action { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr; gap: var(--space-md, 20px); margin: 0 auto; text-align: center; position: relative; z-index: 0; } } .gtm-bouton1-wrapper { grid-area: 1 / 1 / 2 / 5; } .gtm-bouton2-wrapper { grid-area: 1 / 5 / 2 / 9; } .gtm-bouton3-wrapper{ grid-area: 1 / 9 / 2 / 13; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CHAMPS GENERAUX ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-article-introduction, .gtm-article-section, .gtm-article-description { margin-bottom: 0; } .gtm-article-introduction { padding-top: 0; padding-bottom: var(--space-2xl); padding-left: var(--space-lg); padding-right: var(--space-lg); } .gtm-article-section, .gtm-article-description { padding-top: var(--space-lg); padding-bottom: var(--space-lg); padding-left: var(--space-lg); padding-right: var(--space-lg); } #nous-joindre .gtm-article-section, #nous-joindre .gtm-article-description { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } .gtm-container-footer { padding-bottom: var(--space-lg); padding-left: var(--space-lg); padding-right: var(--space-lg); background: var(--color-background-gradient); } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 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); } #faq .mod-articlesnews__item:last-child { padding: 0 auto var(--space-4xl) !important; } .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-lg); } .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); padding-left: var(--space-lg); padding-right: var(--space-lg); } .gtm-dev-service-1 { display: flex; justify-content: center; flex-direction: column-reverse; gap: var(--space-md); padding-bottom: var(--space-xl); padding-left: var(--space-lg); padding-right: var(--space-lg); } @media screen and (min-width: 992px) { .gtm-dev-service-1 { flex-direction: row; padding-left: var(--space-lg); padding-right: var(--space-lg); } .gtm-content-dev-service-1 { width: 50%; } .gtm-wrap-img-service-1 { width: 50%; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// DEVENIR MEMBRE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-intro-membre { padding-bottom: var(--space-xl); padding-left: var(--space-lg); padding-right: var(--space-lg); } .gtm-dev-membre { display: flex; justify-content: center; flex-direction: column-reverse; gap: var(--space-md); padding-bottom: var(--space-xl); padding-left: var(--space-lg); padding-right: var(--space-lg); } @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 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ #nous-joindre .gtm-container-bottom { padding-left: var(--space-lg); padding-right: var(--space-lg); } .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; padding-left: var(--space-lg); padding-right: var(--space-lg); } /* .faq-item:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.15); } */ .faq-item h3 { font-size: var(--font-size-md); color: var(--color-font); 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); border: 2px solid var(--color-texte-question-faq); text-align: left; transition: background 0.3s ease; border-radius: var(--border-radius); } /* Style de l'icône + */ .faq-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--color-texte-question-faq); font-size: 1.5em; font-weight: bold; transition: transform 0.3s ease; flex-shrink: 0; margin-left: var(--space-xs); } /* Rotation de l'icône quand ouvert */ .faq-item[aria-expanded="true"] .faq-icon { transform: rotate(45deg); } /* 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); } .faq-answer-content { padding: 0 var(--space-sm); } /* Réponse visible quand ouvert */ .faq-item[aria-expanded="true"] .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-bottom: 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; } .gtm-footer-col-1 .gtm-logo-footer { width: 300px; } } /* 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: 450px; } } /* -------------------------------------------------- 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; } .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); } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// POLITIQUE DE CONFIDENTIALITE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .com-content-article.item-page { margin-top: var(--space-xl); } .com-content-article.item-page { margin-top: 0; } #politique-de-confidentialite h2 { font-size: var(--font-size-xl); } #politique-de-confidentialite h3 { font-size: var(--font-size-lg); } #politique-de-confidentialite form { padding-top: var(--space-xl); margin-left: 0; margin-right: 0; max-width: 100%; } .gtm-sommaire-politique { margin-bottom: var(--space-2xl); } /* #endregion */ /* #region MENU ----------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------ MENU ------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------------------------- */ #gtm-menu .moduletable { padding: 0; } /* Menu centré ---------------------------------------- */ .gtm-logo-menu-header { max-width: 100px; } .gtm-menu-standard .menu-item.default, .gtm-menu-standard li.item-210, .gtm-menu-centre li.item-210 { 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: transparent; transition: all 0.5s ease; } .gtmHeader.gtmOpen { top: 0; z-index: 10000000000; background-color: var(--color-background-menu); } .menu { display: flex; flex-direction: column; align-items: center; list-style: none; margin: 0; } .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 .menu-item > a, .menu .menu-item > span { font-family: var(--font-heading); } .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); font-family: var(--font-heading); } .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: fixed; top: 0; left: 0; min-height: auto; background-color: transparent; display: flex; z-index: 10; } .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; } 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 { color: var(--color-link-menu); font-size: var(--font-size-sm); text-decoration: none; transition: color 0.2s ease-in-out; } .menu .menu-item > span:hover { color: var(--color-link-menu-hover); } .menu .menu-item > a:hover { color: var(--color-menu-contact-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: var(--color-menu-texte-contact); } .gtm-menu-bouton > li:last-child:hover { background-color: var(--color-menu-contact-hover); } .gtm-menu-bouton > li:last-child a:hover { 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 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-footer-4 * .gtm-menu-footer-container { display: flex; flex-direction: column; } #mod-custom230 a { font-size: 16px; font-family: var(--font-primary); } /* #endregion */