/* CSS de base */ 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; } .bg_green { background-color: green !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: "montsermontserrat_extraboldrat_regular"; 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; } /* ***************************************** */ /* ***************************************** */ /* ESPACE ENTRE LES BLOCS */ /* ***************************************** */ /* ***************************************** */ .space30 { height: 30px; } 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: 150px; 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 { width: 80%; margin-top: 15px; margin-bottom: 48px; margin-right: auto; margin-left: auto; } @media (max-width: 600px) { .savoirplus_stage { width: 95%; } } .titre { margin-bottom: 100px; } @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; } /* ***************************************** */ /* ***************************************** */ /* 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-top: 19px; padding-bottom: 16px; 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; } /* 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; } /* ***************************************** */ /* ***************************************** */ /* 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; } /* ***************************************** */ /* ***************************************** */ /* 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; } .erreur { max-width: 500px; display: flex; flex-direction: column; margin-left: auto; margin-right: auto; margin-bottom: 70px; 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; grid-template-areas: ". input ." ". checkbox checkbox" ". 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 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; } /* ***************************************** */ /* ***************************************** */ /* ADHESION */ /* PAGE ACCUEIL SAISIE DU MAIL */ /* ***************************************** */ /* ***************************************** */ /* **************************************************************** */ /* ** OUVRIR EN SAVOIR PLUS ** */ /* **************************************************************** */ .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 .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; } .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); } } .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; } .stage_formulaire_cont .stage_formulaire { display: flex; flex-direction: column; align-items: center; } .stage_formulaire_cont h1 { margin-bottom: 35px; } .stage_formulaire_cont h1 .icone_titre { width: 45px; margin-bottom: -13px; margin-right: 19px; } @media (max-width: 600px) { .stage_formulaire_cont h1 { font-size: 16px; } } .stage_formulaire_cont .titre_personne { margin-top: 50px; } .stage_formulaire_cont h2 { margin-bottom: 47px; 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 .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, .stage_formulaire_cont .tarifs p { margin-left: 27px; margin-bottom: 5px; font-size: 14px; } .stage_formulaire_cont .buttons { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; justify-content: center; margin-top: 30px; } .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; margin-bottom: 60px; background-color: #fefefe; padding: 20px; border: 5px solid #E73058; border-radius: 20px; font-family: montserrat_light; } /*# sourceMappingURL=app.css.map */