/* @override http://foenagency.com.test/assets/css/main.css /* CSS by Manu LECHAT https://e-lechat.com http://defi-voile-solidairesenpeloton.com.test/assets/css/main.css */ @font-face { font-family: "Poppins-Medium"; src: url("../fonts/Poppins/Poppins-Medium.ttf") format('truetype') } @font-face { font-family: "Poppins-Bold"; src: url("../fonts/Poppins/Poppins-Bold.ttf") format('truetype') } /* /^^ /^^ /^^ /^ /^^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^ */ :root { --color_deep_blue: #14233F; --color_team: #04A6F3; --color_page_theme: #04A6F3; --color_asso: #E84E0F; --color_txt: #fff; --color_txt_alt: #04A6F3; /* layout */ --site_max_width: 1280px; --site_slim_width: 964px; --grid_unit: 89px; --grid_gutter: 20px; --color_bg_bento_numbers: #FDF1EC; --color_halo: rgba(4, 166, 243, 0.5); --color_bg_page: #161A20; --color_bg_bento: red; --shadow_bento: 0 50px 80px 0 #04a7f33e inset; --color_page_theme: #04A6F3; --color_bento: white; --color_paragraphe: white; --color_txt_gradient : linear-gradient(90deg, #14233F 0%, #53C3FC 100%); } .template_actus .main_page{ --site_max_width: 1280px; --site_slim_width: 1280px !important; --grid_unit: 89px; --grid_gutter: 20px; } .template_default{} .template_article{ --color_halo: rgba(4, 166, 243, 0.5); --color_bg_page: #161A20; --color_bento_halo: purple; --color_page_theme: #04A6F3; --color_bento: white; --color_paragraphe: white; --color_bg_bento_numbers: #FDF1EC; --color_txt_gradient : linear-gradient(90deg, #14233F 0%, #53C3FC 100%); } .template_defi-sportif{ --color_halo: rgba(4, 166, 243, 0.8); --color_bg_page: #161A20; --color_bg_bento: #161A20; --color_bento_halo: purple; --color_bg_bento_numbers: #FDF1EC; --color_page_theme: #04A6F3; --color_bento: white; --color_paragraphe: white; --color_txt_gradient : linear-gradient(90deg, #14233F 0%, #53C3FC 100%); } .template_defi-solidaire{ --color_bg_page: white; --color_txt: var(--color_asso); --color_paragraphe: var(--color_deep_blue); --color_bento: #fff; --color_txt_alt: #E84E0F; --color_halo: rgba(232, 78, 15, 1); --shadow_bento: 0 -50px 80px 0 rgba(232, 78, 15, 0.70) inset; --color_bg_bento: #ffad8b; --color_bg_bento_numbers: #FDF1EC; --color_page_theme: #E84E0F; --color_txt_gradient : linear-gradient(90deg, #E84E0F 0%, #53C3FC 100%); } .template_actus{ --color_halo: rgba(4, 166, 243, 0.5); --color_bg_page: #161A20; --color_page_theme: #04A6F3; --color_bento: white; --color_paragraphe: white; --color_txt_gradient : linear-gradient(90deg, #14233F 0%, #53C3FC 100%); } .template_carto{ --color_halo: rgba(4, 166, 243, 0); --color_bg_page: #161A20; } .template_presse{ --color_halo: rgba(4, 166, 243, 0); } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^/^ /^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^^^^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^^^ /^^ */ ::selection { background-color: rgba(0, 140, 255, 0.5); opacity: 0.1; transition: all .3s; ; text-shadow: none; } * { box-sizing: border-box; outline: none; position: relative; } html{ width:100%; height: 100%; margin: 0; padding: 0; top:0; left: 0;-webkit-font-smoothing: antialiased; box-sizing: border-box; position: relative; text-rendering: optimizeLegibility; } body{ background: var(--color_bg_page); box-shadow: 0 0px 100px 0 var(--color_halo) inset; color:var(--color_txt); font-family: "Poppins-Bold"; width:100%; min-height: 100%; top: 0; left: 0; margin: 0; } div{ position: relative; display: block; } header, section, main, footer{ width: 100%; padding: 0;} h1, h2, h3, h4, h5{ display:block; font-weight: normal; padding-bottom: 0.2em; line-height: 1.26em; } 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,h2,h3,h4,h5,h6{ color: var(--color_txt); width: fit-content; display: block; margin: 0 ; clear: both; break-after: always; font-size: 1em; line-height: 1.2em; font-weight: normal } span{ display: block; } a{ display: block; position: relative; color: var(--color_txt); text-align: left; text-decoration: none; } a:hover{ cursor: pointer; text-decoration: none; } p{ color: var(--color_paragraphe); font-family: "Poppins-Medium"; letter-spacing: 0em; width: fit-content; clear: both; display: block; padding: 0; margin: 0; font-weight: normal; position: relative; line-height: 1.7em; font-style: normal; } p a{ text-decoration: underline; display: inline; color: var(--color_txt_alt); } button{ background: none; border: none; } figure{ margin: 0; padding: 0; } strong{ font-weight: normal; font-family: "Poppins-Bold"; } span{ display: inline ; } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ .poppins-medium { font-family: "Poppins-Medium"; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .poppins-bold { font-family: "Poppins-Bold"; font-optical-sizing: auto; font-weight: 400; font-style: normal; } /* sizes */ .txt_12 { font-size:12px; } .txt_13 { font-size:13px; } .txt_16 { font-size:16px; } .txt_18 { font-size:18px; } .txt_20 { font-size:20px; } .txt_25 { font-size:25px; line-height: 1.15em; } .txt_30 { font-size: 30px; line-height: 1.15em; } .txt_40 { font-size: 35px; line-height: 1.15em; } .txt_50 { font-size: 50px; line-height: 1.15em; } .txt_60 { font-size: 60px; line-height: 1.15em; } .txt_80 { font-size: 80px; line-height: 1.15em; } .maj{ text-transform: uppercase; } .bold{ font-family: "Poppins-Bold"; } .medium{ font-family: "Poppins-Medium"; } .center{ text-align: center; } .txt_white{ color: white; } .txt_orange{ color: var(--color_asso); } .txt_blue{ color: var(--color_team); } .txt_deep_blue{ color: var(--color_deep_blue); } .txt_bg_white{ background-color: white; line-height: 1em; padding: 0.3em 0.4em; } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^/^^ /^^ /^^ */ .bg_grey{ background: #F4F6FA;} .bg_white{ background: white!important; } .main_page{ min-height: 100vh; } .cover_gradient { -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, black 0%, transparent 80%); mask-repeat: no-repeat; mask-size: 100% 100%; } .margin_vertical{ margin: 120px auto; } .page_flex_v{ align-items: center; padding-top: 4rem; padding-bottom: 4rem; display: flex; flex-direction: column; gap: 4rem; } /* .zoomHover{ opacity: 0; transform: scale(0.8);transition: all 0.6s ease; } .zoomHover.onDisplay { opacity: 1; transform: scale(1); } */ .zoomHover:hover{ transform: scale(1.015); transition: transform 0.07s ease-out; } .cards_grid .popOnDisplay{ height: 100%; width: 100%; } .template_home .cards_grid .popOnDisplay{ opacity: 1!important;} /* @keyframes zoomHoverAppear { 0% { opacity: 0; transform: scale(0.95) translate3d(0, 10px, 0px ); } 100% { opacity: 1; transform: scale(1) translate3d(0, 0px, 0px );; } } */ /* Cta */ .cta_deep_blue{ transition: all .17s; border-radius: 20px; border: 1px solid var(--color_deep_blue); background: var(--color_deep_blue); --color_txt: white; gap: 10px; display: flex;padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .cta_deep_blue:hover{ background-color: var(--color_team); } .cta_deep_blue *{ transition: all .27s; } .cta_deep_blue:hover{ background-color: white; --color_txt: var(--color_deep_blue) } .cta_deep_blue svg path{ stroke:white } .cta_deep_blue:hover svg{ transform: translateX(3px); } .cta_deep_blue:hover svg path{ stroke: var(--color_deep_blue) } .cta_deep_blue_border{ transition: all .17s; border-radius: 20px; border: 1px solid var(--color_deep_blue); background: white; --color_txt: var(--color_deep_blue); gap: 10px; display: flex;padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .cta_deep_blue_border:hover{ background-color: var(--color_team); } .cta_deep_blue_border *{ transition: all .27s; } .cta_deep_blue_border:hover{ background-color: white; --color_txt: var(--color_deep_blue) } .cta_deep_blue_border svg path{ stroke:var(--color_deep_blue) } .cta_deep_blue_border:hover svg{ transform: translateX(3px); } .cta_deep_blue_border:hover svg path{ stroke: var(--color_deep_blue) } .cta_blue{ transition: all .17s; border-radius: 20px;background: var(--color_team); color: white; gap: 10px; display: flex; padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .cta_blue:hover{ background-color: var(--color_deep_blue); } .cta_orange{ transition: all .17s; border-radius: 20px; border: 1px solid var(--color_asso); background: var(--color_asso); color: white; gap: 10px; display: flex;padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .cta_orange *{ transition: all .27s; } .cta_orange:hover{ background-color: white; color:var(--color_asso); } .cta_orange svg path{ stroke:white } .cta_orange:hover svg{ transform: translateX(3px); } .cta_orange:hover svg path{ stroke:var(--color_asso); } .cta_orange_border{ transition: all .17s; border-radius: 20px; border: 1px solid var(--color_asso); background: white; color: var(--color_asso); gap: 10px; display: flex;padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .cta_orange_border *{ transition: all .27s; } .cta_orange_border:hover{ background-color: var(--color_asso); color: white; } .cta_orange_border svg path{ stroke:var(--color_asso) } .cta_orange_border:hover svg{ transform: translateX(3px); } .cta_orange_border:hover svg path{ stroke:white } .cta_white_border{ transition: all .17s; display: flex; gap: 10px; border: 1px solid white; color: white; font-size: 14px; padding: 7px 10px 5px 20px; border-radius: 20px; } .cta_white_border *{ transition: all .27s; } .cta_white_border:hover{ background-color: white; color: var(--color_page_theme); } .cta_white_border svg path{ stroke:white } .cta_white_border:hover svg{ transform: translateX(3px); } .cta_white_border:hover svg path{ stroke:var(--color_page_theme) } .cta_white{ transition: all .17s; border-radius: 20px;background: #fff; border: 1px solid #fff; color: var(--color_page_theme); gap: 10px; font-size: 14px; display: flex;padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .cta_white *{ transition: all .27s; } .cta_white:hover{ background: var(--color_page_theme); color: white; } .cta_white:hover svg path{ stroke:white } .cta_white:hover svg{ transform: translateX(3px); } .cta_white_blue{ transition: all .17s; border-radius: 20px;background: #fff; border: 1px solid #fff; color: var(--color_team); gap: 10px; font-size: 14px; display: inline flex; padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); text-align: center; display: inline-flex; } .cta_white_blue *{ transition: all .27s; } .cta_white_blue:hover{ cursor: pointer; background: var(--color_team); color: white; } .cta_white_blue:hover svg path{ stroke:white } .cta_white_blue:hover svg{ transform: translateX(3px); } .cta_white_orange{ transition: all .17s; border-radius: 20px;background: #fff; border: 1px solid #fff; color: var(--color_asso); gap: 10px; font-size: 14px; display: flex;padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .cta_white_orange *{ transition: all .27s; } .cta_white_orange:hover{ background: var(--color_asso); color: white; } .cta_white_orange:hover svg path{ stroke:white } .cta_white_orange svg path{ stroke:var(--color_asso) } .cta_white_orange:hover svg{ transform: translateX(3px); } .cta_orange{ transition: all .17s; border-radius: 20px;background: var(--color_asso); border: 1px solid var(--color_asso); color:white; gap: 10px; font-size: 14px; display: flex;padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .cta_orange *{ transition: all .27s; } .cta_orange:hover{ background: var(--color_asso); color: white; } .cta_orange:hover svg path{ stroke:white } .cta_orange svg path{ stroke: white } .cta_orange:hover svg{ transform: translateX(3px); } .date{ width: fit-content; display: inline; font-size: 12px; font-family: "Poppins-Medium"; border: 1px solid var(--color_team); border-radius: 20px; padding: 5px 15px; } .cta_bg{ display: flex; gap: 10px; color: var(--color_page_theme); background: #FFF; font-size: 14px; padding: 7px 10px 5px 20px; border-radius: 20px; } .container{ margin-left: auto; margin-right: auto; max-width: var(--site_max_width); } .container_slim{ margin-left: auto; margin-right: auto; max-width: var(--site_slim_width); } .skipper_wrapper .title_rounded, .devenez_partenaires_wrapper .title_rounded{ box-shadow: 0 0 35px 0 rgba(4,166,243,0.8); color: white; background-color: var(--color_page_theme); margin: auto; font-size: 14px; text-transform: uppercase; padding: 8px 30px; border-radius: 20px; } .title_rounded{ box-shadow: 0 0 35px 0 var(--color_halo); color: white; background-color: var(--color_page_theme); margin: auto; font-size: 14px; text-transform: uppercase; padding: 8px 30px; border-radius: 20px; } .title_border{ border: 1px solid var(--color_page_theme); color:var(--color_page_theme); margin: auto; font-size: 14px; text-transform: uppercase; padding: 8px 30px; border-radius: 20px; } .bg_hallo{ position: fixed; top: 0; right: 0; z-index: -1; width: 50vw; height: 100vh; background: radial-gradient(34.99% 95.49% at 100% 60.05%, rgba(4, 166, 243, 0.24) 50%, rgba(50, 102, 133, 0.00) 100%); } /* navbar */ .burger{ display: none; } .navbar{ z-index: 120; position: fixed; top: 0; left: 0; width:100%; align-items: center; padding-top: 40px; padding-bottom: 20px; } .navbar::before { pointer-events: none; content: ""; background: linear-gradient(0, transparent, rgba(0,0,0,0.5) 100%); position: fixed; display: block; top: 0; left: 0; width: 100%; height: 200px; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); } .navbar .container{ gap: 65px; display: flex; justify-content: space-between; } .navbar.hidden{ opacity: 0; } .mobile_logo{ display: none; } .navbar .main_logo{ width: 260px; height: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .navbar .main_logo img{ pointer-events: none; width: 100%; max-height: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .navbar .icon_insta{ width: 1.2rem; } .navbar nav{ display: flex; gap: 30px; align-items: center; width: 100%; justify-content:center} .navbar .nav_right{ justify-content: space-between; width: calc(50% - 160px); display: flex; flex-wrap: wrap; gap: 0px; } .navbar .nav_left{ justify-content: space-between; display: flex; gap: 0px; width: calc(50% - 160px); } .navbar .menu_link:hover{ color: var(--color_deep_blue); background-color: white; } .navbar .menu_link.actif{ background-color: white; color: var(--color_deep_blue); } .navbar .menu_link{ color: white; transition: all .17s; font-size:14px; padding:12px 18px; height: auto; display: inline-block; border-radius: 20px; } .navbar .nav_left .menu_link.defi-solidaire{ color: var(--color_asso); } .navbar .nav_left .menu_link.defi-solidaire:hover{ color: white; background-color: var(--color_asso); } .navbar .nav_left .menu_link.defi-solidaire.actif{ color: white; background-color: var(--color_asso); } .navbar .nav_left .menu_link.defi-sportif{ color: var(--color_team); } .navbar .nav_left .menu_link.defi-sportif:hover{ color: white; background-color: var(--color_team); } .navbar .nav_left .menu_link.defi-sportif.actif{ color: white; background-color: var(--color_team); } .navbar .round_glass{ gap: 5px; padding: 0px; display: flex; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgb(123 125 147 / 35%); backdrop-filter: blur(4px); } .navbar .social_links{ display: flex; gap: 5px; padding: 10px; } .navbar .social_link{ transition: all .2s; display: flex; align-items: center; justify-content: center; border: 1px solid white; width: 25px; height: 25px; border-radius: 25px; } .navbar .social_link:hover{ transform: scale(1.3); background: var(--color_team); border: 1px solid var(--color_team); } /* section_hero */ .section_hero{ padding-top: 255px; padding-bottom: 120px; text-align: center; width: 100%; } .section_hero .content{ margin: auto; max-width: 900px; padding-right: 50px; padding-left:50px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; } .section_hero .content > * { opacity: 0; transform: translateY(10px); animation: fadeUp 1s cubic-bezier(0, 0, 0.36, 1.01) forwards;} .section_hero .content h1 { animation-delay: 0.2s;} .section_hero .content h3 { animation-delay: 0.3s;} .section_hero .content p { animation-delay: 1s; transform: translateY(0px);} /* hero_bg */ .hero_bg{ pointer-events: none; position: fixed;top: 0; z-index: -2; max-height: none; width: 100vw; opacity: 0.3; -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, black 0%, transparent 100%); mask-repeat: no-repeat; mask-size: 100% 100%; } .img_gradient{ background: #161A20; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, black 30%, transparent 100%); mask-repeat: no-repeat; mask-size: 100% 100%; } .img_innershadow{ box-shadow: 0 0 80px 0 rgba(4, 166, 243, 0.50) inset; } .block_heading h3{ font-size: 40px; color: var(--color_team); } .template_contact .page_blocks{ padding-bottom: 120px; gap: 2rem; align-items: center; text-align: center; display: flex; flex-direction: column; justify-content: center; } .template_contact .page_block .paragraphe { align-items: center; text-align: center; display: flex; flex-direction: column; justify-content: center; } /* template_default */ .template_default .page_block{ margin: 2rem auto; } /* section_paragraphe */ .section_paragraphe{ margin: 0 auto; } .section_paragraphe p{ line-height: 1.7em; padding-bottom: 0rem; } .section_paragraphe_links{ width: 100%; margin-top: 2rem; padding-left: calc(var(--grid_unit) + var(--grid_gutter)); padding-right: calc(var(--grid_unit) + var(--grid_gutter)); display: flex; gap: 20px; } .section_paragraphe .texte-tronque { margin-left: calc(var(--grid_unit) + var(--grid_gutter)); margin-bottom: 80px; margin-right: calc(var(--grid_unit) + var(--grid_gutter)); position: relative; max-height: 25em; transition: max-height 0.6s ease; overflow: hidden; transition: max-height 0.5s ease;} .section_paragraphe .ligne { margin-right: calc(var(--grid_unit) + var(--grid_gutter)); margin-left: calc(var(--grid_unit) + var(--grid_gutter)); pointer-events: none; content: ''; width: auto; height: 1px; background-color: white; position: re ; margin-top: 30px; } .section_paragraphe .texte-tronque.ouvert {max-height: none; } .section_paragraphe .texte-tronque.ouvert::after { opacity: 0; pointer-events: none;} .section_paragraphe .btn-lire-suite { margin-right: calc(var(--grid_unit) + var(--grid_gutter)); display: inline-block; margin-top: 1em; background: none; border-bottom: 1px solid var(--color_paragraphe);; padding: 0.5em 1em; font-size: 0.9rem; cursor: pointer; color:var(--color_paragraphe);; transition: background 0.3s; float: right;} .section_citation .container_slim{ padding-right: calc(var(--grid_unit) * 2 + var(--grid_gutter)); padding-left: calc(var(--grid_unit) * 2 + var(--grid_gutter)); } .section_citation .container_slim p{ font-style: italic; display: flex; flex-direction: column; gap: 1rem; } .section_citation .container_slim sub{ font-style: normal; font-size: .8em;} /* template_home */ .template_home{ padding-top: 142px; } .template_home .home_bento{ margin-bottom: 120px; height: 780px; position: relative; border-radius: 20px; background: linear-gradient(233deg, rgb(4 166 243 / 14%) 20.2%, rgba(20, 35, 63, 0.50) 127.07%); padding: 20px; display: grid; grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */ gap: 20px;} .template_home .home_bento .bento-item { gap: 20px; align-items: center; text-align: center; height: 100%; opacity: 0.9; padding: 20px; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: end; } .bento_lien_carto .cover{ } .bento_lien_carto { background-color:#02496B!important; } .template_home .home_bento .bento-item:after{ display: none; } .template_home .home_bento .col1{ grid-column: span 2; /* elle s’étend sur 2 colonnes */ grid-template-columns: repeat(2, 1fr); grid-row: 1; display: grid; gap: 20px; } .template_home .home_bento .col2{ grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 20px; } .template_home .home_bento .col2 .cell4{ flex: 1; height: 50%; } .template_home .home_bento .col2 .cell5{ flex: 1; height: 50%; } .template_home .home_bento .col2 .cell5 .popOnDisplay{ height: 100%; } .template_home .home_bento .col3 { position: relative; height: 100%; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; gap: 20px; } .template_home .home_bento .col3 .col_actus{ display: flex; flex-direction: column; gap: 20px; padding-bottom: 60px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .template_home .home_bento .col3:after{ border-radius: 20px; position: absolute; content: ''; width: 100%; height: 220px; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #161A20 100%); left: 0; bottom: 0; } .template_home .home_bento .col3 .cta_white_blue{ z-index: 3; position: absolute; bottom: 20px; left: 45px; } .template_home .home_bento .cell1 { grid-column: span 2; height: 500px; } .template_home .home_bento .cell1 .bento-item{ background: none; align-items: flex-start; text-align: left; } .template_home .home_bento .cell1 .ligne_links{ display: flex; gap: 20px; } .template_home .home_bento .cell2 .cover_wrapper{ border-radius: 20px; background: linear-gradient(233deg, rgba(4, 166, 243, 0.50) 20.2%, rgba(20, 35, 63, 0.50) 127.07%); backdrop-filter: blur(7.5px); } .template_home .home_bento .cell2 .cover{ opacity: 0.4; border: none; } .template_home .home_bento .popOnDisplay{ height: 100%; } .template_home .home_bento .cell2 .bento-item{ height: 100%; border: 1px solid rgba(255, 255, 255, 0.20); background: linear-gradient(233deg, rgba(4, 166, 243, 0.50) 20.2%, rgba(20, 35, 63, 0.50) 127.07%); } .template_home .home_bento .cell3 .bento-item{ height: 100%; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(232, 78, 15, 0.70); } .template_home .home_bento .cell3 .cover{ opacity: 0.4; } .template_home .home_bento .cell3 .cover_wrapper{ background: rgba(232, 78, 15, 0.70); } .template_home .home_bento .encemoment{ justify-content: space-between; width:100%; height: 100%; } .template_home .hero_video{ position: absolute; border-radius: 20px; overflow: hidden; width: 54%; height: 720px; } .template_home .hero_video video{ width: 100%; aspect-ratio: 1; object-fit: cover; -webkit-mask-image: radial-gradient( circle at top left, black 0%, transparent 95%); mask-image: radial-gradient( circle at top left, black 0%, transparent 80%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; mask-size: 100% 100%; } .bento_lien_carto{ justify-content: space-between!important; border: 0.5px solid rgba(255, 255, 255, 0.21); gap: 20px; align-items: center; text-align: center; height: 100%; opacity: 0.9; padding: 20px; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; background: #02496B; } .bento_lien_carto .title_border { z-index: 3; margin: 0px auto; border: 1px solid white; color: white;} /* section_bento */ .bento { display: grid; grid-template-columns: 60% auto; grid-template-rows: 1fr 1fr; /* 2 lignes égales */ gap: 20px;} .bento-item { height: 100%; opacity: 0.9; background: var(--color_bg_bento); padding: 0px; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: end; padding: 50px;} .bento-item .text{ z-index: 2; text-align: center; line-height: 1.1em; color: var(--color_bento); } .bento-item:after{ content: ''; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: var(--shadow_bento) } .bento-item .cover{ -webkit-mask-image: linear-gradient(to bottom, black 50%, rgba(0.0.0.0.6) 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, black 50%, rgba(0,0,0,0.1) 100%); mask-repeat: no-repeat; mask-size: 100% 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .bento-item .cover_wrapper{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* .bento-item:after{ pointer-events: none; z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; box-shadow: 0 0px 80px 0 var(--color_halo) inset; opacity: 1;} */ .bento_left .bento-item:first-child { grid-row: 1 / span 2; aspect-ratio: 1; overflow: hidden;} .bento_right .bento { display: grid; grid-template-columns: auto 60%; gap: 20px; } .bento_right .bento-item:nth-child(1) { grid-column: 1; grid-row: 1;} .bento_right .bento-item:nth-child(2) { grid-column: 1; grid-row: 2;} .bento_right .bento-item:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 1; } .bento_video{ display: flex; display: flex; flex-direction: column; justify-content: end; padding: 50px; } .bento_video .plyr{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .bento_video iframe{ width: 100%; height: 100%; overflow: hidden; object-fit: cover; border: none;} .bento_video .bento_video_play{ transition: all .3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .bento_video:hover .bento_video_play{ transform: scale(1.2) translate(-50%, -50%); } .bento_video .plyr__video-wrapper{ background: none;} .bento_texte{ border: 1px solid rgba(78, 78, 78, 0.20); background-color: var(--color_bg_bento_numbers); justify-content: center; padding: 20px; align-items: center; text-align: center; flex-direction: column; gap: .6rem;} .bento_texte:after{ z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; box-shadow: 0 0px 0px 0 var(--color_halo) inset; opacity: 1;} .bento_texte .gradient{ background: var(--color_txt_gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .template_defi-sportif .bento_texte{ background: white; --color_bento: var(--color_page_theme); } .bento_texte .text{ color:var(--color_page_theme) } .bento_link{ display: flex; background-color: var(--color_bg_bento_numbers); flex-direction: column; gap: 10px; align-items: center; justify-content: center; border-radius: 20px;border: 1px solid rgba(232, 78, 15, 0.20);backdrop-filter: blur(5px); } .bento_link:after{ display: none; } .bento_link .link_cover{ width: 320px; max-width: 90%; max-height: 70%; } .bento_link .fleche{ transition: all .3s; } .bento_link:hover .fleche{ transform: translate(10px); } .bento_link .fleche path{ stroke: var(--color_page_theme) } .bento_link .fleche circle{ stroke: var(--color_page_theme) } .bento-gallery{ overflow: hidden; background: var(--color_bg_page); } .bento-gallery a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} .bento-gallery a.gallery_cover img{ width: 100%; height: 100%; object-fit: cover; } .bento-gallery a.hidden_link{ display: none;} .bento-gallery .icon{ pointer-events: none; touch-action: none; z-index: 11; position: absolute; transition: all .17s; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) } /* .bento-gallery:hover .icon{ transform: scale(1.1) rotate(10deg) translateX(-50%) translateY(-50%); } */ /* .bento-gallery .cover{ transition: all .7s; z-index: 10; } */ /* .bento-gallery:hover .cover{ transform: scale(1.1) rotate(-5deg) ; } */ .bento-gallery .cover{ -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0.0.0.0.6) 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.1) 100%); mask-repeat: no-repeat; mask-size: 100% 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* padz */ .pad{ gap: 10px; border-radius: 20px; padding: 40px; display: flex; flex-direction: column; justify-content: end;} .boat_container{ background-color: white; padding-bottom: 120px; scroll-padding-top: 220px;} .boat_container .section_paragraphe{ --color_paragraphe: var(--color_team); } .boat_container:before{ content: ""; background-color: white; z-index: -1; width: 100%; height: 200px; position: absolute; top: -0; transform: translateY(-100%); } /* sliders */ .section_slider .swiper-slide{ align-items: center; flex-direction: column; padding: 40px; gap: 20px; display: flex; justify-content: space-between; overflow: hidden; width: 413px; min-height: 413px; border-radius: 20px; background: #161A20; box-shadow: 0 0 100px 0 rgba(4, 166, 243, 0.50) inset; } .section_slider .swiper-slide .logo{ width: 240px; height: 160px; object-fit: contain; } .section_slider.section_victoires .swiper-slide .bg{ width: 50%; height: 50%; object-fit: contain; } .section_slider.section_victoires .flex_h{ display: flex; gap: 10px; } .section_slider.section_victoires .logo{ height: 105px; filter: grayscale(1); mix-blend-mode: hard-light; } .section_slider_lightgrey .swiper-slide{ --color_paragraphe: var(--color_deep_blue); box-shadow:none; align-items: center; flex-direction: column; padding: 40px; display: flex; justify-content: space-around; overflow: hidden; width: 413px; min-height: 267px; border-radius: 20px; background: #E5EAF3; } .team_slider .swiper-slide{ justify-content: flex-end; gap: 10px; aspect-ratio: 1; border-radius: 20px; border: 1px solid rgba(229, 234, 243, 0.30); background: #161A20; box-shadow: 0 0 80px 0 rgba(4, 166, 243, 0.50) inset; } .team_slider .swiper-slide .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .ambassadeurs_slider .swiper-slide{ justify-content: flex-end; gap: 10px; aspect-ratio: 1; border-radius: 20px; border: 1px solid rgba(229, 234, 243, 0.30); background: #161A20; box-shadow: 0 0 80px 0 rgba(4, 166, 243, 0.50) inset; } .ambassadeurs_slider .swiper-slide .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .section_slider .swiper-slide .cover_gradient { -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, black 0%, transparent 80%); mask-repeat: no-repeat; mask-size: 100% 100%; } .section_slider .swiper-slide:after { z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; box-shadow: 0 0px -80px 0 var(--color_halo) inset; opacity: 0.6; } /* section_fullscreen */ .section_fullscreen{ padding: 4rem; background: #14233F; position: relative; width: 100%; overflow: hidden; aspect-ratio: 16/9; } .section_fullscreen .bg{ position: absolute; width: 100%; max-height: none; height: 110%; top: 0%; left:0%; object-fit: cover; } .section_fullscreen title{ z-index: 20; margin: 0 auto; } /* next_page */ .next_page{ padding-top: 0px; display: flex; background: white; } .next_page .cover_wrapper{ position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; } .next_page .cover_wrapper img{ opacity: 0.2; position: absolute; width: 100%; height: 100%; object-fit: cover; } .next_page .col1{ padding-left: 100px; padding-top: 80px; width: 50%; padding-right: 60px; display: flex; flex-direction: column; gap: 20px; justify-content: center; } .next_page .col2{ width: 50%; aspect-ratio: 16/12;display: flex; flex-direction: column; justify-content: center; align-items: center; } .template_defi-sportif .next_page{ color: var(--color_asso); } .next_page:hover{ cursor: pointer; } .next_page .fleche{ transition: all .3s } .next_page:hover .fleche{ transform: scale(1.2); } /* ambassadeurs */ .ambassadeurs{padding-bottom: 120px; } /* section_shopping */ .section_shopping{ --color_paragraphe: white; padding-top: 120px; padding-bottom: 120px; background-color: #F4F6FA; } .section_shopping .container_slim{ display: flex; gap: 24px;} .section_shopping .col1{ height: 390px; width: calc(var(--grid_unit) * 6 + var(--grid_gutter) * 5); ; display: flex; flex-direction: column; gap: 20px; justify-content: center; } .section_shopping .col1 .pad{ padding-left: 60px; padding-bottom: 40px; width: 100%; height: 100%; overflow: hidden; aspect-ratio: 16/9; } .section_shopping .col1 .pad img{ transition: all .17s ease-out; transform: scale(1.05); position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .template_defi-sportif .next_page{ color: var(--color_asso); } .section_shopping .text_gradient_fsp{ background: linear-gradient(90deg, #E84E0F 0%, #53C3FC 100%); background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color: transparent; } .section_shopping .col2{ height: 390px; aspect-ratio: 1; } .section_shopping .col2 .pad{ background: white; aspect-ratio: 1; padding-right: 20%; } .section_shopping .col1 .pad .fleche{ transition: all .27s ease-out; } .section_shopping .col1 .pad .txt_40{ transition: all .27s ease-out; } .section_shopping .col1 .pad .txt_16{ transition: all .27s ease-out; } /* section_partenaires */ .section_partenaires{ background: white; --color_txt: var(--color_deep_blue); X--color_paragraphe : var(--color_deep_blue); color: var(--color_deep_blue); } .section_partenaires .container_slim{ text-align: center; align-items: center; display: flex; justify-content: center; flex-direction: column; gap: 24px;} .section_partenaires .pads{ padding-left: var(--grid_unit); padding-right: var(--grid_unit); display: flex; gap: 13px;} .section_partenaires .pad{ border-radius: 20px; border: 1px solid #E5EAF3;background: rgba(229, 234, 243, 0.38); display: flex; align-items: center; justify-content: center; } .section_partenaires .pad .logo{ width: 200px; height: 140px; object-fit: contain; } .section_partenaires .pad_fsp{ border: 1px solid rgba(232, 78, 15, 0.20); background: rgba(232, 78, 15, 0.08); } /* section_devenez_partenaires */ .section_devenez_partenaires{ background: white; color: var(--color_deep_blue); } .section_devenez_partenaires .container_slim{ display: flex; gap: 24px;} .section_devenez_partenaires .pad{ border-radius: 20px; overflow: hidden; background: rgba(229, 234, 243, 1); display: flex; align-items: center; justify-content: center; } .section_devenez_partenaires .col1{ --color_txt: white; height: 390px; width: 46%; ; display: flex; flex-direction: column; gap: 20px; justify-content: center; } .section_devenez_partenaires .col1 .pad{ justify-content: flex-end; min-height:380px; height: 100%; display: flex; align-items: center; flex-direction: column; } .section_devenez_partenaires .col1 .pad img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .section_devenez_partenaires .col1 .pad .gradient{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(4, 166, 243, 0.00) 29.9%, #04A6F3 99.97%); } .section_devenez_partenaires .col1 .pad .content{ z-index: 22; display: flex; align-items: center; text-align: center; gap: 20px; color: white; flex-direction: column; } .section_devenez_partenaires .col2 .pad{ --color_txt: var(--color_deep_blue); justify-content: flex-end; min-height: 390px; height: 100%; ; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } /* composant_footer */ .composant_footer{ background: var(--color_deep_blue); --color_txt: white; color: white; } .composant_footer .container{ font-family: "Poppins-Medium"; display: flex; padding: 20px; align-items: center; justify-content: space-between; } .composant_footer .right{display: flex; gap: 20px; align-items: center;} .composant_footer .right .vmg_crew{display: flex; gap: 20px; align-items: center;} /* .template_defi-solidaire */ .template_defi-solidaire .section_slider .swiper-slide{ justify-content: flex-start; min-height: 300px; color: var(--color_asso); background: #FFF; box-shadow: 0 0 100px 0 rgba(232, 78, 15, 0.20) inset; } .template_defi-solidaire .section_slider .swiper-slide p{ max-width: 80%; line-height: 1.2em; text-align: center; color: var(--color_asso);} .template_defi-solidaire .bg_orange{ --color_paragraphe:white; --color_bento: white; display: flex; gap: 40px; flex-direction: column; align-items: center; padding: 120px 0; background-color: var(--color_asso); } .template_defi-solidaire .programme_dates { width: 100%; } .template_defi-solidaire .programme_dates .programme_date{ width: 100%; display: flex; justify-content: space-between; padding: 1rem 0; border-top: 1px solid grey; } .template_defi-solidaire .programme_dates .programme_date .ligne1{ width: 50%; } .template_defi-solidaire .bg_orange{ --color_bg_bento: #fff; --color_txt: white;} .template_defi-solidaire .bg_orange .title_rounded{ box-shadow: 0 0 35px 0 white; } /* .template_defi-solidaire .bg_orange .title_rounded{ box-shadow: 0 0 35px 0 white; background-color: var(--color_page_theme); margin: auto; font-size: 14px; text-transform: uppercase; padding: 8px 30px; border-radius: 20px; } */ /* .template_defi-sportif */ .template_defi-sportif .section_slider .swiper-slide p{ text-align: center; } .cover_wrapper { position: relative; } .video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* template_partenaires */ .template_partenaires .partenaires_fondateurs{ padding-bottom: 120px; color:var(--color_deep_blue); --color_txt: var(--color_deep_blue); --color_paragraphe: var(--color_deep_blue); } .template_partenaires .partenaires_fondateurs .partenaire-testimonial p{ line-height: 1.5em; font-style: italic; padding-bottom: 1em; --color_txt: var(--color_deep_blue); } .template_partenaires .partenaires_container{ display: flex; flex-direction: column; gap: 20px; } .template_partenaires .partenaire_fondateur{ display: flex; gap: 20px; } .template_partenaires .partenaire_fondateur:nth-child(even){ display: flex; flex-direction: row-reverse; } .template_partenaires .partenaire_fondateur .pad{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; border-radius: 20px; border: 1px solid #E5EAF3; background: #F5F6FA; backdrop-filter: blur(5px); } .template_partenaires .partenaire_fondateur .col1{ width: 50%; padding: 53px 43px 53px 43px; } .template_partenaires .partenaire_fondateur .col2{ width: 50%; padding: 53px 43px 53px 43px; } .template_partenaires .partenaire_logo{ width: 60%; object-fit: contain; } .template_partenaires .partenaires_black_wrapper{ background-color: #161A20; background-image: url(../images/bg_partenaires.jpg); background-position: bottom; background-repeat: no-repeat; background-size: 100% auto; } .template_partenaires .partenaires_grid_item{ display: flex; align-items: center; justify-content: center; flex-direction: column; aspect-ratio: 16/14; border-radius: 20px; border: 1px solid #E5EAF3; width: 100%; } .template_partenaires a.partenaires_grid_item img{ transform: translateY(-15px); } .template_partenaires .partenaires_grid_item img{ mix-blend-mode: screen; width: 200px; max-height:50%; max-width:80%; } .template_partenaires .partenaires_grid_item .fleche{ position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);} .template_partenaires .partenaires_grid_wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; align-items: center; justify-items: center; padding: 0; margin: 0; list-style: none; } .template_partenaires .devenez_partenaires_wrapper .section_devenez_partenaires{ padding-top: 0; background: none; } .template_partenaires blockquote.partenaire-testimonial{margin: 0;} /* template_actus */ .template_actus{ padding-top: 140px; } .template_actus .grid_wrapper { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); color:#000; } .template_actus .grid_item img { width: 100%; aspect-ratio:1; object-fit:cover; border-radius: 1rem; display: block; } .template_actus .error { background: rgb(150, 40, 40); padding: 1rem; margin-bottom: 2rem; border-radius: 8px; font-size: 14px; } .template_actus .cols_wrapper{ padding-bottom: 120px; display: flex; gap: 20px; color: var(--color_deep_blue); --color_paragraphe: var(--color_deep_blue) } /* .template_actus .cols_wrapper p{ display: flex; gap: 20px; color: var(--color_deep_blue); line-height: 1.3em; } */ .template_actus .cols_wrapper .col1{ width: 40%; display: flex; flex-direction: column;gap: 20px;} .template_actus .cols_wrapper .col1 .sticky{ position:sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; } .template_actus .cols_wrapper .col2{ width: 60%; display: flex; flex-direction: column; gap: 20px; } .template_actus .cols_wrapper .carto{ border-radius: 20px; position:sticky; border-radius: 20px; width: 100%; aspect-ratio: 16/9; } .actus_wrapper { padding-bottom: 240px; } .actus_wrapper .loadmore{ margin: 30px auto; } .actus_wrapper .loadmore svg{ transform: rotate(90deg); } .cards_grid .card_item:first-child .icon_platform{ z-index: 5; } /* .cards_grid .card_item:first-child.instagram p{ line-height: 1.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; text-overflow: ellipsis; } */ .encemoment{ gap: 20px; color: white; padding: 20px; align-items: center; display:flex; flex-direction: column; justify-content: space-between; border: 0.5px solid rgba(255, 255, 255, 0.21); background: #02496B; overflow: hidden; border-radius: 20px; width: 100%; } .encemoment .cover{ opacity: 0.3; object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .encemoment .logo{ width: 80%; height: 170px; object-fit: contain; } .encemoment .title_border{ margin: 0px auto;z-index: 3; border: 1px solid white; color: white; } .encemoment p{ color: white!important; } @media (max-width: 1024px) { .partenaire-list { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .partenaire-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .partenaire-list { grid-template-columns: 1fr; } } /* PRESSE */ .template_presse{ padding-top: 0px; } .template_presse .section_hero{ padding-top: 200px; } .template_presse .grid_presse{ gap: 20px; display: grid; grid-template-columns: repeat(3, 1fr); } .template_presse .lien_banque_image{ display: flex; justify-content: space-between; min-height: 320px; gap: 20px; color: white; padding: 20px; align-items: center; display:flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.20); overflow: hidden; border-radius: 20px; grid-column: span 3; display: flex; flex-direction: column; justify-content: end; gap: 20px; } .template_presse .lien_banque_image .cover{ position: absolute; opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .template_presse .bento_item{ min-height: 320px; gap: 20px; color: white; padding: 20px; align-items: center; display:flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.20); background: #02496B; overflow: hidden; border-radius: 20px; } .template_presse .press_wrapper{ display: flex; flex-direction: column; gap: 60px; padding-bottom: 60px; } .template_presse .swiper_presse{ overflow: hidden; margin-bottom: 120px; } .template_presse .swiper_presse .swiper-slide{ width: 320px; padding: 0px; } .template_presse .swiper_presse .item{ border-radius: 20px; aspect-ratio: 1; justify-content: space-between; padding: 20px; background: #161A20; box-shadow: 0 0 100px 0 rgba(4, 166, 243, 0.50) inset; display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; } .template_presse .swiper_presse .cover_wrapper{ transition: all .3s ease-in-out; width: 80%; height: 70%; overflow: hidden;} .template_presse .swiper_presse .cover_wrapper img{ width: 100%; height: 100%; object-fit: contain; } .template_presse .swiper_presse .item .intitule{ min-height:170px; width: fit-content;} .template_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); } .template_presse .card_article{ min-height: 280px; } /* template_article */ .template_article .hero_intro{ text-align: left; padding: 0 70px; font-size: 20px; font-family: "Poppins-Bold"; } .template_article .article_wrapper{ padding-bottom: 120px; display: flex; flex-direction: column; gap: 80px; } .template_article .block_paragraphe{ padding: 0 0px; } .template_article .block_paragraphe .paragraphe { padding: 0 120px; display: flex; flex-direction: column; gap: 1em; } .template_article .block_citation{ padding: 0 120px; } .template_article .block_columns blockquote, .template_article .block_citation blockquote{ margin: 0px; padding-right: 10%; } .template_article .block_columns .citation_txt, .template_article .block_citation .citation_txt{ line-height: 1.6em; } .template_article .block_columns .citation_signature, .template_article .block_citation .citation_signature{ opacity: 0.6; padding-top: 1rem; padding-left: 1rem; text-align: left; } .template_article .block_photo figure{ width: 100%; display: flex; flex-direction: column; gap: 10px; } .template_article .block_photo figure img{ width: 100%; } .template_article .block_photo .copyright{ position: absolute; bottom: 10px; right: 10px; } .template_article .block_video{ width: 100%; display: flex; flex-direction: column; gap: 20px; } .template_article .block_video figure{ width: 100%; display: flex; flex-direction: column; gap: 20px; } .template_article .block_video iframe{ width: 100%; border-radius: 30px; filter: drop-shadow(0 0 80px rgba(4, 167, 243, 0.2)); border: 1px solid rgba(255, 255, 255, 0.20); aspect-ratio: 16/9; height: fit-content; } .template_article .block_video figcaption{ width: 100%; } .template_article .block_heading h2{ border: 1px solid var(--color_page_theme); color: var(--color_page_theme); margin: auto; font-size: 14px; text-transform: uppercase; padding: 8px 30px; border-radius: 20px; } .template_article .block_heading h3{ margin: auto; text-transform: uppercase; font-size: 40px; text-align: center; } .template_article .block_heading h4{ margin: auto; text-transform: uppercase; font-size: 25px; } .template_article .block_button{ display: flex; justify-content: center; } .template_article .block_columns { padding: 0 120px; } .template_article .block_columns .grid{ display: grid; grid-template-columns: repeat(12, 1fr); /* 12 colonnes */ gap: 2rem; /* espace entre les colonnes */ } .template_article .block_columns .column { grid-column: span var(--columns); /* utilise ta variable CSS */} /* section_contact */ .section_contact .container{ display: flex; gap: 20px; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-bottom: 120px; } .section_contact .container .heading{ gap: 20px; display: flex;flex-direction: column; justify-content: center; align-items: center; text-align: center; } .section_contact .cols{ width: 100%; display: flex; gap: 20px; } .section_contact .cell{ width: 33%; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; background-color: antiquewhite; align-items: center; justify-content: space-between; display: flex; flex-direction: column; gap: 20px; padding: 24px; } .section_contact .cell1{ border-radius: 20px; border-radius: 20px; border: 1px solid rgba(229, 234, 243, 0.30); background: #161A20;box-shadow: 0 0 80px 0 rgba(4, 166, 243, 0.50) inset; background: linear-gradient(180deg, #85888D -14.35%, rgba(229, 234, 243, 0.00) 73.25%); } .section_contact .cell2{ border: 1px solid #E5EAF3; background: #F5F7FA; } .section_contact .cell3{ border-radius: 20px; border: 1px solid rgba(229, 234, 243, 0.30); background: #E84E0F; box-shadow: 0 0 80px 0 rgba(4, 166, 243, 0.50) inset; } .section_contact .cell .bg{ opacity: 0.4; position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .section_contact .form_wraper{ align-items: center; padding: 6px; display: flex; justify-content: space-between; width: 100%; height: 40px; border-radius: 40px; border: 1px solid rgba(229, 234, 243, 0.30); background: rgba(22, 26, 32, 0.00); backdrop-filter: blur(2px); } .section_contact .form_wraper .flex_h{ display: flex; } .section_contact .mc-field-group{ width: 100%; } .section_contact .email{ width: 100%; } .section_contact .newsletter_fields{ width: 100%; display: flex; justify-content: space-between; } .section_contact .newsletter_fields{ width: 100%; display: flex; justify-content: space-between; } .section_contact .form_wraper .mc-field-group{ padding: 5px 15px; display: flex; justify-content: flex-start; } .section_contact .form_wraper .cta_blue{ transition: all .17s; border-radius: 20px;background: var(--color_team); color: white; gap: 10px; display: flex; padding: 6px 10px 6px 15px; align-items: center;backdrop-filter: blur(25px); } .section_contact .form_wraper .cta_blue:hover{ cursor: pointer; background-color:white; color: var(--color_team); } .section_contact .form_wraper .foot{ height: auto; display: flex; flex-direction: column; justify-content: center;} .section_contact .social_links{ display: flex; gap: 5px; padding: 10px; border-radius: 40px ; } .section_contact .social_link{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all .2s; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color_team); width: 36px; height: 36px; border-radius: 25px; } .section_contact .social_link svg{ width: 40px; height: 40px; max-width: 60%; max-height: 60%; } .section_contact .social_link path{ fill: var(--color_team); } .section_contact .social_link:hover{ background: var(--color_team); } .section_contact .social_link:hover path{ fill: white; } .section_contact input{ background: none; border: none; color: white; } .template_carto .main_page{ padding-bottom: 80px; } .template_carto .section_hero{ padding-top: 160px; padding-bottom: 40px; } .template_carto .section_hero .subtitle{ max-width: 20ch; } .module_carto .cols{ display: flex; gap: 20px; height: 80vh; min-height: 580px; } .module_carto .col1{ width: 65%; z-index: 5; } .module_carto .col2{ width: 35%; z-index: 6; } .module_carto #map{ background-color: var(--color_bg_page);; filter: drop-shadow(0 0 80px rgba(4, 166, 243, 0.26)); z-index: 4; position: absolute; top: 0; left:0; width: 100%; height: 100%;; border-radius: 20px; filter: drop-shadow(0 0 80px rgba(4, 166, 243, 0.26)); } .module_carto .popOnDisplay { opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } .module_carto .popOnDisplay.show { opacity: 1!important; transform: translateY(0)!important; } .module_carto .carto_navbar{ position: absolute; top: 20px; padding: 5px; width: auto; left: 20px; z-index: 20; gap: 5px; display: flex; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgb(123 125 147 / 35%); backdrop-filter: blur(4px); } .module_carto .nav_select { color: white; background: transparent; border: 1px solid white; border-radius: 20px; background: rgb(123 125 147 / 35%); padding: 8px 14px; font-size: 14px; font-weight: bold; appearance: none; cursor: pointer;} .module_carto .nav_select { color: black; background: white; } .module_carto .nav-prev, .module_carto .nav-next { background: white; color: var(--color_deep_blue, #0b76ef); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-weight: bold; transition: background .2s; display: flex; align-items: center; justify-content: center;} .module_carto .nav-prev:hover svg path, .module_carto .nav-next:hover svg path { stroke: var(--color_team); } .module_carto .nav-content{ display: flex; gap: 5px; } .module_carto .leaflet-popup-tip{ display: none; } .module_carto .leaflet-popup-content-wrapper, .leaflet-popup-tip{ font-family: "Poppins-Bold";; box-shadow: 0 0 14px 0 rgba(55, 55, 55, 0.25); border-radius: 20px; border: 1px solid rgba(155, 155, 155, 0.30); background: rgb(55 55 55 / 35%); backdrop-filter: blur(4px); } .module_carto .leaflet-container a.leaflet-popup-close-button{ display: none; } .module_carto .leaflet-popup { width: 240px; } .module_carto .carto-popup{ font-family: "Poppins-Medium"; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:10px; } .module_carto .carto-popup .leaflet-popup-tip{ display: none; } .module_carto .carto-popup .date { width: fit-content; display: inline; font-size: 12px; background: none; font-family: "Poppins-Medium"; border: 1px solid var(--color_team); border-radius: 20px; padding: 7px 25px; } .module_carto .carto-popup h3{ text-align: center; } .module_carto .leaflet-left{ position: absolute; top: 500px; left: 10px; } .module_carto .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{ padding: 5px; width: auto; left: 0px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgb(123 125 147 / 35%); backdrop-filter: blur(4px); } .leaflet-container{ font-family: "Poppins-Medium"; } .module_carto .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; } .module_carto .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;} .leaflet-control-zoom a:hover { background: rgba(0,0,0,0.8); } /* style par défaut des puces */ /* état actif */ .template_carto .point-tags{ font-family: "Poppins-Bold";; box-shadow: 0 0 14px 0 rgba(55, 55, 55, 0.25); border-radius: 20px; border: 1px solid rgba(155, 155, 155, 0.30); background: rgb(55 55 55 / 35%); backdrop-filter: blur(4px);} .template_carto .point-details{ display: none; font-family: "Poppins-Medium"; align-items: center; display: none; flex-direction: column; justify-content: center; gap: 10px; } .template_carto .point-details{ font-family: "Poppins-Bold";; box-shadow: 0 0 14px 0 rgba(55, 55, 55, 0.25); border-radius: 20px; border: 1px solid rgba(155, 155, 155, 0.30); background: rgb(55 55 55 / 35%); backdrop-filter: blur(4px); } .template_carto .point-details .lieu{ max-width: 60%; align-items: center; display: flex; justify-content: center; gap: 10px; } .template_carto .point-details .photos img{ aspect-ratio: 16/9; border-radius: 20px; object-fit: cover; } .template_carto .module_carto .social-posts{ padding: 20px; --color_paragraphe:var(--color_deep_blue); background-color: white; border-radius: 20px; color: var(--color_deep_blue); } .template_carto .point-details .date{ display: none; } .template_carto .point-tags{ text-align: center; width: 100%; opacity: 1; margin: 10px auto; font-family: "Poppins-Medium"; } .template_carto .module_carto .marker-number:hover {border:2px solid #04A6F3;} .template_carto .module_carto .marker-number { animation: pulse 2s infinite; display: inline-block; top: 26px; width: 26px; height: 26px; border-radius: 50%; border:2px solid rgba(255,255,255,0.4);; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: transform 0.2s ease, background 0.2s ease; z-index: 2; background-color: none; } .template_carto .module_carto .marker-number:after{ border-radius: 50%; background-color: white; content: ""; width: 12px; height: 12px; position: absolute; top: 5px; left: 5px; } .template_carto .module_carto .leaflet-marker-icon.active .marker-number { background: var(--color_team); /* couleur différente */ transform: scale(1.1); /* un petit zoom visuel */ border-radius: 25.95px;border: 2px solid #04A6F3;box-shadow: 0 0 20px 5px #04A6F3; z-index: 10 } .template_carto .module_carto .col1{ pointer-events: none; height: 100%; width: 100%; } .template_carto .module_carto .col2{ position: absolute; right: 10px; top: 0px; padding-bottom: 40px; height: auto; max-height: 100%; overflow: scroll; } /* Pour Chrome, Safari, Edge */ .custom_scroll{ overflow-y: auto; } .custom_scroll::-webkit-scrollbar { width: 1px; /* largeur fine */ } .custom_scroll::-webkit-scrollbar-track { background: transparent; /* pas de fond intrusif */} .custom_scroll::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.3); /* gris discret */ border-radius: 10px; /* arrondi élégant */ transition: background 0.3s ease; } .custom_scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.5); /* un peu plus visible au survol */ } .custom_scroll { /* Pour Firefox */ scrollbar-width: thin; /* réduit l’épaisseur */ scrollbar-color: rgba(0,0,0,0.3) transparent;} .template_socialwall{ padding-top: 120px; } /* .template_socialwall .actu_item{ width: calc(33% - 13px); } */ .social_wall{ display: flex; flex-wrap: wrap; gap: 20px; } /* .template_socialwall .cover_wrapper{ aspect-ratio: 1; } */ /* .template_socialwall .actu_item{ width: calc(50% - 10px ); --color_paragraphe:var(var(--color_deep_blue)) } .template_socialwall .actu_item:first-child { width: calc(63% + 26px ); justify-content: center; } .template_socialwall .actu_item:first-child .txt_wrapper{ height: 100%; } .template_socialwall .actu_item:first-child .date{ position: absolute; bottom: 10px; left: 10px; } .actu_item p { --color_paragraphe: var(--color_deep_blue) } */ /* .social_wall .actu_item .txt_wrapper{ width: 100%;} */ .cards_grid{ gap: 20px; display: grid; grid-template-columns: repeat(3, 1fr); } /* .actu_item{ transition: box-shadow .37s; transition: transform .17s; width: 100%; } */ .card_item p { color: var(--color_deep_blue); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5em; padding-right: 1em; padding-top: 0.2em; overflow: hidden; text-overflow: ellipsis; } .card_item{ min-height: 168px; height: fit-content; border-radius: 16px; overflow: hidden;} .card_item .tags .tag{ display: inline-block; color: var(--color_team); font-family: "Poppins-Medium"; font-size: 10px; padding: 2px 8px; background: #0ca2ea30; border-radius:20px; } .card_item .tags .tag button{color: white; text-transform: uppercase; font-size: 10px; font-family: "Poppins-Medium"; letter-spacing: 0em; } .card_item .tags .tag a { display: inline-block; } .card_item .tags .tag a:data-title { display: none; } .card_item.youtube .tags .tag{ background: #cfefffe0; color: var(--color_team); } /* youtube */ .card_item.youtube{ min-height: 168px; } .card_item.youtube .txt_wrapper{min-height: 168px; padding-top: 20px; z-index: 2; width: 100%; height: 100%;top: 0; left: 0; text-align: center; display: flex; flex-direction: column;gap: 10px; justify-content: space-between; } .card_item.youtube .txt_wrapper .txt{ width: 100%; text-align: center; } .card_item.youtube .txt_wrapper .txt h3{ width: 100%; text-align: center; } .card_item.youtube .title{ padding-left: 10%; padding-right: 10%; } .card_item.youtube .cover_wrapper{ width: 100%; position: absolute; height: 100%;} .card_item.youtube .cover_wrapper:after{ z-index: 1; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.7)0% , rgba(0,0,0,0)40%, rgba(0,0,0,0)50%, rgba(0,0,0,0.6)100% ); } .card_item.youtube .icon_platform{ opacity: 0.8; } /* Article */ .card_article{ background: var(--color_deep_blue); display: flex; justify-content: space-between; gap: 10px; color: white; padding: 20px; align-items: center; display:flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.20); overflow: hidden; border-radius: 20px; } .card_article .surtitre{ display: inline-block; color: white;; font-family: "Poppins-Medium"; font-size: 10px; text-transform: uppercase; padding: 2px 8px; background: var(--color_page_theme); color: white; border-radius:20px; } .card_item.card_article .text_wrapper{ width: 100%;padding: 12px 0; gap: 8px; display: flex; justify-content: center; text-align: center; align-items: center; flex-direction: column; } .card_item.card_article .text_wrapper .title{ padding: 0;} .card_item.card_article .bottom{ width: 100%; gap: 20px; align-items: flex-end; display: flex; justify-content: space-between; } .card_item.card_article .cover_wrapper{ object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .card_item.card_article .cover{ object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .card_item.card_article .ligne2{ gap: 20px; display:flex; flex-direction: column; align-items: center; justify-content: center; } .card_item.card_article .cover{ opacity: 0.3; object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .card_item.card_article .logo{ width: 120px; height: 120px; object-fit: contain; } .card_item.card_article .title_rounded{ margin: 0px auto; font-size: 14px; border: 1px solid white; color: white; } .card_item.card_article p{ color: white!important; } .card_item.card_article .tags{ display: none; } .card_item .tags{ padding: 0; margin: 0; display: flex; gap: 5px 3px; width: 100%; flex-wrap: wrap; } .actu_item{ height: fit-content; background: #E3F5FE; border-radius: 20px; width: 100%; display: flex; gap: 10px; border-radius: 20px; overflow: hidden; } .actu_item{ transition: all .15s;} .actu_item:hover{ transform: scale(1.015);} .actu_item .cover_wrapper { width: 35%; overflow: hidden; } .actu_item .cover_wrapper .cover{ position: absolute; width: 103%; height: 103%; object-fit:cover; } .actu_item .cover_wrapper.youtube{ aspect-ratio: 2; } .actu_item .cover_wrapper .cover_icon{ width: 46px; height: 46px; z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .actu_item .tags{ color: #9c9c9c; } .actu_item .icon_platform{ position: absolute; bottom: 10px; right: 10px; } .actu_item .text{ line-height: 1.5em; } .actu_item .txt_wrapper{ min-height: 140px; padding: 10px; height: auto; width: 65%; display: flex; flex-direction: column;gap: 10px; justify-content: space-between; } .card_item.instagram.video .cover_wrapper:after{ z-index: 1; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.6)0% , rgba(0,0,0,0.1)100% ); } /* .card_item:hover{ box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0); transform: scale(1.03) translateY(-3px); } */ /* .card_item:hover .cover_wrapper .cover{ transform: scale(1.05); } */ .cards_grid .popOnDisplay:first-child { grid-column: span 2; aspect-ratio: 16/8; } .cards_grid .popOnDisplay:first-child .instagram{ height: 100%; width: 100%; border: 1px solid rgba(229, 234, 243, 0.30); background: #161A20; box-shadow: 0 0 80px 0 rgba(4, 166, 243, 0.50) inset; grid-column: span 2; /* si tu utilises CSS Grid → ça le fait deux fois plus large */ grid-row: span 2; /* pour le rendre plus haut aussi */ } .cards_grid .popOnDisplay:first-child .instagram{ object-fit: cover; grid-column: span 2; /* si tu utilises CSS Grid → ça le fait deux fois plus large */ grid-row: span 2; /* pour le rendre plus haut aussi */ font-size: 1.2em; /* accentuer la typographie */ aspect-ratio: 16/9; } .cards_grid .popOnDisplay:first-child .instagram .txt{ z-index: 4; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cards_grid .popOnDisplay:first-child .instagram p { display: -webkit-box; -webkit-line-clamp: 3; /* nombre de lignes max */ -webkit-box-orient: vertical; overflow: hidden; text-align: center; width: 100%; padding: 0; font-size: 25px; color: white; width: 100%; color: white; } .cards_grid .popOnDisplay:first-child .instagram .txt_wrapper{ width: 100%; } .cards_grid .popOnDisplay:first-child .instagram .cover_wrapper{ border-radius: 20px; overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .cards_grid .popOnDisplay:first-child .instagram .cover{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; } .cards_grid .popOnDisplay:first-child .instagram .cover_wrapper:after{ z-index: 3; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.95));} .cards_grid .popOnDisplay:first-child .instagram .txt_wrapper{ justify-content: flex-end; z-index: 4; } .cards_grid .popOnDisplay:first-child .instagram .cover_wrapper:before{ z-index: 4; content:"à la Une"; box-shadow: 0 0 20px 0 rgba(255,255,255,0.5); color: white; background-color: var(--color_team); margin: auto; font-size: 14px; text-transform: uppercase; padding: 8px 30px; border-radius: 20px; text-transform: uppercase; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); } .cards_grid .popOnDisplay:first-child .instagram .tags { justify-content: center; } .cards_grid .popOnDisplay:first-child .youtube{ aspect-ratio: 16/8; } .template_home .cards_grid .popOnDisplay:first-child{ grid-column: span 1; grid-row: span 1; aspect-ratio: 3/3.7; } .template_home .cards_grid .popOnDisplay:first-child .instagram p{ -webkit-line-clamp:6; font-size: 15px; } .template_home .cards_grid .popOnDisplay:first-child .youtube { height: 100%; } ube .cover_wrapper:after{ z-index: 1; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.7)0% , rgba(0,0,0,0)100% ); } /* page actu : */ .template_actus .cards_grid { grid-template-columns: repeat(2, 1fr); } .template_home .cards_grid { grid-template-columns: repeat(1, 1fr); } .template_home .actu_item p{ line-height: 1.3em; display: -webkit-box; /* Nécessaire pour activer le mode boîte flexible */ -webkit-box-orient: vertical; /* Définit l’orientation */ -webkit-line-clamp: 3; /* Nombre de lignes maximum */ overflow: hidden; /* Masque le texte qui dépasse */ text-overflow: ellipsis; /* Ajoute "..." à la fin */} .cards_grid_carto{ gap: 20px; padding: 0 10px; display: grid; grid-template-columns: repeat(1, 1fr); } /* .cards_grid_carto .popOnDisplay{ transition: opacity .3s; opacity: 1!important;} */ .glightbox-clean .gslide-media{ width: 800px; aspect-ratio: 16/9; } .glightbox-clean .gslide-media img{ width: 800px; aspect-ratio: 16/9; object-fit: contain; } .glightbox-container .ginner-container.desc-bottom, .glightbox-container .ginner-container.desc-top{ width: 800px; } /* Responsivité Lightbox */ .goverlay{ backdrop-filter: blur(25px); } .glightbox-clean .gslide-media{ background: none; box-shadow: none; /* background: #000000; border-radius: 20px; padding: 10px; border-radius: 20px; filter: drop-shadow(0 0 80px rgba(4, 167, 243, 0.2)); border: 1px solid rgba(255, 255, 255, 0.20); */ } .glightbox-clean .gdesc-inner{ width: 800px; border-radius: 20px; margin: auto; } .glightbox-clean .gslide-description{ max-width: 800px!important; } .gslide-image img.zoomable, .glightbox-clean .gslide-media img{ background: #000000; border-radius: 20px; /* object-fit: contain; */ max-width: 720px; max-height: 70VH!important; width: auto; height: auto; object-fit: contain!important; aspect-ratio: auto; /* padding: 10px; */ border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.20); } .glightbox-container video { width: 100%; height: 100%; border-radius: 20px; padding: 10px; background: #161A20; overflow: hidden; } .gslide-video .gvideo-wrapper { width: 100%; margin: auto; border-radius: 20px; overflow: hidden; } .glightbox-clean .gslide-description{ background:none; border-radius: 0 0 20px 20px; } .glightbox-clean .gdesc-inner{ background:none; border-radius: 0 0 20px 20px; } .glightbox-clean .gslide-title{ font-family: "Poppins-Medium"; font-size: 13px; color: white; text-align: center; margin: auto; } .glightbox .caption { font-size: 13px; color: #fff; line-height: 1.4; } .glightbox .caption h3 { color: #04A6F3; margin-bottom: 4px; } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @media ( max-width: 800px){ :root { --site_slim_width: 96%; } .txt_80 { font-size: 50px; } .txt_18 { font-size: 16px; } .txt_25{ font-size: 18px;} .txt_40 { font-size: 24px; } .txt_16 { font-size: 14px; } .txt_30 { font-size: 18px; } .txt_50 { font-size: 33px } .txt_60 { font-size: 40px; } .txt_80 { font-size: 40px; } body{ overflow-x: hidden; position: absolute;} .navbar{ display: none; } .navbar::before{ display: none; z-index: 111; } .mobile_logo{ display:block; width: 260px; z-index: 22; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); } .mobile_logo img{ width: 100%; } .burger{ z-index: 200; transition: all .17s; display: flex; gap: 3px; flex-direction: column;justify-content: center; align-items: center; justify-items: center; width: 40px; height: 40px; border-radius: 100%; position: fixed; top: 40px; left: 100%; transform: translateX(calc(-100% - 25px)); border: 1.5px solid var(--color_txt); border-radius: 40px; } .burger:hover{ gap: 5px; cursor: pointer; } .burger span{ transition: all.17s; transform-origin: center; width: 18px; height: 2px; background-color: var(--color_txt); border-radius: 2px; } .shownav .burger{ --color_txt: white; } .shownav .burger span{ position: absolute; } .shownav .burger span:nth-child(1){ transform: rotate(45deg) } .shownav .burger span:nth-child(2){ transform: rotate(-45deg) } .shownav .burger span:nth-child(3){ transform: rotate(-45deg) } .shownav .navbar{ transform: scale(1) translateY(0%); visibility: visible; opacity: 1; } .navbar{ backdrop-filter: blur(12px); justify-content: center; justify-content: space-evenly; min-height: 100vh; transition: all .3s; visibility: hidden; opacity: 0; display: flex; transform: scale(1.05) translateY(-5px); background-color: rgba(0, 0, 0, 0.50); flex-direction: column; z-index: 190; gap: 1rem; position: fixed; top: 0px; left: 0; width: 100%; width: 100vw; height: 100vh; } .navbar .container{ width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column; } .navbar .nav_left{ flex-direction: column; } .navbar .round_glass{ flex-direction: column; padding: 10px; } .navbar .round_glass a{ width: 60vw; text-align: center; } .navbar .round_glass a.social_link{ width: 25px;} .navbar .social_links{ flex-direction: row; } .navbar .nav_right{ gap: 65px; justify-content: center;} .navbar .main_logo{ top: 40px; } .navbar .nav_left{ padding-top: 80px; } .hero_bg{ width: 100%; height: auto; z-index: 1; } .section_hero{ padding-top: 200px; padding-bottom: 20px; } .section_hero .content p{ font-size: 14px; } .next_page .cover_wrapper{ position: absolute; width: 100%; left: 0; top: 0; } .template_defi-sportif .next_page{ } .next_page .col1{ padding-bottom: 60px; } .bento{ gap: 2vw; } .bento .txt40{ font-size: 16px; } .bento-item .text{ font-size: 16px; } .bento_texte .txt_60{ font-size: 28px; } .bento_left .bento-item{ min-height: 200px;} .bento_left .bento-item:first-child{ aspect-ratio: 4/3; grid-column: span 2;} .bento_right .bento{ display: flex; flex-direction: column; } .bento_right .bento-item{ min-height: 200px;} .bento_right .bento-item{ aspect-ratio: 4/3; grid-column: span 2;} .bento_right .bento-item:last-child{ aspect-ratio: 4/3; grid-column: span 2;} .bento-item { padding: 4vw } .section_paragraphe p{ margin-left: 0; margin-right: 0; } .section_paragraphe .ligne {margin-left: 0; margin-right: 0; width: 100%; } .section_paragraphe .texte-tronque {margin-left: 0; margin-right: 0; } .section_paragraphe .btn-lire-suite{ margin-left: 0; margin-right: 0; } .section_citation .container_slim{ margin-left: 12%; margin-right: 10%; padding-left: 0; padding-right: 0; } .section_slider .swiper-slide{ width: 60vw; min-height: auto; min-height: 300px; } .section_slider.section_victoires .swiper-slide .bg{ height: 120px; width: 120px; } .section_slider .swiper-slide .cover_gradient{ width: 100%; height: 100%; } .section_devenez_partenaires .container_slim{ flex-direction: column; } .section_devenez_partenaires .col1{ width: 100%; } .section_devenez_partenaires .col2 .pad{ width: 100%; } .section_shopping .col1{ width: 100%; } .composant_footer .container{ flex-direction: column; gap: 20px; text-align: center; justify-content: center; align-items: center; } .composant_footer .right{ flex-direction: column; gap: 20px; justify-content: center; align-items: center; } .section_devenez_partenaires{ padding-bottom: 2vw; } .swiper-free-mode>.swiper-wrapper{ padding-left: 15vw;} .template_defi-sportif .section_slider .swiper-slide{ height: 100%; } .section_slider .swiper-slide { width: 70vw; /* largeur fixe des slides */ } .section_slider .swiper-wrapper{ height: 400px; } .section_fullscreen{ aspect-ratio: 16/9;} .next_page .col1{ padding-left: 20px; padding-right: 20px} .template_home{ padding-top: 0;} .template_home .home_bento{ height: 780px; margin-top: 180px; display: flex; flex-direction: column; height:auto; background: none;} .template_home .home_bento .cell1{ height: 280px; } .template_home .home_bento .cell2 .bento-item{ aspect-ratio: 16/8; } .template_home .home_bento .cell3 .bento-item{ aspect-ratio: 16/8; } .template_home .home_bento .cell2 .popOnDisplay{ height: 100%; } .template_home .home_bento .cell3 .popOnDisplay{ height: 100%; } .template_home .home_bento .col1{ display: flex; flex-direction: column; height:auto } .template_home .home_bento .col3 .col_actus{ overflow: visible; } .template_partenaires .partenaire_fondateur{ flex-direction: column; gap: 0;} .template_partenaires .partenaire_fondateur:nth-child(even){ flex-direction: column;} .template_partenaires .partenaire_fondateur .col1{ width: 100%; padding: 20px; gap: 40px; border-radius: 20px 20px 0 0; } .template_partenaires .partenaire_fondateur .col2{ width: 100%; border-radius: 0 0 20px 20px; } .template_partenaires .partenaires_grid_wrapper{ grid-template-columns: repeat(3, 1fr); gap: 1rem; } .template_partenaires .partenaires_grid_item .fleche{ display: none; } .template_partenaires a.partenaires_grid_item img{ transform: none; } .template_actus .cols_wrapper{ flex-direction: column;} .template_actus .cols_wrapper .col1{ width: 96%; margin: auto;} .template_actus .cols_wrapper .col2{ width: 96%; margin: auto;} .template_actus .cards_grid{ display: flex; flex-direction: column; } .template_actus{ padding-top: 180px;} .template_presse .grid_presse{ display: flex; flex-direction: column; } .template_home .cards_grid .popOnDisplay:first-child{ aspect-ratio: auto;} .template_home .hero_video{ width: calc(100% - 40px); } .template_home .cards_grid .popOnDisplay{ height: fit-content; } .template_home .home_bento .col3{ height: fit-content; align-items: center; } .section_contact .cols{ display: flex; flex-direction: column; } .template_home .home_bento .col3 .col_actus{ position: relative; padding-bottom: 120px; padding-bottom: 40px;} .template_home .home_bento .col3 .cta_white_blue{ position: relative; left: auto; display: inline-flex; width: fit-content; } .template_home .home_bento .col3:after{ display: none;} .section_contact .cell { width: 96%; margin: auto; } .section_contact .cell{ width: 90%; } .template_article .hero_intro{ padding: 0 40px;} .template_article .block_paragraphe .paragraphe{ padding: 0 40px;} .template_article .block_columns{ padding: 0 40px;} .section_shopping .container_slim{ flex-direction: column; } .section_partenaires .pads{ flex-direction: column; } .section_shopping .col2{ aspect-ratio: 16/9; height: auto; max-width: 100%; } .section_shopping .col2 .pad{ aspect-ratio: auto;} .section_shopping{ padding-bottom: 20px; } .section_partenaires{ padding-top: 40px; padding-bottom: 20px;} .section_partenaires .pads{ padding-left: 2%; padding-right: 2%; flex-direction: row; flex-wrap: wrap;} .section_partenaires .pad { width: 46%; padding: 20px;} .section_partenaires .pad svg{ width: 100%; height: 100%;} .section_partenaires .pad .logo { width: 136px; height: 50px;} .section_paragraphe_links{ display: flex; flex-direction: column; padding: 0; } .section_paragraphe_links a{ display: inline-flex; width: fit-content; } .template_article .block_columns .grid{ } .template_carto .section_hero{ } .module_carto .cols{ flex-direction: column; height: 90vh; } .template_carto .module_carto .col1{ height: auto; position: absolute; top: 0; left: 0; width: 100%; } .template_carto .module_carto .col1 .sticky { height: 55%; width: 100%; position: absolute; } .template_carto .module_carto .col1 .sticky .navbar{ height: 45%; width: 100%; position: absolute; } .template_carto .module_carto .col2{ overflow: visible; height: auto; width: 96%; bottom: auto; position: relative; top: 0px; right: auto; padding: 0; margin: 0 2%; } .module_carto .nav_select{ max-width: 120px; font-size: 10px; } .module_carto .cols{ height: auto; gap: 0; flex-direction: column;} .module_carto #map{ position: relative; height: 480px; width: 96%; margin: auto; } .module_carto .leaflet-left { position: absolute; top: 380px; } .template_carto .cards_grid_carto{ padding: 0; } .template_defi-solidaire .programme_dates .programme_date .ligne1{ font-size: 12px; } .template_defi-solidaire .programme_dates .programme_date .ligne2{ font-size: 12px; } .gslide-image img.zoomable, .glightbox-clean .gslide-media img{ max-width: 100%; max-height: 100vh!important } .glightbox-clean .gdesc-inner{ width: 100%; } .glightbox-clean .gslide-media{ width: 100vw; height: 100vh; padding: 5%; aspect-ratio:unset ; } .cards_grid .popOnDisplay:first-child { height: auto; aspect-ratio: unset; } .cards_grid .popOnDisplay:first-child .instagram{ padding-top: 60px; padding-bottom: 0px; height: auto; aspect-ratio: unset; } .cards_grid .popOnDisplay:first-child .instagram .txt_wrapper{ display: flex; height: auto; aspect-ratio: unset; } .cards_grid .popOnDisplay:first-child .instagram .txt{ position: relative; height: auto; margin-bottom: 10px; top: unset; left: unset; transform: none;} .cards_grid .popOnDisplay:first-child .instagram .tags{ position: relative; margin-bottom: 10px; } } @keyframes fadeIn{ to { opacity: 1; transform:translate3D(0,0,0) } } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeHeroBg { to { opacity: 0.3; filter: brightness(1); } } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(4, 166, 243, 0.6); } 70% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(4, 166, 243, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(4, 166, 243, 0); } }