/* CSS by Manu LECHAT https://e-lechat.com */ /* /^^ /^^ /^/^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @font-face { font-family: "black"; src: url("../fonts/Circular/CircularStd-Black.otf") format('truetype') } /* @font-face { font-family: "bold"; src: url("../fonts/Circular/CircularStd-Bold.otf") format('truetype') } */ @font-face { font-family: "medium"; src: url("../fonts/Circular/CircularStd-Medium.otf") format('truetype') } @font-face { font-family: "book"; src: url("../fonts/Circular/CircularStd-Book.otf") format('truetype') } /* /^^ /^^ /^^ /^ /^^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^ */ :root { --black : "black"; --grid_unit: calc(100vw / 8); --space_unit: 1vw; --padding_v_sections: 80px; --site_max_width: 1440px; --page_grid_gap: 20px; --page_grid_col: 88px; --page_grid_nbcols: 12; --page_grid_global: calc( var(--page_grid_col) * 12 + var(--page_grid_gap) * 11 ); --page_grid_4: calc( var(--page_grid_col) * 4 + var(--page_grid_gap) * 3 ); --page_grid_3: 300px; --page_grid_2: 192px; --page_grid_1: 85px ; --page_grid_9: 864px; --page_grid_10: 972px ; /* --fontSize_unit: .65vw; */ --fontSize_unit: 10px; --color_txt : #17161a; --color_txt : #000; --color_bg:white; --color_bg_dark:black; --site-theme-color : #FFD600; --swiper-theme-color : white; --swiper-pagination-bullet-horizontal-gap : 3px; --plyr-color-main: var(--site-theme-color); } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ /* titles */ .txt_10 { font-size: calc( var(--fontSize_unit) * 1) ; } .txt_12 { font-size: calc( var(--fontSize_unit) * 1.2) ; } .txt_14 { font-size: calc( var(--fontSize_unit) * 1.4) ; } .txt_16 { font-size: calc( var(--fontSize_unit) * 1.6) ; } .txt_l { font-size: calc( var(--fontSize_unit) * 2.1) ; } .txt_18 { font-size: calc( var(--fontSize_unit) * 1.8) ; } .txt_22 { font-size: calc( var(--fontSize_unit) * 2.2)!important ; } .txt_21 { font-size: calc( var(--fontSize_unit) * 2.1)!important ; } .txt_26 { font-size: calc( var(--fontSize_unit) * 2.6)!important ; } .txt_28 { font-size: calc( var(--fontSize_unit) * 2.8)!important ; } .txt_32 { font-size: calc( var(--fontSize_unit) * 2.8)!important ; line-height: 1em; } .txt_36{ font-size: calc( var(--fontSize_unit) * 3.6)!important ; } .txt_48{ font-size: calc( var(--fontSize_unit) * 4.8) ; letter-spacing: -0.05em; } .txt_56{ font-size: calc( var(--fontSize_unit) * 5.6) ; letter-spacing: -0.05em; } .txt_64 { font-size: calc( var(--fontSize_unit) * 6.4); } .txt_82 { font-size: calc( var(--fontSize_unit) * 8.2); } .maj{ text-transform: uppercase; letter-spacing: -0.04em; } .smallCap{ font-size: calc( var(--fontSize_unit) * 1.2); font-family: 'black'; text-transform: uppercase; text-transform: uppercase; } strong { font-family: "black"; } .ff_black{ font-family: "black"; } .black { font-family: "black"; } .titre{ line-height: 1.1em; margin-bottom: 0.5em; } .ff_black_italic{ font-family: "black"; font-style: italic; } .book{ font-family: "book"; } .ff_book{ font-family: "book"; } .ff_medium{ font-family: "medium"; } .yellow{ color: var(--site-theme-color); } .display_none{ display: none; } .bt_contact:hover{ cursor: pointer; } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^/^^ /^^ /^^ */ .screen_barba_fx{ z-index: 1111; position: fixed; width: 100%; height: 10px; top: 0; background: rgb(37, 37, 37); } ::selection { background-color: rgba(255, 191, 0, 0.3); opacity: 0.1; transition: all .3s; ; text-shadow: none; } * { box-sizing: border-box; outline: none; } /* ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: rgba(0,0,0,1); } ::-webkit-scrollbar-thumb { background: var(--site-theme-color ); } */ ::-webkit-scrollbar-thumb:hover { background: var(--site-theme-color); } html{ color: var(--color_txt); margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body{ letter-spacing: .0125em; font-size: calc( var(--fontSize_unit) * 1.2); line-height: 1.35em; overflow-x: hidden; background-color: var(--color_bg); font-family: "book"; width: 100vw; overflow-y: auto; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; } body.shownav{ overflow: hidden; } div{ position: relative; display: block; } header, section, main{ width: 100vw; } img{ max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; } ul{ margin: 0; display: block; text-align: left; padding: 0;} li{ margin: 0; list-style: none; padding: 0px; } h1{ font-family: "black"; text-transform: uppercase; } h1,h2,h3,h4{ margin-block-start: 0; margin-block-end: 0; width: fit-content; font-family: "black"; display: block; margin: 0; clear: both; break-after: always; font-size: 1em; line-height: 1em; letter-spacing: 0; font-weight: 400 } span{ display: block; } a{ width: fit-content; position: relative; color: var(--color_txt); text-align: left; text-decoration: none; } a:hover{ cursor: pointer; text-decoration: none; } p{ font-family: "book"; font-size: 1rem; letter-spacing: -0.025em; clear: both; display: block; padding: 0; margin: 0; line-height: 1.45em; } p a{ text-decoration: underline; } .bold{ font-family: var(--font_3); font-weight: bold; } .bold .em{ font-family: "black"; font-style: italic; } iframe{ border: none; width: 100%; height: 100%; margin: 0; } a.over_underline{ width: fit-content;} a.over_underline:after{ content:""; position: absolute; bottom:0; left: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; height: 2px; background: var(--color_txt); } a.over_underline:hover:after{ width:100%; } blockquote{ margin: 1em 0; } .section{ max-width: 100% ; width: var(--w_wrapper); margin: 0 auto; } .main_container{ width: 100%; } .center{ text-align: center; } .txt_exergue_wrapper{ margin-bottom: 2em; padding-top: 2rem; padding-bottom: 2rem; display: flex; flex-direction: column; gap: 50px; } .txt_exergue{ font-style: italic; font-family: "medium"; letter-spacing: -0.06em; line-height: 1.45em; max-width: 28ch; } /* .txt_exergue_wrapper:before{ content: ""; position: absolute; transform: rotate(180deg); top: -10px; right: -10px; width: 120px; height: 120px; background-repeat: no-repeat; background-size: contain; background-image: url('../images/guillemet.png'); } */ .preexergue{ content: ""; position: relative; display: inline-block; width:60px; margin: 0.2em .5em; height: 3px; background: #000; border-radius: 3px; } .deux_cols{ column-count: 2; } .bg_color{ background: var(--site-theme-color); padding: .1em .5em; } .book{ font-family: "book"; } figure {margin: 0; } figure img{ width: 100%; height: 100%; object-fit: cover; } figcaption{ display: flex; gap: .2em; z-index: 20; bottom: 0px; right: 0px; transform-origin:bottom right; transform: rotate(90deg) translateY(calc(100% - 3px)) translateX(1px); font-size: 11px; position: absolute; background: rgba(255, 255, 255, 1); color: black; padding: 0.3em 0.5em; font-family: "book"; min-height: 1em; line-height: 1em; letter-spacing: -0.05em; } figcaption a:hover{ cursor: pointer; } .copyright{ display: flex; gap: .2em; z-index: 20; bottom: 0px; right: 0px; font-size: 11px; position: absolute; background: rgba(255, 255, 255, 0.5); color: black; padding: 0.2em 0.5em; font-family: "book"; min-height: 1em; line-height: 1em; letter-spacing: 0em; opacity: 0.8; } .copyright a:hover{ cursor: pointer; } .main_button{ background: white; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 8px rgba(0, 0, 0, 0.05), 0px 8px 16px rgba(0, 0, 0, 0.05) ; z-index: 11; color: var(--color_txt); transition: all .17s ease-in-out; font-size: calc( var(--fontSize_unit) * 1.6) ; border:4px solid var(--site-theme-color); padding: 1em 2em; border-radius: 10em; margin: 3em; font-family: "bold"; flex-direction: column; display: flex; text-align: center; justify-content: center; align-items: center; width: 7em; height: 7em; } .main_button:hover{ transform: rotate(5deg) scale(1.05); cursor: pointer; } .main_button img{ margin-top: .5em; width: .6em; } .lien_souligne{ font-family: "bold"; color: var(--color_txt); transition: all .17s } .lien_souligne:before{ width: 100%; height: .2em; content: ""; background-color: var(--site-theme-color); position: absolute; bottom: -.5em; left: 0; } .lien_souligne:after{ width: 0%; height: .2em; content: ""; background-color: var(--color_txt); position: absolute; left: 50%; bottom: -.5em; transition: all .17s; } .lien_souligne:hover:after{ width: 100%; left: 0; } .title_bg_yellow { background: var(--site-theme-color); padding: .2em .6em; text-transform: uppercase; } .label { box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08); background: var(--site-theme-color); padding: 4px 6px; font-family: "black"; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; padding: .2em .6em; text-transform: uppercase; } .italic{ font-style: italic; } .lien.yellow{ color: var(--site-theme-color);; } .swiper-wrapper{ height: auto; } .tags_wrapper{ display: flex; gap: 12px; } .tag{ background-color: #D9D9D9; padding: .2em .5em; font-size: 12px; font-family: "black"; letter-spacing: 0.02em; text-transform: uppercase; width: fit-content; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08); } .tag.yellow{ background-color: var(--site-theme-color); color: #000; } .surtitre{ margin: -5px 3px; background-color: var(--site-theme-color); padding: 6px 4px; font-size: 12px; font-family: "black"; letter-spacing: 0.02em; text-transform: uppercase; width: fit-content; } /* loader */ #loader { position: fixed; top: 0; left: 0; width: 100vw; max-width: 100%; height: 100vh; background-color: #000; z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column; } #loader .logo { position: absolute; width: 90px; top: 50%; left: 50%;transform: translate(-50%, -50%);} #loader .spinner { width: 40px; margin: 40px auto; animation: loop .5s infinite linear; } .caption_video{ position: relative; padding: 5px 0 ; float: right; } /* swipers */ .swiper-pagination-bullet{ border-radius: 0; opacity: 1; } .swiper-pagination-bullet{ background: white; } .swiper-pagination-bullet-active{ background: var(--site-theme-color); } /* Fancy */ .fancybox__backdrop{ opacity: 0.8; } /* ui */ .burger{ display: none; } .bt_close{ z-index: 91; width: 24px; height: 24px; border-radius: 24px } .bt_close .line{ position: absolute; transform-origin:50% 50%; left: 50%; top:50%; height: 3px; background: rgb(0, 0, 0); transition: all .3s ease-in; } .bt_close:hover{ cursor: pointer; } .bt_close .line1{ width:6px; transform : translateX(-50%) translateY(-50%) rotate(0deg); } .bt_close .line2{ width:6px; transform : translateX(-50%) translateY(-50%) rotate(0deg); } .bt_close:before{ width: 24px; height: 24px; transition: all .17s ease-out; z-index: 91; content: ""; position: absolute; top: 50%; left: 50%; transform:translate3d(-50%, -50%, 0); border:2px solid rgba(0, 0, 0, 1); border-radius: 24px; display: block; } .bt_close:hover:before{ width: 34px; height: 34px; border:2px solid rgba(0, 0, 0, 1); } .bt_close:hover .line1{ background: var(--site-theme-color); width:16px; transform : translateX(-50%) translateY(-50%) rotate(135deg); } .bt_close:hover .line2{ background: var(--site-theme-color); width:16px; transform : translateX(-50%) translateY(-50%) rotate(-135deg); } /* lien souligné jaune */ .link_underline{ position: relative; text-transform: uppercase; display: block; width: fit-content; font-family: "black"; } .link_underline:before{ left: 0; content: ""; position: absolute; bottom: -.2em; display: block; background: var(--site-theme-color); height: 3px; width: 100%; } .link_underline a{ font-family: "black"; text-decoration: none; } .lien_cercle{ line-height: 1.2em;; z-index: 10; display: flex; text-align: center; font-size: calc( var(--fontSize_unit) * 1.2) ; justify-content: center; flex-direction: column; align-items: center; text-transform: uppercase; text-transform: uppercase; width: 120px; height: 120px; position: absolute; background: white; border-radius: 120px; border:4px solid var(--site-theme-color) } .lien_cercle .icon_play{ width: 12px; margin-top: 1em; display: block } .arrow_left{ background: url('../images/ArrowLeft.svg'); background-repeat: no-repeat; background-position: left center; background-size: 1em; padding-left: 1em; } .classic_link:hover{ text-decoration: none; } /* .titre_cadre{ font-family: "black"; letter-spacing: -0.05em; font-size: calc( var(--fontSize_unit) * 3.2) ; text-transform: uppercase; padding:0.2em 0.5em; background: var(--site-theme-color); color: black; } */ .titre_cadre{ font-family: "black"; letter-spacing: -0.05em; font-size: calc( var(--fontSize_unit) * 3.2) ; text-transform: uppercase; border: 5px solid var(--site-theme-color); padding:0.2em 0.5em } /* .titre_cadre{ position: relative; font-family: "bold"; letter-spacing: 0em; } */ /* .titre_cadre::before{ position: absolute; content: ""; z-index: -1; background: var(--site-theme-color); width: .2em; height: .2em; border-radius: 0; bottom: .25em ; right: -.3em; } */ /* .link_underline{ border-bottom: 3px solid var(--site-theme-color); font-size: 12px; padding: 0.3em; margin-right: 0.3em; width: fit-content; } */ .artist_name { text-transform: none; font-family: "black"; color: var(--site-theme-color); line-height: 1.03em; letter-spacing: -0.05em; width: fit-content; margin-top: -0.15em; padding: 0.05em 0.25em; border: .15em solid var(--site-theme-color); } /* WRAPPERS */ .page_content{ padding-left: calc( var(--grid_unit) * .5); padding-right: calc( var(--grid_unit) * .5 ); padding-bottom: calc( var(--grid_unit) * 1 ); } .col1{ width: 50%; } /* gloabl font */ .page_title { padding: 0.5em 0.8em; letter-spacing: 0.08em; transform: translateX(-0.6em);color: var(--site-theme-color); font-size: calc( var(--fontSize_unit) * 2.6);font-family: "black"; text-transform: uppercase; border: 5px solid var(--site-theme-color); border-radius: 5px; } .page_header{ align-items: center; display: flex; width: 100%; padding-top: 10px; padding-bottom: calc( var(--grid_unit) * 0.5 ); padding-left: calc( var(--grid_unit) * 1 ); padding-right: calc( var(--grid_unit) * 1 ); } .huge_title{ letter-spacing: 0em; text-transform: uppercase; margin: auto; text-align: center; line-height: 1.15em; } .projects_nav{ display: flex; margin: 0 10px; } .page_header_nav{ display: flex; width: 100%; justify-content: space-between; align-items: center; } .puce_sat{ font-family: "black"; transform: rotate(-3deg) skewX(-5deg); color: #FFD600; z-index: 91; align-items: center; display: flex; text-align: center; } .classic_link{ border-bottom: 3px solid var(--color_txt); width: fit-content; font-size: calc( var(--fontSize_unit) * 1.2); font-family: 'black'; margin: 0 10px; text-transform: uppercase; padding: 0.2em 0.4em; } .classic_link.actif{ border-bottom: 3px solid var(--site-theme-color); } .page_header_nav .classic_link{ border-bottom: 3px solid var(--color_bg);; } .page_header_nav .classic_link.actif{ border-bottom: 3px solid var(--site-theme-color); } .cadre_small{ padding: .2em .3em; margin: .4em; border:0.3em solid var(--color_txt); width: fit-content; } /* ombres */ .shadow{ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 8px rgba(0, 0, 0, 0.05), 0px 8px 16px rgba(0, 0, 0, 0.05) } /* fixed ui */ .fixed_ui { z-index: 100; position: fixed; top: 0; left: 0; height: 80px; } /* .menu_link:hover{ background: white; color:black; cursor: pointer; } */ /* .menu_link.actif{ background: var(--site-theme-color); color:black; cursor: pointer; } */ .menu_link{ text-align: center; padding: 1px 3px; font-family: "medium"; transition: all .13s ease-in-out; color: white; text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; } .menu_link:after{ position: absolute; content: ''; width: 0px; transition: all .13s ease-in-out; height: 3px; border-radius: 3px; left: 50%; background: white; transform: translateX(-50%); bottom: -7px; } .menu_link.actif{ transform: translateY(-3px); } .menu_link.actif:after{ width: 25px; } .menu_link:hover:after{ width: 15px; } .bt_contour_noir{ border: 3px solid var(--color_txt); font-family: "black"; transition: all .17s; font-size: 12px; text-transform: uppercase; display: inline-flex; padding: 13px 22px; justify-content: center; align-items: center; } .bt_contour_noir:hover{ background: var(--color_txt) ; color: white;} .bt_noir{ background: var(--color_txt) ; color: white; font-family: "black"; transition: all .17s; font-size: 12px; text-transform: uppercase; display: inline-flex; padding: 13px 22px; justify-content: center; align-items: center; } .bt_noir:hover{ background: var(--site-theme-color); color: black;} .bt_jaune{ width: fit-content; background: var(--site-theme-color); font-family: "black"; transition: all .17s; text-decoration: none; font-size: 12px; text-transform: uppercase; display: inline-flex; padding: 13px 22px; justify-content: center; align-items: center; } .bt_jaune:hover{ cursor: pointer; background: #ffdf36; transform: translateY(-2px); } .bt_blanc{ background: white; font-family: "black"; transition: all .17s; text-decoration: none; font-size: 12px; text-transform: uppercase; display: inline-flex; padding: 13px 22px; justify-content: center; align-items: center; } .bt_blanc:hover{ background: #ffdf36; } .swiper{ margin: 0!important; padding: 0!important; } .swiper_moodboard{ margin: 0!important; padding: 0!important; } /* .main_menu .link_insta{ width: 2rem; display: flex; height: 100%; align-items: center; opacity: 0.9; } .main_menu .link_insta * { fill:white; width: 20px; height:20px; } .main_menu .link_insta:hover *{ fill: var(--site-theme-color); } */ .logo_wrapper{ width: 100%; } .navBar{ z-index: 120; position: fixed; transition: all .5s ease-out .5s; top: 0; left: 0; width:100%; align-items: center; background: black; padding: 1rem 3rem; display: flex; justify-content: space-between; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 8px rgba(0, 0, 0, 0.05), 0px 8px 16px rgba(0, 0, 0, 0.05)} .navBar.hidden{ transform: translate3d(0,-100%,0); } .navBar .main_logo{ width: 4rem; } .navBar .icon_insta{ width: 1.2rem; } .navBar nav{ display: flex; gap: 60px; align-items: center; width: 60%; justify-content:center} .navBar .nav_right{ width: 340px; display: flex; gap: 40px; justify-content: flex-end } .navBar .nav_center{ display: flex; width: fit-content; width: auto; gap: 50px; } .navBar .nav_center .menu_link{ text-align: center; } .navBar .logo_wrapper{ width: 290px; } /* footer */ .footer { background: #000; padding: 1rem 3rem; border-top: 1px solid rgba(255,255,255,0.1); color: white; z-index: 90; display: flex; justify-content: space-between; flex-direction: row; gap: 2rem; text-align: center; align-items: center; } .footer .logo_milmurs{ width: 4rem; display: block; } .footer .col{ width: 33%; } .footer .col:nth-child(2){ align-items: center; display: flex; flex-direction: column; } .footer .col:nth-child(3){ justify-content: flex-end; display: flex; } .footer .social_wrapper{ display: flex; gap: 1rem } .footer .link_socialmedia{ width: 40px; transition: all .13s ease-in; } .footer .link_socialmedia:hover{ transform: scale(1.1); cursor: pointer; } .footer p{ color: grey; font-size: 12px; margin-bottom: 1em; } .footer p a{ text-decoration: none; color:var(--site-theme-color); } .footer a{ opacity: 0.7; text-decoration: none; color:var(--site-theme-color); } .footer a:hover{ opacity: 1; text-decoration: underline; } .footer .mini_nav{ } .footer .mini_nav a:hover{ text-decoration: underline; } .footer .mini_nav{ display: flex; gap: 10px; margin: 1em; align-items: center; justify-content: center;;} .zone_newsletter{ height: 120px; width: 100%; border-top: 2px solid black; display: flex; align-items: center; justify-content: center; align-items: center; } .zone_newsletter .label{ position: relative; padding: 40px 0; } .zone_newsletter .input{ width: 100%; height: 100%; border:0 } .zone_newsletter .width_wrapper{ max-width: var(--site_max_width); } .page_wraper{ width: 100%; padding-top: 180px; } .container{ width: var(--page_grid_global); max-width: 100%; margin: auto; } .container.slim{ width: var(--page_grid_9); } .container_flex{ width: var(--page_grid_global); max-width: 100%; margin: auto; display: flex; gap: var(--page_grid_gap); } .container_flex .col1{ width: 50%; } .container_flex .col2{ width: 50%; } /* template_default */ .template_default{ } /* composant_dons_assos */ .template_plan_du_site{ background: #111111; } .template_plan_du_site.loaded h1:after{ background: #111111; } .template_plan_du_site .plan_du_site{ z-index: 10; padding-bottom: 120px; } .template_plan_du_site .plan_du_site_nav{ position: inherit; display: flex; max-width: 900px; margin: auto; flex-direction: column; align-items: left; gap: 5px; } .template_plan_du_site .plan_du_site h1{ color:var(--site-theme-color); width: 900px; margin: 0 auto 3rem auto; } .template_plan_du_site .plan_du_site_nav a{ display: flex; width: 100%; justify-content: space-between; padding: 0.5em; color: white; text-transform: uppercase; transition: all .17s; } .template_plan_du_site .plan_du_site_nav a:hover{ color:var(--site-theme-color); } .template_plan_du_site .plan_du_site_nav .plan_du_site_link{ padding: 3rem 1rem; } .template_plan_du_site .plan_du_site_nav .plan_du_site_sublink{ padding: 1rem 3rem; } .template_plan_du_site .plan_du_site_bg{ filter: brightness(0.2) saturate(0.5) ; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } .template_plan_du_site .plan_du_site_bg .cover{ display: none; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; transition: opacity 0.3s ease; } .template_plan_du_site .plan_du_site_bg .cover.show { display: block; opacity: 1; } .template_plan_du_site .plan_du_site_nav sup{ opacity: 0.4; } .composant_dons_assos{ position: relative; color: white; background-color: #111111; padding: var(--padding_v_sections) 0; width: 100%; } .composant_dons_assos .container_flex{ z-index: 3; } .composant_dons_assos .text_wrapper { width: 50%; display: flex; flex-direction: column; gap: 20px; } .composant_dons_assos .surtitre{ background-color: var(--site-theme-color); color: #000; } .composant_dons_assos .cover{ opacity: 0.9; filter: grayscale(0.2) brightness(0.4); transition: all .3s; z-index: 1; position: absolute; right: 0; top: 0; height: 100%; width: 55%; object-fit: cover; } .composant_dons_assos .preexergue{ background-color: white; } .composant_dons_assos .txt_exergue{ color: white; } .composant_dons_assos:after{ z-index: 2; position: absolute; top: 0; right: 0; height: 100%; width: 55%; content: ""; background: linear-gradient(90deg, #111 0%, rgba(17, 17, 17, 0.00) 100%); } .composant_dons_assos .bt_jaune{ color: black; } .composant_dons_assos .col1{ display: flex; width: 60%; flex-direction: column; gap: var(--page_grid_gap); } .composant_dons_assos .col2{ display: flex; width: 40%; flex-direction: column; gap: var(--page_grid_gap); padding-left: 70px; justify-content: flex-end; } /* composant_faq */ .composant_faq{ padding: var(--padding_v_sections) 0; } .composant_faq .intro{ max-width: 600px; } .composant_faq .faq_header{ display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; } .composant_faq .faq_item{ display: flex; flex-direction: column; gap: 20px; padding-top: 20px; } .composant_faq .faq_question:hover{ cursor: pointer; transform: translateX(5px); } .composant_faq .faq_item::after{ content: "+"; font-size: 24px; font-family: "black"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .composant_faq .faq_item.actif::after{ opacity: 0; } .composant_faq .faq_answer{ height: 0; border-bottom: 2px solid black; padding-bottom: 0rem; overflow: hidden; transition: all .3s ease-in-out;} .composant_faq .faq_item.actif .faq_answer{ height: auto; padding-bottom: 2rem;} .composant_faq .faq_question:before{ transition: all .17s; z-index: -1; content: "";background: white; width: 10%; height: 100%; position: absolute; top: 50%; left: 10%; transform: translateX(-10%) translateY(-50%) } .composant_faq .faq_question:hover:before{ width: 100%; transition: all .17s; background: var(--site-theme-color); } .composant_faq .faq_item .link_bg{ padding: 2px 3px; position: relative; transition: all .17s ease-out; } .composant_faq .faq_item:hover .link_bg{ margin-right: -5px; cursor: pointer; } .composant_faq .faq_item .link_bg:before{ transition: all .32s ease-out;; z-index: -1; content: ""; background: var(--site-theme-color); width: 0%; height: 100%; position: absolute; top: 50%; left: -4px; transform:translateY(-50%) skewX(-7deg) } .composant_faq .faq_item:hover .link_bg:before{ transition: all .22s ease-out; width: calc(100% + 10px); background: var(--site-theme-color); } /* section_oeuvres */ .section_oeuvres{ padding:var(--padding_v_sections) 0; } /* section_presse */ .section_presse{ padding: var(--padding_v_sections) 0; background: rgba(46, 46, 46, 0.05); } .section_presse .composant_titre_intro{ align-items: center; } .section_presse .swiper_presse{ overflow: hidden; padding-top: var(--padding_v_sections)!important; padding-bottom: var(--padding_v_sections)!important; width: 100%;} .section_presse .swiper_presse .swiper-slide{ width: var(--page_grid_3); padding: 0px; } .section_presse .swiper_presse .item{ display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; } .section_presse .swiper_presse .cover_wrapper{ transition: all .3s ease-in-out; border-bottom: 3px solid black; width: 100%; height: 220px; overflow: hidden;} .section_presse .swiper_presse .cover_wrapper img{ width: 100%; height: auto; max-height: none; position: absolute; top:0; left: 0; } .section_presse .swiper_presse .item .intitule{ width: fit-content;} .section_presse .swiper_presse .item .intitule:after{ content:""; z-index: -1; position: absolute; bottom:-10%; left: 50%; width: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; background: var(--color_txt); } .section_presse .swiper_presse .item:hover .intitule:after{ width:110%; height: 120%; left: -5%; } .section_presse .swiper_presse .item:hover .intitule{ color: white; } .section_presse .swiper_presse_bt_prev{ position: absolute; left: 20px; top: 50%; z-index: 11; background-color: #000; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;} .section_presse .swiper_presse_bt_next{ position: absolute; right: 20px; top: 50%; z-index: 11; background-color: #000; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;} .section_presse .swiper_presse_bt_prev path, .section_presse .swiper_presse_bt_next path{ stroke: #fff; } .section_presse .swiper_presse_bt_prev:hover, .section_presse .swiper_presse_bt_next:hover{ background-color: #000; cursor: pointer;} .section_presse .swiper_presse_bt_prev:hover path, .section_presse .swiper_presse_bt_next:hover path{ stroke: var(--site-theme-color); } /* section_invitation */ .section_invitation{ padding: var(--padding_v_sections) 0; position: relative; width: 100%; background: #f7f7f7; } .section_invitation .cover_invitation{ z-index: 1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .section_invitation .txt_invitation{ z-index: 2; justify-content: center; gap: 30px; display: flex; flex-direction: column; align-items: center;} .section_invitation .txt_invitation h4{ font-size: 42px; font-family: "black"; font-style: italic; margin: 0 } .section_invitation .txt_invitation h5{ font-size: 22px; font-family: "black"; font-style: italic; margin: 0; } .section_invitation .txt_invitation p{ font-size: 16px; } /* section_realisations */ .section_realisations{ width: var(--page_grid_global); max-width: 100%; margin: auto; display: flex; flex-wrap: wrap; gap: var(--page_grid_gap); padding-bottom: var(--padding_v_sections); } .section_next_projects{ padding-left: 1rem; padding-right: 1rem; background: rgba(0, 0, 0, 0.08); width: 100%; align-items: center; display: flex; flex-direction: column; gap: 40px; padding-top: var(--padding_v_sections); padding-bottom: var(--padding_v_sections); } .section_next_projects .projects_wrapper{ width: var(--page_grid_global); max-width: 100%; margin: auto; display: flex; flex-wrap: wrap; gap: var(--page_grid_gap); } .section_next_projects .realisation_card { max-width: calc(33% - 10px); } .section_next_projects .realisation_card .cover_wraper .cover { transition: all .7s ease-out .8s; } .section_next_projects .realisation_card:hover .cover_wraper .cover { transition: all .17s ease-out; } /* section_oeuvres */ .section_oeuvres{ width: var(--page_grid_global); max-width: 100%; margin: auto; display: flex; flex-wrap: wrap; gap: var(--page_grid_gap); padding-bottom: var(--padding_v_sections); } .section_oeuvres .oeuvres_wrapper{ width: 100%; align-items: center; display: flex; flex-direction: column; gap: 40px; padding-top: var(--padding_v_sections); padding-bottom: var(--padding_v_sections); } /* realisation_card */ .realisation_card{ height: fit-content; width: var(--page_grid_4); /* box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);*/ transition: box-shadow .17s; margin-bottom: 20px;} .realisation_card:hover{ /*box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.25);*/ } .realisation_card .cover_wraper{ height: 250px; width: 100%; overflow: hidden; } .realisation_card.event{ box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.35); } .realisation_card.event .cover_wraper{ min-height: 420px; border: 3px solid var(--site-theme-color); } .realisation_card .txt_wraper{ display: flex; flex-direction: column; gap: 8px; padding: 1rem 1rem 1rem 0px; } .realisation_card .title{ display: flex; gap: 10px; flex-wrap: wrap; } .realisation_card.project{ } .realisation_card .cover_wraper{ display: flex; flex-direction: column; padding: 12px; justify-content: flex-end; } .realisation_card .cover_wraper .cover{ transform: scale(1); transition: all .17s ease-out; ; z-index: 1; height: 100%; width: 100%; object-fit: cover; position: absolute; top:0; left: 0; } .realisation_card:hover .cover_wraper .cover{ transform: scale(1.02);; } .realisation_card .tag{ z-index: 3; font-size: 10px; } .realisation_card .event_titre{ z-index: 3; color: var(--site-theme-color); font-size: 36px; } .realisation_card .event_sstitre{ z-index: 3; color: var(--site-theme-color); font-family: "medium"; } .realisation_card .cover_wraper.project:after { content: "";z-index: 2; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 30%, rgba(0, 0, 0, 0.20) 100%); } .realisation_card .cover_wraper.event:after { content: "";z-index: 2; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, .5) 60%); } .realisation_card .event_cover_txt{ display: flex; flex-direction: column; gap: 13px; padding-right: 20px; padding-bottom: 5px; } .realisation_card .artists_list .separator:last-child{ display: none; } .realisation_card .cover_wraper .artists_list{ z-index: 3; color: white; } .realisation_card.event{ background: #000000; color: white; } .realisation_card.event .txt_wraper{ padding: 1rem ; position: absolute; bottom: 0; z-index: 10; } .realisation_card.event .txt_wraper .artists_list li{ font-size: calc(var(--fontSize_unit)* 1.6);} .realisation_card.event .txt_wraper .subtitle{ display: none; } /* partenaire_card */ .partenaire_cards{ display: flex; flex-wrap: wrap; gap: 20px; padding-bottom: var(--padding_v_sections); } .partenaire_card{ border: 5px solid var(--site-theme-color); height: fit-content; background-color: #000; display: block; width: 32%; color: white; box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25); transition: all .17s; margin-bottom: 20px; } .partenaire_card{ width: var(--page_grid_4) ; } .partenaire_card .cover_wraper{ height: 250px; width: 100%; overflow: hidden; display: flex; justify-content: flex-end; flex-direction: column; gap: 8px; padding: 10px; } .partenaire_card .cover_wraper:after { transition: all .3s ease-out; z-index: 2; content: "";z-index: 2; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 30%, rgba(0, 0, 0, 0.50) 100%);display: block;} .partenaire_card .cover_wraper .cover{ transition: all .3s; z-index: 1; height: 100%; width: 100%; object-fit: cover; position: absolute; top:0; left: 0; filter: contrast(1.3) brightness(0.5); } .partenaire_card .cover_wraper .name{ z-index: 3; color: white; } .partenaire_card .txt_wraper{ z-index: 11; display: flex; justify-content: space-between; } .partenaire_card .txt_wraper p{ opacity: 1; transition: all .3s; } .partenaire_card .txt_wraper .link_underline{ opacity: 0; } .partenaire_card:hover .txt_wraper .link_underline{ opacity: 1; } .partenaire_card:hover .cover_wraper .cover{ transform: scale(1.04); } .partenaire_card .partenaire_premium{ position: absolute; top: 15px; left: 15px; z-index: 11; } .partenaires_premium_wrapper{ display: flex; flex-direction: column; gap: 20px; } .template_project .partenaire_card{ } .template_project .partenaire_card h3{ font-size: 43px; max-width: 70%; } .template_event .partenaire_card h3{ font-size: 43px; max-width: 70%; } .template_project .partenaire_card .cover_wraper{ height: 130px; } .template_project .partenaire_card h3{ line-height: 1em; } .template_event .partenaire_card .cover_wraper{ height: 130px; } .template_project .partenaire_card .partenaire_premium{ left: auto; right: 15px; } .template_event .partenaire_card .partenaire_premium{ left: auto; right: 15px; } /* section_hero */ .section_hero{ padding-left: 1rem; padding-right: 1rem; display: flex; ; gap: var(--page_grid_gap); padding-bottom: var(--padding_v_sections); width: var(--page_grid_global); max-width: 100%; margin: auto; } .section_hero.slim{ width: var(--page_grid_9); } .section_hero .hero_col1{ justify-content: flex-start; width: 50%; display: flex; flex-direction: column; gap: 20px; padding-right: var(--page_grid_col); } .section_hero .logo_partenaire_premium{ width: 80px; } .section_hero .intro { line-height: 1.45em; } .section_hero .intro p{ line-height: 1.45em; } .section_hero .hero_col2{ z-index: 3; justify-content: flex-start; width: 50%; padding-top: 30px; display: flex; flex-direction: column; gap: 20px; } .template_project .section_hero .hero_col2{ justify-content: flex-start } .section_hero .hero_col2 nav{ width: fit-content; display: flex; justify-content: flex-end; gap: 20px; padding: 0px 10px; } .section_hero .hero_col2 nav a{ transition: all .3s; } .section_hero .hero_col2 nav a:hover{ transform: scale(1.2); } .section_hero .list_infos li{ padding: .3em 0; list-style:disc; margin-left: 1em; } .section_hero .info_technique_title{ display: flex; gap: 10px; margin-top: 20px; } .section_hero .localisation_title{ display: flex; gap: 10px; margin-top: 30px; } .section_hero .synopsis p{ line-height: 1.45em; } .section_hero .map{ width: 100%; height: 240px; } .section_hero .cover_wrapper { width: 100%; overflow: hidden; } .section_hero .cover_wrapper figure { width: 100%; height: 100%; } .section_hero .cover_wrapper figure img { object-fit: cover; } .section_hero .cover_wrapper.portrait { width: 60%; aspect-ratio: 9/16; } .section_hero .cover_wrapper.portrait img{ width: 100%; height: 100%; object-fit: cover; } .template_event .section_hero .cover_wrapper img{ width: 100%; aspect-ratio: .86; object-fit: cover; } .section_hero .cover_wrapper.portrait video{ width: 100%; height: 100%; aspect-ratio: 9/16; } .section_hero .cover_wrapper.portrait .plyr{ width: 100%; height: 100%; aspect-ratio: 9/16; } .section_hero .artists_list{ display: flex; gap: .7em; line-height: 2em; flex-wrap: wrap; } .section_hero .artists_list a:before{ transition: all .17s; z-index: -1; content: "";background-color: white; width: 0%; height: 100%; position: absolute; top: 50%; left: 10%; transform: translateX(-10%) translateY(-50%) skewX(-9deg) } .section_hero .artists_list a:hover:before{ width: 100%; transition: all .17s; background-color: var(--color_txt); } .section_hero .artists_list a:hover{ color: #FFF; } .section_hero .artists_list .separator:last-child{ display: none; } .section_hero .hero_col2_header{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; } .section_hero .hero_col2_header .ariane{ display: flex; gap: 5px; align-items: center; } .section_hero .hero_col2_header .ariane a{ padding: 2px 3px; } .section_hero .hero_col2_header .ariane a:hover{ font-family: "black"; background: var(--site-theme-color); } .bg_gradient{ background: radial-gradient(#e1e1e1, #FFF); } /* composant_moodboard */ .section_moodboard{ padding-top: var(--padding_v_sections); padding-bottom: var(--padding_v_sections); background: radial-gradient(#e1e1e1, #FFF); } .composant_moodboard .swiper-slide{ display: flex; gap: 20px; width: 100%; justify-content: center; } .moodboard_header{ display: flex; justify-content: center; flex-direction: column;gap: 16px; align-items: flex-end; text-align: right; } .composant_moodboard .mooddboard_col1{ height: auto; gap: 20px; width: var(--page_grid_4); display: flex; justify-content: center; flex-direction: column; align-items: flex-end; } .composant_moodboard .mooddboard_col2{ height: auto; gap: 20px; width: var(--page_grid_4); display: flex; justify-content: center; flex-direction: column; } .composant_moodboard .mooddboard_col3{ height: auto; gap: 20px; width: var(--page_grid_4); display: flex; justify-content: center; flex-direction: column; } .composant_moodboard .img1_wrapper{ width: var(--page_grid_3); aspect-ratio: calc(16/10); object-fit: cover; } .composant_moodboard .img2_wrapper{ width: var(--page_grid_4); aspect-ratio: calc(10/16); object-fit: cover; } .composant_moodboard .img3_wrapper{ width: var(--page_grid_3); aspect-ratio: calc(16/10); object-fit: cover;} .composant_moodboard .img4_wrapper{ width: var(--page_grid_2); aspect-ratio: calc(10/16); object-fit: cover; } .composant_moodboard .img1{ width: var(--page_grid_3); aspect-ratio: calc(16/10); object-fit: cover; } .composant_moodboard .img2{ width: var(--page_grid_4); aspect-ratio: calc(10/16); object-fit: cover; } .composant_moodboard .img3{ width: var(--page_grid_3); aspect-ratio: calc(16/10); object-fit: cover;} .composant_moodboard .img4{ width: var(--page_grid_2); aspect-ratio: calc(10/16); object-fit: cover; } .composant_moodboard img{ object-fit: cover; } .composant_moodboard .prev_next{ z-index: 10; position: absolute; display: flex; gap: 15px; padding: 8px; background: white; top: 610px; left:var(--page_grid_9)} .composant_moodboard .bt_prev, .composant_moodboard .bt_next{ height: auto; line-height: 0; } .composant_moodboard .copyright{ transform: rotate(90deg) translateY(-25px); transform-origin: top right; background: none; } /* composant_titre_intro */ .section_titre{ width: var(--page_grid_global); max-width: 100%; margin: auto; padding: 0; margin-top: 60px; margin-bottom: 40px; } .composant_titre_intro{ max-width: 100%; margin: auto; padding: 0; display: flex; flex-direction: column; gap: 20px; } /* section_video */ .section_video{ width: var(--page_grid_global); max-width: 100%; margin: auto; padding: 0 } .section_video.strech{ padding-left: var(--page_grid_col); padding-right: var(--page_grid_col);} .section_video .block-type-video{ width: 100%; height: 100%; } .section_video iframe{ width: 100%; height: 100%; } .section_video .copyright{ font-size: 12px; width: 100%; display: flex; justify-content: flex-start; opacity: 0.7; position: relative; padding: 20px; color: black; } /* section_artiste */ .section_artiste{ min-height: 600px; position: relative; color: white; background-color: #111111; padding: var(--padding_v_sections) 0; width: 100%; } .section_artiste .text_wrapper{ z-index: 3; display: flex; width: var(--page_grid_global); max-width: 100%; margin: auto; } .section_artiste:nth-child(even) .text_wrapper{ flex-direction: row-reverse; } .section_artiste .text_wrapper .text_col1{ width: 50%; display: flex; flex-direction: column; gap: 20px; } .section_artiste .text_wrapper .artist_bio{ column-count: 2; } .section_artiste .text_wrapper .artist_bio p{ line-height: 1.35em; } .section_artiste .tag{ background-color: var(--site-theme-color); color: #000; } .section_artiste .artist_cover{ opacity: 0.9; filter: grayscale(1); z-index: 1; position: absolute; right: 0; top: 0; height: 100%; width: 55%; object-fit: cover; } .section_artiste:nth-child(even) .artist_cover{ right: auto; left: 0; } .section_artiste:after{ z-index: 2; position: absolute; top: 0; right: 0; height: 100%; width: 55%; content: ""; background: linear-gradient(90deg, #111 0%, rgba(17, 17, 17, 0.00) 100%); } .section_artiste:nth-child(even):after{ right: auto; left: 0; background: linear-gradient(90deg, rgba(17, 17, 17, 0.00) 0%, #111 100%); } /* template_realisations */ .template_realisations .hero_numbers h3{ line-height: 1.42em; font-size: calc( var(--fontSize_unit) * 4.8); letter-spacing: -0.05em; } .template_realisations .hero_numbers p{ margin-top: 10px; } .template_realisations .hero_numbers strong{ color:var(--color_txt); } .template_realisations .hero_col2{ justify-content: space-between; } .template_realisations .hero_col2 .artists_list{ margin-top: 20px } .template_realisations .geoloc{ display: flex; flex-direction: column; gap: 10px; letter-spacing: 0.1em; } .template_realisations input[type="checkbox"] { appearance: none; margin: 0; font: inherit; color: var(--color_txt); width: 1.2rem; height: 1.2rem; border: 2px solid var(--color_txt); border-radius: 0.15em; transform: translateY(-0.075em); } .template_realisations input[type="checkbox"]::before { content: ""; display: block; width: 1rem; height: 1rem; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--color_txt); transform-origin: bottom left; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .template_realisations input[type="checkbox"]:checked::before { transform: scale(1);} .template_realisations .geoloc label{ display: flex; gap: 10px; letter-spacing: 0.05em; justify-content: flex-start; align-items: center;; } .template_realisations .geoloc label:hover{ font-weight: bold; cursor: pointer; } .template_realisations .zone_geoloc{ display: flex; justify-content: space-between; align-items: flex-end; } .line100pc{ width: 100%; height: 3px; background: var(--color_txt); } .line50pc{ width: 50%; height: 3px; background: var(--color_txt); } /* home */ .template_home{ display: flex; position: relative; top: 0; width: 100%; overflow-y: hidden; height: 100vh; left: 0; background: #000; margin: 0; padding: 0; } .template_home .baseline_img{ color: var(--site-theme-color); z-index: 20; max-width: 50vw; max-height: 50vh; } .template_home .baseline_img img{ height: auto; width: 100%; } .template_home .content_wrapper{ z-index: 20; position: relative; gap: 5vh; flex-direction: column; width: 100%; height: 100dvh; display: flex; align-items: center; justify-content: center; } .template_home .cta_video{ box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.5); position: absolute; bottom: 20px; right: 60px; width: 210px; } .template_home .cta_video img{ width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 2px; overflow: hidden; } .template_home .cta_video:after{ content: ""; z-index: 10; width: 100%; height: 100%; position: absolute; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4)); display: block; } .template_home .cta_video{ display: flex; flex-direction: column; text-transform: uppercase; gap: 5px; color: white; } .template_home .icon_video{ width: 30px; height: auto; z-index: 12; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .template_home .cta_video .txt{ font-size: 14px; z-index: 12; font-family: medium; position: absolute; top: -25px; left: 5px; } .template_home .fancybox__viewport{ z-index: 10} .template_home .couv_press{ width: 120px; height: auto; } .template_home .magazine_link{ z-index: 20; position: absolute; bottom: 20px; left: 40px; } .template_home .magazine_link .text{ width: 20ch; position: absolute ;font-size: 14px; z-index: 12; font-family: medium; position: absolute; left: 80%; top: 50%; text-transform: uppercase; gap: 5px; color: white; } .magazine-gallery { z-index: 30; display: flex; flex-wrap: wrap; gap: 10px; max-height: 100vh; overflow: hidden; } .magazine-gallery a { flex: 1 0 30%; box-sizing: border-box; } .magazine-gallery img { width: 100%; height: auto; display: block; border: 1px solid #ccc; border-radius: 4px; transition: transform 0.3s; } .magazine-gallery img:hover { transform: scale(1.05); } /* Masquer la modale par défaut */ .template_home .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; max-height: 100vh; overflow: hidden; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.8); } /* Contenu de la modale */ .template_home .modal-content { position: relative; margin: 5% auto; padding: 0; width: 80%; max-width: 920px; background-color: #000; border-radius: 8px; } /* Bouton de fermeture */ .template_home .modal-close { color: white; position: absolute; top: 10px; right: 15px; font-size: 30px; font-weight: bold; cursor: pointer; } .template_home .video-container{ z-index: -1; background-color: var(--color_bg_dark); width: 100vw; height: 100vh; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .template_home .video-container video { transform: scale(1); width: 100%; height: 100%; object-fit: cover; opacity: 0.6;} /* maintenance */ .maintenance_wrapper { background: #000; color: white; } .maintenance_wrapper { position: fixed; justify-content: center; align-items: center; flex-direction: column; top: 0; left: 0; width: 100vw; height: 100%; background-color: #000; z-index: 9999; display: flex; justify-content: center; } .maintenance_wrapper .logo { width: 90px; margin: 20px;} .maintenance_wrapper .spinner { width: 40px; margin: auto;} /* article_template */ .article_template{ padding: 120px 0; } .article_template .section_book{ margin: auto; max-width: 100%; width: calc( var(--grid_unit) * 5 ); padding: var(--padding_v_sections) 0; } .article_template .hero_section{ display: flex; gap: 80px; } .article_template .hero_section .text_wrapper{ width: 100%; display: flex; flex-direction: column; gap: 1rem; } .article_template .hero_section .img_wrapper{ width: calc( var(--grid_unit) * 2 ); aspect-ratio: 0.66; } .article_template .page_blocks_section{ font-size: 21px; display: flex; flex-direction: column; gap: 80px ; } .article_template .block-type-paragraphe{ display: flex; margin: auto; max-width: var(--page_grid_9); flex-direction: column; gap: 20px; } .article_template .block-type-paragraphe p{ columns: 2; font-size: 18px; } .article_template .page_blocks_section h2{ font-size: 36px; } .article_template .page_blocks_section h3{ font-size: 28px; } .article_template .page_blocks_section h4{ font-size: 28px; } .article_template .page_blocks_section code{ font-size: 18px; text-align: center; margin: auto; text-decoration: underline; } .article_template .block-type-button{ margin: 40px auto; } .article_template .block-type-heading { display: flex; flex-direction: column; align-items: flex-start; max-width: 720px; margin: 0 auto; } .article_template .block-type-text { max-width: 720px; margin: 0 auto; } .article_template .block-type-columns .grid{ display: flex; gap: 40px; width: 100%; } .article_template .block-type-columns .column { width: 100%; } .article_template .block-type-columns .column .blocks{ width: 100%; display: flex; flex-direction: column; gap: 20px; } .article_template .block-type-columns .column .blocks img{ aspect-ratio: 16/9; object-fit: cover; } /* template_about */ .template_about .section_valeurs{ padding: var(--padding_v_sections) 0; } .template_about .section_valeurs .col1{ width: 50%; border-right: 3px solid black ; padding: 20px 60px 0 0 ; margin-top: 40px; display: flex; flex-direction: column; justify-content: center; gap: 30px ; align-items: flex-end; } .template_about .section_valeurs .col2{ width: 50%; display: flex; align-items: center; flex-direction: column; margin-top: 40px; justify-content: center; } .template_about .section_valeurs .container{ display: flex; align-items: center; flex-direction: column; gap: var(--page_grid_gap); } .template_about .section_valeurs .valeur_titre{ display: flex; gap: 25px; justify-content: flex-end; align-items: center; } .template_about .section_valeurs .valeur_titre .icon{ width: 60px; } .template_about .section_valeurs .module_valeurs{ display: flex; } .template_about .section_valeurs .valeur_intro{ display: none; flex-direction: column; gap: 20px; width: 500px; padding-left: 60px; } .template_about .section_valeurs .valeur_intro.actif{ display: flex; } .template_about .section_valeurs .valeur_titre .link_bg{ z-index: 2; padding: 2px 3px; position: relative; transition: all .17s; } .template_about .section_valeurs .valeur_titre:hover .link_bg{ cursor: pointer; } .template_about .section_valeurs .valeur_titre .link_bg:before{ mix-blend-mode: multiply; transition: all .17s; z-index: 1; content: "";background: white; width: 0%; height: 100%; position: absolute; top: 50%; left: 10%; transform: translateX(-10%) translateY(-50%) skewX(-9deg) } .template_about .section_valeurs .valeur_titre:hover .link_bg:before{ width: 100%; transition: all .17s; background: var(--site-theme-color); } .template_about .section_valeurs .valeur_titre.actif .link_bg:before{ width: 100%; transition: all .17s; background: var(--site-theme-color); } .template_about .section_implantation{ padding-top: var(--padding_v_sections); padding-bottom: var(--padding_v_sections); } .template_about .section_implantation .container{ display: flex; align-items: center; justify-content: center; } .template_about .section_implantation .container .col1{ width: 50%; padding-right: 40px; display: flex; flex-direction: column; gap: 25px; } .template_about .section_implantation .container .col2{ width: 50%; display: flex; flex-direction: column; gap: 15px; align-items: flex-end; } .template_about .section_implantation .container .map_wrapper{ width: 100%; height: 380px; overflow: hidden; } .template_about .section_implantation .container .map{ z-index: 10; width: 100%; height: 100%;} .map_wrapper{ z-index: 5 } /* section_streetarttour */ .section_streetarttour{ position: relative; color: white; background-color: #111111; padding: var(--padding_v_sections) 0; width: 100%; } .section_streetarttour .container{ z-index: 3; } .section_streetarttour .text_wrapper { width: 50%; display: flex; flex-direction: column; gap: 20px; } .section_streetarttour .surtitre{ background-color: var(--site-theme-color); color: #000; } .section_streetarttour .cover{ opacity: 0.9; filter: grayscale(0); transition: all .3s; z-index: 1; position: absolute; right: 0; top: 0; height: 100%; width: 55%; object-fit: cover; } .section_streetarttour:after{ z-index: 2; position: absolute; top: 0; right: 0; height: 100%; width: 55%; content: ""; background: linear-gradient(90deg, #111 0%, rgba(17, 17, 17, 0.00) 100%); } .section_streetarttour .bt_wrapper{ width: 100%; display: flex; justify-content: flex-start; padding-right: 20px; } /* template_about */ .template_about .demarche{ padding: 240px 0; width: 100%; display: flex; flex-direction: row; justify-content: center; } .template_about .demarche .text_wrapper{ width: calc( var(--grid_unit) * 3 ); z-index: 2; background: white; padding: 100px 80px ; min-height: 520px; } .template_about .demarche .text_wrapper p{ padding-right: 3em; } .template_about .demarche .img_wrapper{ width: 100%; height: 100%; top: 0; left: 0; position: absolute; } .template_about .demarche .img_wrapper figure{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .template_about .demarche .img_wrapper figure img{ width: 100%; height: 100%; object-fit: cover; } .template_about .demarche .gallery_wrapper{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; position: absolute; } .template_about .demarche .block-type-text p{ font-family: "book"; font-size: calc( var(--fontSize_unit) * 1.6); } .template_about .demarche .block-type-gallery{ width: 100%; margin: 0; } .template_about .demarche .gallery_wrapper .item{ width: calc( var(--grid_unit) * 1 ); height: calc( var(--grid_unit) * 1 ); margin:0} .template_about .demarche .gallery_wrapper figure{ width: calc( var(--grid_unit) * 1 ); height: calc( var(--grid_unit) * 1 ); margin:0 } .template_about .demarche .gallery_wrapper img{ width: 100%; height: 100%; object-fit: cover; } .template_about .streetarttour{ width:100%; display: flex; justify-content: center; background: rgba(0,0,0,0.9); color: var(--site-theme-color); padding: 120px 0;; } .template_about .streetarttour h2{ border: 4px solid var(--site-theme-color); color: var(--site-theme-color); padding: 0.3em 0.8em; font-size: calc( var(--fontSize_unit) * 2.6) ; } .template_about .streetarttour .wrapper{ display: flex; justify-content: space-between; width: calc( var(--grid_unit) * 5 ); } .template_about .streetarttour .text_wrapper{ width: 50%; padding-right: 80px; display: flex; flex-direction: column; gap: 1rem; } .template_about .streetarttour .block-type-text p{ font-family: "book"; font-size: calc( var(--fontSize_unit) * 1.6) ; line-height: 1.8em; } .template_about .streetarttour .block-type-text p strong{ background: var(--site-theme-color); color: black; padding: 0 0.1em; } .template_about .streetarttour .block-type-text a{ float: right; margin-right: 20px; font-family: "book"; width: fit-content; font-size: calc( var(--fontSize_unit) * 1.6) ; color: var(--site-theme-color);; text-decoration: none; font-size: calc( var(--fontSize_unit) * 1.2); font-family: 'black'; text-transform: uppercase; padding: 0.2em 0.4em; border-bottom: 3px solid var(--site-theme-color); } .template_about .streetarttour .block-type-text a:hover{ color: white } .template_about .streetarttour .img_wrapper{ width: 50%; padding: 2rem; height: 30em; } .template_about .streetarttour figure{ width: 100%; height: 100%; } .template_about .intro .img_wrapper figure{ width: 100%; height: 100%; aspect-ratio: 1/1.6; } .template_about .intro .img_wrapper figure img{ object-fit: none; aspect-ratio: 1/1.6; } .template_about .logospartenaires{ width: calc( var(--grid_unit) * 5 ); display: flex; flex-direction: column; } .template_about .logospartenaires .block-type-heading h2{ text-transform: none; line-height: 1.12em; font-family: "black"; letter-spacing: -0.05em; font-size: calc( var(--fontSize_unit) * 2.8) ; background: var(--site-theme-color); margin-top: 2em; margin-bottom: 1em; padding: 0 0.1em; } .template_about .logospartenaires .block-type-text p{ width: 65%; } .template_about .logospartenaires .block-type-gallery { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 80px; } .template_about .logospartenaires .block-type-gallery .item{ width: 6vw; height: 6vw; margin:1vw } .template_about .logospartenaires .block-type-gallery img{ object-fit: contain; } .template_about .prestations{ display: flex; flex-direction: column; width: calc( var(--grid_unit) * 5 ); padding: 120px 0; } .template_about .prestations .prestations_wrapper{ display: flex; } .template_about .prestations .prestation_1{ width: calc( var(--grid_unit) * 2 ); margin-top: 40px; margin-right: 40px; display: flex; flex-direction: column; gap:1rem } .template_about .prestations .prestation_2{ width: calc( var(--grid_unit) * 2 ); margin-top: 40px; margin-right: 40px; display: flex; flex-direction: column; gap:1rem } .template_about .prestations .prestation_3{ width: calc( var(--grid_unit) * 2 ); margin-top: 40px; margin-right: 40px; display: flex; flex-direction: column; gap:1rem } .template_about .prestations .prestations_wrapper h2{ letter-spacing: -0.05em; padding: 0 ; font-size: calc( var(--fontSize_unit) * 2.8); } .template_about .prestations .prestations_wrapper figure{ margin-bottom: 1em; } .template_about .prestations .prestations_wrapper .block_image img{ width: 100%; height: 200px; object-fit: cover; } .template_about .secteurs{ display: flex; margin-top: 80px; flex-direction: column; width: calc( var(--grid_unit) * 5 ); } .template_about .secteurs .secteurs_wrapper{ display: flex; } .template_about .secteurs .secteur_1{ width: 100%; margin-top: 40px; margin-right: 40px; } .template_about .secteurs .secteur_2{ width: 100%; margin-top: 40px; margin-right: 40px; } .template_about .secteurs .secteur_3{ width: 100%; margin-top: 40px; margin-right: 40px; } .template_about .secteurs .secteur_4{ width: 100%; margin-top: 40px; margin-right: 40px; } .template_about .secteurs .secteurs_wrapper h2{ margin-bottom: 2em; background: var(--site-theme-color); padding: 0 0.3em; } .template_about .partenaires{ margin-top: 80px;} .template_about .partenaires .wrapper{ width: calc( var(--grid_unit) * 5 );} .template_about .partenaires .partenaires_blocks_wrapper{ display: flex;} .template_about .partenaires .partenaires_blocks{ margin-top: 40px; margin-right: 40px; width: 100%;} .template_about .partenaires .partenaires_block1 { width: 60%;} .template_about .partenaires .partenaires_block1 figure { margin-bottom: 20px; ;} .template_about .partenaires p { font-family: "book"; font-size: calc( var(--fontSize_unit) * 1.4);;} .template_about .partenaires .partenaires_block2 { width: 40%;} .template_about .partenaires .partenaires_block2 figure { height: 20em; margin-top: 1em; } .template_about .popup_gallery{ width: 1200px; max-width: 90%; height: 800px; max-height: 90vh; border-radius: 10px!important; overflow: hidden; } .template_about .popup_gallery .bt_close{ transform: scale(1.2); } .template_about .popup_gallery:after{ content: ''; z-index: 90; background: black; width: 200px; height:200px; position: absolute; top: 0; right: 0; transform: rotate(45deg) translate(0%, -80%); } .template_about .popup_gallery .swiper_gallery{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .template_about .popup_gallery .swiper_gallery .swiper-slide{ width: 100%; height: 100%; } .template_about .popup_gallery .swiper_gallery .swiper-slide figure{ width: 100%; height: 100%; } .template_about .popup_gallery .swiper_gallery .swiper-slide img{ width: 100%; height: 100%; object-fit: cover; } .template_about .section_team { padding: var(--padding_v_sections) 0; } .template_about .section_team .team_header{ align-items: center; padding-right: 40px; margin-bottom: 60px; display: flex;flex-direction: column; gap: 25px; } .template_about .section_team .team_items{ display: flex; gap: 60px; flex-wrap: wrap; justify-content: center; } .template_about .section_team .team_item{ width: var(--page_grid_3); display: flex; flex-direction: column; gap:var(--page_grid_gap); align-items: center; } .template_about .section_team .team_item .cover{ z-index: 4; width: 130px; height: 130px; background: linear-gradient(#ffed90, var(--site-theme-color)); border-radius: 100%; padding: 5px; } .template_about .section_team .team_item .name{ position: relative; } .template_about .section_team .team_item .cover:before{ z-index: 3; content: ""; width:140px; height: 140px; position: absolute; border-radius: 100%; top: -5px; left: -5px; background: linear-gradient(white; ); } .template_about .section_team .team_item .cover img{ filter: grayscale(1) brightness(1.2); width: 130px; height: 130px; border-radius: 100%; overflow: hidden; object-fit: cover; } .template_about .section_team .team_item .txt{ display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center;} .template_about .section_team .collab_header{ align-items: center; margin-top: 120px; margin-bottom: 60px; display: flex;flex-direction: column; gap: 25px; } .template_about .section_team .intro{ text-align: center; max-width: 500px; } .template_about .section_team .team_txt {text-align: center; } .template_about .section_team .team_txt a{ text-decoration: none; font-size: 12px; padding-bottom: 3px; border-bottom: 3px solid var(--site-theme-color); font-weight: bold; letter-spacing: 0.05em; padding: 2px 4px; } .template_about .section_team .team_txt a:hover{ filter: brightness(1.1) } .template_about .section_team .collab_item{ width: var(--page_grid_2)!important; } .template_about .section_team .collab_item .cover{ background: linear-gradient(#b1b1b1, #6b6b6b); } .section_bg_gradient{ background: radial-gradient(#efefef, #FFF); } #gallery_button{ position: absolute; left: calc( var(--grid_unit) * 5 );; top: 22vw; transform: scale(1.2); } /* template_partenaire */ .template_partenaire .hero_col2 .flex_container{ display: flex; justify-content: space-between; align-items: flex-start; } .template_partenaire .logo_big{ width: 280px; } .template_partenaire .section_game_produit{ padding-top: var(--padding_v_sections); padding-bottom: var(--padding_v_sections); } .template_partenaire .section_game_produit .container{ display: flex; flex-direction: column; align-items: center; gap: 20px; } .template_partenaire .section_game_produit .gamme_produits_wrapper { align-items: flex-start; margin-top: 40px; display: flex; align-items: flex-start; gap: 20px; } .template_partenaire .section_game_produit .gamme_produits_wrapper .item{ width: var(--page_grid_4); display: flex; flex-direction: column; gap: 1rem; } .template_partenaire .section_game_produit .product_img{ width: 100%; height: 200px; object-fit: cover; } .template_partenaire .section_game_produit .product_titre{ line-height: 1.65em; } .template_partenaire .section_game_produit .product_texte p{ line-height: 1.35em; } .template_partenaire .section_game_produit .product_texte a{ text-decoration: underline; } .template_partenaire .section_game_produit .product_texte a:hover{ text-decoration: underline; color: var(--site-theme-color); } .template_partenaire .section_event_partenaire{ color: #fff; background-color:#000; background: radial-gradient(circle, rgba(64,60,20,1) 0%, rgba(0,0,0,1) 70%); padding-bottom: var(--padding_v_sections); padding-top: var(--padding_v_sections); } .template_partenaire .section_event_partenaire .surtitre{ color: black; } .template_partenaire .section_event_partenaire .container{ display: flex; flex-direction: column; gap: 40px; } .template_partenaire .section_event_partenaire .head{ display: flex; flex-direction: column; gap: 15px; } .template_partenaire .section_event_partenaire .realisation_card .txt_wraper{ color: #fff; } .template_partenaire .section_event_partenaire .realisation_card .cover_wraper{ height: 480px; } /* template_partenaires */ .template_partenaires .partenaires_premiums_intro .container { text-align: center; padding-top: var(--padding_v_sections); padding-left: var(--padding_v_sections); padding-right: var(--padding_v_sections); padding-bottom: 40px; display: flex; justify-content: center; flex-direction: column; gap: var(--page_grid_gap); align-items: center; } .template_partenaires .partenaire_cards{ justify-content: center; } .template_partenaires .section_hero .hero_col2{ justify-content: flex-end; } /* composant_temoignage */ .section_temoignage{ padding-top: var(--padding_v_sections); padding-bottom: var(--padding_v_sections); background: #cfcfcf; background: radial-gradient(#efefef, #FFF);} .composant_temoignage .temoignage_wrapper{ display:flex; } .composant_temoignage .temoignage_cover{ width: 240px; height: 240px; max-width: none; max-height: none; object-fit: cover; border-radius: 100%; } .composant_temoignage .cover_wrapper{ width: 40%; display: flex; justify-content: flex-end; padding-right: var(--page_grid_1); } .composant_temoignage .txt_wrapper{ width: 60%; position: relative; } .composant_temoignage .temoignage_signature{ margin: 1em 0 0.7em 0; } .composant_temoignage .temoignage_txt{ max-width: 44ch; } .composant_temoignage .guillemet{ position: absolute; top: -50px; left: -50px; width: 120px; } .section_partenaires{ padding: var(--padding_v_sections) 1rem; } .section_partenaires .container_flex{ } .section_partenaires .col2{ padding-left: var(--page_grid_1) ; padding-right: var(--page_grid_1) ; } .section_partenaires .titre_intro{ display: flex; flex-direction: column; gap: 20px } .logos_partenaires_wrapper{ margin-top: 0px; align-content: flex-start; margin-bottom: 20px; justify-content: center; gap: 20px 40px; flex-wrap: wrap; display: flex; flex-direction: row; } .logo_partenaire{ width: 110px; display: flex; transition: all 1.5s ease-out 3s; } .logo_partenaire:hover{ transform: scale(1.05); cursor: pointer; transition: all .05s ease-out; } .template_project .logo_partenaire{ filter: grayscale(); } .template_project .logo_partenaire:hover{ filter: none; } .template_event .logo_partenaire{ filter: grayscale(); } .template_event .logo_partenaire:hover{ filter: none; } /* artistes */ .template_artistes { background-color: var(--color_bg_dark); } .template_artistes .artist_names{ padding: 10vh 0; width: 100%; display: flex; flex-direction: column; align-items: center; } .template_artistes .artist_name_wrapper{ opacity: 0; z-index: 2; transform-origin:"0 100%" ; transform: rotateY(10deg) skewY(10deg); } .template_artistes .artist_name_wrapper .artist_name{ color: white; text-align: center; line-height: 1.3em; transform-origin:"0 100%"; padding: 0.15em 0.5em; margin: 0.1em ; border: 6px solid rgba(0,0,0,0) } .template_artistes .artist_name_wrapper .artist_name:hover{ cursor: pointer; border: 6px solid var(--site-theme-color); color: var(--site-theme-color);; } .template_artistes .artist_overviews{ width: 30vw; height: 50vh; position: fixed; top: 50vh; left: 50vw; transform: translate3d(-100%, -50%, -100px) skewY(3deg); transform-origin: center; } .template_artistes .artist_overview{ opacity: 0; transition: all .17s ease-out; position: fixed; width: 100%; height: 100%; object-fit: contain; transform: translate3d(-20%, -5%, -100px) skewY(-5deg) rotateY(-15deg) rotateX(-5deg); transform-origin: center; } .template_artistes .artist_overview.visible{ opacity: 0.8; transition: all .7s; transform: translate3d(-20%, -5%, -100px) skewY(-5deg) rotateY(-15deg) rotateX(-5deg); transform-origin: center; } .template_artistes .artists_popup_wrapper{ display: none; } .template_artistes .artists_popup_wrapper.visible{ display: flex; } .template_artistes .artists_popup{ width: 980px; height: 720px; max-width: 90vw; max-height: 90vh; background: var(--color_txt); } #iframe_artist{ height: 100%; width: 100%; overflow: hidden; } .f-button svg{ display: none; } /* artiste_template ( in iframe wraper ) */ .artiste_template { --fontSize_unit: 10px; width: 100%; height: auto; min-height: 600px; max-width: 980px; color: var(--site-theme-color);; background: #000; overflow:hidden; position: absolute; top:0; left: 0; } .artiste_template a{ color: white; } .artiste_template .artist_cover{ position: absolute; width: 480px; height: 300px; right: 80px; top: 0; } .artiste_template .artist_cover img{ opacity: 0.5; object-fit: cover; } .artiste_template .artist_header{ position: relative; height: 300px;margin-bottom: 20px; z-index: 2; width: 100%; display: flex; padding-top: 80px; padding-left: 80px; flex-direction: column; } .artiste_template .artist_header a{ color: var(--site-theme-color);} .artiste_template .artist_header a:hover{ color: white} .artiste_template .artist_header a::after:hover{ color: white} .artiste_template .artist_header .localisation{ margin-left: 20px; margin-bottom: 1em; width: fit-content; height: 1em; } .artiste_template .artist_popup_name{ position: relative; width: fit-content; border: 6px solid var(--site-theme-color); padding: 0.1em 0.2em; } .artiste_template .artist_popup_name::after{ background-color: black; content: ""; position: absolute; top: 0; right: 0; display: block; animation: anim_titre_banner .6s cubic-bezier(.17,.67,.32,.96) .1s 1 normal forwards; } .artiste_template .artist_infos{ padding: 40px 80px; width: 100%; column-count: 2; } .artiste_template .artist_infos p{ line-height: 1.25em; text-align: justify; padding-right: 20px; } .artiste_template .artist_infos .titre{ margin-bottom: 1em; } .artiste_template .artist_popup_bio { width: 35%; margin-right: 40px; padding-right: 40px; } .artiste_template .artist_infos .bios{ display: flex; } .artiste_template .bt_close{ position: fixed; top: 20px; right: 20px; } .artiste_template .artist_header .link { margin-left: 20px; width: fit-content; display: flex; height: fit-content; margin-bottom: 1em; } /* default */ .template_default .default_content{ padding: 20px 0 240px 0; } .template_default .default_content p{ font-size: 18px; } .template_default .default_content h2{ font-size: 32px; margin: 1em 0; } /* template_events */ .template_events{ background: black; } .template_events .page_intro{ padding: 120px ; color: white; } .template_events .gallery { min-height: 100vh; display: flex; justify-content: center; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,0.2); } .template_events .swiper_events:after{ z-index: 20;position: absolute; top: 0; right: 0; background: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); width: 15%; height: 100%; content: ""; display: block; } .template_events .swiper_events:before{ z-index: 20;position: absolute; top: 0; left: 0; background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); width: 15%; height: 100%; content: ""; display: block; } .template_events .gallery .swiper{ max-width: 100%; width: 100vw; height: auto; padding: 80px 200px; } .template_events .gallery .swiper-slide{ padding: 0; position: relative; width: 320px; height: 540px; margin: 20px 40px; } .template_events .gallery .item{ display: flex; overflow: hidden; border-radius: 1rem; width: 100%; height: 100%; } .template_events .gallery .item img{ width: 100%; height: 100%; right: 0; top: 0; position: absolute; object-fit: cover;} .template_events .gallery .item .content{ background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 100%); z-index: 2; color: white; padding: 20px 20px 80px 20px; } .template_events .gallery .item .tags li{ background: var(--site-theme-color); padding: 0.3em; width: fit-content; margin: 10px 0; color: #000; } .template_events .gallery .item .tags { margin-bottom: 10px; display: none; } .template_events .gallery .item .artists{ flex-direction: column; display: flex; flex-wrap: wrap; width: 100%; } /* .template_events .gallery .item .artist_name{ --site-theme-color:black; background: #FFD600; } */ .template_events .gallery .item .sstitre{ margin:2em 0; } .template_events .swiper-button-next{ z-index: 30; right: 40px; } .template_events .swiper-button-prev{ z-index: 30; left: 40px; } /* template_event */ /* .template_event{ min-height: 100vh; background: #17161a; position: relative; display: flex; flex-direction: column; padding: 120px 10% 20px 10%; } .template_event .event_wrapper{ } .template_event .video_wrapper{ width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; } .template_event .video_wrapper .block-type-video{ width: 100%; height: 100%; } .template_event .video_wrapper iframe{ width: 100%; height: 100%; } .template_event .video_wrapper .copyright{ width: 100%; display: flex; justify-content: flex-start; opacity: 0.7; position: relative; padding: 20px; color: white; } .template_event .prevnext{ padding: 40px;display: flex; justify-content: space-between; width: 100%; } .template_event .bt_next{ display: flex; transform: rotate(180deg); justify-content: center; align-items: center; background: white; border-radius: 40px; width: 40px; height: 40px; } .template_event .bt_prev{ display: flex; justify-content: center; flex-direction: column; justify-content: center; align-items: center; background: white; border-radius: 40px; width: 40px; height: 40px; } .template_event .bt_prev svg, .template_event .bt_next svg{ width: 8px; height: 8px; } .template_event .sidebar{ position: relative; flex-direction: column; padding:20px; display: flex; justify-content: space-between; color: white; z-index: 1; } .template_event .sidebar .col2{ display: flex; } .template_event .titre{ width: fit-content; } .template_event .namelist{ display: flex; padding-bottom: 20px; flex-wrap: wrap; } .template_event .namelist .artist_name{ background: #000; margin: 0 .5em .5em 0;} .template_event .lieu{ margin-bottom: 1em; width: fit-content;} .template_event .textbar{ color: grey; padding: 2rem; display: flex; justify-content: space-between; } .template_event .textbar .col1{ width: 70%; } .template_event .textbar .col2{ width: 30%; display: flex; flex-direction: column; align-items: flex-end; } .template_event .textbar .col2 a{ margin-bottom: 0.7em; text-transform: uppercase; margin-right: 3em; } .template_event .textbar .col2 a:hover{ color: var(--site-theme-color); } .template_event .textbar p{ opacity: 0.7; max-width: 60em; } .template_event .textbar a{ color: white; } .template_event .plyr--full-ui.plyr--video .plyr__control--overlaid { transform: scale(1.5); } .template_event .content{ width: 75vw; position: sticky; top: 20px; top: 0; height: 100vh; left: 30vw; width: 70vw; } .template_event .content .images_projet{ width: 100%; height: 100%; } .template_event .content .images_projet img{ height: 100vh; width: auto; max-width: none; } .template_event .content .images_projet .swiper-slide{ width: auto; } .template_event .slide-next{ background: white; width: calc( var(--grid_unit) * 4)!important; display: flex; display: flex; justify-content: center; align-items: center; } .template_event .slide-next a{ width: calc( var(--grid_unit) * 2); height: calc( var(--grid_unit) * 2) } .template_event .content .slide-next img{ width:calc( var(--grid_unit) * 1.8); height: calc( var(--grid_unit) * 1.8); object-fit: cover; } */ /* template_projects */ /* .template_projects { margin-top: 120px; } .template_projects .gallery{ display: flex; justify-content: center; flex-wrap: wrap; padding: 1vw; padding: 3px;} */ .project_thumb_item{ overflow: hidden; width: calc(98vw/6); padding: 3px; margin: 0; height:calc(98vw/6); } .project_thumb_item .cover_wraper{ width:100%; height:100%; overflow: hidden; border-radius: 3px; } .project_thumb_item img{ /*filter: contrast(1.5); filter: saturate(1.1); */ width:100%; transition: all .17s ease-out; height:100%; overflow: hidden; object-fit: cover; } .project_thumb_item .artists{ z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: absolute; left: 0; bottom: 0; padding: 6px; width: 100%; } .project_thumb_item .artists .artist_name{ background: white; --site-theme-color : #000; opacity: 0; transform: translateY(-3px); transition: all .5s ease-in-out; margin-bottom: 0.3em; } .project_thumb_item .artists .tag{ margin: 3px; font-family: "book"; background: var(--site-theme-color); padding: 0.1em; opacity: 0; text-transform: uppercase; font-family: "bold"; transform: translateY(-3px); transition: all .5s ease-in-out; color: var(--color_txt); padding: 0.1em 0.3em; width: fit-content; } .project_thumb_item:hover{ cursor: pointer; } .project_thumb_item:hover .artists li{ opacity: 1; transform: translateY(0px);} .project_thumb_item:hover li:nth-child(2){ transition: all .3s ease-in-out; } .project_thumb_item:hover img{ transform: scale(1); } /* section_slider_full */ .section_slider_full{ width: 100%; position: relative; margin-bottom: 60px; padding-bottom: 30px; } .section_slider_full .swiper-wrapper{ position: relative;} .section_slider_full .swiper-slide{ height: 620px; width: auto; } .section_slider_full .swiper-slide img{ height: 620px; width: auto; } .swiper-pagination-bullet{ background-color: #cfcfcf; width: 20px; height: 3px; border-radius: 0; transition: all .3s; } .swiper-pagination-bullet-active{ background: black } /* swiper_article */ .article_template .swiper_article .swiper-slide{ height: 620px; width: auto; } .article_template .swiper_article .section_slider_full .swiper-slide img{ height: 620px; width: auto; } .swiper{ width: 100%; position: relative; margin-bottom: 60px; padding-bottom: 30px; } .swiper .swiper-wrapper{ position: relative;} .swiper .swiper-slide{ height: auto; width: auto; } .swiper .swiper-slide img{ } .swiper .swiper-pagination-bullet{ background-color: #cfcfcf; width: 20px; height: 3px; border-radius: 0; transition: all .3s; } .swiper .swiper-pagination-bullet-active{ background: black } .section_slider_full .bt_prev{ position: absolute; left: 20px; top: 50%; z-index: 11; background-color: #000; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;} .section_slider_full .bt_next{ position: absolute; right: 20px; top: 50%; z-index: 11; background-color: #000; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;} .section_slider_full .bt_prev path, .section_slider_full .bt_next path{ stroke: #fff; } .section_slider_full .bt_prev:hover, .section_slider_full .bt_next:hover{ background-color: #000; cursor: pointer;} .section_slider_full .bt_prev:hover path, .section_slider_full .bt_next:hover path{ stroke: var(--site-theme-color); } /* .template_projects.loaded .gallery .project_thumb_item:nth-child(5n+1){ opacity: 0; animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) .3s 1 normal forwards; } .template_projects.loaded .gallery .project_thumb_item:nth-child(5n+2){ opacity: 0; animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) .5s 1 normal forwards; } .template_projects.loaded .gallery .project_thumb_item:nth-child(5n+3){ opacity: 0; animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) .2s 1 normal forwards; } .template_projects.loaded .gallery .project_thumb_item:nth-child(5n+4){ opacity: 0; animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) .7s 1 normal forwards; } .template_projects.loaded .gallery .project_thumb_item:nth-child(5n+5){ opacity: 0; animation : fadeIn 1.6s cubic-bezier(.17,.67,.32,.96) .4s 1 normal forwards; } */ /* template_project */ /* .template_project{ position: relative; display: flex; } .template_project .sidebar{ z-index: 1; width: 25%; min-height: 100vh; padding: calc(var(--space_unit) * 6 ) calc(var(--space_unit) * 1 ); display: flex; flex-direction: column; gap: 1rem } .template_project .sidebar p{ text-align: justify; font-size: calc( var(--fontSize_unit) * 1.4); } */ /* .template_project .sidebar:after{ display: none; z-index: 2; content: ""; position: fixed; left: 0; top: 0; transform: translateY(0%); width: 30vw; height: 80px; background-color: white ; } */ /* .template_project .sidebar .space_vertical{ margin-bottom: var(--space_unit); margin-top: var(--space_unit); } .template_project .sidebar .block-type-video { min-height: 280px; display: grid; margin-bottom: var(--space_unit); } .template_project .sidebar .artists{ display:flex; flex-wrap: wrap; } .template_project .sidebar .artists li{ margin-right: 1em; } .template_project .content{ position: sticky; top: 20px; top: 0; height: 100vh; left: 25vw; width: 75%; } .template_project .content .images_projet{ width: auto; height: 100%; } .template_project .content .images_projet .swiper-slide{ width: auto; } .template_project h2{ text-transform: uppercase; font-family: bold; font-size: 12px; } .template_project .subtitle{ background-color: var(--site-theme-color); margin-bottom: 1em; padding: 0.15em; } .template_project .block-type-heading{ margin-top: 1em; padding-top: 1em; border-top: 1px solid #9C9C9C; } .template_project .titre_oeuvre{ } .template_project .artist_name{ font-size: calc( var(--fontSize_unit) * 3.8); --site-theme-color:var(--color_txt) } .template_project .ligne{ width: 100%; border-bottom: 1px solid #9C9C9C; margin: 20px 0; } .template_project .content .images_projet .project_img{ height: 100vh; width: auto; max-width: none; } .template_project .bt_prev:hover, .template_project .bt_next:hover{ cursor: pointer; background: var(--site-theme-color); } .template_project .bt_prev{ z-index: 11; top: 80%; left: 0; position: absolute; background: white; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; } .template_project .bt_next{ z-index: 11; top: calc( 80% - 45px); left: 0; position: absolute; background: white; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; } .template_project .bt_prev svg, .template_project .bt_next svg{ width: 8px; height: 8px; } .template_project .swiper_project{ position: absolute; } .template_project .swiper-wrapper{ width: 74vw; height: 100vh; } .template_project .figcaption{ } .template_project .titre_artiste{ } */ .bgcolor{ background: var(--site-theme-color); } .template_project .slide-next{ background: white; width: calc( var(--grid_unit) * 4)!important; display: flex; flex-direction: column; justify-content: center; align-items: center; } .template_project .slide-next .project_thumb_item{ display:block; overflow: hidden; width: calc(98vw/6); padding: 3px; margin: 0; height:calc(98vw/6); } .template_project .swiper-horizontal>.swiper-pagination-bullets{ width: calc(100% - 400px); left: 200px; } .template_project .map_wrapper{ width: 100%; height: 280px; overflow: hidden; } .section_hero .block_image img{ height: 100%; object-fit: cover;} .cocarde_sat{ position: absolute; top: 20px; right: 20px; } .cocarde_sat img{ width: 90px; } /* about */ /* popups */ .popup_wrapper{ color: var(--color_txt); z-index: 199; background: rgba(0,0,0,0.8); transition: all .8s; position: fixed; display: none; justify-content: center; align-items: center; top: 0; left: 0; width: 100vw; height: 100vh; } .popup_wrapper .bt_close{ position: absolute; top:30px; right: 30px; } .popup_wrapper.actif{ display: flex; } .popup_wrapper.actif .popup{ z-index: 102; animation: anim_contact_popup .6s cubic-bezier(.17,.67,.32,.96) .1s 1 normal forwards; } .popup_wrapper .popup{ opacity: 0; padding: 3em; background:white; color: var(--color_txt); border-radius: 3px; box-shadow: 0px -1px 14px -3px rgba(0,0,0,0.3); } /* overlay */ .overlay { z-index: -1; align-items: center; background: rgba(255,255,255,0.8); top: 0; left: 0; align-content: center; width: 100vw; height: 100vh; position: fixed; display: none; justify-content: center; } .overlay.activ{ display: flex; z-index: 100; } /* contact */ .popup_contact{ overflow-y: hidden; width: 720px; height: 420px; max-width: 90vw; max-height: 90vh; overflow: auto; align-items: flex-start; opacity: 0; transition: all .3s .3s; box-shadow: 0px 0px 25px rgba(0,0,0,0.3); padding:80px } .activ .popup_contact{ opacity: 1; } .popup_contact .text_wrapper{ padding: var(--grid_unit); display: flex; flex-direction: column; align-items: center; } .popup_contact .popup_content{ z-index: 2; display:flex; flex-direction: column; align-items: flex-start; } .popup_contact .popup_content .surtitre{ margin-bottom: 20px; color: #000; } .popup_contact .popup_content .sstitre{ margin-bottom: 80px; } .popup_contact .popup_content .link{ margin-bottom: 1em; font-family: 'book'; display: flex; } .popup_contact .popup_content .link:hover{ color: var(--site-theme-color);} .popup_contact .popup_content .link .icon{ width: 22px; margin-right: 8px; } .popup_contact .cover{ position: absolute; width: 320px; height: 100%; object-fit: cover; opacity: 1; filter: brightness(1.2);right: 0px; top: 0px; } /* cartes */ /* .template_cartes { margin-top: 120px; } */ .template_cartes{ position: relative; margin-top: 70px; } .template_cartes .map{ width: 100%; height: 100vh; position: relative; } .template_cartes .projects_nav_map{ position: relative; background: white; display: flex; justify-content: center; padding: 60px; z-index: 100; } /* leaflet */ .map_wrapper .leaflet-popup-content-wrapper{ border-radius: 0; padding:0 } .map_wrapper .leaflet-popup-content-wrapper, .leaflet-popup-tip{ background: var(--color_txt)!important; } .map_wrapper .leaflet-popup-content{ width: 280px; height: 180px; margin: 0; padding: 0; overflow: hidden; } .template_about .map_wrapper .leaflet-popup-content{ width: 120px; height: 80px; } .map_wrapper .leaflet-popup-content a{ width: 100%; height: 100%; } .map_wrapper .leaflet-popup-content img{ width: 100%; height: 100%; object-fit: cover; } .map_wrapper .leaflet-popup-content h3{ width: fit-content; border-bottom : 4px solid var(--site-theme-color); background-color: var(--color_txt); padding:0.3em; margin-left: -0.3em ; position: relative; z-index: 2;} .map_wrapper .leaflet-popup-content-wrapper{ padding: 0; } .map_wrapper .leaflet-container a.leaflet-popup-close-button{ color: white; } .map_wrapper .artists_title{ position: absolute; bottom: 12px; left: 12px; max-width: 100%; color: white; display: flex; flex-direction: column; gap: 5px; } .template_about .map_wrapper .artists_title{ bottom: 6px; left: 6px; max-width: 100%; color: white; } .map_wrapper .artists_title li{ width: fit-content; display: inline; background: #000; padding: 0px 5px; } .template_about .map_wrapper .artists_title li{ display: inline; background: rgba(0,0,0,0.3); width: auto; padding: 0px 4px; font-size: 13px; line-height: 20px; } /* overlay */ .overlay { z-index: -1; align-items: center; background: rgba(0,0,0,0.8); top: 0; left: 0; align-content: center; width: 100vw; height: 100vh; position: fixed; display: none; justify-content: center; } .overlay.activ{ display: flex; z-index: 100; } /* contact_template */ .contact_wrapper { color: var(--color_txt); } .contact_wrapper a{ background-color: var(--color_txt); color: var(--site-theme-color); padding: 3px 6px; color: #e1e1e1; margin: 1em 0 0 0; mix-blend-mode: difference; } .contact_wrapper a:hover{ background-color: var(--color_txt); color: var(--site-theme-color); mix-blend-mode: normal; } /* fancybox */ .fancybox__content{ padding: 0; } .has-iframe .fancybox__content, .has-map .fancybox__content, .has-pdf .fancybox__content{ max-width:60vw; max-height: 90vh; } .fancybox__iframe body, .fancybox__iframe html{ width: 100%; min-height: none; } .fancybox__content>.f-button.is-close-btn{ width: 24px; height: 24px; border-radius: 24px; border:1px solid rgba(255,255,255,0.4); top: 20px; right: 20px; } .fancybox__content>.f-button.is-close-btn:hover{ transform: scale(1.3); border:1px solid rgba(255,255,255,0.6); } .fancybox__content>.f-button.is-close-btn::before{ content: ""; position: absolute; transform-origin:50% 50%; left: 50%; top:50%; height: 3px; background: white; transition: all .17s ease-in;width:6px; transform : translateX(-50%) translateY(-50%) rotate(0deg); } .fancybox__content>.f-button.is-close-btn::after{ content: ""; position: absolute; transform-origin:50% 50%; left: 50%; top:50%; height: 3px; background: white; transition: all .17s ease-in; width:6px; transform : translateX(-50%) translateY(-50%) rotate(0deg); } .fancybox__content>.f-button.is-close-btn:hover::before{ background: var(--site-theme-color); width:12px; height: 2px; transform : translateX(-50%) translateY(-50%) rotate(135deg); } .fancybox__content>.f-button.is-close-btn:hover::after{ background: var(--site-theme-color); width:12px; height: 2px; transform : translateX(-50%) translateY(-50%) rotate(-135deg); } /* contact */ /* footer_contact */ .footer_contact{ display: flex; flex-direction: column; gap: 5rem 2rem; align-items: center; text-align: center; padding: 10rem; background-size: 100% auto; background-repeat: no-repeat; background-color: rgb(203 202 200); background-image:url('../images/partenaires_bg2.jpg'); } .footer_contact .form_wrapper{ display: flex; max-width: calc( var(--site_max_width) * 0.8 ); align-items: center; flex-direction: column; gap: 1rem; background: white; padding: 5rem; border-radius: 2rem; box-shadow: 0px 4px 84px 0px rgba(0, 0, 0, 0.25); } .footer_contact .link{ display: inline-block; padding: .3em; } /* ANIMS */ .loaded h1{ z-index: 3; opacity: 0; position: relative; animation: .9s anim_h1 cubic-bezier(0, 0, 0.06, 1.03) 0.3s 1 normal forwards; } .loaded h1:after{ z-index: 2; transform: skewX(-7deg); top: 0; height: 100%; animation: 1.3s anim_h1_mask ease-out 0.3s 1 normal forwards;content: ""; display: block; width: 130%; left: 0; position: absolute; background-color: rgb(255, 255, 255); } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @media ( min-width: 1920px){ :root { --grid_unit: 260px; } } @media ( max-width: 800px){ :root { --fontSize_unit: 8px; --page_grid_global:94vw; --space_unit: 5vw; --section_padding: 3vw; --padding_mobile: 20px } /* fonts */ .txt_82 { font-size: calc( var(--fontSize_unit) * 5.2); } .txt_64 { font-size: calc( var(--fontSize_unit) * 4.4); } html{ position: relative; min-width: 100vw; width: 100%; margin: 0; padding: 0; } body{ position: relative; min-width: 100vw; width: 100%; margin: 0; padding: 0; } main{ max-width: 100vw; overflow-x: hidden; } .fixed_ui { position: absolute; } .page_wraper{ padding: 0px; } /* ui */ /* layout */ .container_flex{ flex-direction: column; } .container.slim{ max-width: var(--page_grid_global); } .section_hero{ flex-direction: column; padding: var(--padding_mobile) 0; } .section_hero .hero_col2_header .ariane{ display: none; } .section_hero .hero_col1{ gap:25px; padding-right: 0; width: 100%; } .section_hero .hero_col2{ padding-top: 20px; width: 100%; } .section_artiste .text_wrapper .artist_bio{ columns: 1; } .logos_partenaires_wrapper{ margin-top: 20px; } .partenaire_card{ gap: 10vw; } .partenaire_card{ width: 100%; } .template_realisations .geoloc{ display: none; } .section_hero .artists_list{ padding-right: 0; } .container_flex .col1{ width: 100%; } .container_flex .col2{ width: 100%; } .realisation_card { width: 100%; } .section_realisations{ } .has-iframe .fancybox__content, .has-map .fancybox__content, .has-pdf .fancybox__content { max-width: 100vw; max-height: 100vh; } .burger{ display: block; z-index: 1000; background: #000; position: fixed; top:17px; left: calc( 100vw - 50px ); width: 36px; border-radius: 36px; height: 36px; } .burger .line{ position: absolute; transform-origin:50% 50%; left: 50%; top:50%; transition:all .3s; content:''; width: 16px; border-radius: 3px; height: 3px; background: var(--color_bg); transition: all .3s; } .burger:hover{ cursor: pointer; } .burger .line1{ transform : translateX(-50%) translateY(-8px) rotate(0deg); width: 24px; } .burger .line2{ transform : translateX(-50%) translateY(-50%) rotate(0deg); } .burger .line3{ transform : translateX(-50%) translateY(5px) rotate(0deg); width: 24px; } .shownav .burger .line1{width: 24px; background: var(--site-theme-color);; transform : translateX(-50%) translateY(0) rotate(45deg); transition:all .17s; } .shownav .burger .line3{width: 24px; background: var(--site-theme-color);; transform : translateX(-50%) translateY(0) rotate(-45deg); transition:all .17s .03s; } .shownav .burger .line2{ display: none; } .navBar{ justify-content: space-evenly; display: flex; padding-top: 10%; gap: 2rem; align-items: center; flex-direction: column; width: 100vw; height: 100vh; top: 0; right: 0; border-radius: 0; width: 100vw; z-index: 101; height: 100vh; position: fixed; background: #000; top: 0; left: 0; transform: translateY( -100% ); transition: all .3s cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); } .navBar nav{ justify-content: center; align-items: center; flex-direction: column; gap: 2rem; } .navBar .menu_link { font-size: calc( var(--fontSize_unit) * 1.8); } .shownav .navBar{ transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); transform: translateX(0%); } .navBar .icon_insta { width: 2.2rem; } .navBar li.main_menu_logo{ display: block; } .navBar li.main_menu_logo img{ width: 100px; margin: 60px 0 ; } .template_partenaire .section_game_produit .gamme_produits_wrapper { flex-direction: column; } .template_artistes .artist_name_wrapper .artist_name{ font-size: calc( var(--fontSize_unit) * 3.2)!important; padding: 0.2em x;} .popup_wrapper{ max-width: 100vw; margin: auto; } .popup_contact .cover{ width: 40%; right: 0px; } .partenaires_template .logo_partenaire { width: 5rem; } .partenaires_template .logos_partenaires_wrapper { gap: 2rem; } .partenaires_template .zone_logos_partenaires{ padding: 2rem; gap: 2rem } .partenaires_template .zone_paragraphes_partenaires{ padding: 2rem; gap: 2rem } .partenaires_template .partenaire_premium_paragraphe, .partenaires_template .partenaire_premium_paragraphe:nth-child(odd) { flex-direction: column; } .partenaires_template .partenaire_premium_paragraphe .col { width: 100%; } .composant_moodboard .swiper-slide{ flex-direction: column; } .moodboard_header{ align-items: flex-start; text-align:left } .section_invitation{ } /* footer_contact */ .footer_contact{ padding: 3rem; gap: 3rem; background-size: cover; } .footer_contact .form_wrapper{ padding: 3rem; gap: 0rem } /* home */ .template_home .baseline{ width: 80vw; } .template_home .content_wrapper{ position: relative; height: 100vh; min-height: 100dvh; display: flex; gap: 40px; flex-direction: column; justify-content: flex-start; } .template_home .video-container{ height: 100%; width:100%; top: 0; z-index: -1; position: absolute; } .template_home .baseline_img{ max-width: 80vw; margin-top: 30vw; } .template_home .cta_video{ max-width: 80vw; margin: 20px auto; left: 50%; transform: translateX(-50%); right: auto; bottom: 20px; } .template_home .cta_video .txt{ text-align: center; } .template_home .magazine_link{ position: relative; } .template_home .cta_video{ position: relative; left: auto; transform: none; } .template_home .magazine_link { width: 320px; max-width: 80vw; } .template_home .magazine_link .text{ left: 80px; } .template_home .cta_video{ margin-top: 60px; } /* .partenaires_template */ .partenaires_template { padding: 0; } .partenaires_template .header_page { padding: 6rem 2rem; } /* template_event */ .template_event{ padding: 100px 0 0 0; min-height: auto;} .template_event .content{ position: relative; left: 0; width: 100%; height: auto;} .template_event { flex-direction: column; } .template_event .sidebar{ position: relative; display: flex; width: 90%; max-width: 90%; min-height: auto; padding: 20px; display: block; } .template_event .content .images_projet { position: relative; left: 0; width: 100%; } .template_event .titre{ font-size: calc( var(--fontSize_unit) * 2.8)!important; } .template_event .content { position: relative; left: 0; width: 100%; } .template_event .nav_prev_next{ display : none; } .template_event .swiper-wrapper{ height: auto; } .template_event .content{ height: auto; } .template_event .swiper-slide{ height: auto; width: 100vw } .template_event .swiper_project{ height: auto; width: 100vw; position: relative; } .template_event .content .images_projet img{ height: 100vw; width: 100vw } .template_event .slide-next a { width: 100vw; height: 100vw;} .template_event .content .images_projet{ position: relative; height: auto; width: 100vw } .template_event .content .images_projet .slide-next img { width: 100%; height: 100%; } .template_event .textbar { flex-direction: column; padding: 10px 20px; } .template_event .textbar .col2{ margin-top: 20PX; } .template_event .col{ width: 100%!important ; } .template_event .sidebar .col2{ display: flex; flex-wrap: wrap; } .template_event .col2 .artist_name{ margin-right: 10px; margin-bottom: 5px; } .template_event .textbar .col2 { align-items: center;flex-direction: row; text-align: center; } .template_event .plyr--full-ui.plyr--video .plyr__control--overlaid{ transform: scale(1); } .template_event .titre{ padding: 0; } .template_event .nav_page{ position: relative; height: 80px; } .template_event .prevProject{ position:absolute; top: 20px; } .template_event .nextProject{ position:absolute; top: 20px; } .template_event .artist_name{ background: #000; font-size: 16px!important;} .template_event .sidebar{--fontSize_unit: 8px; } /* template_about */ .template_about{ width: 100%; padding: 3rem 0 40px 0; } .template_about .intro{ width: 100%; flex-direction: column; padding: var(--space_unit) ; } .template_about .intro .text_wrapper{ width: 100%; } .template_about .intro .img_wrapper{ width: 100%; height: 40vh; } .template_about .demarche .text_wrapper{ width: 100%; padding: var(--space_unit)} .template_about .prestations{ margin-top: 0; width: 100%; padding: var(--space_unit) ;} .template_about .prestations .prestations_wrapper { display: flex; flex-direction: column; } .template_about .prestations .prestation_1, .template_about .prestations .prestation_2, .template_about .prestations .prestation_3 { width: 100%; } .template_about .streetarttour .wrapper { flex-direction: column; } .template_about .streetarttour .text_wrapper{ width: 100%; padding: 0; } .template_about .streetarttour .wrapper{ width: 100%; padding: var(--space_unit) ; } .template_about .streetarttour{ padding: 0; } .template_about .secteurs{ width: 100%; padding: var(--space_unit) ; } .template_about .secteurs .secteurs_wrapper { flex-direction: column; } .template_about .partenaires .wrapper{ width: 100%; padding: var(--space_unit) ; } .template_about .partenaires .partenaires_blocks_wrapper { flex-direction: column; } .template_about .partenaires .partenaires_block1, .template_about .partenaires .partenaires_block2{ width: 100%; } .template_about .logospartenaires{ width: 100%; padding: var(--space_unit) ; } .template_about .logospartenaires .block-type-gallery .item{ width: 15vw; height: 15vw; margin: 3vw; } .template_about .demarche .img_wrapper{ bottom: 0; } .template_about .demarche{ margin-top: 20px; padding-bottom: 30vw; } .template_about .logospartenaires .block-type-text p { width: 100%; } .template_about .streetarttour .img_wrapper { width: 100%; height: 30em;} .template_about .secteurs .secteurs_wrapper h2{ font-size: 18px; } .template_cartes .projects_nav_map{ position: absolute; top: auto; right: auto; padding: 20px; left: 20px; bottom: 20px; } #gallery_button { bottom: -21vw; top: auto; } /* artistes */ .template_artistes{ padding: 0; } .template_artistes .artist_names { padding: 20vh 0; } /* artiste */ .artiste_template .artist_infos{ column-count: 1; } .artiste_template .artist_cover { width: 100vw; right: 0vw; height: 50vw; } .artiste_template .artist_infos { width: 100%; padding: var(--space_unit) ; } .artiste_template .artist_header { --fontSize_unit: 4px; margin: 50vw 0 0 0; padding:0; height: auto; } .artiste_template .artist_name{ margin: var(--space_unit); } .artiste_template .artist_header .link{ --fontSize_unit: 6px; } /* project */ .template_project .bt_prev{ position: absolute; top: 50%; left: 0; transform: translate(0, -50%); } .template_project .bt_next{ position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } .template_project{ padding-top: 0; } .template_project .content{ position: relative; left: 0; width: 100%; height: auto;} .template_project { flex-direction: column-reverse; } .template_project .sidebar { width: 100%; min-height: auto; }  .template_project .content .images_projet { position: relative; left: 0; width: 100%; }  .template_project .content { position: relative; left: 0; width: 100%; }  .template_project .nav_prev_next{ display : none } .template_project .section_slider_full .swiper-wrapper{ }  .template_project .content{ height: auto; }  .template_project .swiper-slide{ height: auto; width: 100vw }  .template_project .swiper_project{ height: auto; width: 100vw; position: relative; } .template_project .content .images_projet img{ height: 90vw; width: 100vw; object-fit: cover; } .section_artiste .text_wrapper{ width: 80%; } .section_artiste .text_wrapper .text_col1{ width: 80%; } .composant_dons_assos{ background-size: auto 100%; } .composant_dons_assos .col1{ width: 100%; } .composant_dons_assos .col2{ width: 100%; } .template_project .content .images_projet{ position: relative; height: auto; width: 100vw }  .template_project .sidebar{ padding-bottom: 40px; } .template_project .content .images_projet .slide-next img { width: 100%; height: 100%; } .template_project .swiper-horizontal>.swiper-pagination-bullets{ width: 100%; padding: 10px 0px; left: 0%; } .template_project .bt_next{ border-radius: 40px; width: 40px; height: 40px; right: 10px; left: auto; } .template_project .bt_prev{ border-radius: 40px; width: 40px; height: 40px; left: 10px; right: auto; } .template_project .sidebar{ padding-top: 0; } .template_project .slide-next{ width: auto!important; padding: 10vw 20px; } .template_project .slide-next a{ width: 80vw; height: 80vw; } /* article */ .article_template .section_book{ width: 100%; padding: 0 var(--space_unit) ; } .article_template .hero_section { flex-direction: column; margin-bottom: 3rem; } .article_template .hero_section .img_wrapper { width: 100%; aspect-ratio: 2 } .article_template .hero_section .img_wrapper img{ aspect-ratio: 2 } /* projects */ .template_projects{ margin: 0; } .template_projects .page_header{ padding-left: var(--space_unit) ; } .project_thumb_item{ width: calc(98vw/3); height: calc(98vw/3); } .project_thumb_item .artists .artist_name{ --fontSize_unit: 6px; } /* events */ .template_events{ padding-top: 80px; } .template_events .gallery{ margin: 0px; min-height: auto; } .template_events .gallery .swiper{ width: 100%; height: calc(100vh - 140px ); padding: 0; } .template_events .gallery .swiper-wrapper{ width: 100%; height: 100%; } .template_events .gallery .swiper-slide{ width: 100vw; height: 100%; padding: 0 20px; } .template_events .gallery .item{ width: 100%; height: 100%; } .section_invitation .txt_invitation{ align-items: center; } .section_invitation .txt_invitation h4{ text-align: center; letter-spacing: -0.05em; padding: .5em; } .section_invitation .txt_invitation p{ text-align: center; } .composant_temoignage .temoignage_wrapper{ flex-direction: column; } .composant_temoignage .cover_wrapper{ width: 100%; padding-bottom: 1rem; justify-content: flex-start; } .composant_temoignage .txt_wrapper { width: 100%; } .composant_temoignage .temoignage_cover { width: 120px; height: 120px; } .template_project .page_header_nav { display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-direction: column; gap: 2rem; } .page_title{ transform: none; } .template_cartes .page_header { align-items: flex-start; display: flex; padding-top:var(--space_unit); padding-left: var(--space_unit); flex-direction: column; gap: 2rem } .template_projects .page_header { align-items: flex-start; display: flex; padding-left: var(--space_unit); flex-direction: column; gap: 2rem } .page_header_nav { display: flex; align-items: flex-start; flex-direction: column; gap:1rem } .section_partenaires .col2{ padding: 0; } .template_about .section_valeurs .col1{ width: 100%; align-items: flex-start; padding: var(--padding_mobile);; margin-top: 0; gap: 0; border-right:none; border-bottom: 3px solid black; } .template_about .section_valeurs .col2{ width: 100%; padding: 0 var(--padding_mobile); } .template_about .section_valeurs .valeur_intro { padding: 0; width: 100%; } .template_about .section_valeurs .module_valeurs { flex-direction: column; } .template_about .section_implantation .container { flex-direction: column; } .template_about .section_implantation .container .col1 { width: 100%; } .template_about .section_implantation .container .col2 { width: 100%; } .composant_moodboard .mooddboard_col1{ width: 100%; flex-direction: column; } .composant_moodboard .mooddboard_col3 { width: 100%; flex-direction: row; } .section_streetarttour .text_wrapper { width: 80%; } .template_about .section_valeurs .valeur_titre{ justify-content: space-between; flex-direction: row; width: 100%; } .template_about .section_team .team_items{ flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 30px; } .template_about .section_team .team_item{ width:100%; flex-direction: row; } .template_about .section_team .team_item .txt{ width: calc(100% - 130px); align-items: flex-start; } .template_about .section_team .collab_item{ width:100% !important; } .template_about .section_team .team_txt{ text-align: left; } .template_about .section_team .team_header{ padding: 0px } .template_about .collab_header .intro{ padding: 0; } .logo_partenaire { width: 20vw; } .template_partenaire .section_game_produit .gamme_produits_wrapper .item{ width: 100%; } .deux_cols{ columns: 1; } .footer { flex-direction: column; } .footer .col{ width: 100%; align-items: center; text-align: center; display: flex; justify-content: center; } .footer .col:nth-child(3){ justify-content: center; } .template_home .content_wrapper{ height: auto; } } @media ( max-width: 600px){ .template_home .zone_intro .intro{ font-size: 8vw; } } @keyframes fadeIn{ to { opacity: 1; transform:translate3D(0,0,0) } } @keyframes anim_contact_popup{ 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes anim_titre_banner{ 0% { width: 100%; } 100% { width: 0%; } } @keyframes loop{ 0% { transform: rotateZ(0deg) ; } 50% { transform: rotateZ(175deg) ; } 100% { transform: rotateZ(350deg) ; } } @keyframes anim_h1_mask{ 0% { width: 130%; left: 0; } 100% { width: 0%; left: 130%; } } @keyframes anim_h1_submask{ 10% { width: 0%; left: 0; } 50% { width: 80%; left: -2%; } 100% { width: 0%; left: 102%; } } @keyframes anim_h1{ 0% { opacity: 0; transform: translate3d(10%,0,0) scaleX(1.2); } 100% { opacity: 1; transform: translateX(0px,0,0) scaleX(1); } }