/* /* CSS - Template_full_largueur * Kameleo T2 Template Graphical configuration */ /*** --- TABLE OF CONTENT --- 01. Default value -- Titles & typography -- List-styles -- Tables -- Forms 02. Links and buttons -- links styles -- buttons styles 03. Structures global -- logo -- hd (header default parameters) -- bd (body default parameters) -- ft (footer default parameters) 04. Navigation -- main navigation -- second navigation -- third navigation -- annexe navigation -- footer navigation 05. languages links 05. languages links 06. Objects styles -- Objects styles default -- Full background color objects -- Columns object -- Text divided columns 07. Regions -- region Image top content -- region Introduction content -- region Slider -- region Main content -- region Prefooter content -- region Footer content 08. Blog 09. Events 10. Gallery 12. Specific pages styles -- homepage -- color pages 13. Powered -- copyright -- login kameleo 14. Social medias 15. Mobiles version 16. Mediaqueries */ /*** --- VARIABLE DE PAGE --- .default:page par défaut .home:page d'accueil .annexe:page annexe .menuCouleur01:menu couleur 01 .menuCouleur02:menu couleur 02 .menuCouleur03:menu couleur 03 .menuCouleur04:menu couleur 04 /*** --- VARIABLE DE PARAGRAPHE --- (css dans le point "06. Objects styles" ) .default:style de paragraphe par défaut .color-mainBg:full largeur background .column:une petite colonne .textdivided: texte divisée en deux colonnes */ /***** 00. Variables *****/ :root { --color-white: #ffffff; --color-black: #000000; --color-primary: #F72A58; --color-secondary: #FFA615; --color-thertiary: #99B23A; --color-quaternary: #67A9CE; --color-darkgray: #414042; --color-mediumgray: #C9C9C9; --color-lightgray: #f6f6f6; --color-bg: red; --color-border: var(--color-mediumgray); --color-text: var(--color-darkgray); --color-textneg: var(--color-white); --color-pagetitle: var(--color-darkgray); --color-paragraphtitle: var(--color-darkgray); --color-secondarytitle: var(--color-darkgray); --font-main: 'Roboto', sans-serif; --font-secondary: "Open Sans", sans-serif; --weight-light: 300; --weight-normal: 400; --weight-bold: 700; --size-smalltext: 15px; --lineheight-smalltext: 24px; --size-maintext: 18px; --lineheight-maintext: 24px; --size-bigtext: 22px; --lineheight-bigtext: 34px; --size-title: 36px; --lineheight-title: 44px; --size-titleh1: 45px; --lineheight-titleh1: 54px; --size-titleh2: 26px; --lineheight-titleh2: 32px; --size-titleh3: 20px; --lineheight-titleh3: 28px; --size-titleh4: 22px; --lineheight-titleh4: 32px; --links-color: var(--color-primary); --links-hoverbrightness:#FDBDCC; --links-activecolor: var(--color-black); --gap-small: 10px; --gap-large: 15px; --global-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12); --global-radius: 5px; --global-transition: 0.2s all ease-in-out; } /* ---------------------------------------------- VALEUR DE BASE PAR DEFAUT ---------------------------------------- */ html { height: 100%; font-size: 100%; } body { height: 100%; background-color: var(--color-white); color: var(--color-text); font-family: var(--font-main); font-size: var(--size-maintext); line-height: var(--lineheight-maintext); font-weight: var(--weight-normal); -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; /* -- Uncomment this for an image background -- background-image: url(../img/texture.png); background-repeat: no-repeat; background-position: center center; background-size: cover; */ } #w0 { height: 100%; } #w1 { height: 100%; } #w2 { height: 100%; } .mobile div#cn{ overflow: hidden; } /* ---------------------------------------------- CLR DISPLAY NONE ---------------------------------------------- */ .object .clr { display: none; } #kamGallery .clr { display: none; } /* ---------------------------------------------- CONTAINER DE GRILLE ---------------------------------------------- */ .object:not(.slick-slide):not(.bloglist):not(.eventlist), .teaserlist .teaserlist-title, .teaserlist .teaserlist-readmore, .teaserlist .teaserlist-container .item, .teaserlist #paging, .teaserfull-container > *, #kamGallery ul li, .pagetitles { margin: 0 var(--gap-small) calc(var(--gap-small) * 2) var(--gap-small); /* width: calc(100% - var(--gap-large)); */ /* padding: 0; */ box-sizing: border-box; } #mainContent .object:not(.slick-slide):not(.bloglist):not(.eventlist).centered{ margin-top: calc(var(--gap-large) * 2); } @media only screen and (min-width: 640px) and (max-width: 1023px) { .object:not(.slick-slide):not(.bloglist):not(.eventlist), .teaserlist .teaserlist-title, .teaserlist .teaserlist-readmore, .teaserlist .teaserlist-container .item, .teaserlist #paging, .teaserfull-container > *, #kamGallery ul li, .pagetitles { margin: 0 var(--gap-small) calc(var(--gap-small) * 2) var(--gap-small); } #mainContent .object:not(.slick-slide):not(.bloglist):not(.eventlist).centered{ margin-top: calc(var(--gap-large) * 2); } } @media only screen and (min-width: 1024px) { .object:not(.slick-slide):not(.bloglist):not(.eventlist), .teaserlist .teaserlist-title, .teaserlist .teaserlist-readmore, .teaserlist .teaserlist-container .item, .teaserlist #paging, .teaserfull-container > *, #kamGallery ul li, .pagetitles { margin: 0 var(--gap-large) calc(var(--gap-large) * 3) var(--gap-large); } #mainContent .object:not(.slick-slide):not(.bloglist):not(.eventlist).centered{ margin-top: calc(var(--gap-large) * 3); } } /* ---------------------------------------------- GRILLE & COLONNES ------------------------------------------------ */ .object.noColumn:not(.slick-slide), .object.form, .object.files, .intranet .object, .teaserlist .teaserlist-title, .teaserlist .teaserlist-readmore, .teaserlist #paging, .pagetitles { width: calc(100% - var(--gap-small) * 2); } .object.demi:not(.slick-slide) { width: calc(100% - var(--gap-small) * 2); } .object.tiers:not(.slick-slide), .bloglist .teaserlist-container .item { width: calc(100% - var(--gap-small) * 2); } .object.quart:not(.slick-slide), #kamGallery ul li { width: calc(100% / 2 - var(--gap-small) * 2); } /* ---------------------- Exception ---------------------- */ #introContent .object.column.demi { width: calc(100% - var(--gap-small) * 2); } @media only screen and (min-width: 640px) and (max-width: 1023px) { .object.noColumn:not(.slick-slide), .object.form, .object.files, .intranet .object, .teaserlist .teaserlist-title, .teaserlist .teaserlist-readmore, .teaserlist #paging, .pagetitles { width: calc(100% - var(--gap-small) * 2); } .object.demi:not(.slick-slide) { width: calc(100% / 2 - var(--gap-small) * 2); } .object.tiers:not(.slick-slide), .bloglist .teaserlist-container .item { width: calc(100% / 2 - var(--gap-small) * 2); } .object.quart:not(.slick-slide), #kamGallery ul li { width: calc(100% / 4 - var(--gap-small) * 2); } /* --------------- Exception --------------- */ #introContent .object.column.demi { /* border: 1px solid green; */ width: calc(100% / 3 * 2 - var(--gap-small) * 2); } } @media only screen and (min-width: 1024px) { .object.noColumn:not(.slick-slide), .object.form, .object.files, .intranet .object, .teaserlist .teaserlist-title, .teaserlist .teaserlist-readmore, .teaserlist #paging, .pagetitles { width: calc(100% - var(--gap-large) * 2); } .object.demi:not(.slick-slide) { width: calc(100% / 2 - var(--gap-large) * 2); } .object.tiers:not(.slick-slide), .bloglist .teaserlist-container .item { width: calc(100% / 3 - var(--gap-large) * 2); } .object.quart:not(.slick-slide), #kamGallery ul li { width: calc(100% / 4 - var(--gap-large) * 2); } /* --------------- Exception --------------- */ #introContent .object.column.demi { width: calc(100% / 3 * 2 - var(--gap-large) * 2); } } /* ---------------------------------------------- TITRES & TYPOGRAPHIE ---------------------------------------------- */ .titles { width: 100%; } .wrap-content p { width: 100%; } h1, h2, h3, h3 a, .event h2 a, h2 { margin-bottom: var(--gap-large); padding: 0; box-sizing: border-box; color: var(--color-text); font-weight: var(--weight-normal); text-decoration: none; text-transform: none; } .home h1, .bloglist .teaserlist-title{ text-align: center; display: block; } h2 { color: var(--color-paragraphtitle); font-size: var(--size-titleh2); line-height: var(--lineheight-titleh2); font-weight: var(--weight-light); } .object.porteCTA h2{ font-weight: var(--weight-normal); } h3, h3 a, .event h2 a { color: var(--color-paragraphtitle); font-size: var(--size-titleh3); line-height: var(--lineheight-titleh3); font-weight: var(--weight-bold); } h4 { width: 100%; margin: 0; border: none; color: var(--color-secondarytitle); font-size: var(--size-titleh4); line-height: var(--lineheight-titleh4); font-weight: var(--weight-normal); } .pagetitles{ display: flex; flex-wrap: wrap; justify-content: center; } .home .pagetitles{ margin: 0 auto; } .home .pagetitles h4.sectitle{ text-align: center; order:2; margin: var(--gap-large) 0; color: var(--color-primary); } .centered h2, .titleblock h2, .bloglist .teaserlist-title h2, .noColumn .titles h2{ font-size: var(--size-title); line-height: var(--lineheight-title); font-weight: var(--weight-light); position: relative; } .centered h2, .titleblock h2, .bloglist .teaserlist-title h2{ padding-bottom:56px; } .centered h2::after, .titleblock h2::after, .bloglist .teaserlist-title h2::after, .separator::after{ content:''; position: absolute; left:50%; right:0; bottom:0; width:100%; height:50px; transform: translateX(-50%); background-image:url(../img/soulignement.svg); background-repeat:no-repeat; background-position:center center; background-size: 327px auto; } .separator { width: 100%; position: relative; height: 50px; } /* ---------------------- TITRES DE PAGE ---------------------- */ h1, .headerSlider h2 { color: var(--color-pagetitle); font-size: var(--size-titleh1); line-height: var(--lineheight-titleh1); font-weight: var(--weight-light); margin-bottom: 0; } .headerSlider h2 { color: var(--color-textneg); text-align: left; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } /* ---------------------- AUTRES TITRES ----------------------- */ .title.object { padding-bottom: 0; } .title.object h2 { margin-bottom: 0; } .titleblock, .titleblock h2{ display: block; width: 100%; text-align: center; margin: 0; } /* Si les block titre sont centré décommenter ça .titleblock .wrap-content { display: flex; justify-content: center; } .titleblock .wrap-content h2 { text-align: center; } @media only screen and (min-width: 640px) and (max-width: 1023px) { .titleblock .wrap-content h2 { width: calc(100% / 12 * 10); } } @media only screen and (min-width: 1024px) { .titleblock .wrap-content h2 { width: calc(100% / 12 * 8); } } */ /* ---------------------------------------------- TEXTES ------------------------------------------------------------ */ .object u { background-color: transparent; color: var(--color-primary); font-size: var(--size-bigtext); line-height: var(--lineheight-bigtext); font-weight: var(--weight-light); text-decoration: none; } .object strong { font-weight: var(--weight-bold); } .object em { font-style: italic; } p { margin: 0 0 var(--gap-large) 0; } .object ul { margin-bottom: var(--gap-large); list-style-type: disc; list-style-position: inside; } /* -- Tables -- */ .object .table { width: 100%; margin: calc(var(--gap-large) * 2) 0; } .object .table table { width: 100%; } .object .table table tr td { border: 1px solid var(--color-border); padding: calc(var(--gap-small) / 2) var(--gap-small); } .object .table table tr:first-of-type td { /* styles of the first line of the table */ background-color: var(--color-mediumgray); font-weight: var(--weight-bold); } .object .table table tr td:first-of-type { /* styles of the first column of the table */ font-weight: var(--weight-bold); } /* ---------------------------------------------- FORMULAIRES ------------------------------------------------------- */ form.kSiteForm { width: 100%; margin: calc(var(--gap-large) * 2) 0; } form.kSiteForm fieldset { margin-bottom: calc(var(--gap-large) * 2); } form.kSiteForm fieldset .clr { display: none; } .ui-datepicker { z-index: 50 !important; /*put the calender before the other elements*/ } form.kSiteForm label { font-weight: var(--weight-bold); padding-bottom: calc(var(--gap-small) / 2); } #mc_embed_signup input.email, form.kSiteForm .captcha input, form.kSiteForm input.text, form.kSiteForm select, form.kSiteForm textarea { height: initial; width: 100%; padding: var(--gap-small); box-sizing: border-box; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--global-radius); -moz-border-radius: var(--global-radius); -webkit-border-radius: var(--global-radius); color: var(--color-text); font-family: var(--font-main); font-size: var(--size-maintext); -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } form.kSiteForm input.text.error, form.kSiteForm select.error, form.kSiteForm textarea.error { box-shadow: none; } form.kSiteForm input.text:focus, form.kSiteForm textarea:focus, form.kSiteForm select:focus, #mc_embed_signup input.email:focus, form.kSiteForm input.text:hover, form.kSiteForm textarea:hover, form.kSiteForm select:hover, #mc_embed_signup input.email:hover { border-color: var(--color-secondary); } /* ---------------------------------------------- LIENS & BOUTONS ------------------------------------------------ */ .object p a { -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } a, a:link, a:visited, .navPost-prev a, .navPost-prev a { color: var(--links-color); text-decoration: none; } a:hover, a:focus, a:active, .navPost-prev a:hover, .navPost-prev a:hover { color: var(--links-hovercolor); text-decoration: underline; } /* ------------- buttons style ------------- */ .object a.button, .object a.button, a.button, .container.buttons #btSubmit, input.kButton.continue, #mainNav li.contactNav a, #introContent .object a.button, #headerSliderContent .object a.button, #mainNavCt a.button, .bloglist .readmore-container a { position: relative; height: auto; width: auto; display: inline-block; margin: var(--gap-small) var(--gap-small) 0 0; padding: var(--gap-small) calc(var(--gap-small) * 2); box-sizing: border-box; background-color: var(--color-primary); border-radius: var(--global-radius); -moz-border-radius: var(--global-radius); -webkit-border-radius: var(--global-radius); border: none; color: var(--color-textneg); font-size: var(--size-maintext); line-height: var(--lineheight-maintext); font-weight: var(--weight-normal); text-decoration: none; text-transform: none; text-align: center; cursor: pointer; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .object a.button:hover, .object a.button:hover, a.button:hover, .container.buttons #btSubmit:hover, .container.buttons #btSubmit:focus, input.kButton.continue:hover, #introContent .object a.button:hover, #headerSliderContent .object a.button:hover, #mainNavCt a.button:hover,@ .bloglist .readmore-container a:hover { color: var(--color-textneg); background-color: var(--color-darkgray); } /* option: bouton avec flèche */ .object.standard.porteCTA .wrapobject a, .object.standard.porteCTA .wrapobject a:hover, .bloglist .item-readmore a.readmore, .bloglist .item-readmore a.readmore:hover { position: relative; padding: calc(var(--gap-small) / 2) 30px calc(var(--gap-small) / 2) 0px; background-color: transparent; color: var(--color-primary);; font-size: var(--size-maintext); line-height: var(--lineheight-maintext); text-decoration: none; cursor: pointer; } .object.standard.porteCTA .wrapobject a::after, .bloglist .item-readmore a.readmore::after { content: ""; position: absolute; top: 50%; right: var(--gap-small); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); display: block; height: 6px; width: 6px; margin-top: -4px; border: 2px solid var(--color-primary); border-width: 0 2px 2px 0; background-color: transparent; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .object.standard.porteCTA .wrapobject a:hover::after, .bloglist .item-readmore a.readmore:hover::after { right: calc(var(--gap-small) / 2); } /* --- Si une région est en négatif --- #introContent .object a.button, #introContent .object a.button:hover { color: #fff; } #introContent .object a.button::after { border-color: #fff; } */ /* ---------------------------------------------- CN STRUCTURE GLOBALE ----------------------------------- */ .cn { position: relative; width: 100%; margin: 0 auto; padding: calc(var(--gap-large) * 2) 0; box-sizing: border-box; display: flex; flex-wrap: wrap; } @media only screen and (min-width: 640px) and (max-width: 1023px) { #footerContent .cn > * { width: calc(100% / 2 - var(--gap-small) * 2); margin: 0 var(--gap-small) calc(var(--gap-small) * 2) var(--gap-small); } } @media only screen and (min-width: 1024px) { .cn { width: 1040px; } } #mainContent .cn, #prefooterContent .cn{ padding-top: calc(var(--gap-large) * 4); } #hd .cn { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; padding: 0 var(--gap-large); } .mobile #hd .cn { padding: 0; } #poweredContent .cn { padding: var(--gap-large); justify-content: space-between; } .mobile div#ft #poweredContent .cn{ padding: var(--gap-large) calc(var(--gap-large) * 2); } .cn.titlePage { padding-top: 80px; } .cn.titlePage { padding-bottom: 0; } /* ---------------------------------------------- REGIONS ------------------------------------------------ */ #topNav { position: relative; } #topNav::after{ content:''; position: absolute; top:0; right:0; bottom:0; width: 50%; background: linear-gradient(270deg, #F6F6F6 0%, #F6F6F6 81.06%, rgba(246,246,246,0) 99.95%); z-index: -1; } .mobile #topNav::after{ display: none; } .bottomNav { } #breadcrumbContent { background-color: var(--color-lightgray); } #introContent { background-color: var(--color-white); } #mainContent { background-color: var(--color-lightgray); } #highlightContent { background-color: grey; } #newsContent { background-color: var(--color-quaternary); } #sliderLogoContent { background-color: brown; } #prefooterContent { background-repeat: no-repeat; background-position: center center; background-size: cover; } #prefooterContent .image.default.noColumn { display: none; } #prefooterContent .wrap-content { padding: 15px 30px; } #footerContent { background-color: var(--color-lightgray); } #poweredContent { background-color: var(--color-white); } @media only screen and (min-width: 640px) and (max-width: 1023px) { #prefooterContent .wrap-content { padding: 30px 60px; } } @media only screen and (min-width: 1024px) { } /* ---------------------------------------------- LOGO --------------------------------------------------- */ strong#logo{ position: relative; top: -48px; margin-bottom: -48px; left: 0; } strong#logo a { display: block; overflow: hidden; width: 0; height: 0; margin: 0; padding: 144px 0 0 230px; background-image: url(../img/logo-horizontal.svg); background-repeat: no-repeat; background-position: center center; background-size: 220px auto; } @media only screen and (min-width: 640px) and (max-width: 1023px) { strong#logo a { padding: 144px 0 0 180px; background-size: 170px auto; } } strong#logo_footer a { display: block; overflow: hidden; width: 0; height: 0; padding: 170px 0 0 140px; background-image: url(../img/logo-vertical.svg); background-repeat: no-repeat; background-position: left top; background-size: contain; } .mobile strong#logo_footer a{ background-size: 100px auto; padding: 130px 0 0 140px; } .mobile #logomobile a { height: auto; padding: 60px 0 0 180px; background-image: url(../img/logo-horizontal.svg); background-repeat: no-repeat; background-position: center center; background-size: 150px auto; } /* ---------------------------------------------- LOGIN / POWERED ---------------------------------------- */ /* ---------------------- COPYRIGHT -------------------- */ #copyright { font-size: var(--size-smalltext); line-height: var(--lineheight-smalltext); } /* ---------------------- LOGIN ------------------------ */ #loginAndPowered { display: flex; justify-content: flex-end; align-items: center; } #kLogin { height: 0; width: 0; margin: 0; padding: 14px 0 0 30px; overflow: hidden; border-radius: var(--global-radius); -moz-border-radius: var(--global-radius); -webkit-border-radius: var(--global-radius); font-size: 0; cursor: pointer; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #kLogin:hover { background-color: rgba(0, 0, 0, 0.3); } a#kPowered { height: 0; width: 0; padding: 14px 0 0 130px; overflow: hidden; } /* --- Si le fond du site est positif --- */ #copyright, #copyright a { color: var(--color-text); text-decoration: none; } #copyright a:hover { text-decoration: underline; } a#kPowered { background: transparent url(../../../../standards/img/login_b.png) -31px top no-repeat; } #kLogin { background: transparent url(../../../../standards/img/login_b.png) top left no-repeat; } /* --- Si le fond du site est négatif --- a#kPowered { background: transparent url(../../../../standards/img/login_w.png) -31px top no-repeat; } #kLogin { background: transparent url(../../../../standards/img/login_w.png) top left no-repeat; } #copyright { color: var(--color-textneg); } */ /* ---------------------------------------------- REGION FOOTER ------------------------------------------ */ #footerContent .cn { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: calc(var(--gap-large) * 4) 0 calc(var(--gap-large) * 2) 0; } .mobile div#ft #footerContent .cn{ padding: 20px 20px; } #footerContent .cn > * { width: calc(100% - var(--gap-small) * 2); margin: 0 var(--gap-small) calc(var(--gap-small) * 2) var(--gap-small); padding: 0; box-sizing: border-box; font-size: var(--size-maintext); line-height: var(--lineheight-maintext); pointer-events: auto; } #footerContent h2 { margin-bottom: var(--gap-small); font-size: var(--size-maintext); line-height: var(--lineheight-maintext); font-weight: var(--weight-bold); } #footerContent .cn .map.object { width: 100%; padding: 0; margin: 50px 0 0 0; } @media only screen and (min-width: 640px) and (max-width: 1023px) { #footerContent .cn > * { width: calc(100% / 2 - var(--gap-small) * 2); margin: 0 var(--gap-small) calc(var(--gap-small) * 2) var(--gap-small); } } @media only screen and (min-width: 1024px) { #footerContent .cn > * { width: calc(100% / 4 - var(--gap-large) * 2); margin: 0 var(--gap-large) calc(var(--gap-large) * 2) var(--gap-large); } } /* ---------------------------------------------- GALLERY ------------------------------------------------ */ #kamGallery { padding: 0; margin: 0; } #kamGallery ul { display: flex; flex-wrap: wrap; } #kamGallery ul li a { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 9 / 6; } #kamGallery ul li a::before { content: ""; position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); background-color: var(--color-black); opacity: 0; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #kamGallery ul li a:hover::before { opacity: 0.3; } #kamGallery ul li a img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center; } .mobile #kamGallery ul li a img { width: 100%; margin: 0; } /* --------------------------------------------------- PAGINATION --------------------------------------------------- */ #paging { display: flex; justify-content: center; margin: 0; padding: 0; /* border: 1px solid red; */ } #paging > * { padding: 0 var(--gap-small); } #paging a { color: var(--color-text); font-size: var(--size-smalltext); -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #paging a:hover { color: var(--color-secondary); text-decoration: none; } #paging span { color: var(--color-secondary); font-size: var(--size-smalltext); } /* ---------------------------------------------- MULTIMEDIA VIDEO PAYER / MUSIC PLAYER ------------------ */ .multimedia .videoWrapper, .multimedia audio { width: 100%; } .multimedia .videoWrapper .videoPadding { overflow: hidden; padding-bottom: 56.25% !important; position: relative; height: 0; } .multimedia .videoWrapper .videoPadding iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; } .files ul { width: 100%; } /* ----------------------------------------------------- PARAGRAPHES ----------------------------------------------------- */ /* ---------- Texte ---------- */ .object.text.default { } .object.text.textdivided .wrap-content { display: block; text-align: left; } .object.text.centered p { line-height: var(--lineheight-maintext) + 4px); } #introContent .object.text.centered p { line-height: var(--lineheight-bigtext); } .object.text.centered.noColumn .wrap-content { } .object.text.porteCTA { padding: var(--gap-large); -webkit-box-shadow: var(--global-box-shadow); -moz-box-shadow: var(--global-box-shadow); box-shadow: var(--global-box-shadow); } @media only screen and (min-width: 640px) and (max-width: 1023px) { .object.text.textdivided .wrap-content { column-count: 2; column-gap: calc(var(--gap-large) * 2); } .object.text.centered.noColumn .wrap-content { max-width: calc(100% / 12 * 10); } } @media only screen and (min-width: 1024px) { .object.text.centered.noColumn .wrap-content { max-width: calc(100% / 12 * 8); } #introContent .object.text.centered.noColumn .wrap-content { max-width: calc(100% / 12 * 10); } } /* ---------- Image ---------- */ .object.image.default { } .object.image.centered { } .object.image.porteCTA { -webkit-box-shadow: var(--global-box-shadow); -moz-box-shadow: var(--global-box-shadow); box-shadow: var(--global-box-shadow); } /* -------- Standard --------- */ .object.standard.default { } .object.standard.centered { } .object.standard.porteCTA{ background-color: var(--color-primary); } .object.standard.porteCTA h2, .object.standard.porteCTA h4{ color: #fff; } .object.standard.porteCTA .titles{ display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap:wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; justify-content: center; text-align: center; } .object.standard.porteCTA h2{ order: 1; font-size: var(--size-titleh2); line-height: var(--lineheight-titleh2); margin-bottom: var(--gap-small); } .object.standard.porteCTA h4{ order: 2; } #id-46{ background-color: var(--color-secondary); } #id-47{ background-color: var(--color-primary); } #id-48{ background-color: var(--color-thertiary); } #id-49{ background-color: var(--color-quaternary); } /* ----------------------------------------------------- ACCORDION ----------------------------------------------------- */ .accordion { width: 100%; /* border: 1px solid blue; */ } /* ----------------------------------------------------- EVENTS ----------------------------------------------------- */ .item-date { display: inline-block; } .item-date * { display: inline; } /* -------------------------- EVENTS affichage en ligne ---------------------- */ .eventlist .teaserlist-container .item { /* border: 1px solid red; */ width: calc(100% - var(--gap-small) * 2); } @media only screen and (min-width: 640px) and (max-width: 1023px) { .eventlist .teaserlist-container .item { /* border: 1px solid green; */ width: calc(100% / 3 - var(--gap-small) * 2); } } @media only screen and (min-width: 1024px) { .eventlist .teaserlist-container .item { /* border: 1px solid orange; */ width: calc(100% / 3 - var(--gap-large) * 2); } } /* -------------------------- EVENTS affichage en grille --------------------- */ /* .eventlist .teaserlist-container .item { border: 1px solid red; width: calc(100% - var(--gap-small) * 2); } @media only screen and (min-width: 640px) and (max-width: 1023px) { .eventlist .teaserlist-container .item { border: 1px solid green; width: calc(100% - var(--gap-small) * 2); } } @media only screen and (min-width: 1024px) { .eventlist .teaserlist-container .item { border: 1px solid orange; width: calc(100% - var(--gap-large) * 2); } } .eventlist .teaserlist-container .item .wrapimg { display: none; } */ /* -------------------------- BLOG & EVENT DIFFERENT TEASER ------------------ */ /* Teaserfull-container */ .teaserfull-container { width: 100%; max-width: 750px; margin: 0px auto !important; } .teaserfull-container .wrapinfos { } .teaserfull-container .wrapimg { margin: calc(var(--gap-small) * 2); } .teaserfull-container .wrapimg a { display: flex; width: 100%; } .teaserfull-container .wrapimg img { width: 100%; } .teaserfull-container .wrapsubevent { } .teaserfull-container .wrapsummary { } .teaserfull-container .wrapcontent { } .teaserfull-container .wrapvideo { } .teaserfull-container .wrapgallery { } .teaserfull-container .wrapmap { } .teaserfull-container .wrapform { } .teaserfull-container .wrapnav { } .bloglist .teaserlist-readmore{ text-align: center; display: block; } .teaserfull-container > *:not(.wrapgallery):not(.wrapvideo) { width: calc(100% - var(--gap-small) * 2); } @media only screen and (min-width: 640px) and (max-width: 1023px) { .teaserfull-container > *:not(.wrapgallery):not(.wrapvideo) { width: calc(100% - var(--gap-small) * 2); } } @media only screen and (min-width: 1024px) { .teaserfull-container > *:not(.wrapgallery):not(.wrapvideo) { width: calc(100% - var(--gap-large) * 2); } } /* PAGE DETAILS --- .blog.blog-details --- .blog.detail.object */ .blog_details h1 { display: block; text-align: left; } .blog_details .teaserfull-container .wrapimg{ width: calc(100% - var(--gap-small) * 2); margin: calc(var(--gap-small) * 2) auto; } .blog_details .navpost-back{ width: 100%; margin: calc(var(--gap-large) * 2) 0; } .blog_details .navPost-back, .blog_details .blog .header { text-align: center; } .blog_details .navPost-back a { color: #aaaaaa; } .blog_details .navPost { text-align: center; } .blog_details .object.blog > div .wrapimg { width: 100%; display: block; text-align: center; margin-bottom: 30px; } .blog_details .object.blog .content img { max-height: 500px; max-width: 100%; display: inline-block; margin: 0 0 0 0; float: none; } .blog_details .blog.detail.object .detail { display: block; vertical-align: top; width: 100%; padding: 0 20px 30px 20px; box-sizing: border-box; } .blog_details .blog.object img { margin-bottom: 10px; } /*************************************************** 08. BLOG *************************************************/ /* LISTING HOME --- #newsContent --- .blog.item */ .bloglist { width: 100%; padding: 0; margin: 0; } .bloglist .teaserlist-title h2 { margin: 0; text-align: center; color: var(--color-white); } .bloglist .bloglist-container { display: flex; flex-wrap: wrap; } .bloglist .wrapimg { width: 100%; height: 210px; margin-bottom: var(--gap-large); background-repeat: no-repeat; background-size: cover; background-position: center center; cursor: pointer; margin: 0; } .bloglist .wrapimg a { display: flex; width: 100%; height: 100%; } .bloglist .wrapobject { width: 100%; padding: calc(var(--gap-large) * 2) calc(var(--gap-large) * 2) 0 calc(var(--gap-large) * 2); box-sizing: border-box; font-size: var(--size-smalltext); line-height: var(--lineheight-smalltext); } .bloglist .wrapobject .date { color: var(--color-text); font-size: var(--size-smalltext); line-height: var(--lineheight-smalltext); text-transform: uppercase; } .bloglist .wrapobject .item-title h2 { font-size: var(--size-maintext); line-height: var(--lineheight-maintext); font-weight: var(--weight-normal); } .bloglist .wrapobject .item-title h2 a { -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .bloglist .wrapobject .item-description { font-size: var(--size-smalltext); line-height: var(--lineheight-smalltext); } .bloglist .readmore-container { text-align: center; } .bloglist .readmore-container a { margin: 0; } .bloglist .item-readmore{ padding: 0 0 calc(var(--gap-large) * 2) 0; } .bloglist .blog-item{ background-color: var(--color-white); } /* PAGE LISTING --- .blog:not(.blog-details) --- .blog:not(.detail).object */ .blog:not(.blog_details) .blog .header { overflow: hidden; padding-bottom: 12px; margin: 0 auto; } .blog:not(.blog_details) .blog .header .details em { font-weight: 500; font-style: normal; color: #000; } .blog:not(.blog_details) .object.blog { width: calc(50% - 40px); margin-left: 20px; margin-right: 20px; padding: 30px 35px; margin-bottom: 30px; background-color: #fff; box-shadow: 2px 2px 14px 0 rgba(0, 0, 0, 0.17); box-sizing: border-box; } .blog:not(.blog_details) .object.blog .content img { margin: 0 0 20px 0; max-width: 100%; width: auto; height: auto; } .blog:not(.blog_details) .details { display: block; } .blog:not(.blog_details) .content a.readmore { border: none; text-align: left; display: inline-block; } .blog:not(.blog_details) .content a.readmore:hover { text-decoration: none; } .blog:not(.blog_details) .content hr { display: none; } /********************************************************************************************************************************************************/ /************************************************************************ social ************************************************************************/ /********************************************************************************************************************************************************/ .anchorList li a, .image.object.porteCTA h2 { position: relative; } .anchorList li a::after{ content: ""; position: absolute; top: 50%; left: auto; right: 30px; width: 8px; height: 8px; margin-top: -5px; display: block; border: 2px solid var(--color-text); border-width: 0 2px 2px 0; background-color: transparent; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .anchorList li a::after { right: 10px; margin-top: -8px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /* GoTo button (on the homepage) */ a#goTo { width: 0px; height: 0px; padding: 70px 0px 0px 70px; overflow: hidden; display: block; margin: 50px auto 0px; position: absolute; bottom: -10px; left: 50%; margin-left: -37px; z-index: 20; } a#goTo:before { content: ""; background: url(../img/goTo_btn.png) center center no-repeat; background-size: 40px 40px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #w0 a#goTo:hover:before { margin-top: 20px; } /* goTop button */ #goTop { position: absolute; right: 120px; top: 0; } #goTop a { background-image: url(../img/icon_white.png); background-repeat: no-repeat; background-size: 51px 205px; background-position: right bottom; padding: 100px 80px 0 0; display: inline-block; color: #fff; font-size: 0.875rem; text-transform: uppercase; font-weight: var(--weight-bold); text-decoration: none; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #goTop a:hover { cursor: pointer; opacity: 0.5; } #hd .reseaux_sociaux { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; margin-left: 20px; } .reseaux_sociaux a { margin-left: 15px; text-decoration: none; display: inline-block; vertical-align: middle; line-height: 0; } .reseaux_sociaux a { margin: 0 10px 0 0; } .reseaux_sociaux i { font-weight: var(--weight-normal); -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .reseaux_sociaux i { font-size: 1.3125rem; color: var(--color-text); } .reseaux_sociaux i.fa-instagram { font-weight: var(--weight-bold); } .reseaux_sociaux i:hover { color: var(--color-primary); } /* -- hd (header default parameters) -- */ #hd { height: auto; position: relative; background-color: #fff; margin-top: 0; z-index: 50; } .topbar { width: 100%; height: auto; margin: 0; position: relative; z-index: 50; top: 0; text-align: right; box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0); -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .topbar.sticky { box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.11); } .mobile #undefined-sticky-wrapper { height: auto !important; } #topNav .cn img { display: inline-block; vertical-align: middle; max-width: 22px; width: auto; max-height: 19px; height: auto; margin: 0 10px; } #topNav .contact_info a { margin: 0 0 0 10px; font-size: 0.875rem; line-height: 1.0625rem; font-weight: var(--weight-bold); text-decoration: none; vertical-align: middle; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #topNav .contact_info a i { color: var(--color-text); margin-right: 8px; font-size: 1rem; opacity: 0.5; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #topNav .cn .contact_info a:hover { color: rgba(4, 47, 73, 1); } #topNav .cn .contact_info a:hover i { opacity: 1; color: rgba(4, 47, 73, 1); } /* -- bd (body default parameters) --*/ #bd { position: relative; } #bd #bd_bg { padding: 0; /* padding bottom to push the footer at the bottom of the page (the padding-bottom should be the same value than the footer height bellow) */ } /* -- Main column and secondary column -- */ .col_container { width: 100%; position: relative; display: flex; display: -ms-flexbox; display: -webkit-flex; z-index: 10; } .main_column { flex-grow: 2; width: 100%; max-width: 100%; } .left_column { background-color: #d3d3d3; padding: 60px 20px 0 20px; box-sizing: border-box; } .right_column { background-color: #d3d3d3; padding: 60px 20px 0 20px; box-sizing: border-box; } /***** 04. Navigation *****/ /* -- Main navigation -- */ #mainNavCt { width: max-content; margin: 0 0 0 auto; text-align: right; box-sizing: border-box; padding: 0; } #mainNav li a, ul#lang li a { color: var(--color-primary); padding: 36px 20px; text-decoration: none; font-size: 1.125rem; display: block; font-weight: var(--weight-normal); line-height: 1.375rem; vertical-align: top; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #mainNav li.on a, #mainNav li a:hover, ul#lang li a:hover, ul#lang li.active a { color: var(--color-black); } ul#mainNav { width: 100%; vertical-align: top; } #mainNavCt a.button, #mainNavCt a.button:hover { margin:23px 0 0 17px; padding: 12px 25px; vertical-align: top; } #mainNav li.contactNav { margin-left: 10px; } #mainNav li.contactNav a { opacity: 1; padding: 9px 40px; background: #fff; margin-top: 30px; color: #4a4a4a; text-transform: none; font-size: 1.0625rem; line-height: 1.375rem; } #mainNav li.contactNav a:hover { padding: 9px 40px; margin-top: 30px; } #mainNav li.contactNav a::after { display: none; } #mainNav li.contactNav a:hover::after { margin: 0 5px 0 20px; } #mainNav li a:hover { opacity: 1; } /** anchors **/ ul.anchorList { width: 100%; max-width: 1040px; margin: 0 auto; padding: 10px 20px 60px 20px; box-sizing: border-box; display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; justify-content: flex-start; -ms-flex-pack: left; } .anchorList li { display: inline-block; } .anchorList li a { padding: 6px 30px 6px 0; margin-right: 30px; font-size: 1rem; line-height: 1.5625rem; min-width: 120px; text-align: left; text-transform: uppercase; font-weight: var(--weight-normal); display: block; color: var(--color-text); text-decoration: none; border-top: 3px solid #d3d3d3; border-bottom: 3px solid #d3d3d3; } .anchorList li a:hover { /* style of the main navigation on hover or when the menu is activated */ opacity: 0.5; text-decoration: none; } /* -- second navigation -- */ /* dropdown menu */ ul#mainNav { margin: 0; width: auto; display: inline-block; } ul#mainNav li ul { position: absolute; overflow: hidden; padding: 0 0; margin: 0; z-index: 10; width: 290px; left: 0px; top: 95px; background-color: #fff; border-top: 1px solid #d3d3d3; } ul#mainNav li { display: inline-block; vertical-align: top; position: relative; width: auto; } ul#mainNav li ul li, ul#mainNav li ul li.default { padding: 0; float: none; border: none; background: none; display: block; text-align: left; margin-top: -1px; } #hd ul#mainNav li ul li a { color: var(--color-text); padding: 20px 20px; font-size: 0.9375rem; letter-spacing: 0; line-height: 20px; } #hd ul#mainNav li ul li:not(.last) a::after { content: ""; position: absolute; height: 1px; left: 20px; right: 20px; bottom: 0; background-color: var(--color-lightgray); } ul#mainNav > li > ul li a:hover, ul#mainNav > li.on ul li.on { color: var(--color-text); background-color:var(--color-lightgray); } /* simple sec navigation */ #secNavCt { width: 100%; left: 0; display: block; overflow: hidden; text-align: left; } .secNavCt { height: 100%; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; display: flex; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center; -ms-flex-pack: center; } ul#secNav { width: 100%; text-align: left; margin: 0; width: 310px; padding: 0px 25px; box-sizing: border-box; border-right: 2px solid #ececec; } ul#secNav li { display: block; width: 100%; } ul#secNav li a { color: #fff; font-size: 1.125rem; text-decoration: none; font-weight: var(--weight-bold); text-align: left; line-height: 1.375rem; width: auto; display: block; position: relative; padding: 8px 20px; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } ul#secNav li a:hover { opacity: 0.5; padding: 8px 5px 8px 25px; } ul#secNav li.on a { opacity: 0.6; } /* -- third navigation -- */ ul#thirdNav { margin-bottom: 60px; } ul#thirdNav li { display: inline-block; padding: 0 5px; } ul#thirdNav li a { display: block; padding: 10px; text-transform: uppercase; font-weight: var(--weight-bold); text-decoration: none; border: 1px solid var(--color-text); padding: 10px 20px; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } ul#thirdNav li a:hover { background-color: var(--color-text); color: #fff; } /* -- annexe navigation -- */ #annexNavCt { position: absolute; right: 0; top: 0; padding-top: 24px; vertical-align: top; } #annexe { display: inline-block; text-align: right; float: none; width: auto; box-sizing: border-box; padding: 0; vertical-align: top; } #annexe li { display: inline-block; text-transform: none; /* puts all words in uppercase in main menu (change to none if you want lowcase) */ vertical-align: top; } #annexe li a, #annexNavCt a.button { /* style of the main navigation links */ font-size: 1.0625rem; text-transform: none; line-height: 1.25rem; font-weight: var(--weight-normal); display: inline-block; vertical-align: top; color: #2f3e4b; padding: 15px 10px; opacity: 1; margin: 0; text-decoration: none; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #annexe li a:hover, #annexe li.on a, #annexNavCt a.button:hover { opacity: 0.5; text-decoration: none; } /* -- footer navigation -- */ /***** 05. languages links *****/ #hd .langAndCurrency { display: inline-block; vertical-align: middle; } ul#lang { display: flex; } ul#lang li { display: flex; align-items: center; } ul#lang li a { color: var(--color-text); font-weight: var(--weight-normal); font-size: 1rem; font-style: normal; text-transform: uppercase; float: none; display: block; padding: 10px 5px; background: none; text-decoration: none; } ul#lang li.fr a { padding-right: 0px; } ul#lang li.de::before { content: "|"; color: #d3d3d3; } ul#lang li a:hover { opacity: 0.5; } /***** 06. Objects styles *****/ /* -- Objects styles default --*/ .object > div { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; } /***/ .object > div, .object.hasaccordion h2 { width: 100%; /* max-width: 100%; */ margin: 0px auto; padding: 0 0; box-sizing: border-box; } .image.object img { /* paragraph image */ max-width: 100%; height: auto; display: inline-block; width: auto; align-self: flex-start; } .standard.object > div { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; align-items: center; justify-content: center; -ms-flex-pack: center; justify-content: space-between; -ms-flex-pack: justify; } .standard.object > div h2 { width: 100%; padding: 0; } .standard.object .wrapimg { width: calc(50% - 20px); margin: 0; line-height: 0; } .standard.object .wrapimg { order: 2; } .standard.object .wrapobject { width: calc(50% - 20px); margin: 0; text-align: left; order: 1; } .object.column .wrapobject, .object.column .wrapimg { width: 100%; padding: 0; } .object.column .wrapobject { order: 2; } .object.column .wrapimg { order: 1; line-height: 0; margin-bottom: 16px; } .object .wrapimg img { width: 100%; height: auto; } .object.column_demi img { width: 100%; } .standard.object > div .clr { display: none; } /* paragraphe centré - variable centered */ #introContent .centered { font-size: var(--size-bigtext); line-height: var(--lineheight-bigtext); font-weight: var(--weight-light); } .centered { text-align: center; } .centered > div { justify-content: center; -ms-flex-pack: center; } /* -- hasaccordion -- */ .accordion { display: flex; flex-wrap: wrap; } .object.hasaccordion h2 { padding: 10px 0 12px 34px; position: relative; font-size: 1.375rem; line-height: 1.625rem; box-sizing: border-box; } .object.hasaccordion .content { padding: 0 0 0 34px; box-sizing: border-box; } /** Accordeon ouverture avec bouton plus **/ #mainContent .object.hasaccordion span { border-radius: 50%; width: 24px; height: 24px; display: inline-block; vertical-align: middle; background-color: transparent; background-color: #d3d3d3; position: relative; margin-right: 10px; position: absolute; left: 0; top: 10px; } #mainContent .object.hasaccordion span::after { content: " "; position: absolute; display: block; background-color: #fff; height: 2px; margin-top: -1px; top: 50%; left: 6px; right: 6px; z-index: 9; } #mainContent .object.hasaccordion span::before { content: " "; position: absolute; display: block; background-color: #fff; width: 2px; margin-left: -1px; left: 50%; top: 6px; bottom: 6px; z-index: 9; opacity: 1; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #mainContent .object.hasaccordion.open span::before { opacity: 0; } /* Accordeon ouverture avec arrow * .hasaccordion h2::after{ content:""; position: absolute; top:50%; left:auto; right: 3px; width:8px; height: 8px; margin-top: -8px; margin-left: -8px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); display: block; border-left:2px solid rgba(7,77,120,1); border-bottom:2px solid rgba(7,77,120,1); background-color: transparent; } .hasaccordion.open h2::after{ background-image:url(../img/moins_btn.svg); border-color: #D9D9D9; background-size: 15px 3px; } ***/ /* ------------------------------------------------------------------ Columns object ------------------------------------------------------------------ */ .image.object.column h2 { padding: 0; } #mainContent .standard.object.column_demi > div, .standard.object.porteCTA > div { -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); padding: 0; } #mainContent .standard.object.column_demi > div { min-height: 455px; position: relative; } .object.column_demi h2 { margin-bottom: 15px; text-transform: uppercase; } .image.object.porteCTA.demi { position: relative; height: 340px; } .image.object.porteCTA.tiers { position: relative; height: 280px; } .image.object.porteCTA .content { height: 100%; } .image.object.porteCTA img { height: calc(100% - 56px); width: 100%; object-fit: cover; } .image.object.porteCTA a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; -moz-box-shadow: 0px 0px 16px rgba(0, 0, 0, 0); -webkit-box-shadow: 0px 0px 16px rgba(0, 0, 0, 0); box-shadow: 0px 0px 16px rgba(0, 0, 0, 0); line-height: 0; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } /* .home .object.porteCTA::before{ content:''; position: absolute; top:0; left:0; right: 0; bottom: 0; background-image: -webkit-linear-gradient(rgba(0,0,0,0.20) 36%, rgba(0,0,0,0.45) 58%); background-image: -o-linear-gradient(rgba(0,0,0,0.20) 36%, rgba(0,0,0,0.45) 58%); background-image: linear-gradient(rgba(0,0,0,0.20) 36%, rgba(0,0,0,0.45) 58%); } */ .object.column_demi .wrapimg, .object.porteCTA .wrapimg, .object.column_demi .wrapobject, .object.porteCTA .wrapobject { width: 100%; text-align: left; } .object.porteCTA .wrapobject { padding: var(--gap-large) calc(var(--gap-large) * 2); z-index: 10; position: relative; } .object.porteCTA .wrapimg, .object.porteCTA .wrapimg img { line-height: 0; } .home .object.porteCTA .wrapimg, .home .object.porteCTA .wrapimg img{ height: calc(66.6vw - var(--gap-small) * 2); object-fit: cover; } @media only screen and (min-width: 640px) and (max-width: 1023px) { .home .object.porteCTA .wrapimg, .home .object.porteCTA .wrapimg img { height: calc(33.3vw - var(--gap-small) * 2); } } @media only screen and (min-width: 1024px) { .home .object.porteCTA .wrapimg, .home .object.porteCTA .wrapimg img{ max-height: 326px; } } .object.porteCTA > div { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; } .object.porteCTA .wrapimg { order: 1; position: relative; margin: 0; } .image.object.porteCTA h2 { z-index: 10; position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; padding: var(--gap-large) calc(var(--gap-large) * 2); background-color: var(--color-white); font-size: 1.1875rem; line-height: 1.625rem; pointer-events: none; } .magentaPage .image.object.porteCTA h2{ background-color: var(--color-primary); color:var(--color-white); } .yellowPage .image.object.porteCTA h2{ background-color: var(--color-secondary); color:var(--color-white); } .greenPage .image.object.porteCTA h2{ background-color: var(--color-thertiary); color:var(--color-white); } .bluePage .image.object.porteCTA h2{ background-color: var(--color-quaternary); color:var(--color-white); } ul#mainNav li.childs.bluePage ul{ display: none; border: none; } /* -- Text divided columns -- */ .object.textdivided > div { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; /* space between the columns */ text-align: justify; } .object.textdivided h2 { width: 100%; text-align: left; padding: 0; max-width: 1040px; margin: 0px auto 16px auto; } .object.textdivided p { margin-bottom: 27px; /* à adapter selon la taille de p afin d'aligner les lignes de textes en colonne */ } /****/ .container_first_object > .smallSize { width: 75%; float: left; } .container_first_object ul { width: 25%; float: left; } /***** 07. Regions *****/ /* -- region Image top content (top content with background) -- */ #headerBannerContent { position: relative; } #headerBannerContent .headerBannerImg { position: absolute; top: 0; right: 0; height: 100%; width: 55%; background-size: cover; background-repeat: no-repeat; background-position: center center; } #headerBannerContent .cn { min-height: 200px; } .headerBanner{ width: calc(100% / 12 * 6); } @media only screen and (max-width: 550px) { .blog_details .headerBanner{ width:100% ; } } #headerBannerContent{ height: 33vw; max-height: 480px; padding-bottom: 60px; display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap:wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; align-items: center; } #headerBannerContent .object { margin-bottom: 0; } #headerBannerContent .object.image.noColumn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #headerBannerContent .wrapobject{ font-size: var(--size-bigtext); line-height: var(--lineheight-bigtext); } /**/ /** breadcrumb **/ #breadcrumbContent .cn { padding: 0 20px 0 20px; box-sizing: border-box; margin-bottom: 0; text-align: left; } #breadcrumbContent .breadcrumb { background-color: transparent; padding: 10px 20px; margin: 0; display: inline-block; } #breadcrumbContent span { color: #575657; font-size: var(--size-smalltext); font-weight: var(--weight-normal); } #breadcrumbContent .breadcrumb a { text-decoration: none; font-weight: var(--weight-normal); } #breadcrumbContent .breadcrumb a:hover { text-decoration: underline; } #breadcrumbContent .breadcrumb i { margin: 0 10px; color: rgba(0, 0, 0, 0.2); font-size: var(--size-smalltext); } #breadcrumbContent #home_icon a { padding: 10px 5px; display: inline-block; opacity: 1; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #breadcrumbContent #home_icon a:hover { opacity: 0.6; } /* -- region highlightContent -- */ #highlightContent .column { background-color: #ffffff; padding: 40px 30px; box-sizing: border-box; text-align: center; } #highlightContent .column h2 { order: 2; } #highlightContent .column img { order: 1; margin: 0 auto 30px auto; } /***** SLIDER -- documentation ici http://kenwheeler.github.io/slick/ -- *****/ .slick-slide:focus { outline: none; } .headerSlider .object { padding: 0; margin: 0; position: relative; z-index: 20; } .headerSlider .object > div { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; justify-content: flex-start; -ms-flex-pack: left; } .home .headerSlider .object >div { min-height: 250px; height: 40vw; overflow: hidden; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; margin: 0 0 0 auto; display: flex; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: flex-end; -ms-flex-pack: right; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; } @media only screen and (min-width: 640px) and (max-width: 1023px) { .home .headerSlider .object >div{ min-height: 320px; height: 45vw; } } @media only screen and (min-width: 1024px) { .home .headerSlider .object >div{ min-height: 690px; height: 52vh; } } .headerSlider .object .wrapimg { display: none; } .headerSlider .object .wrapobject a.button, .headerSlider .object .wrapobject a.button::after { text-shadow: none; margin: 10px 0; background-color: #fff; color: var(--color-text); } .headerSlider h2::before { display: none; } .home .headerSliderContent{ position: relative; overflow: hidden; } .home .headerSliderContent h2{ overflow: hidden; width: 0; height: 0; padding:336px 0 0 685px; z-index: 20; } .home .headerSliderContent h2.home-logo{ content:''; position: absolute; margin: 0; top:50%; left:50%; bottom:0; background-image:url(../img/logo-home-header.svg); background-repeat:no-repeat; background-position:center center; background-size: 280px auto; transform: translateX(-50%) translateY(-50%); margin-left: 0; } @media only screen and (min-width: 640px) and (max-width: 1023px) { .home .headerSliderContent h2.home-logo{ background-size: 50vw auto; margin-left: calc(-100vw / 12 * 2); } } @media only screen and (min-width: 1024px) { .home .headerSliderContent h2.home-logo{ background-size: 100% auto; } } @media only screen and (min-width: 1424px) { .home .headerSliderContent h2.home-logo{ margin-left: 0; transform: translateX(-100%) translateY(-50%); } } .home .headerSliderContent .wrap-content{ max-width: 66.66%; } .home .headerSliderContent .wrap-content::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 750px; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); } .headerSlider .object .wrapobject { z-index: 20; box-sizing: border-box; padding: 40px 40px; background-color: rgba(7, 77, 120, 0.9); color: var(--color-textneg); } .headerSlider .slick-list, .headerSlider .slick-track { width: 100%; } /* slick dots */ .slick-dots { z-index: 10; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: block; margin: 0 auto; } .slick-dots li { display: inline-block; } .slick-dots li button { display: block; width: 10px; height: 10px; margin: 0 calc(var(--gap-small) / 2); padding: 0; background-color: transparent; border: 1px solid var(--links-color); border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; font-size: 0; line-height: 0; cursor: pointer; outline: none; } .slick-dots li.slick-active button { background-color: var(--links-color); border: none; } /* slick arrow */ .slick-prev, .slick-next { z-index: 20; position: absolute; top: 50%; transform: translateY(-50%); background-color: transparent; display: block; width: 30px; height: 30px; border: none; color: transparent; font-size: 0; outline: none; cursor: pointer; } .slick-prev { left: -30px; } .slick-next { right: -30px; } .slick-prev::after, .slick-next::after { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 12px; height: 12px; border: 2px solid var(--links-color); border-width: 2px 0 0 2px; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .slick-prev::after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -moz-transform: translate(-50%, -50%) rotate(-45deg); -o-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .slick-next::after { -webkit-transform: translate(-50%, -50%) rotate(135deg); -moz-transform: translate(-50%, -50%) rotate(135deg); -o-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } .slick-prev:hover::after, .slick-next:hover::after { border-color: var(--links-hovercolor); } /****/ /** ------- slider sponsors ------- **/ #sliderLogoContent .cn { padding: calc(var(--gap-large) * 4) 30px; } #sliderLogoContent .cn .slider_sponsors { position: relative; width: 100%; } #sliderLogoContent .slick-list { margin: 0 -15px; /* border: 1px solid purple; */ } #sliderLogoContent .slick-track { /* border: 1px solid orange; */ display: flex; justify-content: center; box-sizing: border-box; width: 100%; } #sliderLogoContent .slick-slide { margin: 0 15px; /* border: 1px solid red; */ } .slider_sponsors .object { position: relative; display: block; padding: 0; box-sizing: border-box; line-height: 50px; text-align: center; } .slider_sponsors .object .wrap-content { height: 100px; display: flex; text-align: center; } .slider_sponsors .object a { margin: auto; height: 60px; width: 100%; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .slider_sponsors .object img { margin: auto; max-width: 156px; max-height: 76px; } .slider_sponsors .object a:hover { opacity: 0.7; } /* Slider mobile */ .home.mobile #hd .headerSlider .object > div, .home.mobile #hd .headerSlider { height: auto; } .mobile .headerSlider { display: block; width: 100%; } .mobile .headerSlider h2 { font-size: 1.625rem; line-height: 32px; } .mobile #hd .headerSlider .object .wrapobject { font-size: 1.25rem; } .mobile .headerSlider .object { width: 100%; box-sizing: initial; margin: 0; } .mobile .headerSlider .object > div { width: auto; max-width: 100%; } .mobile .slider_sponsors .object { padding: 0; } .mobile #hd .headerSlider .object .wrapobject { max-width: 50vw; min-width: 300px; } /*------- region Main content -------*/ #mainContent { position: relative; z-index: 10; display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; justify-content: center; -ms-flex-pack: center; } #mainContent .cn { min-height: 200px; } #mainContent .portes, #mainContent .cn, #introContent .cn { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; } /* portes */ #mainContent .portes .standard.object.porteCTA { background: #d8d8d8; box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.26); border-radius: var(--global-radius); -moz-border-radius: var(--global-radius); -webkit-border-radius: var(--global-radius); overflow: hidden; margin-top: -120px; } #mainContent .portes { justify-content: center; -ms-flex-pack: center; } /** button preview and next **/ .navPost-prev, .navPost-next { display: inline-block; width: auto; padding: 20px 0; } /***** 09. Events *****/ .object.event { padding-top: 40px; } #mainContent .event.list { text-align: center; } .home #mainContent .event.list { padding: 80px 0; text-align: left; } #mainContent .event.list.object ul { padding: 0; width: 100%; max-width: 1040px; margin: 0px auto; } #mainContent .event.list.object ul li.event { padding: 0 20px; margin: 0 0 14px 0; box-sizing: border-box; text-align: left; } #mainContent .event.list.object .object.event ul { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; border-bottom: 1px solid #d3d3d3; padding-bottom: 14px; } #mainContent .event.list.object .object.event ul > li { align-items: flex-start; } .event.list.object ul { list-style: none; margin: 0; } .home .event.object > h2 { max-width: 1040px; padding: 0 20px 20px 20px; box-sizing: border-box; margin: 0 auto; font-size: 1.4375rem; line-height: 1.875rem; text-transform: uppercase; } .object .event-list-container { max-width: 1040px; display: flex; display: -ms-flexbox; display: -webkit-flex; justify-content: center; -ms-flex-pack: center; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; } .event-list-container .event { margin: 0 20px 40px 20px; width: calc(33.33% - 40px); box-sizing: border-box; } .event-list-container .event b.date { font-size: 0.875rem; line-height: 1.4375rem; margin-bottom: 5px; display: inline-block; color: rgba(0, 0, 0, 0.8); } .event-list-container .event p { margin: 0; font-size: 0.9375rem; line-height: 1.375rem; } .event-list-container .event h2 { margin: 0 0 5px 0; } .event-list-container .event img { max-width: 100%; height: auto; } /** Events détails **/ .detail.object .block { margin-bottom: 60px; } .object.event li.date { font-weight: var(--weight-bold); text-transform: uppercase; display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -ms-flex-wrap: wrap; } .object.event li.date .eventDateEnd { margin-left: 10px; } .object.event .eventDateStart .year { display: none; } .object.event .title a { font-weight: var(--weight-bold); font-style: normal; color: var(--color-text); font-size: 1.125rem; text-decoration: none; background-color: transparent; padding: 0 5px; display: block; } .object.event .title a:hover { opacity: 0.5; } .event .dates { padding-bottom: 0; } .object.event .eventDateStart > span.day { text-transform: uppercase; font-weight: var(--weight-bold); box-sizing: border-box; } .object.event .place { color: #848484; } .object.event .title a::before, .object.event .place::before { content: "-"; margin-right: 5px; font-weight: var(--weight-normal); } .object.event .eventDateStart .time { display: none; } .object.event .map p { margin-top: 10px; } .event_details .object .wrapimg { width: 100%; margin-bottom: 20px; } .addthis_sharing_toolbox { padding-top: 70px; padding-bottom: 10px; } .event_details #mainContent .object.first { padding-top: 0; } .event_details #mainContent .object .wrapobject { width: 100%; } /***** 12. Specific pages styles *****/ /* -- homepage (for homepage different from the other pages) -- */ .home #hd { height: auto; } /* comment this to remove the full height image-background : */ .home #hd { height: 100%; } /*** Curves ***/ .home .headerSlider .object::after, #headerBannerContent::before, #mainContent::before, #newsContent::before, #prefooterContent::before{ content: ""; position: absolute; top:1px; bottom: auto; right: 0; left: 0; width: 100%; height: 402px; transform: translateY(-402px); background-image:url(../img/curves/home-header-curves.svg); background-repeat:no-repeat; background-position:center bottom; background-size: 100% auto; z-index: 10; pointer-events: none; } #headerBannerContent::before{ background-image:url(../img/curves/header-blue-curves.svg); } #mainContent::before{ background-image:url(../img/curves/mainContent-curves.svg); } #newsContent::before{ background-image:url(../img/curves/top-news-curves.svg); } #prefooterContent::before{ background-image:url(../img/curves/prefooter-curves.svg); } .home #prefooterContent::before{ background-image:url(../img/curves/prefooter-home-curves.svg); } #prefooterContent::after{ content:''; position: absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(180deg, #FFFFFF 0%, rgba(248,248,248,0.89) 18.09%, rgba(255,255,255,0.7) 100%); } #prefooterContent .cn{ z-index: 40; } .home .headerSlider .object::after, #headerBannerContent::before{ top:auto; bottom:-1px; transform: none; padding:0; } .headerBannerImg::after{ content:''; position: absolute; top:0; left:0; bottom:0; width:264px; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); } #mainContent, #newsContent, #prefooterContent{ position: relative; } #introContent, #mainContent, #newsContent, #prefooterContent{ padding-bottom: 80px; } .yellowPage #headerBannerContent::before{ background-image:url(../img/curves/header-yellow-curves.svg); } .bluePage #headerBannerContent::before{ background-image:url(../img/curves/header-blue-curves.svg); } .magentaPage #headerBannerContent::before{ background-image:url(../img/curves/header-magenta-curves.svg); } .greenPage #headerBannerContent::before{ background-image:url(../img/curves/header-green-curves.svg); } /** Formulaires **/ #confirmationModal { max-width: 900px; width: calc(100% - 60px); margin: 0 !important; transform: translateX(-50%); } /***** 14. Social medias *****/ .social { text-align: left; width: auto; display: inline-block; vertical-align: middle; } .social { margin-bottom: 20px; } .social ul li { display: inline-block; vertical-align: middle; max-width: 40px; line-height: 0; padding: 0px 10px; opacity: 1; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } .social ul li:hover { opacity: 0.5; } .social ul li img { max-width: 100%; height: auto; } /************************************************************ 15. Mobiles version ************************************************************/ /* -- Mobile navigation --*/ .mobile div#mobile-nav div#top-bar{ background-color: transparent; position: relative; padding: 0; height: 80px; } .mobile a#togglemenu { background-image: url(../img/menu_btn_grey.png); background-position: center right 20px; background-size: 30px auto; background-repeat: no-repeat; display: block; padding: 80px 0 0 70px; width: 0; height: 0; overflow: hidden; background-color: transparent; } .mobile div#mobile-nav { padding: 0; } .mobile ul#mobileNav { top: 80px; } .mobile ul#mobileNav, .mobile #mobile-secnav { background-color: var(--color-text); padding: 0; } .mobile #secNav { display: none; } .mobile #mobile-secnav { margin: 0; } .mobile ul#mobileNav li a, .mobile #mobile-secnav li a { text-transform: none; font-size: 1rem; font-weight: var(--weight-normal); color: #fff; padding: 12px 20px; font-style: normal; display: block; border-bottom: 1px solid #fff; } .mobile ul#mobileNav li a:hover, .mobile ul#mobileNav li.on a { background-color: rgba(0, 0, 0, 0.2); } .mobile #mobile-secnav a.showNav { padding: 10px 20px; text-transform: uppercase; font-size: 0.8rem; margin: 0; font-weight: var(--weight-bold); color: #fff; font-style: normal; } .mobile #annexNavCt a.button { min-width: 120px; padding: 10px; text-align: center; } .mobile #annexNavCt { padding-top: 0; right: 10px; } .mobile .secNavCt { display: none; } /* -- languages mobile -- */ .mobile ul#mobileNav li.lan li, .mobile ul#mobileNav li.lan li a { display: inline-block; line-height: 20px; border-bottom: none; text-transform: uppercase; } .mobile ul#mobileNav li.active a { opacity: 0.5; line-height: 1.25rem; } .mobile ul#mobileNav li.lan li { border-right: 1px solid #d3d3d3; } /* -- titles mobile -- */ .mobile h1 br { display: none; } .mobile h2, .mobile .noColumn .titles h2 { font-size: 1.5rem; line-height: 32px; margin-bottom: 8px; } .mobile h2::before { content: ""; width: 24px; height: 30px; top: 0; } /* -- structures global mobile -- */ .mobile div#bd div#bd_bg div.cn{ width: 100%; } .mobile #breadcrumbContent div.cn{ padding-top: 0!important; } .mobile #hd { display: block; height: auto; margin: 0; } .mobile #hd .topbar { display: block; background-color: transparent; position: absolute; top: 9px; right: 80px; z-index: 2000; width: auto; font-size: 0.85rem; } .mobile #hd #topNav .bottomNav, .mobile #topNav .localisation_top, .mobile #topNav .email_top, .mobile #hd .bottomNav { display: none; } .mobile #hd .topbar #logo, .mobile #hd #dateEvent, .mobile #hd .topbar .langAndCurrency, .mobile #hd .social { display: none; } .mobile #topNav { background-color: transparent; padding: 5px; } .mobile .object .wrapobject, .mobile .object:not(.teaserfull-container) .wrapimg { width: 100%; margin: 0; } .mobile .object .wrapimg { order: 1; margin-bottom: 15px; } .mobile .object .wrapobject { order: 2; } .mobile .object .wrapimg img { max-height: 350px; object-fit: cover; } .mobile .object.porteCTA .wrapimg img { width: 100%; } .mobile .image.object.porteCTA h2 { left: 0; margin-bottom: 0; padding: 30px; text-align: left; } .mobile .image.object.column_demi img { max-width: calc(100% - 20px); } .mobile .object.porteCTA .wrapimg { width: 100%; margin: 0; } /* accordeon mobile */ .mobile .object.hasaccordion h2 { margin: 0; font-size: 1.125rem; line-height: 1.5rem; } .mobile .object.hasaccordion .content { padding: 0; } /**/ .mobile .anchorList li a { padding: 5px 10px; font-size: 0.9rem; } .mobile .anchorList { padding: 10px 20px 40px 20px; box-sizing: border-box; } .mobile .topbar #header_right { display: flex; display: -ms-flexbox; display: -webkit-flex; right: 10px; top: -5px; } /***/ .home.mobile #mainContent .object.porteCTA a.button { min-width: 0px; } /** breadcrumb mobile **/ .mobile #breadcrumbContent .cn { padding: 0 20px; } /****/ .mobile .object a.button::after { margin: 0px 0 0px 10px; } .mobile .navPost-back a { color: var(--color-text); } .mobile .navPost-prev a, .mobile .navPost-next a { float: left; padding: 8px 20px; font-size: 0.8rem; } .mobile .navPost-back a, .mobile .navPost-prev a, .mobile .navPost-next a { color: var(--color-text); } .mobile .navPost-back a:hover { text-decoration: underline; } .mobile .navPost-prev a:hover, .mobile .navPost-next a:hover { text-decoration: underline; } .mobile .navPost-prev { float: left; padding: 0; } .mobile .navPost-next { float: right; padding: 0; } /** Homepage mobile **/ .mobile .container_first_object > .smallSize { width: 100%; } .home.mobile #mainContent { padding-bottom: 0; } .home.mobile #mainContent .cn::after { width: calc(100% - 220px); } .mobile h1 { font-size: 1.75rem; line-height: 2.5rem; } .home.mobile .object.column_demi { width: 100%; text-align: center; padding: 0 0 20px 0; } .home.mobile .object.column_demi > div { margin: 0 auto; width: auto; display: inline-block; } /** formulaire **/ .mobile .container.buttons #btSubmit { width: auto !important; height: auto !important; padding: 8px 20px !important; } .mobile form .container.buttons::after { top: -5px; } .mobile form .container.buttons { position: relative; } .mobile .social { text-align: right; width: 100%; float: left; display: block; box-sizing: border-box; padding: 0; } .mobile #goTop { z-index: 20; top: 0px; bottom: auto; } /** event **/ .addthis_sharing_toolbox { padding-top: 40px; } /* table */ .mobile #mainContent table { width: 100%; } .mobile #mainContent .table_scroll { overflow-x: auto; overflow-y: hidden; } /** newsletter **/ .newsletterContent form.kSiteForm, .newsletterContent h2 { display: inline-block; vertical-align: middle; clear: none; } .newsletterContent h2 { margin: 0 20px 0 0; font-size: 1rem; display: inline-block; width: auto; position: relative; top: 3px; } .newsletterContent form.kSiteForm input.text { border: 3px solid var(--color-text); height: 26px; min-width: 180px; padding: 5px 10px; } .newsletterContent form.kSiteForm { min-width: 330px; margin: 0; } .newsletterContent { display: inline-block; vertical-align: middle; } .newsletterContent .object { margin: 0; } .newsletterContent .form.object #btSubmit { float: left; font-size: 1rem; padding: 5px 12px; height: 42px; border: 3px solid var(--color-text); } .newsletterContent form.kSiteForm label.error { position: absolute; } .newsletterContent form.kSiteForm label { color: var(--color-text); font-weight: var(--weight-normal); font-size: 0.9rem; } .newsletterContent .form.object fieldset { float: left; text-align: left; } #hd .newsletterContent { float: right; text-align: right; padding-top: 40px; padding-right: 20px; width: auto; } #hd .newsletterContent h2 { top: 7px; } #hd .newsletterContent .object a { padding: 10px; display: inline-block; text-transform: uppercase; font-weight: var(--weight-bold); font-size: 1.188rem; color: #000; opacity: 1; -webkit-transition: var(--global-transition); -moz-transition: var(--global-transition); -ms-transition: var(--global-transition); -o-transition: var(--global-transition); transition: var(--global-transition); } #hd .newsletterContent .object a:hover { text-decoration: none; color: var(--color-text); } .newsletterContent { width: 455px; } .mobile .newsletterContent .form.object fieldset { float: left !important; } .mobile .newsletterContent .container.buttons #btSubmit { padding: 5px 12px !important; height: 42px !important; } .mobile .newsletterContent form.kSiteForm input.text { height: 42px !important; } .mobile .newsletterContent { margin-bottom: 20px; } /***/ /** Mediaqueries **/ @media only screen and (max-width: 1040px) { #mainNav li a { padding: 36px 10px 36px 10px; } #mainNavCt { width: 100%; max-width: calc(100% - 140px); } } @media only screen and (max-width: 800px) { .mobile #topNav .contact_info span { display: none; } } @media only screen and (max-width: 550px) { #goTop a { background-image: none; padding: 10px 0; font-size: 0.75rem; } } @media only screen and (max-width: 490px) { .mobile .navPost-prev, .mobile .navPost-next { width: 100%; display: block; } .mobile .navPost-prev { margin-bottom: 15px; } .mobile #goTop { top: 30px; bottom: auto; } .mobile .social { text-align: left; } #hd .reseaux_sociaux{ display: none; } .mobile #hd .topbar{ right: 60px; } #annexe li a, #annexNavCt a.button { font-size: 0.875rem; } } /* @media only screen and (max-width: 639px) { small } @media only screen and (min-width: 640px) and (max-width: 1023px) { medium } @media only screen and (min-width: 1024px) and (max-width: 1199px) { large } @media only screen and (min-width: 1200px) and (max-width: 1439px) { xlarge } @media only screen and (min-width: 1440px) { xxlarge } */