/* CSS by Manu LECHAT https://e-lechat.com */ @font-face { font-family: "DrukWide-Medium"; src: url("../fonts/DrukWide-Medium.ttf") format('truetype') } @font-face { font-family: "SuisseIntl-Regular"; src: url("../fonts/SuisseIntl-Regular.ttf") format('truetype') } @font-face { font-family: "suisseintl-bold"; src: url("../fonts/suisseintl-bold.ttf") format('truetype') } :root { --black : #262633; --bleu_C40: #002855; --orange_C40: #DC4405; --darkblue: #001C3C; --orange_C40: #E9500E; --color_txt : #002855; --bt_cta_bg : #002855; --bt_cta_color : #ffffff; --bt_cta_hover : #E9500E; --bt_cta_hover_color : #ffffff; --swiper-theme-color : #002855; --swiper-pagination-bullet-horizontal-gap : 3px; --swiper-pagination-bottom: -30px; --plyr-color-main: #002855; --cc-btn-primary-hover-bg: #04356e; --cc-btn-primary-bg: #002855; } /* titles */ .txt_9 { font-size: 9px; } .txt_10 { font-size: 10px; } .txt_11 { font-size: 11px; } .txt_12 { font-size: 12px; } .txt_13 { font-size: 13px; } .txt_14 { font-size: 14px; } .txt_15 { font-size: 0.9375rem; } .txt_16 { font-size: 1rem ; } .txt_18 {font-size: 18px; } .txt_21 { font-size: 21px; } .txt_24 { font-size: 24px; } .txt_20 { font-size: 20px; } .txt_29{ font-size: 29px; } .txt_35 { font-size: 35px; } .txt_48 { font-size: 48px; } .txt_58 { font-size: 58px; } .font_alt{ font-family: "DrukWide-Medium"; font-weight: 400; } .font_alt.maj{ letter-spacing: 0.1em; } .txt_blue{ --color_txt : var(--bleu_C40); } .txt_orange{ color: var(--orange_C40); } .maj{ text-transform: uppercase; letter-spacing: 0.01em; } strong { font-weight: 700; } .grey{ --color_txt: #adadad; color:#adadad ; } .white{ color: #fff; } .titre{ line-height: 1.1em; margin-bottom: 0.5em; } .color_alt{ color: var(--color_alt) } .color_light{color: var(--color_light) } .bolder{ font-weight: bolder; } .burger{ display: none; } .display_none{ display: none; } .bt_contact:hover{ cursor: pointer; } .typo_sans{ font-family: montserrat, sans-serif; } .titre_small{ font-family: montserrat, sans-serif; width: fit-content; text-transform: uppercase; letter-spacing: 0.1em; } ::selection { background-color: rgba(0, 0, 0, 0.3); opacity: 0.1; transition: all .3s; ; text-shadow: none; } * { box-sizing: border-box; outline: none; /*text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; */ } html{ scroll-behavior: smooth; min-height: 100vh; background: white; font-weight: 500; color: var(--color_txt); min-height: 100vh; top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased; box-sizing: border-box; position: relative; text-rendering: optimizeLegibility; } body{ min-height: 100vh; font-family: "SuisseIntl-Regular"; font-size: 1rem; line-height: 1.65em; overflow-x: hidden; 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; position: relative; } 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{ color: var(--color_txt); font-family: "DrukWide-Medium"; text-transform: uppercase ; font-weight:normal; font-style: normal; margin-block-start: 0; margin-block-end: 0; width: fit-content; display: block; margin: 0; clear: both; break-after: always; line-height: 1.35em; } h2 strong, h3 strong{ font-weight:normal; } span{ display: inline-block; } a{ color: var(--color_txt); width: fit-content; position: relative; text-decoration: none; text-align: left; } a:hover{ cursor: pointer; } p{ color: var(--color_txt); font-weight: 400; clear: both; display: block; padding: 0; margin: 0; line-height: 1.5em; } p a{ text-decoration: underline; color: var(--color_theme_dark); } p a:hover{ text-decoration: underline; } .bold{ font-weight: bold; } .bold em{ font-weight: bold; font-style: italic; } .bold .em{ font-style: italic; } .italic{ font-style: italic; } u{ position: relative; text-decoration: none; z-index:2; } u::before{ pointer-events: none; opacity: 0.6; mix-blend-mode: multiply; position: absolute; transform: rotate(2deg); z-index:1; top: 0.3em; left: 0; width: 100%; height: .8em; background-color: var(--color_theme); content: ""; } li{ } 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{ width: 100% ; margin: 0 auto; } .main_container{ width: 100%; } .center{ text-align: center; margin: 0 auto; } figure{ margin: 0; padding: 0; } button{ border: none; width: auto; } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^/^^ /^^ /^^ */ /* glabal containers */ .display_width{ width: 100%; position: relative; max-width: 1440px; padding-left: 490px ; padding-right: 90px; display: flex; justify-content: flex-end; margin:auto } .side_container{ width: 860px; max-width: 100%; } /* global tools */ #sprite-plyr{ display: none; } .mobile_topbar{ display: none; } .bt_cta{ color:var(--bt_cta_color); --color_txt: var(--bt_cta_color); fill:var(--bt_cta_color); font-size: 12px; transition: all .3s; letter-spacing: 0.1em; text-transform: uppercase; font-weight: bold; width: fit-content; align-items: center; justify-content: center; background-color: var(--bt_cta_bg); padding: 13px 26px 12px 26px; border-radius: 30px; display: flex; gap: 10px; } .bt_cta:hover{ background-color: var(--bt_cta_hover); --bt_cta_color:var(--bt_cta_hover_color) ; cursor: pointer; } .bt_cta svg path{ fill:var(--bt_cta_color); } .tags_wrapper{ display: flex; gap: 5px; flex-wrap: wrap; } .tag{ display: flex; padding: 6px 10px 5px 10px; justify-content: center; width: fit-content; align-items: center;color: #FFF; line-height: 1em;font-size: 9px; font-style: normal; font-weight: 800;letter-spacing: 1.5px;text-transform: uppercase; gap: 10px; border-radius: 6px/7px; background: var(--Couleur, #DC4405); } .bt_blue{ color:#FFF; font-size: 10px; transition: all .3s; letter-spacing: 0.03em; text-transform: uppercase; font-weight: bold; width: fit-content; align-items: center; justify-content: center; background-color: var(--bleu_C40); padding: 10px 25px; border-radius: 30px; display: flex; gap: 10px; } .bt_blue:hover{ background-color: var(--orange_C40); cursor: pointer; } .cols{ display: flex; gap: 20px; } .cols .col{ width: 100%; } .goverlay { background: rgba(13, 21, 37, 0.92); } .column { grid-column: span 6;} .writter_style ul{ margin-top: 1em; } .writter_style li{ list-style-type: disc; color: var(--color_txt); margin-left: 1em; } .copyright{ background-color: rgba(255,255,255,0.5); font-size: 11px; padding: 3px 5px; line-height: 1em; position: absolute; right: 20px; bottom: 20px; border-radius: 6px; } .word{ } .word .char{ line-height: 1em; } /* date_wrapper */ .date_wrapper{ width: 100%; display: flex; justify-content: end; justify-content: space-between; flex-wrap: nowrap;} .date_wrapper .left:before{ content: ""; z-index: 1; width: 100%; height: 1px; border-bottom: 1px dotted var(--color_txt); position: absolute; top: 50%; left: 0; } .date_wrapper .date{ transition: all .3s; white-space: nowrap; width: max-content; padding-left: 1em; display: block; background-color: var(--color_bg); font-size: 12px; z-index: 2; color:var(--color_txt) } .date_wrapper h2{ padding-bottom: 10px;} .date_wrapper .left{ width: 100%; height: 20px; } /* navigation */ .page_nav{ box-shadow: 0 .625em 1.875em #0000024d; display: flex; justify-content: center; flex-direction: column; z-index: 99; width: 305px; position: fixed; top: 90px; left: 90px; min-height: 200px; border-radius: 10px; overflow: hidden; width: 305px;; } .page_nav .white_box{ align-items: center; display: flex; justify-content: center;padding: 26px; gap: 30px; flex-direction: column; background-color: #FFF; width: 100%; overflow: hidden; width: 100% } .page_nav .logo_wrapper{ width: 100%; margin-top: 10px; display: flex; justify-content: center; } .page_nav .social_wrapper{ width: 100%; display: flex; align-items: center; justify-content: space-between; border-top: 1px dotted grey; border-bottom: 1px dotted grey; padding: 8px 0;} .page_nav .social_icon_links{ display: flex; flex-direction: raw; gap: 3px; } .page_nav .social_icon_link{ background: white; transition: all .3s; filter: drop-shadow(-4px 5px 6px rgba(0, 0, 0, 0)); width: 26px; height: 26px; padding: 5px; border: 1px solid var(--orange_C40); border-radius: 100%; overflow: hidden; } .page_nav .social_icon_link:hover{ transform: scale(1.05); filter: drop-shadow(-4px 10px 6px rgba(0, 0, 0, 0.15)); } .page_nav .social_icon_link img{ width: 100%; height: 100%; object-fit: contain; } .page_nav .blue_box{ align-items: center; display: flex; justify-content: center;padding: 6px 26px 26px 26px; gap: 30px; flex-direction: column; background-color: var(--bleu_C40); width: 100%; overflow: hidden; width: 100% } .page_nav .page_menu{ display: flex; width: 100%; flex-direction: column; } .page_nav .page_menu a{ --color_txt: white; color: var(--color_txt); ; border-bottom: 1px dotted white; transition: all .17s ease-in-out; width: 100%; align-items: center; justify-content: space-between; background-color: var(--bleu_C40); padding: 5px 0px; display: flex; gap: 10px; } .page_nav .page_menu a svg path{ fill: var(--color_txt); } .page_nav .page_menu a:hover{ --color_txt: var(--orange_C40); } .page_nav_wrapper{ position: fixed; z-index: 10; left: 50%; transform: translateX(-50%); } /* top_bar */ .top_bar{ position: fixed; align-items: center; border-radius: 0 0 0 30px; padding: 5px 28px; top: 0; z-index: 20; right: 0; background-color: var(--bleu_C40); display: flex; gap: 25px; } .top_bar_bt{ font-weight: 400; display: flex; align-items: center; gap: 10px; font-size: 10px; --color_txt:white; font-family: "DrukWide-Medium"; font-weight: 400; text-transform: uppercase ; } .top_bar_bt:hover{ --color_txt:var(--orange_C40) } .top_bar svg{ height: 14px; width: auto; } .top_bar .flag{ width: 23px; height: 15px; transition: all .17s; } .top_bar .flag:hover{ transform: translateY(-1px); box-shadow: 0 0px 8px rgba(255, 255, 255, 0.8); } .top_bar .hidden{ display: none; } .top_bar:after{ position: absolute; bottom: 0; left: 0; width: 100%; height:1px; content: ""; background: linear-gradient(90deg, rgba(192, 64, 13, 0.00) 0%, #C0400D 49.52%, rgba(192, 64, 13, 0.00) 100%); ; } /* swiper config */ .swiper_trin40{ width: 100%; padding-bottom: 60px; position: relative; } .swiper_trin40 .swiper-wrapper{ position: relative;} .swiper_trin40 .swiper-slide{ height: auto; width: auto; } .swiper_trin40 .swiper-pagination-bullet{ background-color: #515151; transition: all .17s; width: 20px; height: 3px; border-radius: 0; transition: all .3s; } .swiper_trin40 .swiper-pagination-bullet-active{ background: var(--bleu_C40); width: 30px; } .swiper_trin40 .swiper-button-prev{ transition: all .17s ; z-index: 5; top: auto; left: auto!important; border-radius: 30px; width: 32px; height: 32px; right: 60px; bottom: 0px; transform: none; border: 1px solid rgb(201, 201, 201); } .swiper_trin40 .swiper-button-prev:after{ max-width: 80%; max-height: 80%; font-size:16px; font-weight: bold; color: var(--bleu_C40); } .swiper_trin40 .swiper-button-next{ transition: all .17s ; -webkit-filter: drop-shadow(0px 15px 16px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0px 15px 16px rgba(0, 0, 0, 0.2)); z-index: 5; top: auto; left: auto; border-radius: 30px; width: 32px; height: 32px; right: 20px!important; bottom: 0px; transform: none; border: 1px solid rgb(201, 201, 201); } .swiper_trin40 .swiper-button-next:after{ max-width: 80%; max-height: 80%; font-size:16px; font-weight: bold; color: var(--bleu_C40); } .swiper_trin40 .swiper-button-next:hover{ --color_txt: var(--orange_C40)!important; cursor: pointer; } .swiper_trin40 .swiper-button-prev:hover{ --color_txt: var(--orange_C40)!important; cursor: pointer; } .swiper_trin40 .swiper-pagination{ top: auto; bottom: 5px!important; max-width: 70%; left: 0; display: flex; z-index: 4; } .swiper_trin40 .swiper-button-prev::before{ display: none; } .swiper_trin40 .swiper-button-next::before{ display: none; } /* lightbox */ .gslide-image img{ border-radius: 20px; max-height: 90vh; } .gslide-image:after{ background: linear-gradient(180deg, rgba(0, 40, 85, 0.00) 33%, var(--Bleu-Officiel, #122236a3) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .glightbox-clean .gslide-description{ background: none; color: white; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; } .glightbox-clean .gslide-title{ color: white; margin-bottom: 5px; font-family: "DrukWide-Medium"; font-weight: 400; } .glightbox-clean .gslide-title p{ color: white; font-family: "DrukWide-Medium"; font-weight: 400; } .glightbox-clean .gdesc-inner{ height: 100%; width: 100%;} .gslide-description .description-bottom{ position: absolute; height: 100%; width: 100%; } .glightbox-clean .gslide-desc{ color: white; } .glightbox-clean .gslide-media{ border-radius: 20px; max-height: 90vh; overflow: hidden; } .glightbox-clean .gslide-desc{ font-size: 12px; line-height: 1em; opacity: 0.6; } /* page teasing */ .teasing{ --color_txt: white; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; display: flex; align-items: center; justify-content: center; } .teasing .bg{ background-image: url('../images/teaser_bg.jpg'); background-size: cover; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; } .teasing .bg:after{ content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: linear-gradient(180deg, rgba(0, 40, 85, 0.00) 0%, var(--Bleu-Officiel, #002855) 100%) } .teasing .logo_wrapper{ margin-bottom: 10px; background: white; border-radius: 20px; padding: 25px 80px; } .teasing .logo_wrapper img{ width: 130px; height: auto; } .teasing .container{ text-align: center; gap: 40px; width: 800px; max-width: 90%; display: flex; align-items: center; justify-content: center; flex-direction: column; } /* page_header */ .page_header{ --color_txt:#FFF; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 0; height: 400px; min-height: 20vh; width: 100%; overflow: hidden; border-radius: 0 0 40px 40px; background-color: #000000; } .page_header .bg_wrapper{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .page_header .bg_wrapper:after{ background: linear-gradient(180deg, rgba(0, 40, 85, 0.00) 43.75%, var(--Bleu-Officiel, #002855) 96.91%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .page_header .cover { width: 100%; height: 100%; object-fit: cover; overflow: hidden; opacity: 0.7; } .page_header .heading_wrapper{ width: fit-content; display: flex; flex-direction: column; gap: 10px; max-width: 700px; } .page_header .heading_wrapper .separator{ width: 100%; margin-bottom: 10px; border-bottom: 1px dotted #FFF; } .page_header .display_width{ height: 100%; display: flex;flex-direction: column; justify-content: flex-end; } .page_header.extended{ height: 620px; } /* section_presentation */ .section_presentation .presentation_blocs .grid{ width: 100%; display: grid; grid-template-columns: repeat(12, 1fr); /* grille de 12 colonnes égales */ gap: 60px; /* espace entre les colonnes */ } .section_presentation .presentation_blocs .blocks{ display: flex; flex-direction: column; gap: 30px;} .section_presentation .presentation_blocs { display: flex; flex-direction: column; gap: 30px;} .section_presentation .side_container{ padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 20px; } .section_presentation .cartouche{ border-top: 1px dotted grey; width: 100%; background: white; margin-top: 20px; } .section_presentation .cartouche tr{ padding: 5px; position: relative; } .section_presentation .cartouche td{ padding: 5px; position: relative; } .section_presentation .cartouche tr:nth-child(even){ background-color: #F9F9F9;} .section_presentation .cartouche tr:after{ content: ""; width: 100%; height: 1px; z-index: 22; border-bottom: 1px dotted #002855; position: absolute; bottom: 0; left: 0; } .template_espace_presse .section_presentation .side_container{ padding-top: 20px; padding-bottom: 20px; } .template_espace_presse .page_header.extended{ height: 460px; } /* section_parcours */ .section_parcours{ --color_txt: white; --bt_cta_bg :#ffffff ; --bt_cta_color : #002855; background-color: #081D32; } .section_parcours .txt_wrapper{ height: 100%; display: flex; flex-direction: column; gap: 10px; justify-content: center; } .section_parcours .bt_cta{ margin-top: 20px; } .section_parcours .col_wrapper{ padding-top: 80px; padding-bottom: 80px; min-height: 600px; max-width: 420px; display: flex; flex-direction: column; gap: 30px; justify-content: center; } .section_parcours .parcours_bg{ position: absolute; top: 0; max-width: 180%; right: 0; width: auto; height: 100%; object-fit: cover; } /* section_actus */ .section_actus{ background: #F1F1F1; } .section_actus .side_container{ padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 20px; } /* article_card */ /* .article_cards_grid{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } */ .template_course .article_cards_grid .article_card:nth-child(1){ grid-column: span 3; grid-row: span 2; } .template_course .article_cards_grid .article_card:nth-child(1) .cover_wrapper{ aspect-ratio: 16/7; height: auto; } .template_course .article_cards_grid .article_card:nth-child(1) h2{ font-size: 20px;} .template_course .article_cards_grid .article_card:nth-child(1) .bottom{ height: auto; } .section_actus .articles_wrapper{ display: flex; flex-direction: column; gap:30px } .section_actus .first_article .cover_wrapper{ aspect-ratio: 16/7; height: auto; } .section_actus .first_article h2{ font-size: 20px;} .section_actus .first_article .bottom{ height: auto; } .section_actus .articlesswiper{ width: 100%; height: max-content; padding-bottom: 50px; } .section_actus .articlesswiper .swiper-slide{ width: auto; } .section_actus .articlesswiper .navigation { bottom: 10px; z-index: 1; } .section_actus .articlesswiper .swiper-button-next:after{ color:var(--color_txt); background-color: #ffffff; } .section_actus .articlesswiper .swiper-button-prev:after{ color: var(--color_txt); background-color: #ffffff;} .section_actus .articlesswiper .swiper-button-prev:hover{ color:var(--bleu_C40); } .section_actus .articlesswiper .swiper-button-next:hover{ color:var(--bleu_C40); } .section_actus .articlesswiper .swiper-button-prev:hover:after{ color:var(--bleu_C40); } .section_actus .articlesswiper .swiper-button-next:hover:after{ color:var(--bleu_C40); } .section_actus .articlesswiper .swiper-button-prev{ background-color: #ffffff; border: 1px solid rgb(78, 76, 111); } .section_actus .articlesswiper .swiper-button-next{ background-color: #ffffff; border: 1px solid rgb(78, 76, 111); } .section_actus .articlesswiper .swiper-pagination-bullet-active{ background-color: var(--orange_C40); } .article_card{ display: flex; border: 0px solid rgba(111,111,111,0.2); position: relative; flex-direction: column; justify-content: space-between; --color_bg: rgb(255, 255, 255); transition: all .3s; --color_txt: var(--bleu_C40); background: var(--color_bg); border-radius: 10px; z-index: 2; width: 100%; padding: 0px; border-radius: 8px; } .article_card .bottom{ padding: 0px 20px 10px 20px; width: 100%; height: calc(100% - 120px); gap: 10px; display: flex; flex-direction: column; justify-content: space-between; } .article_card .text_wrapper{ width: 100%; display: flex; flex-direction: column; gap: 20px; } .article_card .cover_wrapper{ transition: all .3s; border-radius: 8px 8px 0 0; overflow: hidden; width: 100%; margin: 0; height: 120px; float: right; object-fit: cover; } .article_card .cover_wrapper img{ width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(to bottom, black 50%, rgba(0, 0, 0, 0) 100%); mask-repeat: no-repeat;} .article_card .date_wrapper{ width: 100%; display: flex; justify-content: end; } .article_card .date_wrapper:before{ content: ""; z-index: 1; width: 100%; height: 1px; border-bottom: 1px dotted var(--color_txt); position: absolute; top: 50%; left: 0; } .article_card .date_wrapper .date{ transition: all .3s; padding-left: 1em; background-color: var(--color_bg); font-size: 12px; z-index: 2; color:var(--color_txt) } .article_card .date_wrapper h2{ padding-bottom: 10px;} .article_card:hover{ --color_bg: var(--bleu_C40); transition: all .3s; --color_txt: white; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } .article_card:hover .date{ --color_txt: white; } .article_card .tags_wrapper{ transform: translateY(-10px); min-height: 20px; margin-bottom: 5px; } /* .article_card::before { border-radius: 10px; content: ''; background-image: linear-gradient(to bottom, rgba(111,111,111,0.5) 0%, rgba(111,111,111,0.2)); top: -1px; left: -1px; bottom: -1px; right: -1px; position: absolute; z-index: -1; width: calc(100% + 2px); height: calc(100% + 2px); } */ /* section_documents */ .section_documents{ background-color: #F1F1F1; padding-top: 60px; padding-bottom: 120px; } .template_espace_presse .section_documents{ background-color: none; } .section_documents .documents_wrapper{ --color_txt: white; border-radius: 20px; background-color: var(--bleu_C40); padding: 30px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px; } .section_documents .documents_wrapper .document_items{ display: flex; flex-direction: column; width: 100%;} .section_documents .documents_wrapper .document_items .item{ align-items: center; width: 100%; padding: 8px; transition: all .3s; border-bottom: 1px dotted grey; display: flex; justify-content: space-between; } .section_documents .documents_wrapper .document_items .item span{ max-width: calc(100% - 55px) ; line-height: 1.2em; } .section_documents .documents_wrapper .document_items .item:nth-child(odd){ background-color: #023672; } .section_documents .documents_wrapper .document_items .item:hover{ background-color: white; color: var(--bleu_C40); } .section_documents .documents_wrapper .document_items .item:hover .arrow_pin{ background-color: #DC4405; } .section_documents .documents_wrapper .document_items .item:hover .arrow_pin svg path{ fill: white; } .arrow_pin{ display: flex; border-radius: 100%; flex-direction: column; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: white; --color_txt:var(var(--bleu_C40)); } .arrow_pin svg path{ fill: var(--bleu_C40); } .section_participants{ padding-top: 120px; background-color: #F1F1F1; border-radius: 20px 20px 0 0 ; } /* section_medias */ .section_medias { background-color: var(--darkblue); --color_txt: white; } .section_medias .side_container{ padding-top: 80px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 20px; } .section_medias .medias_cards_grid{ display: grid; padding-bottom: 0px; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; } .section_medias .hidden_link{ display: none; } .section_medias .mediasSwiper .swiper-slide{ width: 270px; } .section_medias .mediasSwiper { padding-top: 10px; height: max-content; padding-bottom: 50px; } .section_medias .mediasSwiper .navigation { bottom: 10px; z-index: 1; } .section_medias .swiper .swiper-button-next:after{ color:white; background-color: none!important; } .section_medias .swiper .swiper-button-prev:after{ color:white; background-color: none!important; } .section_medias .swiper .swiper-button-prev:hover{ background-color: #cfcfcf!important; color:var(--bleu_C40); } .section_medias .swiper .swiper-button-next:hover{ background-color: #cfcfcf!important; color:var(--bleu_C40); } .section_medias .swiper .swiper-button-prev:hover:after{ color:var(--bleu_C40); } .section_medias .swiper .swiper-button-next:hover:after{ color:var(--bleu_C40); } .section_medias .swiper .swiper-button-prev{ border: 1px solid rgb(78, 76, 111); } .section_medias .swiper .swiper-button-next{ border: 1px solid rgb(78, 76, 111); } .section_medias .swiper .swiper-pagination-bullet{ background-color: white; } .section_medias .swiper .swiper-pagination-bullet-active{ background-color: var(--orange_C40); } /* card_media */ .card_media{ position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease, opacity .8s ease-out; ; --color_txt: white; background-color: #000000; padding:10px 12px; display: flex; flex-direction: column; justify-content: end; width: 100%; aspect-ratio: 16/10; border-radius: 10px; margin-left: 1px; } .card_media::before { border-radius: 11px; content: ''; background-image: linear-gradient(to bottom, rgba(212, 212, 255, 0.3) 0%, rgba(164, 164, 187, 0.1)); top: -1.5px; left: -1.5px; bottom: -1.5px; right: -1.5px; position: absolute; z-index: -1; width: calc(100% + 3px); height: calc(100% + 3px); } .card_media .cover_wrapper{ border-radius: 10px; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .card_media .cover_wrapper .cover{ background-color: var(--bleu_C40); transition: all .3s ease-in-out; opacity: 1; width: 100%; height: 100%; object-fit: cover;} .card_media .cover_wrapper:after{ mix-blend-mode: multiply; position: absolute; transition: all .3s ease-in-out; top: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 1; background: linear-gradient(180deg, rgba(0, 40, 85, 0.00) 43.75%, var(--Bleu-Officiel, #002855) 96.91%); } .card_media .icon{ opacity: 0.7; transition: all .17s ease-out; z-index: 2; max-width: 36px; max-height: 36px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) scale(1);} .card_media:hover .icon{ opacity: 0.9; transform: translateX(-50%) translateY(calc( -50% - 10px)) scale(1.05);} .card_media .subtitle{ margin-left: 10px; display: flex; opacity: 0.7; transition: all .17s ease-out; height: 0;overflow: hidden; flex-wrap: wrap; gap: 0 5px; } .card_media:hover .subtitle{ height:1em; margin-left: 2px; } .card_media:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } /* section_participants */ .section_participants{ padding-top: 120px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 20px; } .tableau_participants_wrapper{ align-items: center; margin-top: 20px; width: 100%; background: white; border-radius: 20px; display: flex; flex-direction: column; padding: 20px; } .tableau_participants_wrapper table{ width: 100%; position: relative; border-collapse: collapse; } .tableau_participants_wrapper table td{ padding: 10px 20px; vertical-align: top; } .tableau_participants_wrapper table tr{ transition: all .1s ease-in; position: relative; width: 100%; } .tableau_participants_wrapper table tr:nth-child(odd){ background-color: #F9F9F9;} .tableau_participants_wrapper table tr:after{ content: ""; width: 100%; height: 1px; z-index: 22; border-bottom: 1px dotted #002855; position: absolute; bottom: 0; left: 0; } .tableau_participants_wrapper .bt_open{ transition: all .3s ease-out; background-color: var(--bleu_C40); width: 32px; height: 32px; border-radius: 30px } .tableau_participants_wrapper .bt_open::after{ height: 1em; content: "+"; position: absolute; width: 100%; height: 100%; color: #FFF; top: -1px; left: 0; display: flex; align-items: center; justify-content: center;} .tableau_participants_wrapper .col1{ width: 37%; } .tableau_participants_wrapper .col3{ width: 40px } .tableau_participants_wrapper tr:hover{ cursor: pointer; background-color: #e9e9e9!important; } .tableau_participants_wrapper tr:hover .bt_open{ background-color: var(--orange_C40); cursor: pointer; } .tableau_participants_wrapper .extend_content{ display: flex; flex-direction: column; gap: 20px; } .tableau_participants_wrapper .extended .bt_open{ transform: rotate(135deg); background-color: var(--orange_C40); } .tableau_participants_wrapper .boat_cover{ height: 120px; width: 120px; max-width: 100%; max-width: none; max-height: none; overflow: hidden; object-fit: cover; border-radius: 20px; } .tableau_participants_wrapper .skipper_cover{ height: 120px; width: 120px;; max-width: 100%;; max-width: none; max-height: none; overflow: hidden; object-fit: cover; border-radius: 20px; } .tableau_participants_wrapper .extend_content{ max-height: 0; overflow: hidden; transition: all .5s ease-out ; overflow: hidden; } .tableau_participants_wrapper .extended .extend_content{ max-height: 200px; transition: all .3s ease-out; } .tableau_participants_wrapper .cover_wrapper{ width: 100%; height: auto; } .tableau_participants_wrapper .scroll_wrapper{ max-height: 620px; width: 100%; overflow-y: scroll; } .tableau_participants_wrapper .cols{ display: flex; } .tableau_participants_wrapper .cols .col{ width: fit-content; padding-top: 20px; } /* BLOCS */ .page_blocks_wrapper{ --color_txt: var(--bleu_C40); display: flex; flex-direction: column; gap: 40px; margin: auto; padding: 20px 0; } .bloc_paragraphe h2, .bloc_paragraphe h3, .bloc_paragraphe h4{ font-size: 21px; font-optical-sizing: auto; font-weight: 400; font-style: normal; margin: 1em 0 ; } .bloc_paragraphe p{ line-height: 1.35em; max-width: 720px; padding-bottom: 1em; } .bloc_paragraphe ul li{ padding-bottom: 0.5rem; margin-left: 1.5em; list-style: disc; } .bloc_paragraphe ul li p{ padding-bottom: 0rem; } .bloc_paragraphe h2{ font-size: 24px; } .bloc_paragraphe h3{ font-size: 21px; } .bloc_paragraphe h4{ font-size: 18px; } .bloc_citation{ --color_txt: var(--bleu_C40); display: flex; justify-content: center; flex-direction: row; gap: 0px; } .bloc_citation .main_text{ padding: 20px 130px 20px 0px; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 40px; } .bloc_citation .main_text p{ line-height: 1.35em; } .bloc_citation p{ padding-left: 1em; padding-right: 1em; } .column .bloc_citation .main_text{ padding-left: 0; padding-right: 0; padding-bottom: 0px; } .bloc_citation .main_text .apostrophe{ font-size: 2.5em; color: var(--orange_C40); position: absolute; top: 0; left: 20px; } .bloc_citation .signature{ --color_txt: var(--orange_C40); display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 5px; } .bloc_citation .portrait { position: relative; overflow: hidden; width: 280px; min-height: 200px; border-radius: 20px 0 0 20px; flex-shrink: 0; /* évite qu’elle se compresse */ } .bloc_citation .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bloc_bouton{ display: flex; justify-content: center; padding: 40px; } .bloc_video iframe{ border-radius:20px; overflow: hidden; } .bloc_video .cover{ } .bloc_video .plyr{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .bloc_video iframe{ width: 100%; height: 100%; overflow: hidden; object-fit: cover; border: none;} .column .bloc_video iframe{ border-radius:10px; } .bloc_video figcaption{ padding: 10px; } .bloc_image img{ transition: all .3s ease-in-out; border-radius: 20px; overflow: hidden; width: 100%; } .bloc_image img:hover{ transform: translateY(-3px); cursor: zoom-in; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .bloc_image { display: flex; flex-direction: column; gap: 20px; } .bloc_image figcaption{ font-size: 14px; text-align: left; padding-left: 20px; padding-top: 10px; } .bloc_gallery { margin: 40px 0; padding-bottom: 30px; } .bloc_gallery .swiper img{ height: 420px; width: auto; border-radius: 10px; } /* template_article */ .template_article .page_intro{ padding: 40px 0 20px 0; max-width: 700px;} .template_article .page_header .heading_wrapper{ gap: 20px; } .template_article .next_articles{ background: #F1F1F1; padding-top: 120px; padding-bottom: 120px; } .template_article .next_articles .side_container{ display: flex; flex-direction: column; gap: 20px; } /* section_partenaires */ .section_partenaires{ padding-top: 120px; padding-bottom:0px; --color_txt: white; align-items: stretch; border-radius: 40px 40px 0 0; background-color: #001C3C; } .section_partenaires .logos_wrapper{ display: flex; flex-wrap: wrap; gap: 0 20px ; justify-content: flex-start; align-items: center; padding: 40px 0; } .section_partenaires .logo { object-fit: contain; } .section_partenaires .size_l .logo { max-height: 180px; max-width: 180px; } .section_partenaires .size_m .logo { max-height: 150px; max-width: 150px; } .section_partenaires .size_s .logo { max-height: 130px; max-width: 130px; } .section_partenaires .size_l .logos_wrapper{ gap: 10px 40px; } .section_partenaires .size_m .logos_wrapper{ gap: 10px; } /* footer */ .footer{ background-color: #001C3C; ; } .footer .side_container{ padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: row; justify-content: space-between; gap: 20px; } .footer .logos_wrapper{ display: flex; gap: 60px; padding: 0px; } .footer .nav_right{ display: flex; justify-content: end; gap: 10px; align-items: flex-end; flex-direction: column; text-align: right; --color_txt: white; } .section_login{ padding-top: 120px; padding-bottom: 20px; } .section_login .display_width{ display: flex; flex-direction: column; gap: 20px; } .section_login .form_flex{ display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .section_login .form_flex{ display: flex; } input{ border-radius: 30px; padding: 10px; } .section_social_wall{ padding-top: 120px; padding-bottom: 120px; } .template_course .fancybox__backdrop{ background-color: var(--fancybox-bg, rgb(21 21 30 / 92%)); backdrop-filter: blur(15px); } .fancybox__caption{ font-size: 14px!important; opacity: 0.5!important; } .press_form{ display: flex; gap: 30px; flex-wrap: wrap; } .press_form input{ width: 220px; } .press_form label{ display: block; } .press_form label span{ min-width: 80px; } .section_login .form_flex{ display: flex; align-items: center; flex-direction: row; } .vmg_crew{ display: flex; align-items: flex-start; gap: 10px; } /*. /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ /* Quand l’écran devient plus petit (tablettes) → 2 colonnes */ @media (max-width: 992px) { .txt_14 { font-size: 12px; } .maj.txt_18 { font-size: 12px; } .txt_20 { font-size: 16px; } .txt_29 { font-size: 18px; } .txt_35 { font-size: 30px; } .txt_48{ font-size: 28px; } html{ scroll-behavior: auto; } .mobile_topbar{ position: fixed; top: 0; left: 0; width: 100%; z-index: 200; background-color: white; padding: 8px 20px; display: flex; justify-content: space-between; } .mobile_topbar .logo_wrapper{ height: 42px; transition: all .3s } .shownav .mobile_topbar .logo_wrapper{ opacity: 0;} .burger{ --color_txt: var(--bleu_C40); z-index: 200; transition: all .17s; background-color: rgba(255,255,255,0.8); display: flex; gap: 3px; flex-direction: column;justify-content: center; align-items: center; justify-items: center; width: 40px; height: 40px; border-radius: 100%; position: relative; 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 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; } .page_nav .logo_wrapper{ display: none; } .footer .side_container{ padding-top: 20px; } .swiper_trin40 .swiper-pagination{ left: 0; display: flex; } .swiper_trin40 .swiper-pagination-bullet{ width: 10px; } .page_nav{ display: none; opacity: 0; transition: opacity .3s; width: 100%; height: 100dvh; top: 0; left: 0; background: white; padding-top: 30px; justify-content: flex-start;} .page_nav_wrapper{ width: 100%; height: 100dvh; top: 0; left: 0; transform: none; position: fixed; display: none; } .shownav .page_nav_wrapper{ display: block; } .section_presentation .presentation_blocs .grid{ display: flex; flex-direction: column; } .top_bar{ display: none; top: auto; bottom: 0; border-radius: 20px 0 0 0 ; } .bt_blue { font-size: 12px; padding: 13px 34px; } .shownav .page_nav{ display: block; opacity: 1; } .shownav .top_bar{ display: flex; padding-bottom: 10px; padding-top: 10px; } .page_nav .page_menu a{ padding: 10px 0px; } .cols{ flex-direction: column; } .display_width{ width: 100%; max-width: 100%; padding-left: 20px ; padding-right: 20px; } .side_container{ width: 100%; max-width: 100%; } .article_cards_grid { display: flex; grid-template-columns: 1fr 1fr 1fr; gap: 20px; flex-direction: column; } .section_medias .medias_cards_grid{ grid-template-columns: 1fr 1fr } .footer .side_container{ flex-direction: column; gap: 40px; } .footer .nav_right { align-items: center; } .footer .logos_wrapper { justify-content: center; } .section_partenaires img { max-height: 80px; max-width: 140px; } .section_partenaires .logos_wrapper{ gap: 30px; justify-content: center; } .section_partenaires .side_container{ display: flex; flex-direction: column; align-items: center; } .section_presentation .side_container { padding-top: 80px; padding-bottom: 80px; } .section_actus .side_container{ padding-top: 60px; padding-bottom: 60px; } .section_medias .side_container{ padding-top: 60px; padding-bottom: 60px; } .tableau_participants.entete { display: none; } .tableau_participants_wrapper table tr { display: flex; padding-bottom: 10px; flex-direction: column; } .tableau_participants_wrapper table td{ padding: 0px 10px; text-align: center;} .tableau_participants_wrapper .bt_open{ margin: auto; } .tableau_participants_wrapper .cover_wrapper{ margin: auto; } .tableau_participants_wrapper .col1{ width: 100%; padding-right: 30px; text-align: left;} .tableau_participants_wrapper .col2{ width: 100%; text-align: left; } .tableau_participants_wrapper .col3{ position: absolute; top: 0; right: 5px; } .tableau_participants_wrapper .extend_content .cols{ flex-direction: row; padding-bottom: 10px; } .tableau_participants_wrapper .extend_content .txt14{ font-size: 10px; } .tableau_participants_wrapper .extend_content .txt_10{ font-size: 8px; } .tableau_participants_wrapper .extend_content li{ line-height: 1.4em; } .tableau_participants_wrapper table td{ width: 100%; text-align: left; } .section_participants .side_container{text-align: center; } .tableau_participants_wrapper .skipper_cover{ width: 60px; height: 60px; } .tableau_participants_wrapper .boat_cover{ width: 60px; height: 60px; } .footer .logos_wrapper .logo{ max-width: 80px; max-height: 80px; } .page_header.extended { height: auto; min-height: 390px; padding-top: 80px; } .bloc_citation{ flex-direction: column; } .bloc_citation .txt_24 { font-size: 17px; } .bloc_citation .signature{ font-size: 14px; } .section_documents{ padding-top: 60px; padding-bottom: 60px; } .section_participants {padding-top: 60px; padding-bottom: 0px; } .partenaires_pack h2{ text-align: center; margin: auto; } .section_partenaires { padding-top: 60px; padding-bottom: 60px; } .section_partenaires .size_l .logo{ max-height: 120px; max-width: 120px; } .section_partenaires .size_m .logo{ max-height: 85px; max-width: 85px; } .section_partenaires .size_s .logo{ max-height: 65px; max-width: 65px; } .bloc_citation .main_text{ width: 100%; padding: 10px; } .bloc_citation .portrait{ width: calc(100% - 40px); margin: 20px auto; padding: 20px; border-radius: 10px; margin-bottom: 20px; } .bloc_gallery .swiper img{ border: 2px solid red; max-width: none; height: 420px; } .section_parcours .parcours_bg{ opacity: 0.5; } .template_course .page_header .txt_48{ font-size: 38px; } } /* Sur mobile → 1 colonne */ @media (max-width: 576px) { } @keyframes fadeIn{ to { opacity: 1; transform:translate3D(0,0,0) } }