@charset "UTF-8"; /* CSS de base */ @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote, main, article, aside, section { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } li, ul { list-style: none; } a { color: inherit; text-decoration: none; } body { font-family: cabin_regular; } /* SCSS */ /* VARIABLES */ /* COLORS */ .rouge { color: #E73058 !important; } .turquoise { color: #16BFB1 !important; } .color_gris_fonce { color: #707070 !important; } .color_green { color: #11a63d !important; } .bg_green_clair { background-color: #11a63d !important; } .bg_green { background-color: green !important; } .bg_rouge_tres_clair { background-color: rgba(231, 48, 88, 0.1294117647); } .border_green { border: 0.15em solid #11a63d !important; } mark { background: rgba(231, 48, 88, 0.1294117647) !important; } /* CSS */ /* fonts */ @font-face { font-family: "cabin_semibolditalic"; src: url("../fonts/cabin_semibolditalic.ttf") format("truetype"); } @font-face { font-family: "cabin_mediumitalic"; src: url("../fonts/cabin_mediumitalic.ttf") format("truetype"); } @font-face { font-family: "cabin_bolditalic"; src: url("../fonts/cabin_bolditalic.ttf") format("truetype"); } @font-face { font-family: "cabin_semibold"; src: url("../fonts/cabin_semibold.ttf") format("truetype"); } @font-face { font-family: "cabin_regular"; src: url("../fonts/cabin_regular.ttf") format("truetype"); } @font-face { font-family: "cabin_medium"; src: url("../fonts/cabin_medium.ttf") format("truetype"); } @font-face { font-family: "cabin_italic"; src: url("../fonts/cabin_italic.ttf") format("truetype"); } @font-face { font-family: "cabin_bold"; src: url("../fonts/cabin_bold.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_semibolditalic"; src: url("../fonts/sourceserifpro_semibolditalic.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_extralightitalic"; src: url("../fonts/sourceserifpro_extralightitalic.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_regular"; src: url("../fonts/sourceserifpro_regular.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_lightitalic"; src: url("../fonts/sourceserifpro_lightitalic.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_bold"; src: url("../fonts/sourceserifpro_bold.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_blackitalic"; src: url("../fonts/sourceserifpro_blackitalic.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_italic"; src: url("../fonts/sourceserifpro_italic.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_light"; src: url("../fonts/sourceserifpro_light.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_black"; src: url("../fonts/sourceserifpro_black.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_semibold"; src: url("../fonts/sourceserifpro_semibold.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_bolditalic"; src: url("../fonts/sourceserifpro_bolditalic.ttf") format("truetype"); } @font-face { font-family: "sourceserifpro_extralight"; src: url("../fonts/sourceserifpro_extralight.ttf") format("truetype"); } @font-face { font-family: "playfairdisplay_blackitalic"; src: url("../fonts/playfairdisplay_blackitalic.ttf") format("truetype"); } @font-face { font-family: "playfairdisplay_bolditalic"; src: url("../fonts/playfairdisplay_bolditalic.ttf") format("truetype"); } @font-face { font-family: "playfairdisplay_regular"; src: url("../fonts/playfairdisplay_regular.ttf") format("truetype"); } @font-face { font-family: "playfairdisplay_italic"; src: url("../fonts/playfairdisplay_italic.ttf") format("truetype"); } @font-face { font-family: "playfairdisplay_black"; src: url("../fonts/playfairdisplay_black.ttf") format("truetype"); } @font-face { font-family: "playfairdisplay_bold"; src: url("../fonts/playfairdisplay_bold.ttf") format("truetype"); } @font-face { font-family: "montserrat_extrabolditalic"; src: url("../fonts/montserrat_extrabolditalic.ttf") format("truetype"); } @font-face { font-family: "montserrat_semibolditalic"; src: url("../fonts/montserrat_semibolditalic.ttf") format("truetype"); } @font-face { font-family: "montserrat_italic"; src: url("../fonts/montserrat_italic.ttf") format("truetype"); } @font-face { font-family: "montserrat_regular"; src: url("../fonts/montserrat_regular.ttf") format("truetype"); } @font-face { font-family: "montserrat_black"; src: url("../fonts/montserrat_black.ttf") format("truetype"); } @font-face { font-family: "montserrat_extrabold"; src: url("../fonts/montserrat_extrabold.ttf") format("truetype"); } @font-face { font-family: "montserrat_extralightitalic"; src: url("../fonts/montserrat_extralightitalic.ttf") format("truetype"); } @font-face { font-family: "montserrat_semibold"; src: url("../fonts/montserrat_semibold.ttf") format("truetype"); } @font-face { font-family: "montserrat_blackitalic"; src: url("../fonts/montserrat_blackitalic.ttf") format("truetype"); } @font-face { font-family: "montserrat_mediumitalic"; src: url("../fonts/montserrat_mediumitalic.ttf") format("truetype"); } @font-face { font-family: "montserrat_bold"; src: url("../fonts/montserrat_bold.ttf") format("truetype"); } @font-face { font-family: "montserrat_thin"; src: url("../fonts/montserrat_thin.ttf") format("truetype"); } @font-face { font-family: "montserrat_extralight"; src: url("../fonts/montserrat_extralight.ttf") format("truetype"); } @font-face { font-family: "montserrat_thinitalic"; src: url("../fonts/montserrat_thinitalic.ttf") format("truetype"); } @font-face { font-family: "montserrat_light"; src: url("../fonts/montserrat_light.ttf") format("truetype"); } @font-face { font-family: "montserrat_bolditalic"; src: url("../fonts/montserrat_bolditalic.ttf") format("truetype"); } @font-face { font-family: "montserrat_medium"; src: url("../fonts/montserrat_medium.ttf") format("truetype"); } @font-face { font-family: "montserrat_lightitalic"; src: url("../fonts/montserrat_lightitalic.ttf") format("truetype"); } @font-face { font-family: "ubuntu_bold"; src: url("../fonts/ubuntu_bold.ttf") format("truetype"); } @font-face { font-family: "ubuntu_courant"; src: url("../fonts/ubuntu_courant.ttf") format("truetype"); } @font-face { font-family: "ubuntu_fin"; src: url("../fonts/ubuntu_fin.ttf") format("truetype"); } @font-face { font-family: "ubuntu_fin_italic"; src: url("../fonts/ubuntu_leger_italic.ttf") format("truetype"); } @font-face { font-family: "ubuntu_leger"; src: url("../fonts/ubuntu_leger.ttf") format("truetype"); } @font-face { font-family: "ubuntu_moyen"; src: url("../fonts/ubuntu_moyen.ttf") format("truetype"); } @font-face { font-family: "ubuntu_moyen_italique"; src: url("../fonts/ubuntu-moyen_italique.ttf") format("truetype"); } .gras { font-family: cabin_bold !important; } .underline { text-decoration: underline !important; } .montserrat_light { font-family: montserrat_light; } .montserrat_regular { font-family: montserrat_regular; } .montserrat_semibold { font-family: montserrat_semibold; } .font-17 { font-size: 17px !important; } /* ***************************************** */ /* ***************************************** */ /* ESPACE ENTRE LES BLOCS */ /* ***************************************** */ /* ***************************************** */ .float_right { float: right; } .space20 { height: 20px; } .space30 { height: 30px; } .space40 { height: 40px; } .space60 { height: 60px; } .space80 { height: 80px; } .margintop_-20px { margin-top: -20px !important; } .marginbottom_-20px { margin-bottom: -20px !important; } .margintop_40px { margin-top: 40px; } .marginbottom_40px { margin-bottom: 40px; } .margintop_60px { margin-top: 60px; } .marginleft_27px { margin-left: 27px; } .paddingbottom_5px { padding-bottom: 5px; } .just_it_c { justify-items: center; } main { max-width: 1800px; margin-left: auto; margin-right: auto; margin-top: 85px; } @media (min-width: 1200px) { main { min-height: 400px; } } @media (max-width: 1200px) { main { min-height: 340px; } } @media (max-width: 600px) { main { min-height: 230px; } } .header_tunnel { max-width: 1800px; margin-left: auto; margin-right: auto; } .header_tunnel .logo { margin-top: 30px; margin-bottom: 70px; } .header_tunnel .logo img { max-width: 100%; } header { max-width: 1800px; margin-left: auto; margin-right: auto; } header .logo { margin-top: 30px; margin-bottom: 70px; } header .logo img { max-width: 100%; } .displaynone { display: none; } .ouvrir { display: block !important; } .savoirplus_icone { width: 14px; margin-bottom: -2px; } .close_icone { width: 18px; margin-bottom: 10px; } .savoirplus_content { margin-top: 30px; background-color: #fefefe; padding: 20px; border: 5px solid #E73058; border-radius: 20px; } @media (max-width: 600px) { .savoirplus_content { padding: 10px; } } .savoirplus_content ol { margin-left: 20px; } .savoirplus_content ol li { list-style-type: decimal; } .savoirplus_content ul { margin-left: 20px; } .savoirplus_content ul li { list-style-type: circle; } .savoirplus_content .gras { font-family: cabin_semibold; } .savoirplus_content .souligne { text-decoration: underline; } .savoirplus_content .rouge { color: #E73058; } .savoirplus_accueil { width: 80%; margin-top: 90px; margin-right: auto; margin-left: auto; } @media (max-width: 600px) { .savoirplus_accueil { width: 95%; } } .savoirplus_accueil .savoirplus_button { text-align: center; text-decoration: underline; } .savoirplus_accueil .savoirplus_button:hover { cursor: pointer; } .savoirplus_stage_accueil { max-width: 550px; margin-top: 150px; margin-right: auto; margin-left: auto; } @media (max-width: 600px) { .savoirplus_stage_accueil { width: 95%; } } .savoirplus_stage_accueil .savoirplus_button { text-align: center; text-decoration: underline; } .savoirplus_stage_accueil .savoirplus_button:hover { cursor: pointer; } .savoirplus_stage { max-width: 550px; margin-top: 15px; margin-bottom: 48px; margin-right: auto; margin-left: auto; } @media (max-width: 600px) { .savoirplus_stage { width: 95%; } } .savoirplus_stage p { font-size: 14px; } .titre { margin-bottom: 60px; } @media (max-width: 600px) { .titre { margin-left: 10px; margin-right: 10px; } } @media (min-width: 600px) and (max-width: 1200px) { .titre { margin-left: 20px; margin-right: 20px; } } .titre h1 { margin-bottom: 9px; text-align: center; font-family: cabin_semibold; font-size: 24px; } .titre p { text-align: center; font-family: cabin_bold; font-size: 24px; color: #1c1c1c; } .titre p .soft { font-family: cabin_semibold; color: #707070; } .sous_titre { display: flex; column-gap: 25px; align-items: center; justify-content: flex-start; margin-bottom: 20px; } .sous_titre img { max-height: 90px; min-height: 45px; } .sous_titre p { font-size: 18px; } .sous_titre_centre { justify-content: center !important; } .textcenter { text-align: center; } .note { font-family: montserrat_light; font-size: 15px !important; color: #E73058; } .note li:before { content: "- "; } /* ***************************************** */ /* ***************************************** */ /* LE FOOTER */ /* ***************************************** */ /* ***************************************** */ footer { min-height: 300px; margin-top: 100px; background-color: #343434; padding: 15px; display: grid; } footer .version { align-self: end; color: white; text-align: end; font-size: 11px; } /* ***************************************** */ /* ***************************************** */ /* INPUT */ /* ***************************************** */ /* ***************************************** */ /* FORMAT DE LA STRUCTURE DU CHAMP DE SAISIE */ /* ***************************************** */ .input_box { position: relative; } .input_box label { position: absolute; top: -12px; left: 6px; margin-left: 6px; padding-left: 7px; padding-right: 10px; background-color: white; } .input_box .labeltextarea { top: -28px; } .input_box input[type=email] { padding-left: 16px; padding-right: 13px; background-color: white; border: 2px solid #454343; outline: none; border-radius: 5px; color: #454343; } .input_box input[type=email]:focus-visible, .input_box input[type=email]:focus, .input_box input[type=email]:focus-within, .input_box input[type=email]:hover, .input_box input[type=email]:focus, .input_box input[type=email]:active, .input_box input[type=email]:visited, .input_box input[type=email]:target { background-color: white !important; border: 2px solid #454343; outline: none; } .input_box input[type=email]:-webkit-autofill, .input_box input[type=email]:-webkit-autofill:hover, .input_box input[type=email]:-webkit-autofill:focus, .input_box input[type=email]:-webkit-autofill:active, .input_box input[type=email]:-webkit-autofill:focus-visible, .input_box input[type=email]:-webkit-autofill:focus-within, .input_box input[type=email]:-webkit-autofill:visited, .input_box input[type=email]:target { box-shadow: 0 0 0 30px white inset !important; } .input_box input, .input_box input[type=text], .input_box input[type=tel], .input_box input[type=date], .input_box textarea { max-width: 500px; padding-top: 14px; padding-bottom: 6px; padding-left: 10px; padding-right: 8px; background-color: white; border-radius: 5px; outline: none; } @media (max-width: 600px) { .input_box input, .input_box input[type=text], .input_box input[type=tel], .input_box input[type=date], .input_box textarea { min-width: 240px; } } @media (min-width: 600px) and (max-width: 1200px) { .input_box input, .input_box input[type=text], .input_box input[type=tel], .input_box input[type=date], .input_box textarea { min-width: 250px; } } @media (min-width: 1200px) { .input_box input, .input_box input[type=text], .input_box input[type=tel], .input_box input[type=date], .input_box textarea { min-width: 330px; } } .input_box input:focus-visible, .input_box input:focus, .input_box input:focus-within, .input_box input:hover, .input_box input:focus, .input_box input:active, .input_box input:visited, .input_box input:target, .input_box input[type=text]:focus-visible, .input_box input[type=text]:focus, .input_box input[type=text]:focus-within, .input_box input[type=text]:hover, .input_box input[type=text]:focus, .input_box input[type=text]:active, .input_box input[type=text]:visited, .input_box input[type=text]:target, .input_box input[type=tel]:focus-visible, .input_box input[type=tel]:focus, .input_box input[type=tel]:focus-within, .input_box input[type=tel]:hover, .input_box input[type=tel]:focus, .input_box input[type=tel]:active, .input_box input[type=tel]:visited, .input_box input[type=tel]:target, .input_box input[type=date]:focus-visible, .input_box input[type=date]:focus, .input_box input[type=date]:focus-within, .input_box input[type=date]:hover, .input_box input[type=date]:focus, .input_box input[type=date]:active, .input_box input[type=date]:visited, .input_box input[type=date]:target, .input_box textarea:focus-visible, .input_box textarea:focus, .input_box textarea:focus-within, .input_box textarea:hover, .input_box textarea:focus, .input_box textarea:active, .input_box textarea:visited, .input_box textarea:target { background-color: white !important; border: 2px solid #454343; outline: none; } .input_box input:-webkit-autofill, .input_box input:-webkit-autofill:hover, .input_box input:-webkit-autofill:focus, .input_box input:-webkit-autofill:active, .input_box input:-webkit-autofill:focus-visible, .input_box input:-webkit-autofill:focus-within, .input_box input:-webkit-autofill:visited, .input_box input:target, .input_box input[type=text]:-webkit-autofill, .input_box input[type=text]:-webkit-autofill:hover, .input_box input[type=text]:-webkit-autofill:focus, .input_box input[type=text]:-webkit-autofill:active, .input_box input[type=text]:-webkit-autofill:focus-visible, .input_box input[type=text]:-webkit-autofill:focus-within, .input_box input[type=text]:-webkit-autofill:visited, .input_box input[type=text]:target, .input_box input[type=tel]:-webkit-autofill, .input_box input[type=tel]:-webkit-autofill:hover, .input_box input[type=tel]:-webkit-autofill:focus, .input_box input[type=tel]:-webkit-autofill:active, .input_box input[type=tel]:-webkit-autofill:focus-visible, .input_box input[type=tel]:-webkit-autofill:focus-within, .input_box input[type=tel]:-webkit-autofill:visited, .input_box input[type=tel]:target, .input_box input[type=date]:-webkit-autofill, .input_box input[type=date]:-webkit-autofill:hover, .input_box input[type=date]:-webkit-autofill:focus, .input_box input[type=date]:-webkit-autofill:active, .input_box input[type=date]:-webkit-autofill:focus-visible, .input_box input[type=date]:-webkit-autofill:focus-within, .input_box input[type=date]:-webkit-autofill:visited, .input_box input[type=date]:target, .input_box textarea:-webkit-autofill, .input_box textarea:-webkit-autofill:hover, .input_box textarea:-webkit-autofill:focus, .input_box textarea:-webkit-autofill:active, .input_box textarea:-webkit-autofill:focus-visible, .input_box textarea:-webkit-autofill:focus-within, .input_box textarea:-webkit-autofill:visited, .input_box textarea:target { box-shadow: 0 0 0 30px white inset !important; } .input_box select { max-width: 500px; padding-top: 14px; padding-bottom: 6px; padding-left: 10px; padding-right: 8px; background-color: white; border-radius: 5px; outline: none; } @media (max-width: 600px) { .input_box select { min-width: 261px; max-width: 261px; } } @media (min-width: 600px) and (max-width: 1200px) { .input_box select { min-width: 272px; } } @media (min-width: 1200px) { .input_box select { min-width: 350px; } } .input_box select:focus-visible, .input_box select:focus, .input_box select:focus-within, .input_box select:hover, .input_box select:focus, .input_box select:active, .input_box select:visited, .input_box select:target { background-color: white !important; border: 2px solid #454343; outline: none; } .input_box select:-webkit-autofill, .input_box select:-webkit-autofill:hover, .input_box select:-webkit-autofill:focus, .input_box select:-webkit-autofill:active, .input_box select:-webkit-autofill:focus-visible, .input_box select:-webkit-autofill:focus-within, .input_box select:-webkit-autofill:visited, .input_box select:target { box-shadow: 0 0 0 30px white inset !important; } .input_box_gris label { color: #707070; } .input_box_gris input, .input_box_gris input[type=text], .input_box_gris input[type=tel], .input_box_gris input[type=date], .input_box_gris select, .input_box_gris textarea { border: 1.8px solid #707070; } .input_box_bleu label { color: #7984D1; } .input_box_bleu input, .input_box_bleu input[type=text], .input_box_bleu input[type=tel], .input_box_bleu input[type=date], .input_box_bleu select, .input_box_bleu textarea { border: 1.8px solid #1B299A; } .input_box_rouge label { color: #E73058; } .input_box_rouge input, .input_box_rouge input[type=text], .input_box_rouge input[type=tel], .input_box_rouge input[type=date], .input_box_rouge select, .input_box_rouge textarea { border: 1.8px solid #E73058; } .input_box_green label { color: #11a63d; } .input_box_green input, .input_box_green input[type=text], .input_box_green input[type=tel], .input_box_green input[type=date], .input_box_green select, .input_box_green textarea { border: 1.8px solid #11a63d; } /* FORMAT DU CONTENUE DU CHAMP DE SAISIE */ /* ***************************************** */ .input_email { margin-bottom: 11px; } .input_email input[type=email], .input_email input[type=text] { max-width: 500px; font-family: montserrat_light; font-size: 15px; } @media (max-width: 600px) { .input_email input[type=email], .input_email input[type=text] { min-width: 240px; } } @media (min-width: 600px) { .input_email input[type=email], .input_email input[type=text] { min-width: 330px; } } @media (max-width: 600px) { .input_email input[type=email], .input_email input[type=text] { font-size: 12px; } } .input_email input[type=email]::placeholder, .input_email input[type=text]::placeholder { font-family: cabin_italic; font-size: 12px; color: #A2A0A0; } .input_identifiant { margin-bottom: 11px; } .input_identifiant .inputbox_identifiant { max-width: 500px; padding-top: 19px !important; padding-bottom: 16px !important; padding-left: 16px !important; padding-right: 13px !important; background-color: white !important; border: 2px solid #454343 !important; outline: none; color: #454343; } @media (max-width: 600px) { .input_identifiant .inputbox_identifiant { min-width: 240px; } } @media (min-width: 600px) { .input_identifiant .inputbox_identifiant { min-width: 330px; } } .input_identifiant .inputbox_identifiant:focus-visible, .input_identifiant .inputbox_identifiant:focus, .input_identifiant .inputbox_identifiant:focus-within, .input_identifiant .inputbox_identifiant:hover, .input_identifiant .inputbox_identifiant:focus, .input_identifiant .inputbox_identifiant:active, .input_identifiant .inputbox_identifiant:visited, .input_identifiant .inputbox_identifiant:target { background-color: white !important; border: 2px solid #454343; outline: none; } .input_identifiant .inputbox_identifiant:-webkit-autofill, .input_identifiant .inputbox_identifiant:-webkit-autofill:hover, .input_identifiant .inputbox_identifiant:-webkit-autofill:focus, .input_identifiant .inputbox_identifiant:-webkit-autofill:active, .input_identifiant .inputbox_identifiant:-webkit-autofill:focus-visible, .input_identifiant .inputbox_identifiant:-webkit-autofill:focus-within, .input_identifiant .inputbox_identifiant:-webkit-autofill:visited, .input_identifiant .inputbox_identifiant:target { box-shadow: 0 0 0 30px white inset !important; } @media (max-width: 600px) { .input_identifiant .inputbox_identifiant { font-size: 12px; } } .input_identifiant .inputbox_identifiant::placeholder { font-family: cabin_italic; font-size: 12px; color: #A2A0A0; } .input_text label { font-size: 14px; } @media (max-width: 600px) { .input_text label { font-size: 13px; } } .input_text input, .input_text input[type=text], .input_text input[type=tel], .input_text input[type=date], .input_text select, .input_text textarea { font-family: cabin_regular; font-size: 14px; color: #1c1c1c; } @media (max-width: 600px) { .input_text input, .input_text input[type=text], .input_text input[type=tel], .input_text input[type=date], .input_text select, .input_text textarea { font-size: 13px; } } .input_text input:-webkit-autofill, .input_text input:-webkit-autofill:hover, .input_text input:-webkit-autofill:focus, .input_text input:-webkit-autofill:active, .input_text input:-webkit-autofill:focus-visible, .input_text input:-webkit-autofill:focus-within, .input_text input:-webkit-autofill:visited, .input_text input:target, .input_text input[type=text]:-webkit-autofill, .input_text input[type=text]:-webkit-autofill:hover, .input_text input[type=text]:-webkit-autofill:focus, .input_text input[type=text]:-webkit-autofill:active, .input_text input[type=text]:-webkit-autofill:focus-visible, .input_text input[type=text]:-webkit-autofill:focus-within, .input_text input[type=text]:-webkit-autofill:visited, .input_text input[type=text]:target, .input_text input[type=tel]:-webkit-autofill, .input_text input[type=tel]:-webkit-autofill:hover, .input_text input[type=tel]:-webkit-autofill:focus, .input_text input[type=tel]:-webkit-autofill:active, .input_text input[type=tel]:-webkit-autofill:focus-visible, .input_text input[type=tel]:-webkit-autofill:focus-within, .input_text input[type=tel]:-webkit-autofill:visited, .input_text input[type=tel]:target, .input_text input[type=date]:-webkit-autofill, .input_text input[type=date]:-webkit-autofill:hover, .input_text input[type=date]:-webkit-autofill:focus, .input_text input[type=date]:-webkit-autofill:active, .input_text input[type=date]:-webkit-autofill:focus-visible, .input_text input[type=date]:-webkit-autofill:focus-within, .input_text input[type=date]:-webkit-autofill:visited, .input_text input[type=date]:target, .input_text select:-webkit-autofill, .input_text select:-webkit-autofill:hover, .input_text select:-webkit-autofill:focus, .input_text select:-webkit-autofill:active, .input_text select:-webkit-autofill:focus-visible, .input_text select:-webkit-autofill:focus-within, .input_text select:-webkit-autofill:visited, .input_text select:target, .input_text textarea:-webkit-autofill, .input_text textarea:-webkit-autofill:hover, .input_text textarea:-webkit-autofill:focus, .input_text textarea:-webkit-autofill:active, .input_text textarea:-webkit-autofill:focus-visible, .input_text textarea:-webkit-autofill:focus-within, .input_text textarea:-webkit-autofill:visited, .input_text textarea:target { -webkit-text-fill-color: #1c1c1c; } .input_text input::placeholder, .input_text input[type=text]::placeholder, .input_text input[type=tel]::placeholder, .input_text input[type=date]::placeholder, .input_text select::placeholder, .input_text textarea::placeholder { font-family: cabin_italic; font-size: 12px; color: #A2A0A0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } /* ***************************************** */ /* ***************************************** */ /* CHECKBOX */ /* ***************************************** */ /* ***************************************** */ .input_checkbox label { margin-left: 5px; font-size: 14px; color: #707070; } @media (max-width: 600px) { .input_checkbox label { font-size: 13px; } } .input_checkbox input[type=checkbox] { appearance: none; width: 17px; height: 17px; margin: 0; transform: translateY(3.9px); border: 0.15em solid #E73058; border-radius: 3px; font: inherit; } .input_checkbox input[type=checkbox]:checked { background-color: #E73058; } .input_checkbox_bleu input[type=checkbox] { border: 0.15em solid #3644AC !important; } .input_checkbox_bleu input[type=checkbox]:checked { background-color: #3644AC !important; } .input_checkbox_green input[type=checkbox] { border: 0.15em solid #11a63d !important; } .input_checkbox_green input[type=checkbox]:checked { background-color: #11a63d !important; } /* ***************************************** */ /* ***************************************** */ /* BUTTONS */ /* ***************************************** */ /* ***************************************** */ .button_icone { appearance: none; width: 170px; height: 60px; margin: 0; box-shadow: -10px 16px 24px -18px rgba(0, 0, 0, 0.6); border: none; border-radius: 28px; font: inherit; background-color: #E73058; color: white; } .button_icone .btn_icone { font-family: montserrat_regular; font-size: 36px; } .button_icone .btn_texte { display: inline-block; transform: translateY(-7px); padding-left: 10px; font-size: 17px; } .button_text { appearance: none; width: 100px; height: 35px; margin: 0; box-shadow: -10px 16px 24px -18px rgba(0, 0, 0, 0.6); border: none; border-radius: 20px; font: inherit; background-color: #E73058; color: white; font-size: 15px; } .button_sansicone .btn_texte { transform: translateY(0px); padding-left: 0px; } .text_listeatt { font-size: 12px; text-decoration: underline; } .erreur { max-width: 500px; display: flex; flex-direction: column; margin-left: auto; margin-right: auto; margin-bottom: 70px; color: #E73058; text-align: center; } @media (max-width: 600px) { .erreur { margin-left: 10px; margin-right: 10px; } } @media (min-width: 600px) and (max-width: 1200px) { .erreur { margin-left: auto; margin-right: auto; } } .erreur p { margin-bottom: 15px; color: #E73058; } .erreur .souligne { text-decoration: underline; } .form_check_mail { display: grid; grid-template-columns: 2fr 1fr 2fr; grid-template-rows: auto auto auto auto; grid-template-areas: ". input ." ". checkbox checkbox" ". input_code ." ". button ."; } .form_check_mail .input_email { grid-area: input; } .form_check_mail .input_checkbox { grid-area: checkbox; margin-top: 5px; margin-left: 5px; margin-bottom: 35px; } .form_check_mail .input_checkbox .gras { font-family: cabin_semibold; color: #343434; } .form_check_mail .input_code { grid-area: input_code; margin-bottom: 40px; } .form_check_mail button { grid-area: button; justify-self: center; } .open_modal { display: grid; justify-content: center; margin-top: 150px; text-decoration: underline; } .open_modal p:hover { cursor: pointer; } .prelude { /*display: grid;*/ /*justify-content: center;*/ /*margin-top: 150px;*/ /* **************************************************************** */ /* ** POUR FENETRE MODALE ** */ /* **************************************************************** */ display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 150px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ /* **************************************************************** */ font-family: cabin_regular; font-size: 15px; } .prelude .prelude_content { /*max-width: 700px;*/ /* **************************************************************** */ /* ** POUR FENETRE MODALE ** */ /* **************************************************************** */ background-color: #fefefe; margin: auto; padding: 20px; border: 5px solid #E73058; border-radius: 20px; width: 80%; /* **************************************************************** */ } .prelude ol { margin-left: 20px; } .prelude ol li { list-style-type: decimal; } .prelude ul { margin-left: 20px; } .prelude ul li { list-style-type: circle; } .prelude .gras { font-family: cabin_semibold; } .prelude_close { float: right; margin-top: -25px; font-size: 50px; color: #E73058; } .prelude_close:hover, .prelude_close:focus { cursor: pointer; color: #E73058; text-decoration: none; } .flex_centre { align-items: center !important; justify-content: center; } @page { font-family: montserrat_regular; margin: 1cm; } .weasyprint { color: #14213d; font-family: montserrat_regular; font-size: 10pt; } .weasyprint .logo { max-width: 300px; height: 100%; object-fit: cover; } .weasyprint article { margin-left: 30px; margin-right: 30px; } .weasyprint article .header_wp { display: flex; justify-content: flex-end; } .weasyprint article .header_wp .header { width: 50%; } .weasyprint article .header_wp .header .date { display: flex; justify-content: flex-start; } .weasyprint article .header_wp .header .afps { display: flex; justify-content: flex-start; } .weasyprint article .content { margin-left: 30px; } .weasyprint article .content h1 { color: #E73058; font-family: montserrat_bold; font-size: 20px; text-transform: uppercase; } .weasyprint article .content p { margin-bottom: 5px; } .weasyprint article .content p .label { color: #707070; } /* ***************************************** */ /* ***************************************** */ /* ADHESION */ /* PAGE ACCUEIL SAISIE DU MAIL */ /* ***************************************** */ /* ***************************************** */ /* **************************************************************** */ /* ** OUVRIR EN SAVOIR PLUS ** */ /* **************************************************************** */ .message_fin { display: flex; flex-direction: column; align-items: center; } .form_adhesion { display: grid; justify-content: center; } @media (min-width: 600px) { .form_adhesion { margin-left: 30px; margin-right: 30px; } } @media (max-width: 600px) { .form_adhesion { margin-left: 11px; margin-right: 10px; } } .form_adhesion .input_checkbox { margin-bottom: 37px; } .form_adhesion .explication { max-width: 300px; margin-bottom: 35px; color: #101D77; } .form_adhesion .explication_pleine_page { margin-bottom: 38px; color: #101D77; } .form_adhesion .ajout_ecole_button { margin-top: -35px; margin-bottom: 30px; text-decoration: underline; font-family: montserrat_light; font-size: 12px; } .form_adhesion .ajout_ecole_button:hover { cursor: pointer; } .form_adhesion h2 { margin-bottom: 40px; font-size: 16px; } .grid_3inputs { display: grid; grid-template-columns: minmax(auto, 350px) minmax(auto, 350px) minmax(auto, 350px); grid-template-rows: auto; column-gap: 20px; row-gap: 30px; margin-bottom: 50px; margin-top: 10px; } @media (max-width: 600px) { .grid_3inputs { grid-template-columns: minmax(auto, 350px); } } @media (min-width: 600px) and (max-width: 1200px) { .grid_3inputs { grid-template-columns: minmax(auto, 350px) minmax(auto, 350px); } } .grid_2inputs { display: grid; grid-template-columns: minmax(auto, 350px) minmax(auto, 350px); grid-template-rows: auto; column-gap: 20px; row-gap: 30px; margin-bottom: 35px; } @media (max-width: 600px) { .grid_2inputs { grid-template-columns: minmax(auto, 350px); } } .grid_1inputs { display: grid; grid-template-columns: minmax(auto, 550px); grid-template-rows: auto; row-gap: 30px; margin-bottom: 35px; } @media (max-width: 600px) { .grid_1inputs { grid-template-columns: minmax(auto, 350px); } } .paiement_explication { max-width: 500px; margin-top: 20px; padding: 11px; border-radius: 16px; background-color: rgba(231, 48, 88, 0.1294117647); font-size: 12px; color: #707070; } @media (max-width: 600px) { .paiement_explication { max-width: 242px; } } .hidden { display: none; } .identifiant { padding-left: 5px; font-family: cabin_regular; color: #707070; } @media (max-width: 600px) { .identifiant { display: block; margin-top: 5px; } } .paiement_container { display: grid; grid-column-gap: 20px; grid-template-columns: 1fr 2fr 1fr; grid-template-areas: ". paiement ."; } @media (max-width: 600px) { .paiement_container { grid-column-gap: unset; } } @media (max-width: 600px) { .paiement_container { grid-template-columns: minmax(5px, 300px) minmax(277px, 600px) minmax(10px, 300px); } } @media (min-width: 600px) and (max-width: 1200px) { .paiement_container { grid-template-columns: minmax(10px, 300px) minmax(300px, 600px) minmax(10px, 300px); } } .paiement_container .paiement { grid-area: paiement; border: 2px solid #E73058; display: grid; grid-column-gap: 20px; grid-row-gap: 15px; grid-template-columns: 1fr 3fr 4fr; grid-template-rows: auto auto auto auto auto auto auto auto auto; grid-template-areas: "paiement_titre paiement_titre paiement_titre" ". montant_cotisation_label montant_cotisation_euros_box" ". montant_don_label montant_don_euros_box" ". . don" ". montant_total_label montant_total_euros_box" ". paiement_mode ." ". paiement_mode_choix paiement_mode_choix_nocb" ". paiement_cb paiement_cb" ". paiement_nocb_form paiement_nocb_form"; } @media (max-width: 600px) { .paiement_container .paiement { grid-column-gap: unset; } } @media (max-width: 600px) { .paiement_container .paiement { grid-template-columns: 10px 4fr 3fr; } } @media (min-width: 600px) and (max-width: 1200px) { .paiement_container .paiement { grid-template-columns: 0px 3fr 4fr; } } @media (max-width: 600px) { .paiement_container .paiement { grid-template-areas: "paiement_titre paiement_titre paiement_titre" ". montant_cotisation_label montant_cotisation_euros_box" ". montant_don_label montant_don_euros_box" ". don don" ". montant_total_label montant_total_euros_box" ". paiement_mode ." ". paiement_mode_choix paiement_mode_choix_nocb" ". paiement_cb paiement_cb" ". paiement_nocb_form paiement_nocb_form"; } } @media (min-width: 600px) and (max-width: 1200px) { .paiement_container .paiement { grid-template-areas: "paiement_titre paiement_titre paiement_titre" ". montant_cotisation_label montant_cotisation_euros_box" ". montant_don_label montant_don_euros_box" ". don don" ". montant_total_label montant_total_euros_box" ". paiement_mode ." ". paiement_mode_choix paiement_mode_choix_nocb" ". paiement_cb paiement_cb" ". paiement_nocb_form paiement_nocb_form"; } } .paiement_container .paiement .paiement_titre { grid-area: paiement_titre; margin-bottom: 30px; padding-bottom: 5px; padding-top: 5px; background-color: #E73058; color: white; text-align: center; } .paiement_container .paiement .montant_cotisation_label { grid-area: montant_cotisation_label; align-self: center; color: #A2A0A0; } @media (max-width: 600px) { .paiement_container .paiement .montant_cotisation_label { font-size: 15px; } } @media (min-width: 600px) and (max-width: 1200px) { .paiement_container .paiement .montant_cotisation_label { font-size: 15px; } } .paiement_container .paiement .montant_cotisation_euros_box { grid-area: montant_cotisation_euros_box; } .paiement_container .paiement .input_text_don label { font-size: 14px; } @media (max-width: 600px) { .paiement_container .paiement .input_text_don label { font-size: 13px; } } @media (min-width: 600px) and (max-width: 1200px) { .paiement_container .paiement .input_text_don label { font-size: 13px; } } .paiement_container .paiement .input_text_don input, .paiement_container .paiement .input_text_don input[type=text], .paiement_container .paiement .input_text_don input[type=tel], .paiement_container .paiement .input_text_don input[type=date], .paiement_container .paiement .input_text_don select { min-height: 22px; font-size: 14px; color: #1c1c1c; } @media (max-width: 600px) { .paiement_container .paiement .input_text_don input, .paiement_container .paiement .input_text_don input[type=text], .paiement_container .paiement .input_text_don input[type=tel], .paiement_container .paiement .input_text_don input[type=date], .paiement_container .paiement .input_text_don select { font-size: 15px; } } @media (min-width: 600px) and (max-width: 1200px) { .paiement_container .paiement .input_text_don input, .paiement_container .paiement .input_text_don input[type=text], .paiement_container .paiement .input_text_don input[type=tel], .paiement_container .paiement .input_text_don input[type=date], .paiement_container .paiement .input_text_don select { font-size: 15px; } } @media (max-width: 600px) { .paiement_container .paiement .input_text_don input, .paiement_container .paiement .input_text_don input[type=text], .paiement_container .paiement .input_text_don input[type=tel], .paiement_container .paiement .input_text_don input[type=date], .paiement_container .paiement .input_text_don select { font-size: 15px; } } .paiement_container .paiement .input_text_don input:-webkit-autofill, .paiement_container .paiement .input_text_don input:-webkit-autofill:hover, .paiement_container .paiement .input_text_don input:-webkit-autofill:focus, .paiement_container .paiement .input_text_don input:-webkit-autofill:active, .paiement_container .paiement .input_text_don input:-webkit-autofill:focus-visible, .paiement_container .paiement .input_text_don input:-webkit-autofill:focus-within, .paiement_container .paiement .input_text_don input:-webkit-autofill:visited, .paiement_container .paiement .input_text_don input:target, .paiement_container .paiement .input_text_don input[type=text]:-webkit-autofill, .paiement_container .paiement .input_text_don input[type=text]:-webkit-autofill:hover, .paiement_container .paiement .input_text_don input[type=text]:-webkit-autofill:focus, .paiement_container .paiement .input_text_don input[type=text]:-webkit-autofill:active, .paiement_container .paiement .input_text_don input[type=text]:-webkit-autofill:focus-visible, .paiement_container .paiement .input_text_don input[type=text]:-webkit-autofill:focus-within, .paiement_container .paiement .input_text_don input[type=text]:-webkit-autofill:visited, .paiement_container .paiement .input_text_don input[type=text]:target, .paiement_container .paiement .input_text_don input[type=tel]:-webkit-autofill, .paiement_container .paiement .input_text_don input[type=tel]:-webkit-autofill:hover, .paiement_container .paiement .input_text_don input[type=tel]:-webkit-autofill:focus, .paiement_container .paiement .input_text_don input[type=tel]:-webkit-autofill:active, .paiement_container .paiement .input_text_don input[type=tel]:-webkit-autofill:focus-visible, .paiement_container .paiement .input_text_don input[type=tel]:-webkit-autofill:focus-within, .paiement_container .paiement .input_text_don input[type=tel]:-webkit-autofill:visited, .paiement_container .paiement .input_text_don input[type=tel]:target, .paiement_container .paiement .input_text_don input[type=date]:-webkit-autofill, .paiement_container .paiement .input_text_don input[type=date]:-webkit-autofill:hover, .paiement_container .paiement .input_text_don input[type=date]:-webkit-autofill:focus, .paiement_container .paiement .input_text_don input[type=date]:-webkit-autofill:active, .paiement_container .paiement .input_text_don input[type=date]:-webkit-autofill:focus-visible, .paiement_container .paiement .input_text_don input[type=date]:-webkit-autofill:focus-within, .paiement_container .paiement .input_text_don input[type=date]:-webkit-autofill:visited, .paiement_container .paiement .input_text_don input[type=date]:target, .paiement_container .paiement .input_text_don select:-webkit-autofill, .paiement_container .paiement .input_text_don select:-webkit-autofill:hover, .paiement_container .paiement .input_text_don select:-webkit-autofill:focus, .paiement_container .paiement .input_text_don select:-webkit-autofill:active, .paiement_container .paiement .input_text_don select:-webkit-autofill:focus-visible, .paiement_container .paiement .input_text_don select:-webkit-autofill:focus-within, .paiement_container .paiement .input_text_don select:-webkit-autofill:visited, .paiement_container .paiement .input_text_don select:target { -webkit-text-fill-color: #1c1c1c; } .paiement_container .paiement .input_text_don input::placeholder, .paiement_container .paiement .input_text_don input[type=text]::placeholder, .paiement_container .paiement .input_text_don input[type=tel]::placeholder, .paiement_container .paiement .input_text_don input[type=date]::placeholder, .paiement_container .paiement .input_text_don select::placeholder { font-family: cabin_italic; font-size: 12px; color: #A2A0A0; } .paiement_container .paiement .don { grid-area: don; margin-top: 22px; margin-right: 15px; } .paiement_container .paiement .montant_don_label { grid-area: montant_don_label; align-self: center; color: #A2A0A0; } .paiement_container .paiement .montant_don_euros_box { grid-area: montant_don_euros_box; } .paiement_container .paiement .montant_total_label { grid-area: montant_total_label; align-self: center; } .paiement_container .paiement .montant_total_euros_box { grid-area: montant_total_euros_box; } .paiement_container .paiement .paiement_mode { grid-area: paiement_mode; margin-top: 40px; } .paiement_container .paiement .paiement_mode_choix { grid-area: paiement_mode_choix; } .paiement_container .paiement .paiement_mode_choix_nocb { grid-area: paiement_mode_choix_nocb; } .paiement_container .paiement #paiement_cb { grid-area: paiement_cb; } .paiement_container .paiement .paiement_nocb { grid-area: paiement_cb; } .paiement_container .paiement .paiement_nocb_choix { display: flex; } .paiement_container .paiement .paiement_nocb_choix_cheque { margin-left: 20px; } .paiement_container .paiement .open_modal_don { display: grid; margin-top: 6px; margin-bottom: 45px; text-decoration: underline; font-size: 12px; } .paiement_container .paiement .open_modal_don p:hover { cursor: pointer; } .paiement_container .paiement .montant_cotisation_euros { display: inline-block; padding-top: 8px; padding-bottom: 6px; padding-left: 10px; padding-right: 8px; } @media (max-width: 600px) { .paiement_container .paiement .montant_cotisation_euros { font-size: 15px; } } @media (min-width: 600px) and (max-width: 1200px) { .paiement_container .paiement .montant_cotisation_euros { font-size: 15px; } } .paiement_container .paiement .montant_total_label { color: #E73058; } .paiement_container .paiement .montant_total_euros { display: inline-block; padding-top: 8px; padding-bottom: 6px; padding-left: 10px; padding-right: 8px; color: #E73058; } .paiement_container .paiement .paiement_nocb_form { grid-area: paiement_nocb_form; margin-bottom: 25px; font-size: 13px; } .paiement_container .paiement .paiement_nocb_form .paiement_description { margin-bottom: 3px; font-family: montserrat_light; } .paiement_container .paiement .paiement_nocb_infos { display: grid; grid-template-rows: auto auto auto auto; grid-row-gap: 25px; } .paiement_container .paiement .paiement_nocb_infos .nom_banque { margin-top: 15px; } .paiement_container .paiement .euro_label { padding-left: 8px; color: #A2A0A0; } .adhesion_fin_container { display: grid; grid-column-gap: 20px; grid-template-columns: 1fr 3fr 1fr; grid-template-areas: ". adhesion_fin ."; } @media (max-width: 600px) { .adhesion_fin_container { grid-template-columns: minmax(3px, auto) minmax(auto, 600px) minmax(3px, auto); } } @media (min-width: 600px) and (max-width: 1200px) { .adhesion_fin_container { grid-template-columns: minmax(10px, auto) minmax(400px, 600px) minmax(10px, auto); } } .adhesion_fin_container .adhesion_fin { grid-area: adhesion_fin; display: grid; grid-template-rows: auto auto auto; row-gap: 30px; grid-template-areas: "adhesion_fin_adresse" "adhesion_fin_description" "adhesion_fin_card"; } .adhesion_fin_container .adhesion_fin .adhesion_fin_adresse { grid-area: adhesion_fin_adresse; justify-self: end; } .adhesion_fin_container .adhesion_fin .adhesion_fin_adresse .adhesion_fin_adresse_titre { font-family: montserrat_semibold; } .adhesion_fin_container .adhesion_fin .adhesion_fin_adresse .adhesion_fin_adresse_infos { margin-top: 10px; font-family: montserrat_regular; } .adhesion_fin_container .adhesion_fin .adhesion_fin_adresse .adhesion_fin_adresse_identifiant { margin-top: 15px; font-family: montserrat_thin; } .adhesion_fin_container .adhesion_fin .adhesion_fin_adresse .adhesion_fin_adresse_identifiant .adhesion_fin_adresse_identifiant_bold { font-family: montserrat_regular; } .adhesion_fin_container .adhesion_fin .adhesion_fin_adresse .adhesion_fin_date { margin-top: 15px; font-family: montserrat_thin; } .adhesion_fin_container .adhesion_fin .adhesion_fin_description { grid-area: adhesion_fin_description; margin-top: 60px; text-align: center; } .adhesion_fin_container .adhesion_fin .adhesion_fin_description .adhesion_fin_description_identifiant { margin-top: 20px; font-family: montserrat_thin; font-size: 13px; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card { grid-area: adhesion_fin_card; display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; grid-template-rows: auto auto auto auto; row-gap: 30px; grid-template-areas: "logo logo . adhesion_fin_card_description" ". adhesion_fin_card_identifiant adhesion_fin_card_identifiant adhesion_fin_card_identifiant" ". adhesion_fin_card_profil adhesion_fin_card_profil adhesion_fin_card_profil" ". adhesion_fin_paiement adhesion_fin_paiement adhesion_fin_paiement"; margin: 10%; padding: 20px; background-color: rgba(231, 48, 88, 0.1294117647); border: 4px dashed #E73058; } @media (max-width: 600px) { .adhesion_fin_container .adhesion_fin .adhesion_fin_card { grid-template-columns: 5px minmax(auto, auto) minmax(auto, auto) minmax(5px, auto); } } @media (max-width: 600px) { .adhesion_fin_container .adhesion_fin .adhesion_fin_card { grid-template-rows: auto auto auto auto auto; } } @media (max-width: 600px) { .adhesion_fin_container .adhesion_fin .adhesion_fin_card { grid-template-areas: "logo logo logo ." "adhesion_fin_card_description adhesion_fin_card_description adhesion_fin_card_description adhesion_fin_card_description" ". adhesion_fin_card_identifiant adhesion_fin_card_identifiant adhesion_fin_card_identifiant" ". adhesion_fin_card_profil adhesion_fin_card_profil adhesion_fin_card_profil" ". adhesion_fin_paiement adhesion_fin_paiement adhesion_fin_paiement"; } } @media (max-width: 600px) { .adhesion_fin_container .adhesion_fin .adhesion_fin_card { margin: 0; } } @media (max-width: 600px) { .adhesion_fin_container .adhesion_fin .adhesion_fin_card { padding: 8px; } } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .logo { grid-area: logo; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .logo img { width: 100%; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_card_description { grid-area: adhesion_fin_card_description; justify-self: end; text-align: center; } @media (max-width: 600px) { .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_card_description { justify-self: center; } } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_card_description .adhesion_fin_card_description_assoc { margin-top: 5px; font-family: montserrat_regular; font-size: 14px; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_card_description .adhesion_fin_card_description_annee { margin-top: 5px; font-family: montserrat_light; font-size: 12px; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_card_identifiant { grid-area: adhesion_fin_card_identifiant; margin-top: 14px; font-family: montserrat_thin; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_card_identifiant .adhesion_fin_card_identifiant_mail { padding-left: 10px; font-family: montserrat_regular; color: #E73058; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_card_profil { grid-area: adhesion_fin_card_profil; font-family: montserrat_regular; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_card_profil ul li:before { content: "- "; } .adhesion_fin_container .adhesion_fin .adhesion_fin_card .adhesion_fin_paiement { grid-area: adhesion_fin_paiement; font-family: montserrat_thin; font-size: 13px; } .adhesion_fin_container .adhesion_fin .adhesion_fin_resultat { margin-top: 100px; font-family: montserrat_regular; } .adhesion_fin_container .adhesion_fin .adhesion_fin_resultat li:before { content: "- "; } .stage_formulaire_cont .stage_formulaire { display: flex; flex-direction: column; } .stage_formulaire_cont h1 { margin-bottom: 35px; font-size: 18px; } .stage_formulaire_cont h1 .icone_titre { width: 45px; margin-bottom: -13px; margin-right: 19px; } @media (max-width: 600px) { .stage_formulaire_cont h1 { font-size: 14px; } } @media (min-width: 1200px) { .stage_formulaire_cont .titre_personne { margin-top: 30px; } } @media (min-width: 600px) and (max-width: 1200px) { .stage_formulaire_cont .titre_personne { margin-top: 50px; } } @media (max-width: 600px) { .stage_formulaire_cont .titre_personne { margin-top: 10px; } } .stage_formulaire_cont h2 { margin-bottom: 30px; font-size: 16px; } .stage_formulaire_cont h2 .icone_titre { width: 42px; margin-bottom: -17px; margin-right: 13px; } .stage_formulaire_cont h2 .numero { padding-left: 5px; font-family: cabin_bold; } .stage_formulaire_cont h2 .remove_personne { margin-left: 10px; } @media (max-width: 340px) { .stage_formulaire_cont h2 .remove_personne { display: block; margin-top: 2px; margin-left: 56px; } } .stage_formulaire_cont h2 .input_suppr { display: none; width: 10px; } .stage_formulaire_cont h2 .label_suppr { font-size: 12px; font-family: cabin_regular; color: #707070; } .stage_formulaire_cont .icone_hebergement { display: flex; align-items: end; flex-wrap: wrap; column-gap: 2px; row-gap: 20px; } .stage_formulaire_cont .icone_hebergement .icone { width: 45px; margin-right: 15px; } .stage_formulaire_cont .icone_bus { display: flex; align-items: end; flex-wrap: wrap; column-gap: 2px; row-gap: 20px; margin-top: 30px; } .stage_formulaire_cont .icone_bus .icone { width: 45px; margin-right: 15px; } .stage_formulaire_cont .personne { margin-bottom: 45px; } .stage_formulaire_cont .commentaire { margin-top: 130px; } .stage_formulaire_cont .commentaire .textarea_commentaire { padding-top: 26px; } .stage_formulaire_cont .button_icone { margin-top: 43px; } .stage_formulaire_cont .recap_personne { margin-top: 40px; } .stage_formulaire_cont .recap_personne p { margin-left: 27px; margin-bottom: 5px; font-size: 14px; } .stage_formulaire_cont .tarifs p { margin-left: 27px; margin-bottom: 5px; font-size: 14px; } .stage_formulaire_cont .tarifs_ss_margel { margin-bottom: 20px; } .stage_formulaire_cont .tarifs_ss_margel p { margin-bottom: 5px; font-size: 14px; } .stage_formulaire_cont .tarif_unitaire p { font-family: sourceserifpro_light; } .stage_formulaire_cont .buttons { display: flex; flex-direction: column; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; align-items: center; } .stage_formulaire_cont .buttons .button_icone_recap { width: 206px !important; } .stage_formulaire_cont .savoirplus_accueil { margin-top: 62px !important; } .stage_formulaire_cont hr { width: 80%; margin-top: 50px; margin-bottom: 40px; } .stage_formulaire_cont .description { margin-top: 30px; background-color: #fefefe; padding: 20px; border: 5px solid #E73058; border-radius: 20px; font-family: montserrat_light; } .maj_manuelle { display: grid; justify-content: center; padding-top: 40px; padding-bottom: 30px; } @media (min-width: 600px) { .maj_manuelle { margin-left: 30px; margin-right: 30px; } } @media (max-width: 600px) { .maj_manuelle { margin-left: 11px; margin-right: 10px; } } .maj_manuelle .buttons { display: flex; align-items: center; margin-top: 30px; } .maj_manuelle .resultat_list { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; justify-content: center; margin-top: 38px; } .maj_manuelle .resultat_list .resultat { margin-bottom: 10px; font-family: montserrat_extralight; } .maj_manuelle .resultat_list .resultat .plugras { font-family: montserrat_regular; } .maj_manuelle .resultat_list .resultat .resultat_text { padding-left: 5px; font-family: montserrat_regular; } .place_categorie { background-color: rgba(231, 48, 88, 0.1294117647); padding-top: 20px; padding-bottom: 1px; padding-left: 20px; border-radius: 10px; margin-bottom: 29px; } @media (min-width: 600px) { .place_categorie { margin-left: -20px; margin-right: -20px; } } .grid { display: grid; justify-content: center; } .alignself_center { align-self: center; } .maxwidth_600 { max-width: 600px; } table { table-layout: auto; width: max-content; } table td { padding-right: 10px; padding-bottom: 5px; } table .align_right { text-align: right; } aside { margin-top: 30px; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; } aside h1 { margin-bottom: 10px; } aside li { margin-bottom: 3px; } .form_don { display: grid; grid-template-columns: 2fr 1fr 2fr; grid-template-rows: auto auto auto; grid-template-areas: ". h2 ." ". formulaire ." ". checkbox checkbox" ". button ."; } .form_don h2 { grid-area: h2; margin-bottom: 40px; font-family: cabin_regular; color: #707070; font-size: 18px; } .form_don .formulaire { grid-area: formulaire; } .form_don .input_checkbox { grid-area: checkbox; margin-top: 5px; margin-left: 5px; margin-bottom: 35px; } .form_don .input_checkbox .gras { font-family: cabin_semibold; color: #343434; } .form_don button { grid-area: button; justify-self: center; } .form_don .form_sous_titre { margin-top: 40px; margin-bottom: 35px; } .form_don .input_box { margin-bottom: 30px; } .form_don .commentaire { margin-top: 80px; } .form_don .currency { position: absolute; top: 14px; right: 25px; padding-right: 5px; } .ventevideo .page_header { display: flex; flex-direction: column; } .ventevideo .page_header .illustration { margin-left: auto; margin-right: auto; max-width: 1000px; } .ventevideo .page_header .illustration img { width: 100%; /* Remplit la largeur du conteneur */ height: auto; /* Ajuste automatiquement la hauteur */ object-fit: contain; /* Assure que l'image reste visible en entier, sans être rognée */ } .ventevideo .page_header .titre { margin-bottom: 20px !important; } .ventevideo .page_header .titre h1 { font-family: montserrat_semibold !important; } .ventevideo .page_header mark { padding-left: 3px; padding-right: 3px; } .ventevideo .explication_wp { margin-left: 10vh; margin-right: 10vh; display: flex; justify-content: center; /* Centrer le contenu horizontalement */ box-sizing: border-box; } .ventevideo .explication { display: grid; /* Utilisation de la grille */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonnes dynamiques */ gap: 20px; /* Espacement entre les éléments */ max-width: 1200px; /* Largeur maximale de la grille */ width: 100%; /* Prendre toute la largeur disponible */ justify-content: center; /* Centrer les items dans la grille */ } .ventevideo .explication_item { min-width: 300px; /* Largeur minimale */ max-width: 400px; /* Largeur maximale */ background-color: #f8f8f8; /* Couleur de fond (optionnel) */ padding: 20px; /* Espacement interne */ border-radius: 5px; /* Coins arrondis */ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); /* Ombre (optionnel) */ box-sizing: border-box; /* Inclure le padding dans la largeur totale */ } .ventevideo .explication_item h2 { padding-bottom: 5px; font-family: montserrat_semibold !important; font-size: 16px !important; } /*# sourceMappingURL=app.css.map */