/* !! NOTE about @import !! La règle @ @import est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées AVANT toutes les autres règles, à l'exception de @charset. @import n'est pas une instruction imbriquée et ne peut donc pas être utilisée à l'intérieur de groupe de règles conditionnelles. */ /* ======================== >>> START FONTS IMPORTS ============================== */ /* !! @import(s) HERE "some-path-or-link-to-file.css"; !! */ @import "../../../fonts/typo.css"; /* ======================================== END FONTS IMPORTS <<< ====================== */ /* ======================= >>> START HRAF IMPORTS =========================== */ /* !! @import(s) HERE "some-path-or-link-to-file.css"; !! */ /* ========================= END MY IMPORTS <<< =================== */ /* ============== >>> START CSS ================ */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ .hidden { display: none !important; } .visible { visibility: visible; z-index: 500 !important; } .invisible { visibility: hidden; z-index: -500 !important; } /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° MAIN-FORMS Global ---------------- (contact, files_download, etc.) °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ #mainAncillaryCTAs { width: 100%; height: auto; max-width: 328px; min-height: 32px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; position: relative; /* top: 24px; */ margin: 0 auto; padding: 0; /* background-color: red; */ } .ancillaryCTAs { width: 160px; height: 32px; max-width: 160px; max-height: 32px; } #mainAncillaryCTAs .envoyerUnMessage, #mainAncillaryCTAs .telechargerLePortfolio { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0; padding: 0; box-sizing: border-box !important; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; cursor: pointer; /* -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; */ -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } #mainAncillaryCTAs .envoyerUnMessage { border: none; color: rgba(242, 242, 242, 1); background-color: rgba(24, 91, 167, 1); } #mainAncillaryCTAs .telechargerLePortfolio { border: solid 1px rgba(24, 91, 167, 1); color: rgba(24, 91, 167, 1); background-color: transparent; } #mainAncillaryCTAs .envoyerUnMessage p, #mainAncillaryCTAs .telechargerLePortfolio p { margin: 0 8px 0; padding: 0; font-family: 'Titillium Web'; font-size: 14px; font-weight: 600; font-style: normal; line-height: 18px; letter-spacing: .064em; } #mainAncillaryCTAs .envoyerUnMessage svg, #mainAncillaryCTAs .telechargerLePortfolio svg { max-width: 16px; height: 16px; margin: 0 0 0 8px; padding: 0; } #mainAncillaryCTAs .telechargerLePortfolio svg { fill: none; stroke: #185ba7; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; } ul#mainAncillaryCTAs li button:hover { border: none; color: rgba(242, 242, 242, 1); background-color: rgba(24, 91, 167, 1); } ul#mainAncillaryCTAs li button:disabled, ul#mainAncillaryCTAs li button:hover:disabled { cursor: default; border: none; /* border: solid 1.5px rgba(108, 135, 167, .24); */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: rgba(111, 125, 149, .24); -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; background-color: rgba(122, 161, 226, .04); } ul#mainAncillaryCTAs li button:hover.telechargerLePortfolio svg { stroke: #ffffff; /* background-image: url("data:image/svg+xml,%3Csvg id='formations' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.5 15.5'%3E%3Cpolyline points='5.4 7.47 7.64 9.71 9.88 7.47' style='fill:none;stroke:%23f2f2f2;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px'/%3E%3Cline x1='7.64' y1='0.75' x2='7.64' y2='9.65' style='fill:none;stroke:%23f2f2f2;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px'/%3E%3Cpath d='M-60.29,536a6.69,6.69,0,0,1-7,7,6.7,6.7,0,0,1-7-7' transform='translate(75.04 -528.25)' style='fill:none;stroke:%23f2f2f2;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px'/%3E%3C/svg%3E"); */ } #mainContactForm__Container { width: auto; /* width: 360px; */ height: auto; /* display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center; */ /* position: absolute; */ /* top: 16px; */ margin: 0; padding: 0; /* background-color: red; */ } .mainContactForm__Wrapper { width: auto; height: auto; /* max-width: 360px; */ /* max-height: 640px; */ /* position: absolute; */ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; margin: 0 auto; /* padding: 0; */ padding-top: var(--space-lg) !important; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; } #mainContact { /* width: auto; height: auto; */ display: flex; flex-direction: column; align-items: center; margin: 0; padding-top: var(--space-lg) !important; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; overflow: hidden; z-index: 99; background-color: rgba(255, 255, 255, 1); /* background-color: yellow; */ } /* .mainContact { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; position: absolute; margin: 0; padding-top: var(--space-lg) !important; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; overflow: hidden; z-index: 99; background-color: rgba(255, 255, 255, 1); background-color: greenyellow; } */ .mainContactForm { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; position: absolute; margin: 0; padding-top: var(--space-lg) !important; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; overflow: hidden; z-index: 99; background-color: rgba(255, 255, 255, 1); /* background-color: greenyellow; */ } #userContactMe__optionsChoice { height: 176px; min-height: 176px; max-height: 176px; min-width: 328px; max-width: 328px; display: flex; flex-direction: column; flex-wrap: wrap; /* justify-content: flex-start; */ align-items: center; /* align-content: flex-start; */ margin: 0 auto; padding: 0; color: rgba(24, 91, 167, 1); font-family: Open Sans; font-weight: 400; font-size: 10px; text-transform: none; text-align: start; /* background-color: black; */ } #userContactMe__optionsChoice::after { content: ''; width: 100%; height: 0.5px; display: block; margin: 0; padding: 0; background-color: rgba(53, 129, 218, .72); } #userContactMe__optionsChoice-group_A, #userContactMe__optionsChoice-group_B, #userContactMe__optionsChoice-group_C { width: 280px; max-width: 280px; /* background-color: burlywood; */ } #userContactMe__optionsChoice-group_A { height: 80px; max-height: 80px; margin: 16px 0 0; } #userContactMe__optionsChoice-group_B { height: 32px; max-height: 32px; } #userContactMe__optionsChoice-group_C { height: 24px; max-height: 24px; margin: 0 0 8px 0; } #userContactMe__optionsChoice-group_A::after, #userContactMe__optionsChoice-group_B::after { content: ''; width: 100%; height: 0.5px; display: block; margin: 0; padding: 0; background-color: rgba(53, 129, 218, .72); } #userContactMe__optionsChoice li ol { height: 24px; display: flex; /* flex-direction: column; */ /* flex-wrap: wrap; */ /* align-content: flex-start; */ flex-direction: row; justify-content: flex-start; /* background-color: yellow; */ } #userContactMe__optionsChoice li ol label { margin: -1px 0 0 8px; flex: 1 0 auto; /* background-color: red; */ } :root { /* --radio-color: #185ba7; */ --radio-border-color: #185ba7; --radio-checked-color: #185ba7; --radio-hover-color: #154695; /* --radio-disabled-bg-color: gainsboro */ } #userContactMe__optionsChoice li ol >input[type="radio"] { width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; position: relative; margin: 0; padding: 0; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; outline: none; border-radius: 50%; border: 1px solid var(--radio-border-color); color: var(--radio-color); transition: outline 0.1s; background-color: transparent; /* background-color: red; */ } /* #userContactMe__optionsChoice li ol>input[type="radio"]:not(:disabled):checked { padding: 2px; border-color: var(--radio-checked-color); background-color: var(--radio-checked-color); background-clip: content-box; background-image: radial-gradient( circle, var(--radio-checked-color) 0%, var(--radio-checked-color) 50%, transparent 60%, transparent 100% ); } */ #userContactMe__optionsChoice li ol>input[type="radio"]::before { content: ''; /* width: 0.65em; height: 0.65em; */ width: 7px; height: 7px; position: absolute; margin: 0 auto; padding: 0; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--radio-border-color); } #userContactMe__optionsChoice li ol>input[type="radio"]:checked::before { transform: scale(1); } /* #userContactMe__optionsChoice li ol>input[type="radio"]:focus { outline: max(2px, 0.15em) solid var(--radio-border-color); outline-offset: max(2px, 0.15em); } */ /* #userContactMe__optionsChoice li ol>input[type="radio"]:disabled { background-color: var(--radio-disabled-bg-color); } #userContactMe__optionsChoice li ol>input[type="radio"]:disabled:checked { background-image: radial-gradient( circle, var(--radio-border-color) 0%, var(--radio-border-color) 50%, transparent 50%, transparent 100% ); } */ @media (hover: hover) { #userContactMe__optionsChoice li ol>input[type="radio"]:not(:disabled):hover { background-color: var(--radio-hover-color); outline: 6px solid var(--radio-hover-color); transform: scale(1.05); } } #userContactMe__optionsChoice li ol>input[type="radio"]:focus-visible { background-color: var(--radio-hover-color); outline: 6px solid var(--radio-hover-color); transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { #userContactMe__optionsChoice li ol>input[type="radio"] { transition: none; } #userContactMe__optionsChoice li ol>input[type="radio"]:focus-visible { transform: scale(1); } } @media (prefers-reduced-motion: reduce) and (hover: hover) { #userContactMe__optionsChoice li ol>input[type="radio"]:not(:disabled):hover { transform: scale(1); } } #MainContact__body { width: auto; /* height: 320px; */ height: auto; /* max-height: 320px; */ display: flex; margin: 0; /* background-color: red; */ } #mainContactForm { display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 0; } #infosMC { width: 100%; min-width: 272px; min-height: 320px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; margin: 0 auto; padding: 0; /* background: royalblue; */ } .userDatasMainForm { width: 100%; height: auto; max-width: 272px; /* min-height: 344px; */ /* display: flex; */ margin: 8px auto; padding: 0; transition: transform 0.5s ease-in-out; background-color: transparent; /* background-color: tomato; */ } /* --- BEGIN voteCTAs --- */ #RateScoreCTA__container { width: 216px; height: 100%; max-width: 216px; min-height: 104px; max-height: 104px; display: flex; flex-direction: column; justify-content: start; align-items: center; position: absolute; top: 36px; margin: 0; padding: 0; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 0px 12px 2px rgba(24, 91, 167, 0.12); -moz-box-shadow: 0px 0px 12px 2px rgba(24, 91, 167, 0.12); box-shadow: 0px 0px 12px 2px rgba(24, 91, 167, 0.12); /* transition: all .2s ease; */ /* color: #64C155; */ z-index: 9; background: linear-gradient(30deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); background: -moz-linear-gradient(26.52% 124.55% 60deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); background: -webkit-linear-gradient(60deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); background: -webkit-gradient(linear, 26.52% 124.55%, 73.48% -24.55%, color-stop(0, rgba(175, 236, 210, 1)), color-stop(1, rgba(244, 236, 155, 1))); background: -o-linear-gradient(60deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); background: -ms-linear-gradient(60deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#AFECD2', endColorstr='#F4EC9B' ,GradientType=0)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AFECD2', endColorstr='#F4EC9B', GradientType=1); } #RateScoreCTA__container-after { width: 56px; height: 56px; position: absolute; top: -32px; margin: 0 auto; padding: 0; border-radius: 50%; /* background-color: green; */ } #RateScoreCTA__container-after #call-to-action circle { fill: #fafafa; /* fill: yellowgreen; */ } #RateScoreCTA__container-after #call-to-action circle:first-of-type { opacity: .24; } #RateScoreCTA__container-after #call-to-action circle:last-of-type { opacity: .32; } /* #RateScoreCTA__container svg#RateScore__vote { width: 64px; height: 64px; position: absolute; top: -40px; margin: 0 auto; padding: 0; border-radius: 50%; border: 2px solid #fafafa; background-color: lightblue; background: linear-gradient(30deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); background: -moz-linear-gradient(26.52% 124.55% 60deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); background: -webkit-linear-gradient(60deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); background: -webkit-gradient(linear, 26.52% 124.55%, 73.48% -24.55%, color-stop(0, rgba(175, 236, 210, 1)), color-stop(1, rgba(244, 236, 155, 1))); background: -o-linear-gradient(60deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); background: -ms-linear-gradient(60deg, rgba(175, 236, 210, 1) 0%, rgba(244, 236, 155, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#AFECD2', endColorstr='#F4EC9B' ,GradientType=0)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AFECD2', endColorstr='#F4EC9B', GradientType=1); background-color: red; } */ /* #RateScoreCTA__container svg#RateScore__vote g circle { fill: #fafafa; stroke: green; stroke-width: 2px; } */ #RateScoreCTA__container #RateScore__vote #buttonCTA_wrapper { opacity: .96; } /* .iconsax-infos { opacity: 1; } .iconsax-infos rect { fill: none; stroke: transparent; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px } */ #RateScoreCTA__container-closeBtnCTA::before { content: ''; width: 20px; height: 20px; position: absolute; top: 0; right: 0; margin: 0; padding: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; /* background-color: rgba(0, 0, 0, .08); */ background-color: rgba(255, 255, 255, 1); /* background-color: red; */ opacity: .48; } #RateScoreCTA__container-closeBtnCTA { width: 20px; height: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; position: absolute; top: 4px; right: 4px; margin: 0; padding: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; /* background-color: rgba(0, 0, 0, .08); */ /* background-color: rgba(255, 255, 255, 0); */ background-color: transparent; } #closeBtnCTA { width: 12px; height: 12px; margin: 0; padding: 0; opacity: 1; z-index: 999; } .rateScoreCTA span { width: auto; max-width: 216px; height: 24px; display: inline-block; margin: 24px 0 8px 0; padding: 0; } .rateScoreCTA span p { font-size: 12px; font-family: 'breelight'; font-weight: normal; font-display: swap; text-align: center; /* line-height: 16px; */ } .rateScoreCTA button#RateScoreCTA__container-closeBtnCTA, .rateScoreCTA button#RateScoreCTA__container-btnGO { border: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; cursor: pointer; } .rateScoreCTA button#RateScoreCTA__container-btnGO { width: 132px; height: 32px; margin: 8px 0; padding: 0; border: none; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; color: #fafafa; font-family: 'Titillium Web'; font-size: 14px; font-weight: 600; /* font-weight: bold; */ font-style: normal; line-height: 18px; letter-spacing: .064em; /* background: #185BA7; fallback*/ background: rgba(24, 91, 167, 1); } /* === Wrapper Animation === */ .RateScoreAnimShow { animation: masuperanimation ease-out 0.2s; animation-iteration-count: 1; animation-fill-mode: forwards; transform-origin: 50% 50%; opacity: 0; opacity: 1\9; } /* === END Wrapper Animation === */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° CAIT-&-NSP Global ---------------- (rating, scoring, comments, infos) °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ /* ±±± BEGIN Container-&-Wrapper ±±± */ #RateScore__Container { width: 100%; height: auto; /* width: 360px; */ /* height: 100%; */ /* min-width: 360px; */ /* min-height: 640px; */ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center; /* align-self: flex-end; */ position: absolute; top: 0; margin: 0; padding: 0; /* z-index: 73 !important; */ /* background-color: red; */ } .rateScore__Wrapper { width: 100%; height: 100%; /* max-width: 360px; */ /* max-height: 640px; */ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; position: relative; margin: 0; padding: 0; } #RateScore { color: black; } .rateScore { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; position: absolute; /*top: 0;*/ margin: 0; padding-top: var(--space-lg) !important; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; overflow: hidden !important; z-index: 7373737373 !important; background-color: rgba(255, 255, 255, 1); /* background-color: greenyellow; */ } /* --- BEGIN CTAs-close --- */ /* #commentsCAIT .CTAs-close, #CommentsNSP .CTAs-close, #infosCAIT .CTAs-close, #infosNSP .CTAs-close { width: 24px; height: 24px; display: flex; position: absolute; top: -20px; right: 16px; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; background-color: transparent; background-color: red; } */ #commentsCAIT .CTAs-close, #infosCAIT .CTAs-close, #CommentsNSP .CTAs-close, #infosNSP .CTAs-close { width: 32px; height: 32px; display: flex; position: absolute; top: 16px; right: 16px; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; z-index: 73737373; background-color: transparent; /* background-color: yellow; */ } #commentsCAIT .CTAs-close>input[type="checkbox"], #commentsCAIT .CTAs-close>input[type="submit"], #infosCAIT .CTAs-close>input[type="checkbox"], #infosCAIT .CTAs-close>input[type="submit"], #CommentsNSP .CTAs-close>input[type="checkbox"], #CommentsNSP .CTAs-close>input[type="submit"], #infosNSP .CTAs-close>input[type="checkbox"], #infosNSP .CTAs-close>input[type="submit"] { width: 32px; height: 32px; display: flex; position: absolute; /* top: 0; */ margin: 0; padding: 0; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; content: none; cursor: pointer; /* hide this with opacity */ opacity: 1; /* and place it over the menuBurger */ /* z-index: 12; */ z-index: 73737373; -webkit-touch-callout: none; background-color: transparent; /* background-color: hotpink; */ } #commentsCAIT .CTAs-close>.trigger, #infosCAIT .CTAs-close>.trigger, #CommentsNSP .CTAs-close>.trigger, #infosNSP .CTAs-close>.trigger { width: 20px; height: 20px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; position: absolute; top: 6px; left: 6px; margin: 0; padding: 0; z-index: 11; cursor: pointer; background-color: transparent; } #commentsCAIT .CTAs-close>span.trigger>i, #infosCAIT .CTAs-close>span.trigger>i, #CommentsNSP .CTAs-close>span.trigger>i, #infosNSP .CTAs-close>span.trigger>i { height: 2px; margin: 0; padding: 0; background: rgba(24, 91, 167, 1); /*background : #185BA7;*/ } #commentsCAIT .CTAs-close>span.trigger>i:first-child, #infosCAIT .CTAs-close>span.trigger>i:first-child, #CommentsNSP .CTAs-close>span.trigger>i:first-child, #infosNSP .CTAs-close>span.trigger>i:first-child { width: 24px; -webkit-transform: rotate(-45deg) translate(-6.5px, 6.5px); -moz-transform: rotate(-45deg) translate(-6.5px, 6.5px); -o-transform: rotate(-45deg) translate(-6.5px, 6.5px); -ms-transform: rotate(45deg) translate(-6.5px, 6.5px); transform: rotate(-45deg) translate(-6.5px, 6.5px); } #commentsCAIT .CTAs-close>span.trigger>i:last-child, #infosCAIT .CTAs-close>span.trigger>i:last-child, #CommentsNSP .CTAs-close>span.trigger>i:last-child, #infosNSP .CTAs-close>span.trigger>i:last-child { width: 24px; -webkit-transform: rotate(45deg) translate(-6px, -6px); -moz-transform: rotate(45deg) translate(-6px, -6px); -o-transform: rotate(45deg) translate(-6px, -6px); -ms-transform: rotate(45deg) translate(-6px, -6px); transform: rotate(45deg) translate(-6px, -6px); opacity: 1; } /* --- BEGIN CTAs-back-close --- */ .rateScore__header .CTAs-backClose, .mainContactForm__header .CTAs-backClose, .accessFilesForm .CTAs-backClose.to_Download { width: 24px; height: 24px; display: flex; margin: 4px 0 0 16px; padding: 0; -webkit-user-select: none; user-select: none; background-color: transparent; /* background-color: purple; */ } .accessFilesForm .CTAs-backClose.to_Download { /* position: absolute; top: 16px; left: 16px; margin: 0 auto; */ position: absolute; top: 0; left: 0; margin: -32px 0 0 0; } /* === BEGIN RateScore header === */ .rateScore__header .CTAs-backClose>input[type="checkbox"], .mainContactForm__header .CTAs-backClose>input[type="checkbox"], .accessFilesForm .CTAs-backClose.to_Download>input[type="checkbox"], .CTAs-backClose>input[type="checkbox"] { width: 24px; height: 24px; display: block; margin: 0; padding: 0; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; content: none; cursor: pointer; opacity: 1; /* hide this */ z-index: 12; /* and place it over the menuBurger */ -webkit-touch-callout: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14.6'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23185ba7;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='parcoursPro_DetailPage_1' data-name='parcoursPro_DetailPage%231'%3E%3Cpolygon class='cls-1' points='20 7.86 20 6.75 2.13 6.75 8.09 0.79 7.3 0 0.56 6.75 0 7.3 0.56 7.86 7.3 14.6 8.09 13.82 2.13 7.86 20 7.86'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-color: transparent; /* background-color: hotpink; */ } .accessFilesForm .CTAs-backClose.to_Download>input[type="checkbox"] { margin: 0 auto; } .rateScore__header::before, .mainContactForm__header span.blurp::before { content: ''; width: 32px; height: 4px; display: block; margin: 12px auto 0; padding: 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: rgba(24, 91, 167, .36); } .rateScore__header, .mainContactForm__header { width: 100%; height: 56px; margin: 0; padding: 0; background-color: transparent; /* background: darkturquoise; */ } .mainContactForm__header span.blurp { width: 100%; height: 0; margin: 0; padding: 0; } /* === END RateScore header === */ /* === BEGIN RateScore body === */ #RateScore__body { height: 448px; } /* --- BEGIN User pulled datas --- */ .userDatasPull { width: 100%; height: 100%; max-width: 328px; max-height: 112px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; margin: 0 auto; transition: all 2s; /* background-color: beige; */ } #userDatasPull__cait, #userDatasPull__nsp { width: 100%; height: 100%; max-width: 328px; max-height: 96px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative; padding: 0; color: rgba(24, 91, 167, 1); transition: all 2s; /* background-color: beige; */ } #userDatasPull__cait { margin: 8px auto 104px; /* background-color: beige; */ } #userDatasPull__nsp { position: absolute; top: 408px; left: 16px; margin: 0 auto; /* background-color: brown; */ } #userDatasPull__cait::before, #userDatasPull__nsp::before { content: ''; width: 100%; height: 0.5px; display: block; position: absolute; margin: 0; padding: 0; background-color: rgba(53, 129, 218, 1); } #userDatasPull__cait::before { bottom: 0; } #userDatasPull__nsp::before { top: 0; } #userDatasPull__cait::after, #userDatasPull__nsp::after { content: ''; width: 1px; height: 128px; display: block; position: absolute; left: 50%; margin: 0; padding: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 129'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt_-_copie_4' data-name='CAIT_1/10-alt - copie 4'%3E%3Cline x1='0.5' y1='0.5' x2='0.5' y2='4.5' style='fill:none;stroke:%23d1deed;stroke-linecap:round;stroke-miterlimit:10'/%3E%3Cline x1='0.5' y1='8.14' x2='0.5' y2='21.77' style='fill:none;stroke:%23d1deed;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:1.8181818723678589,7.2727274894714355,3.6363637447357178,1.8181818723678589'/%3E%3Cline x1='0.5' y1='22.68' x2='0.5' y2='123.59' style='fill:none;stroke:%23d1deed;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:7.2727274894714355,3.6363637447357178,1.8181818723678589,7.2727274894714355,3.6363637447357178,1.8181818723678589'/%3E%3Cline x1='0.5' y1='124.5' x2='0.5' y2='128.5' style='fill:none;stroke:%23d1deed;stroke-linecap:round;stroke-miterlimit:10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: top center; background-attachment: local; background-origin: border-box; } #userDatasPull__cait::after { top: 104px; } #userDatasPull__nsp::after { bottom: 104px; } #userDatasPull__cait span:first-child, #userDatasPull__nsp span:first-child { min-height: 24px; padding: 0; font-weight: 400; font-style: normal; font-size: 14px; line-height: 20px; /* background-color: pink; */ } #userDatasPull__cait span:first-child { margin: 0 auto; } #userDatasPull__nsp span:first-child { margin: 16px auto 0; /* background-color: pink; */ } #userDatasPull__cait span:last-of-type, #userDatasPull__nsp span:last-of-type { min-height: 12px; max-height: 12px; display: block; margin: 0 auto; padding: 0; font-weight: 300; font-style: normal; font-size: 9px; line-height: 12px; /* background-color: blueviolet; */ } #userDatasPull__cait span:last-of-type em, #userDatasPull__nsp span:last-of-type em { height: 100%; display: inline-block; margin: 0 auto; padding: 0; /* background-color: blue; */ } #userDatasPull__cait span em { height: 8px; } #caitResults, #nspResults { width: 100%; height: 100%; max-width: 272px; max-height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; } #caitResults { height: 48px; margin: 0 auto 16px; /* background-color: magenta; */ } #nspResults { height: 24px; max-width: 328px; justify-content: space-evenly; margin: 16px auto 0; /* background: transparent; */ /* background: greenyellow; */ } .userHasRated { background: transparent; } /* --- END User pulled datas --- */ /* --- BEGIN Forms --- */ .formsContainer { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; /* background-color: darkorange */ } /* --- BEGIN blockWrapper for CAIT-&-NSP --- */ .blockWrapper { width: 100%; height: 208px; max-width: 328px; max-height: 208px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; /*align-items: flex-start;*/ margin: 0; padding: 0; border: solid 1px rgba(209, 222, 237, 1); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: rgba(246, 248, 251, 1); /* background-color: red; */ } .blockWrapperEndTunnel { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; /*align-items: flex-start;*/ margin: 0; padding: 0; } .blockWrapperEndTunnel { width: 100%; height: 100%; max-width: 328px; max-height: 112px; display: flex; flex-direction: row; align-content: space-between; margin: 40px 0 0; transition: all 2s; } .rateScore__EndTunnel-Success hr { width: 100%; max-width: 328px; height: 1px; margin: 32px auto 0; border: none; background: rgba(24, 91, 167, 1); } .blockWrapperEndTunnel__error-illustration, .blockWrapperEndTunnel__duplicate-illustration, .blockWrapperEndTunnel__success-illustration { width: 100%; height: 100%; max-height: 416px; margin: 0 auto; padding: 0; /* background-color: yellow; */ } .blockWrapper span, .blockWrapperEndTunnel span { width: 100%; height: 100%; max-width: 272px; max-height: 32px; padding: 0; background-color: transparent; /*background: palegoldenrod;*/ } .blockWrapper span { margin: 16px auto 0; } .blockWrapperEndTunnel span { margin: 8px auto 0; } .blockWrapper>span p, .blockWrapperEndTunnel>span p { margin: 0; padding: 0; color: rgb(4, 45, 90); font-weight: 400; font-style: normal; font-size: 16px; line-height: 19.2px; text-align: center; background-color: transparent; /*background: palegoldenrod;*/ } /* --- END blockWrapper for CAIT-&-NSP --- */ /* --- BEGIN CAIT-form section --- */ .ctaCAIT { margin: 0; padding: 0; font-family: 'bree_seriflight'; font-weight: normal; font-style: normal; } /* --- Rating Block --- */ #ratesCAIT { margin: 0; visibility: visible; z-index: 31; } #ratesCAIT.successHourra { visibility: hidden; z-index: -31; } #ratesCAIT.disable { pointer-events: none; cursor: default; opacity: .08; } #caitAppWrapper { width: 100%; height: 48px; max-width: 272px; max-height: 48px; margin: 16px 0 0 0; padding: 0; background-color: transparent; /* background-color: magenta; */ } /* --- BEGIN CAIT_App --- */ .ctaCAITBox { width: 100%; height: 100%; max-height: 32px; background: transparent; /*background-color: red;*/ } #caitAppStars { width: 100%; height: 32px; position: relative; margin: 12px auto 0; background: transparent; /*background: greenyellow;*/ } ol.stars { /*width: 100%;*/ height: 32px; max-width: 245px; /*max-height: 32px;*/ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; margin: 0; padding: 0; background: transparent; } input[type="radio"].stars__item, input[type="radio"].stars__item.active, input[type="radio"]:checked.stars__item { width: 32px; height: 32px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; flex: 0 0 20%; margin: 0; padding: 0; cursor: pointer; border: none !important; background-position: top center !important; } input[type="radio"].stars__item { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.17 32.03'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Cpolygon points='17.09 1.12 12.14 10.99 1.08 12.58 9.09 20.26 7.2 31.12 17.09 25.99 26.97 31.12 25.09 20.26 33.09 12.58 22.03 10.99 17.09 1.12' style='fill:%23fff'/%3E%3Cpolygon points='17.09 1.12 12.14 10.99 1.08 12.58 9.09 20.26 7.2 31.12 17.09 25.99 26.97 31.12 25.09 20.26 33.09 12.58 22.03 10.99 17.09 1.12' style='fill:none;stroke:%236c87a7;stroke-miterlimit:10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* On peut utiliser du SVG en CSS via l'URI de données | url("data:image/svg+xml,xxxx") |... mais sans encodage, cela ne fonctionne que dans les navigateurs Webkit ! • Encodé en utilisant encodeURIComponent (), le SVG fonctionnera sur tous les navigateurs ou presque. • Le SVG doit avoir un attribut xmlns comme ceci: xmlns = 'http: //www.w3.org/2000/svg'. • Une fois encodé, le SVG peut être utilisé en arrière-plan ('background') et en bordure d'image. === URL-encoder for SVG dispoible ici : https://yoksel.github.io/url-encoder/ */ background-repeat: no-repeat; background-size: contain; background-position: top center; background-attachment: local; background-origin: border-box; /** url(someimage.jpg) \* image *\ top center / 200px 200px or auto (i.e. default) or cover or contain \* position / size *\ no-repeat \* repeat *\ fixed \* attachment *\ padding-box \* origin *\ content-box \* clip *\ red \* color *\ **/ animation-name: rateme; animation-duration: 500ms; animation-fill-mode: both; /*** -webkit-transition: background 0.15s ease; -moz-transition: background 0.15s ease; -o-transition: background 0.15s ease; transition: background 0.15s ease; \* ease (default) \* >> à la place de ease, on utilise la courbe de bézier ci-dessous !! -webkit-transition: background 250ms cubic-bezier(0.0, 0.0, 0.2, 1); -moz-transition: background 250ms cubic-bezier(0.0, 0.0, 0.2, 1); -o-transition: background 250ms cubic-bezier(0.0, 0.0, 0.2, 1); transition: background 250ms cubic-bezier(0.0, 0.0, 0.2, 1); ***/ } /* -- Active -- */ input[type="radio"].stars__item.active, input[type="radio"]:checked.stars__item { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.17 32.03'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Cpolygon points='17.09 1.12 12.14 10.99 1.08 12.58 9.09 20.26 7.2 31.12 17.09 25.99 26.97 31.12 25.09 20.26 33.09 12.58 22.03 10.99 17.09 1.12' style='fill:%23185ba7'/%3E%3Cpolygon points='17.09 1.12 12.14 10.99 1.08 12.58 9.09 20.26 7.2 31.12 17.09 25.99 26.97 31.12 25.09 20.26 33.09 12.58 22.03 10.99 17.09 1.12' style='fill:none;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: top center; background-attachment: local; background-origin: border-box; background-color: transparent; } /* -- Required -- */ input[type="radio"].stars__item.required { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.17 32.03'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Cpolygon points='17.09 1.12 12.14 10.99 1.08 12.58 9.09 20.26 7.2 31.12 17.09 25.99 26.97 31.12 25.09 20.26 33.09 12.58 22.03 10.99 17.09 1.12' style='fill:%23fff'/%3E%3Cpolygon points='17.09 1.12 12.14 10.99 1.08 12.58 9.09 20.26 7.2 31.12 17.09 25.99 26.97 31.12 25.09 20.26 33.09 12.58 22.03 10.99 17.09 1.12' style='fill:none;stroke:%23c11d1b;stroke-miterlimit:10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: top center; background-attachment: local; background-origin: border-box; background-color: transparent; } /* -- Pulled -- */ input[type="radio"].stars__item.pullDisabled { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.71'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.12'%3E%3Cpath d='M16,2.22l4.05,8,.24.47.51.07,9,1.28-6.5,6.19-.39.37.09.53,1.55,8.77-8.1-4.16L16,23.51l-.46.24-8.1,4.16L9,19.14l.1-.53-.39-.37-6.5-6.19,9-1.28.51-.07.24-.47,4.05-8M16,0,11.06,9.78,0,11.35,8,19,6.11,29.71,16,24.64l9.89,5.07L24,19l8-7.61L20.94,9.78,16,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Cpolygon points='16 0 11.06 9.78 0 11.35 8 18.96 6.11 29.71 16 24.64 25.89 29.71 24 18.96 32 11.35 20.94 9.78 16 0' style='fill:%237aa1e2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: top center; background-attachment: local; background-origin: border-box; cursor: default; } input[type="radio"].stars__item.pulled { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.19 31.73'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt_-_copie_4' data-name='CAIT_1/10-alt - copie 4'%3E%3Cpolygon points='17.09 1.11 12.15 10.89 1.09 12.46 9.09 20.07 7.2 30.82 17.09 25.75 26.98 30.82 25.09 20.07 33.09 12.46 22.04 10.89 17.09 1.11' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: top center; background-attachment: local; background-origin: border-box; cursor: default; } ol.stars>span { display: none; flex: 0; } ol.stars>label { width: 100%; height: 12px; max-height: 16px; display: block; position: absolute; top: 40px; margin: 0; padding: 0; font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-size: 10px; line-height: normal; text-align: center; /*background: orange;*/ background: transparent; } /* --- END CAIT_App --- */ /* --- END Rating Block --- */ /* --- Scoring Block --- */ #scoresNSP { margin: 32px 0 0 0; z-index: 31; font-family: 'bree_seriflight'; font-weight: normal; font-style: normal; } #scoresNSP.disable { margin: 32px 0 0 0; pointer-events: none; cursor: default; opacity: .08; } #nspAppWrapper { width: 100%; height: 100%; max-width: 328px; max-height: 48px; margin: 8px 0 0 0; padding: 0; background-color: transparent; /*background-color: firebrick;*/ } /* --- BEGIN NSP_App --- */ .ctaNSPBox { width: 100%; height: 100%; max-height: 24px; background: transparent; /*background-color: red;*/ } #nspAppEllipses { width: 100%; height: 24px; position: relative; margin: 24px auto 0; background: transparent; /*background: greenyellow;*/ } ol.ellipses { /*width: 100%;*/ height: 32px; max-width: 328px; /*max-height: 32px;*/ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; margin: 0; padding: 0; background: transparent; } input[type="radio"].ellipses__item, input[type="radio"].ellipses__item.active, input[type="radio"]:checked.ellipses__item { width: 24px; height: 24px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; flex: 0 0 9%; border: none !important; background-position: top center !important; /*background-color: violet;*/ } input[type="radio"].ellipses__item, input[type="radio"].ellipses__item.active, input[type="radio"]:checked.ellipses__item { margin: 0; padding: 0; cursor: pointer; } #nspResults input[type="radio"].ellipses__item.pulled, #nspResults input[type="radio"].ellipses__item.pullDisabled, #nspResults input[type="radio"]:checked.ellipses__item { width: 24px; height: 24px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; flex: 0 0 8%; border: none !important; background-position: top center !important; /*background-color: violet;*/ } #nspResults input[type="radio"].ellipses__item.pulled, #nspResults input[type="radio"].ellipses__item.pullDisabled { margin: 0 6px 0 0; padding: 0; cursor: default; } input[type="radio"].ellipses__item { animation-name: rateme; animation-duration: 500ms; animation-fill-mode: both; background-repeat: no-repeat; background-size: contain; background-position: top center; background-attachment: local; background-origin: border-box; background-color: transparent; } input[type="radio"].ellipses__item.active, input[type="radio"].ellipses__item.pulled, #nspResults input[type="radio"].ellipses__item.pullDisabled, input[type="radio"]:checked.ellipses__item { background-repeat: no-repeat; background-size: contain; background-position: top center; background-attachment: local; background-origin: border-box; background-color: transparent; /*background-color: purple;*/ } /* -- "ellipses" -- */ input[type="radio"].ellipses__item:nth-of-type(1) { /* one */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E1%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item:nth-of-type(2) { /* two */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E2%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item:nth-of-type(3) { /* three */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E3%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: red; */ } input[type="radio"].ellipses__item:nth-of-type(4) { /* four */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E4%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: blueviolet; */ } input[type="radio"].ellipses__item:nth-of-type(5) { /* five */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E5%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: palegreen; */ } input[type="radio"].ellipses__item:nth-of-type(6) { /* six */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E6%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: burlywood; */ } input[type="radio"].ellipses__item:nth-of-type(7) { /* seven */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E7%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: brown; */ } input[type="radio"].ellipses__item:nth-of-type(8) { /* eight */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E8%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: pink; */ } input[type="radio"].ellipses__item:nth-of-type(9) { /* nine */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(8.28 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E9%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: firebrick; */ } input[type="radio"].ellipses__item:nth-of-type(10) { /* ten */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%23fff'/%3E%3Cpath d='M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3Ctext transform='translate(4.57 16.63)' style='font-size:13px;fill:%23959ea7;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E10%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: green; */ } /* -- Hover /Active /Checked-Selected -- */ input[type="radio"].ellipses__item.active:nth-of-type(1), input[type="radio"]:checked.ellipses__item:nth-of-type(1) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E1%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(2), input[type="radio"]:checked.ellipses__item:nth-of-type(2) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E2%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(3), input[type="radio"]:checked.ellipses__item:nth-of-type(3) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E3%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(4), input[type="radio"]:checked.ellipses__item:nth-of-type(4) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E4%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(5), input[type="radio"]:checked.ellipses__item:nth-of-type(5) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E5%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(6), input[type="radio"]:checked.ellipses__item:nth-of-type(6) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E6%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(7), input[type="radio"]:checked.ellipses__item:nth-of-type(7) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E7%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(8), input[type="radio"]:checked.ellipses__item:nth-of-type(8) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E8%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(9), input[type="radio"]:checked.ellipses__item:nth-of-type(9) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E9%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.active:nth-of-type(10), input[type="radio"]:checked.ellipses__item:nth-of-type(10) { /* background-color: green; */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_1_10-alt' data-name='CAIT_1/10-alt'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23185ba7;stroke:%23185ba7;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='11.5' style='fill:%23185ba7'/%3E%3Cpath d='M12.5,1.5a11,11,0,1,1-11,11,11,11,0,0,1,11-11m0-1a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z' style='fill:%23185ba7'/%3E%3Ctext transform='translate(5.07 17.13)' style='font-size:13px;fill:%23fff;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E10%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* -- Pull Disabled -- */ input[type="radio"].ellipses__item.pullDisabled:nth-of-type(1) { /* one */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E1%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(2) { /* two */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E2%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(3) { /* three */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E3%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: red; */ } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(4) { /* four */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E4%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: blueviolet; */ } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(5) { /* five */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E5%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: palegreen; */ } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(6) { /* six */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E6%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: burlywood; */ } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(7) { /* seven */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E7%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: brown; */ } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(8) { /* eight */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E8%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: pink; */ } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(9) { /* nine */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(8.28 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E9%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: firebrick; */ } input[type="radio"].ellipses__item.pullDisabled:nth-of-type(10) { /* ten */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie_2' data-name='CAIT_END-Success2 - copie 2'%3E%3Cg style='opacity:0.24'%3E%3Cpath d='M12,.5A11.5,11.5,0,1,1,.5,12,11.51,11.51,0,0,1,12,.5M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z' style='fill:%236c87a7'/%3E%3C/g%3E%3Cg style='opacity:0.04'%3E%3Ccircle cx='12' cy='12' r='12' style='fill:%237aa1e2'/%3E%3C/g%3E%3Ctext transform='translate(4.57 16.63)' style='opacity:0.24;font-size:13px;fill:%23a7b7ca;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E10%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: green; */ } /* -- Pulled -- */ input[type="radio"].ellipses__item.pulled:nth-of-type(1) { /* one */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E1%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.pulled:nth-of-type(2) { /* two */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E2%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } input[type="radio"].ellipses__item.pulled:nth-of-type(3) { /* three */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E3%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: red; */ } input[type="radio"].ellipses__item.pulled:nth-of-type(4) { /* four */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E4%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: blueviolet; */ } input[type="radio"].ellipses__item.pulled:nth-of-type(5) { /* five */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E5%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: palegreen; */ } input[type="radio"].ellipses__item.pulled:nth-of-type(6) { /* six */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E6%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: burlywood; */ } input[type="radio"].ellipses__item.pulled:nth-of-type(7) { /* seven */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E7%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: brown; */ } input[type="radio"].ellipses__item.pulled:nth-of-type(8) { /* eight */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E8%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: pink; */ } input[type="radio"].ellipses__item.pulled:nth-of-type(9) { /* nine */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(8.78 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E9%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: firebrick; */ } input[type="radio"].ellipses__item.pulled:nth-of-type(10) { /* ten */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_END-Success2_-_copie' data-name='CAIT_END-Success2 - copie'%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ccircle cx='12.5' cy='12.5' r='12' style='fill:%23ecffdc;stroke:%23479955;stroke-miterlimit:10'/%3E%3Ctext transform='translate(5.07 17.13)' style='font-size:13px;fill:%23479955;font-family:OpenSans-SemiBold, Open Sans;font-weight:600'%3E10%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* background-color: green; */ } ol.ellipses label { height: 24px; width: 24px; border-radius: 50%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin: 0; padding: 0; color: red; background: transparent; background: yellow; } ol.ellipses>label { display: none; flex: 0; } ol.ellipses>span { display: none; flex: 0; } /* --- END NSP_App --- */ /* --- END Scoring Block --- */ /* --- screen-reader for CAIT-&-NSP --- */ .screen-reader { /** * Visually hide an element, but leave it available for screen readers * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css * @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility **/ clip: rect(0 0 0 0); width: 1px; height: 1px; position: absolute; margin: -1px; padding: 0; overflow: hidden; border: 0; white-space: nowrap; } /* --- END screen-reader for CAIT-&-NSP --- */ /* === END RateScore__body === */ /* === BEGIN Comments for CAIT-&-NSP === */ /* --- CAIT-&-NSP Comments bloc --- */ #commentsCAIT, #infosCAIT, #CommentsNSP, #infosNSP { width: 100%; min-width: 320px; min-height: 528px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; /*align-content: center;*/ /*align-items: center;*/ position: absolute; top: 0; left: 0; margin: 0 auto; padding: 0; visibility: hidden; z-index: 73737373; transition: 0.1s; /*opacity: .5;*/ background: rgba(255, 255, 255, 1); /* background-color: transparent; */ /* background: palegoldenrod; */ } #commentsCAIT.successHourra { visibility: visible; z-index: 73737373; } .commentsCAITheader, .infosCAITheader, .commentsNSPheader, .infosNSPheader { width: 100%; height: 72px; max-width: 272px; max-height: 72px; position: relative; margin: 56px auto 0; padding: 0; /* background-color: transparent; */ /* background-color: violet; */ } .commentsCAITheader::after, .infosCAITheader::after, .commentsNSPheader::after, .infosNSPheader::after { content: ''; width: 25%; height: 1px; display: block; position: absolute; bottom: 0; margin: 0 37.5%; padding: 0; background: rgba(24, 91, 167, 1); } .commentsCAITheader p, .infosCAITheader p, .commentsNSPheader p, .infosNSPheader p { margin: 0; padding: 0; color: rgb(4, 45, 90); font-weight: 300; font-style: normal; font-size: 16px; line-height: normal; text-align: center; /* background-color: transparent; */ /* background: pink; */ } .commentsCAITheader p:nth-child(1), .infosCAITheader p:nth-child(1), .commentsNSPheader p:nth-child(1), .infosNSPheader p:nth-child(1) { height: 32px; margin: 16px 0 0; color: rgba(24, 91, 167, 1); /* background-color: transparent; */ /* background-color: peru; */ } .commentsCAITheader p:nth-child(2), .infosCAITheader p:nth-child(2), .commentsNSPheader p:nth-child(2), .infosNSPheader p:nth-child(2) { height: 24px; font-weight: 600; font-style: normal; font-size: 12px; line-height: normal; text-align: center; /*vertical-align: top;*/ /* background-color: transparent; */ /* background-color: yellowgreen; */ } /* --- END CAIT-&-NSP Comments bloc --- */ /* --- BEGIN Share Comments/Remarques --- */ .commentsCAITbody, .commentsNSPbody { width: 100%; height: 100%; max-width: 272px; max-height: 256px; margin: 40px auto 32px; padding: 0; /* background-color: transparent; */ /* background-color: firebrick; */ } /*le couple ci-dessous permet de customiser les inputs 'checkbox' et d'y insérer les 'value'*/ .commentsCAITbody>label, .commentsNSPbody>label { height: 32px; /* max-width: 272px; */ max-height: 32px; display: flex; justify-content: center; align-items: center; align-content: center; align-self: center; margin: 0 auto 24px; padding: 0; /*border : solid 1px rgba(24, 91, 167, 1);*/ /*border-color : #185BA7;*/ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; transition: 0.3s; outline: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; /*content: none;*/ cursor: pointer; /*color : rgba(4, 45, 90, 1);*/ color: rgba(24, 91, 167, 1); font-weight: 400; font-style: normal; font-size: 13px; line-height: normal; text-align: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272 32'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23185ba7;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_5_10-alt' data-name='CAIT_5/10-alt'%3E%3Cpath class='cls-1' d='M270,1a1,1,0,0,1,1,1V30a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V2A1,1,0,0,1,2,1H270m0-1H2A2,2,0,0,0,0,2V30a2,2,0,0,0,2,2H270a2,2,0,0,0,2-2V2a2,2,0,0,0-2-2Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; /* background-color: transparent; */ /* background: mediumaquamarine; */ } .commentsCAITbody>label:last-child, .commentsNSPbody>label:last-child { margin: 0 auto; } /* .commentsCAITbody>label:not(.commentsCAITbody > label:first-child) { margin: 24px auto 0; } */ .commentsCAITbody>label:hover, .commentsNSPbody>label:hover { color: #f2f2f2; /*border : solid 1px rgba(24, 91, 167, 1);*/ /*border-color : #185BA7;*/ border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background-color: rgba(24, 91, 167, 1); /*background-color: transparent;*/ /* background: mediumseagreen; */ } /*.ctaCAITBoxShareMoreRemarq > label > input[type="radio"].commt__item {*/ /* input[type="radio"]#userComments01 {*/ .commentsCAITbody>label>input[type="radio"].commt__item, .commentsNSPbody>label>input[type="radio"].commt__item { width: 100%; max-width: 272px; height: 32px; position: absolute; outline: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; cursor: pointer; color: #f2f2f2; /*background: red;*/ background: transparent; } .commentsCAITbody>label>input[type="radio"].commt__item:checked, .commentsNSPbody>label>input[type="radio"].commt__item:checked { color: #f2f2f2; /*background: green;*/ background: rgba(24, 91, 167, 1); } input[type="radio"].commt__item:checked~span { z-index: 3; color: #f2f2f2; /*background: black;*/ background: rgba(24, 91, 167, 1); } .commentsCAITbody>label>input[type="radio"].commt__item.required, .commentsNSPbody>label>input[type="radio"].commt__item.required { border: 1px solid #c11d1b; color: rgba(193, 29, 27, 1) !important; } /* .commentsCAITbody>label.required { color: rgba(193, 29, 27, 1); border: 1px solid #c11d1b; background-image: none; background-repeat: no-repeat; background: yellow } */ #userComments, #userRemarq { /* width: 272px; */ /* height: 40px; */ /* max-width: 272px; */ /* max-height: 40px; */ /* margin: 0; */ /* padding: 0; */ background-color: transparent; /* background-color: yellowgreen; */ } input[name='sendUserComments']#userComments, input[name='sendUserComments']#userRemarq { width: 272px; height: 40px; margin: 0 auto 32px; cursor: pointer; border: solid 1px rgba(24, 91, 167, 1); border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; color: rgba(24, 91, 167, 1); /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272 48'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23185ba7;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_5_10-alt' data-name='CAIT_5/10-alt'%3E%3Cpath class='cls-1' d='M248,1a23,23,0,0,1,0,46H24A23,23,0,0,1,24,1H248m0-1H24A24,24,0,0,0,0,24H0A24,24,0,0,0,24,48H248a24,24,0,0,0,24-24h0A24,24,0,0,0,248,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; background-repeat: no-repeat; */ /* background-color: rgba(24, 91, 167, 1); */ background-color: transparent; /* background-color: red; */ } /* input[name='sendUserComments']#userComments, */ input[name='sendUserComments']#userRemarq, input[name='sendUserInfos']#userInfos, input[name='sendUserInfos']#userInfosNsp { width: 272px; height: 40px; margin: 0px auto 0; cursor: pointer; border: solid 1px rgba(24, 91, 167, 1); border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; color: rgba(24, 91, 167, 1); /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272 48'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23185ba7;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_5_10-alt' data-name='CAIT_5/10-alt'%3E%3Cpath class='cls-1' d='M248,1a23,23,0,0,1,0,46H24A23,23,0,0,1,24,1H248m0-1H24A24,24,0,0,0,0,24H0A24,24,0,0,0,24,48H248a24,24,0,0,0,24-24h0A24,24,0,0,0,248,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; background-repeat: no-repeat; */ /* background-color: rgba(24, 91, 167, 1); */ background-color: transparent; /* background-color: red; */ } input[name='sendUserComments']:hover#userComments, input[name='sendUserComments']:hover#userRemarq, input[name='sendUserInfos']:hover#userInfos, input[name='sendUserInfos']:hover#userInfosNsp { color: rgba(242, 242, 242, 1); background-color: rgba(24, 91, 167, 1); } /* ====================== */ /* === END Comments Block */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ /* === START Infos Block */ /* ===================== */ /* #infosCAIT, #infosNSP { width: 100%; height: 100%; min-width: 320px; min-height: 440px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; position: absolute; top: 40px; left: 0; margin: 0; padding: 0; visibility: hidden; z-index: -33; transition: 0.3s; background-color: transparent; background-color: white; } */ #infosCAIT span, #infosNSP span { width: 100%; height: 100%; max-width: 272px; max-height: 104px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; /*align-content: start; align-items: center;*/ margin: 0 auto; padding: 0; transition: 0.3s; font-size: 16px; line-height: normal; text-align: center; /*background: gold;*/ background-color: transparent; } #infosCAIT span p:first-child, #infosNSP span p:first-child { height: 24px; } /* #infosCAIT span > p:nth-of-type(2), #infosNSP span > p:nth-of-type(2) { margin: 16px auto 0; } #infosCAIT span > p:nth-of-type(3), #infosNSP span > p:nth-of-type(3) { margin: 8px auto 0; } */ /*--- BEGIN user Datas Inputs---*/ :focus { outline: none !important; } .nanoSlider { width: 100%; height: auto; position: relative; overflow: hidden; } .nanoSlider ul, .nanoSlider ol { display: flex; align-items: flex-end; transition: transform 0.16s ease-in-out; } .nanoSlider ul li, .nanoSlider ol li { min-width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; } .nanoSlider ul li ol input, .nanoSlider ol li ul input { min-width: 100%; } .nanoSlider__indicators { display: flex; justify-content: center; margin: 0 auto; position: relative; bottom: 8px; } .nanoSlider__indicators .indicator { width: 8px; height: 8px; border: 1px solid rgba(24, 91, 167, 1); border-radius: 50%; margin: 0 4px; cursor: pointer; /* background-color: rgba(24, 91, 167, .4); */ transition: background-color 0.3s ease; } .nanoSlider__indicators.disable { pointer-events: none; cursor: default; opacity: .08; } .nanoSlider__indicators .indicator.active { background-color: rgba(24, 91, 167, .88); } .userDatas { width: 100%; height: auto; max-width: 272px; margin: 24px auto 8px; padding: 0; transition: transform 0.5s ease-in-out; background-color: transparent; /*background-color: tomato;*/ } .infoDatasItems { width: 100%; position: relative; margin: 0 0 32px 0; } .userDatas li ol>input[type="email"], .userDatasMainForm li ol>input[type="email"] { width: 100%; height: 32px; margin: 16px auto 0; padding: 8px; box-sizing: border-box; border: solid 1px rgba(24, 91, 167, .26); -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; font-size: 13px; letter-spacing: 1px; background-color: transparent; /*background-color: lawngreen;*/ } .userDatas li ol>input[type="email"]:disabled, .userDatasMainForm li ol>input[type="email"]:disabled { color: rgba(189, 189, 189, 1); border: solid 1px rgba(189, 189, 189, .06); -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; background-color: rgba(234, 236, 237, .06); } .userDatas li ol>input[type="email"].required, .userDatasMainForm li ol>input[type="email"].required { /*border-color: #C11D1B;*/ border-color: rgba(193, 29, 27, 1); } /* .mainContact.to_Download { width: 100%; height: auto; min-height: 248px; display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 0; margin: 0; padding-top: var(--space-lg) !important; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; overflow: hidden !important; z-index: 7373737373 !important; background-color: rgba(255, 255, 255, 1); } */ .mainContactForm__header.to_Download { width: 100%; height: 48px !important; margin: 0 auto; /* background-color: rgba(255, 255, 255, 1); */ /* background-color: blueviolet !important; */ } /* .mainContactForm__header span.blurp.to_Download { display: none; } */ .userDatasExtra, .userDatas__to-Download { width: 100%; height: 100%; max-width: 328px; display: flex; flex-direction: column; justify-content: flex-start; padding: 0; /*background-color: tomato;*/ background-color: rgba(255, 255, 255, 1); } .userDatasExtra { margin: 0 auto; } .userDatas__to-Download { margin: 0 auto; } /* .userDatas__to-Download li:first-child { margin: 8px 0 0 0; } */ /* .userDatas__to-Download li:first-child{ margin: 0 0 8px 0; } */ .userDatas__to-Download li:last-child { height: 48px; margin: 0; } .userDatas input[type="text"], .userDatasMainForm input[type="text"], .userDatasExtra li ol input[type="email"], .userDatasExtra li ol input[type="text"] { width: 100%; height: 32px; margin: 0 auto; padding: 8px; box-sizing: border-box; border: solid 1px rgba(24, 91, 167, .26); -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; font-size: 13px; letter-spacing: 1px; /*background-color: lawngreen;*/ background-color: transparent; } .userDatasExtra li ol input[type="email"]:disabled, .userDatasExtra li ol input[type="text"]:disabled { color: rgba(189, 189, 189, 1); border: solid 1px rgba(189, 189, 189, .06); border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; background-color: rgba(234, 236, 237, .06); } .userDatasExtra li ol input[type="email"].required, .userDatasExtra li ol input[type="text"].required { /*border-color: #C11D1B;*/ border-color: rgba(193, 29, 27, 1); } .userDatas__to-Download li ol { display: flex; flex-direction: row; } .accessFilesForm input[type='submit'], .accessFilesForm input[type='button'], .accessFilesForm button[type='button'] { width: 100%; min-height: 40px; max-height: 40px; /* background-color: red; */ } .userDatas__to-Download li ol input[type="email"] { width: 100%; min-height: 32px; max-height: 32px; /* background-color: red; */ } .accessFilesForm input[type='submit'] { min-width: 272px; max-width: 272px; } input[name='sendUserAccessPortfolio']#userAccessPortfolio { width: 100%; height: 100%; /* max-width: 272px; */ margin: 16px 0 0 0;; padding: 0; cursor: pointer; border: solid 1px rgba(24, 91, 167, 1); border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; /* color: rgba(24, 91, 167, 1); background-color: transparent; */ color: rgba(242, 242, 242, 1); font-family: 'Titillium Web'; font-weight: 600; font-style: normal; font-size: 18px; line-height: normal; text-align: center; letter-spacing: .025em; background-color: rgba(24, 91, 167, 1); } input[name='sendUserAccessPortfolio']:hover#userAccessPortfolio { color: rgba(242, 242, 242, 1); background-color: rgba(24, 91, 167, 1); } input[name='sendUserAccessPortfolio']#userAccessPortfolio:disabled, input[name='sendUserAccessPortfolio']:hover#userAccessPortfolio:disabled { cursor: default; border: solid 1px rgba(108, 135, 167, .24); color: rgba(111, 125, 149, .24); background-color: rgba(122, 161, 226, .04); } .userDatas__to-Download li ol input[type="email"] { width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; border: solid 1px rgba(24, 91, 167, .26); -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; font-size: 13px; letter-spacing: 1px; /*background-color: lawngreen;*/ background-color: transparent; } /* --- Focus effects --- based on Awesome input focus effects https://codepen.io/Takumari85/pen/RaYwpJ by Takuma.I https://codepen.io/Takumari85 */ .input__textEmail-wrapper { position: relative; margin-inline: auto; } .input__textEmail:focus { outline: none; border-bottom-color: rgba(24, 91, 167, 1); padding: 0 0 0 8px; } .input__textEmail::placeholder { width: 100%; height: 100%; color: transparent; } .input__textEmail::-webkit-contacts-auto-fill-button { position: absolute; visibility: hidden; pointer-events: none; } .label__input-textEmail { position: absolute; top: 8px; left: 12px; padding: 0 8px 0 8px; color: rgba(24, 91, 167, .64); font-size: 14px; pointer-events: none; transform-origin: left center; transition: transform 250ms; background-color: transparent; } .input__textEmail:focus+.label__input-textEmail, .input__textEmail:not(:placeholder-shown)+.label__input-textEmail { left: 12px; padding: 0 8px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: rgba(24, 91, 167, 1); transform: translateY(-100%) scale(0.75); background-color: white; } .clear__input-textEmail { height: 8px; width: 8px; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); transition: color 250ms; border: none; border-radius: 50%; color: rgba(24, 91, 167, 1); background: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; } .clear__input-textEmail:hover, .clear__input-textEmail:focus { color: #333; } .input__textEmail:placeholder-shown+.label__input-textEmail+.clear__input-textEmail { display: none; } .rgpd__wrapper { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; flex-direction: row; margin: 12px 0 0; } .rgpd__wrapper label { margin: 0 0 0 8px; text-align: justify; color: rgba(24, 91, 167, .64); } .rgpd__wrapper label.required { color: rgba(193, 29, 27, 1); } /*--- Disabled ---*/ .input__textEmail:not(:placeholder-shown)+.label__input-textEmail.disabled { color: rgba(189, 189, 189, 1); } .rgpd__wrapper label.disabled { color: rgba(189, 189, 189, 1); } /*--- \ Disabled ---*/ .userDatas li ol>textarea, .userDatasMainForm li ol li textarea { width: 100%; height: 192px; height: 176px; /* margin: 16px 0 0; */ /*margin: 0;*/ padding: 8px; /* border: 0; */ border: solid 1px rgba(24, 91, 167, .26); -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; box-sizing: border-box; -moz-outline: none; -webkit-outline: none; outline: none; resize: none; overflow: auto; font-size: 13px; letter-spacing: 1px; /*background-color: lawngreen;*/ background-color: transparent; } .userDatasMainForm li.nanoSlider ol.nanoSlider__core li.infoDatasBody .infoDatasItems { margin: 0 0 16px 0; } /*--- Disabled ---*/ .userDatas li ol>textarea:disabled, .userDatasMainForm li ol>textarea:disabled { border: solid 1px rgba(189, 189, 189, .06); -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; color: rgba(189, 189, 189, .06); background-color: rgba(234, 236, 237, .06); } /*--- \ Disabled ---*/ .userDatas .infoDatasItems textarea#userMessageMainContact, .userDatas .infoDatasItems textarea#userMessage, .userDatas .infoDatasItems textarea#userMessageNsp { width: 100%; height: 224px; position: relative; margin: 0; padding: 8px; border: solid 1px rgba(24, 91, 167, .26); -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; box-sizing: border-box; -moz-outline: none; -webkit-outline: none; outline: none; resize: none; overflow: auto; font-size: 13px; letter-spacing: 1px; /* background-color: transparent; */ /* background-color: lawngreen; */ } .userDatas .infoDatasItems #userMessage:disabled, .userDatas .infoDatasItems #userMessageNsp:disabled { /* display: block; */ /* margin: 12px 0 0 0; */ border: solid 1.5px rgba(108, 135, 167, .24); /* -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; */ cursor: default; color: rgba(111, 125, 149, .24); /* background-image: none; */ background-color: rgba(122, 161, 226, .04); -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .userDatas .infoDatasItems #userMessage:disabled ~ .label__input-textEmail, .userDatas .infoDatasItems #userMessageNsp:disabled~.label__input-textEmail { color: rgba(111, 125, 149, .24); } #words_wrapper, #chars_wrapper { /* width: 100px; */ height: 8px; display: inline-block; position: absolute; bottom: -8px; right: 0; color: rgba(24, 91, 167, 1); font-size: 10px; font-family: 'Open Sans'; font-weight: 600; font-style: normal; line-height: inherit; text-align: center; /* background-color: darkkhaki; */ } #words_count.limit, #chars_count.limit { color: rgba(193, 29, 27, 1); } /* #words_count, #chars_count { color: rgb(102, 102, 102); } */ .rgpdCompliant { width: 100%; max-width: 272px; height: 32px; display: flex; /*flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;*/ padding: 0; margin: 24px auto 0; box-sizing: inherit; color: rgba(24, 91, 167, .86); font-size: 10px; /*background-color: wheat;*/ background-color: transparent; } ol.rgpdCompliant label { max-width: 256px; margin: 0 0 0 4px; padding: 0; /*background-color: turquoise;*/ background-color: transparent; } .userDatas li ol>input[type="checkbox"].required, .userDatasMainForm li ol>input[type="checkbox"].required { /*border-color: #C11D1B;*/ border-color: rgba(193, 29, 27, 1); } /* --- Toggles (checkbox, radio, etc.) --- based on https://codepen.io/aaroniker/pen/ZEYoxEY :: "CodePen Home 2020 Toggles" :: by Aaron Iker https://codepen.io/aaroniker */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { ol.rgpdCompliant input[type=checkbox] { --active: #275efe; --active-inner: #fff; --focus: 2px rgba(39, 94, 254, 0.3); --border: #bbc1e1; --border-hover: #275efe; --background: #fff; --disabled: #f6f8ff; --disabled-inner: #e1e6f9; -webkit-appearance: none; -moz-appearance: none; /*display: block;*/ /*position: relative;*/ /*margin: 0;*/ /*padding: 0;*/ outline: none; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s; } ol.rgpdCompliant input[type=checkbox]+label { display: flex; cursor: pointer; font-size: 8px; } ol.rgpdCompliant input[type=checkbox]:checked { --b: var(--active); --bc: var(--active); --d-o: 0.3s; --d-t: 0.6s; --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2); } ol.rgpdCompliant input[type=checkbox]:disabled { --b: var(--disabled); cursor: not-allowed; opacity: 0.06; } ol.rgpdCompliant input[type=checkbox]:disabled:checked { --b: var(--disabled-inner); --bc: var(--border); } ol.rgpdCompliant input[type=checkbox]:disabled+label { cursor: not-allowed; color: rgba(189, 189, 189, .06); } ol.rgpdCompliant input[type=checkbox]:hover:not(:checked):not(:disabled) { --bc: var(--border-hover); } ol.rgpdCompliant input[type=checkbox]:after { content: ''; display: block; left: 0; top: 0; position: absolute; transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s); } ol.rgpdCompliant input[type=checkbox]:focus { box-shadow: 0 0 0 var(--focus); } ol.rgpdCompliant input[type=checkbox]:not(.switch) { width: 12px; height: 12px; margin: 0; padding: 0; /*background: red;*/ } ol.rgpdCompliant input[type=checkbox]:not(.switch):after { opacity: var(--o, 0); } ol.rgpdCompliant input[type=checkbox]:not(.switch):checked { --o: 1; } ol.rgpdCompliant input[type=checkbox]:not(.switch) { border-radius: 3px; } ol.rgpdCompliant input[type=checkbox]:not(.switch):after { width: 2px; height: 6px; position: static; margin: 0 auto; top: 0; /*left: 0;*/ border: 2px solid var(--active-inner); border-top: 0; border-left: 0; transform: rotate(var(--r, 20deg)); } ol.rgpdCompliant input[type=checkbox]:not(.switch):checked { --r: 43deg; } } .shareMoreGONOGO { width: 100%; height: 96px; max-height: 96px; /* position: absolute; */ top: 472px; margin: 0 auto; padding: 0; font-family: 'breebold'; font-weight: normal; font-style: normal; font-size: 13px; line-height: normal; text-align: center; background: transparent; /*background-color: greenyellow;*/ } .shareMoreGONOGO strong p { width: 100%; height: 16px; max-width: 285px; max-height: 24px; margin: 0 auto 8px; padding: 0; font-family: 'breebold'; font-weight: normal; font-style: normal; background: transparent; /*background-color: paleturquoise;*/ } /*ul.shareMoreGONOGO strong > p { margin: 0; padding: 0; }*/ .shareMoreGONOGO li::before { content: ''; width: 61.75%; height: 1px; margin: 0 auto 8px; background: #185BA7; /*background: transparent;*/ } .shareMoreGONOGO li { width: 100%; height: 72px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: center; /*background-color: black;*/ background: transparent; } /*le couple ci-dessous permet de customiser les inputs radios et d'y insérer les 'value'*/ .shareMoreGONOGO li input[type="radio"] { width: 0; opacity: 0; position: fixed; } .shareMoreGONOGO li label { display: flex; justify-content: center; align-items: center; margin: 0 auto; padding: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; cursor: pointer; /*border : solid 1px rgba(24, 91, 167, 1);*/ /*border-color : #185BA7;*/ border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; background: rgba(24, 91, 167, 1); /*background-color: transparent;*/ } .shareMoreGONOGO li label:nth-of-type(1) { width: 100%; height: 32px; max-width: 160px; max-height: 32px; margin: 0 0 4px 0; padding: 0; color: white; font-family: 'breeregular'; font-weight: normal; font-style: normal; } input[type='submit']#userShareGO, input[type='submit']#userShareNOGO, input[type='submit']#userShareGOnsp, input[type='submit']#userShareNOGOnsp, .shareMoreGONOGO ul li input[name='userShareGONOGO'] { display: none; background: rgba(24, 91, 167, 0); /*background-color: transparent;*/ } .shareMoreGONOGO li label:nth-of-type(2) { width: 100%; height: 24px; max-width: 104px; max-height: 24px; margin: 4px 0 0 0; padding: 0; color: rgba(24, 91, 167, .86); font-family: 'breelight'; font-weight: normal; background: rgba(24, 91, 167, 0); /*background-color: transparent;*/ } input[name='sendUserInfos']#userInfos, input[name='sendUserInfos']#userInfosNsp { margin: 12px auto 0; cursor: pointer; border: none; border: solid 1px rgba(24, 91, 167, 1); border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; color: rgba(24, 91, 167, 1); visibility: hidden; z-index: -31; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272 48'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23185ba7;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='CAIT_5_10-alt' data-name='CAIT_5/10-alt'%3E%3Cpath class='cls-1' d='M248,1a23,23,0,0,1,0,46H24A23,23,0,0,1,24,1H248m0-1H24A24,24,0,0,0,0,24H0A24,24,0,0,0,24,48H248a24,24,0,0,0,24-24h0A24,24,0,0,0,248,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; */ /*background-color: rgba(24, 91, 167, 1);*/ background-color: transparent; } input[name='sendUserInfos']:hover#userInfos, input[name='sendUserInfos']:hover#userInfosNsp { color: rgba(242, 242, 242, 1); background-color: rgba(24, 91, 167, 1); } /* =================== */ /* === END Infos Block */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ ul.NSPformFields>li:first-child>input[type=email].active~label, ul.NSPformFields>li:first-child>input[type=email]:focus~label, ul.NSPformFields>li:first-child>input[type=email]:valid~label, ul.NSPformFields li:last-child textarea.active~label, ul.NSPformFields li:last-child textarea:focus~label { color: rgba(24, 91, 167, 1); transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform: translateY(-6px) scale(0.8); -webkit-transform: translateY(-6px) scale(0.8); -ms-transform: translateY(-6px) scale(0.8); background: transparent; } ul.NSPformFields>li:first-child>.expandingLine, ul.NSPformFields>li:last-child>.expandingLine { display: block; position: relative; margin: 0; padding: 0; } ul.NSPformFields>li:first-child>.expandingLine { bottom: 100% !important; } ul.NSPformFields>li:last-child>.expandingLine { bottom: 48px !important; } ul.NSPformFields>li:first-child>.expandingLine:before, ul.NSPformFields>li:first-child>.expandingLine:after, ul.NSPformFields>li:last-child>.expandingLine:before, ul.NSPformFields>li:last-child>.expandingLine:after { content: ''; width: 0; height: 1px; position: absolute; margin: -1px 0 0; padding: 0; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; background: rgba(24, 91, 167, 1); } ul.NSPformFields>li:first-child>.expandingLine:before, ul.NSPformFields>li:last-child>.expandingLine:before { left: 50%; } ul.NSPformFields>li:first-child>.expandingLine:after, ul.NSPformFields>li:last-child>.expandingLine:after { right: 50%; } ul.NSPformFields>li:first-child>input[type=email].active~.expandingLine:before, ul.NSPformFields>li:first-child>input[type=email].active~.expandingLine:after, ul.NSPformFields>li:first-child>input[type=email]:focus~.expandingLine:before, ul.NSPformFields>li:first-child>input[type=email]:focus~.expandingLine:after, ul.NSPformFields>li:last-child>textarea.active~.expandingLine:before, ul.NSPformFields>li:last-child>textarea.active~.expandingLine:after, ul.NSPformFields>li:last-child>textarea:focus~.expandingLine:before, ul.NSPformFields>li:last-child>textarea:focus~.expandingLine:after { width: 50%; } .ctaNSPFooterWrapper { flex: none; /* permet de sticky le footer en bottom */ margin: 0; padding: 0; } .ctaNSPFooter { width: 297px; height: 88px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; margin: 0; padding: 0; border-top: 1px solid rgba(24, 91, 167, 1); background: transparent; } .ctaNSPFooter>button { margin: 0 auto; padding: 16px 65px; border: 1px solid rgba(24, 91, 167, 1); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-size: 1.313em; line-height: 1.202em; text-align: center; color: #fafafa; background: rgba(24, 91, 167, 1); } /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ #svgSuccessWrapper-mainContact, #svgSuccessWrapper-fileDownload, #svgSuccessWrapper-rating, #svgSuccessWrapper-ratingComments, #svgSuccessWrapper-ratingInfos, #svgSuccessWrapper-scoring, #svgSuccessWrapper-scoringComments, #svgSuccessWrapper-scoringInfos, #svgSuccessWrapper__EndTunnelSuccess { width: 100%; /*height: 48px;*/ max-width: 272px; max-height: 48px; display: none; position: relative; margin: 0 auto; padding: 0; transition: all .084s ease; background-color: transparent; /*background-color: gold;*/ } #svgSuccessWrapper-rating, #svgSuccessWrapper-scoring { margin: 24px auto 0; } #svgSuccessWrapper-ratingComments { margin: 0 auto; } #svgSuccessWrapper-ratingInfos { margin: 64px auto 0; } #svgSuccessWrapper-ratingInfos { margin: -45px auto 0 !important; } #svgSuccessWrapper-scoring { margin: 32px auto 0; } #svgSuccessWrapper-mainContact, #svgSuccessWrapper-fileDownload { bottom: 0; } #svgSuccessWrapper-rating.successHourra, #svgSuccessWrapper-scoring.successHourra { display: block; } .svgSuccessWrapper.successHourra { display: none; } .svgSuccess { width: 48px; height: 48px; /* display: flex; */ display: block; margin: 0 auto; } .svgSuccess-checkmark { fill: none; stroke-width: 1px; /*stroke: #ffffff;*/ stroke: #64C155; stroke-dasharray: 15px, 15px; stroke-dashoffset: -14px; animation: success-checkmark 450ms ease 1400ms forwards; -webkit-animation: success-checkmark 450ms ease 1400ms forwards; opacity: 0; } .svgSuccess-circle-outline { fill: none; stroke-width: 1px; stroke: rgba(24, 91, 167, .64); stroke-dasharray: 72px, 72px; stroke-dashoffset: 72px; animation: success-circle-outline 100ms ease-in-out 500ms forwards; -webkit-animation: success-circle-outline 100ms ease-in-out 500ms forwards; opacity: 0; } .svgSuccess-circle-fill { fill: rgba(24, 91, 167, .04); /*fill: #81c038;*/ stroke: none; opacity: 0; animation: success-circle-fill 300ms ease-out 1100ms forwards; -webkit-animation: success-circle-fill 300ms ease-out 1100ms forwards; } /* --- START endTunnel Block --- */ #endTunnel { width: 100%; height: 208px; max-width: 328px; max-height: 208px; /*display: none;*/ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: flex-start; position: absolute; top: 40px; margin: 0; padding: 0; border: solid 1px rgba(209, 222, 237, 1); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; visibility: hidden; z-index: -31; transition: 0.1s; animation: show-endTunnel 1400ms ease-out 1900ms forwards; -webkit-animation: show-endTunnel 1400ms ease-out 1900ms forwards; background: rgba(246, 248, 251, 1); background-color: transparent; /* background: palegoldenrod; */ } /* --- END endTunnel Block --- */ /* === BEGIN RateScore__footer === */ #RateScore__footer, #MainContact__footer { /* height: 96px; */ height: auto; max-height: 112px; } #RateScore__footer { margin: 24px 0 0 0; } /* #MainContact__footer { background-color: transparent; } */ #MainContact__footer { width: 100%; display: flex; justify-content: center; margin: 0 auto; padding: 0; } #userMandatoryInputs::before, #userMandatoryInputsDP::before, #userMandatoryInputsCait::before, #userMandatoryInputsNsp::before, .userDatasPull__emailed::before, #userDatasPull__emailed-inMainContact::before { content: ''; width: 100%; height: .25px; max-width: 328px; position: absolute; margin: -16px 0 0 0; padding: 0; border: none; z-index: 8888; background: rgba(53, 129, 218, .64); } #userDatasPull__emailed-inMainContact, #userDatasPull__emailed-inMainContact.to_Download { width: 100%; /* height: auto; */ height: 96px; max-width: 328px; min-height: 96px; max-height: 96px; display: flex; margin: -8px 0 0 0; padding: 0; /* background-color: blueviolet; */ } #userDatasPull__emailed-inMainContact.to_Download { position: absolute; bottom: 0; left: 16px; margin: 0 auto; } .userMandatoryInputsFaker::before, #userMandatoryInputsMC::before { content: ''; width: 100%; height: .25px; max-width: 328px; position: absolute; margin: -16px 0 0 0; padding: 0; border: none; z-index: 8888; background: rgba(53, 129, 218, .64); } #userMandatoryInputsMC { width: 100%; height: auto; /* height: 96px; */ max-width: 328px; /* min-height: 96px; */ max-height: 96px; display: flex; margin: -8px 0 0; padding: 0; /* background-color: goldenrod; */ } .userMandatoryInputsFaker { width: 100%; height: auto; /* height: 96px; */ max-width: 328px; /* min-height: 96px; */ max-height: 96px; display: flex; position: absolute; bottom: 0; /* margin: 0 0 11px; */ margin: 0 auto 11px; padding: 0; /* background-color: goldenrod; */ } #userMandatoryInputsDP { width: 100%; height: auto; max-width: 328px; min-height: 96px; max-height: 96px; display: flex; margin: 48px 0 0 0; padding: 0; /* background-color: goldenrod; */ } #userMandatoryInputs, #userMandatoryInputsCait, #userMandatoryInputsNsp, .userDatasPull__emailed { width: 100%; height: auto; max-width: 328px; min-height: 96px; max-height: 96px; display: flex; margin: 16px 0 0 0; padding: 0; /* background-color: blueviolet; */ } .userDatasPull__emailed, #userDatasPull__emailed-inMainContact { position: absolute; bottom: 0; left: 16px; opacity: .96; } #userDatasPull__emailed-inMainContact { /* margin: 40px 0 0 0; */ margin: 312px 0 0 0; z-index: 99; background-color: darkgoldenrod; } /* === END RateScore__footer === */ #userMandatoryInputsCait, #userMandatoryInputsNsp { position: absolute; bottom: 0; } /* #userMandatoryInputsCait { background-color: #64C155; } #userMandatoryInputsNsp { background-color: red; } */ /* #userMandatoryInputsMainContact { position: relative; } */ .accessFilesForm { width: auto; height: auto; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: center; position: relative; margin: 0 auto; padding-top: var(--space-lg) !important; /* background-color: rgba(255, 255, 255, 1); */ /* background-color: olivedrab; */ } ul#fileInfos__portfolio { display: none; } /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ .rateScore__EndTunnel-, .rateScore__EndTunnel-Duplicate, .rateScore__EndTunnel-FatalError, .rateScore__EndTunnel-Success { width: 100%; --hauteur: calc(100% - 56px); height: var(--hauteur); min-height: 584px; max-height: var(--hauteur); display: flex; position: relative; top: 56px; left: 0; margin: 0; padding: 0; /* padding-top: var(--space-lg) !important; */ -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; overflow: hidden !important; z-index: 7373737373 !important; /*transform: translateY(100%);*/ /*transition: all .2s ease;*/ color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1); /* background-color: greenyellow; */ } .rateScore__EndTunnel-Duplicate { /* background-color: rgba(255, 255, 255, 1); */ background-color: orange; } .rateScore__EndTunnel-FatalError { /* background-color: rgba(255, 255, 255, 1); */ background-color: crimson; } /* .rateScore__EndTunnel-Success#contactMe__mainCTAs-wrapper { position: absolute; top: 0; margin: 0; padding-top: var(--space-lg) !important; } */ .rateScore__EndTunnel-Duplicate > .blockWrapperEndTunnel, .rateScore__EndTunnel-FatalError > .blockWrapperEndTunnel, .rateScore__EndTunnel-Success > .blockWrapperEndTunnel { width: 100%; height: 100%; max-width: 328px; max-height: 112px; display: flex; flex-direction: row; /* flex-wrap: wrap; */ /* justify-content: center; */ /* align-content: flex-start; */ align-content: space-between; margin: 0 auto; padding: 0; transition: all 2s; } .rateScore__EndTunnel-Success hr { width: 100%; max-width: 328px; height: 1px; margin: 32px auto 0; border: none; background: rgba(24, 91, 167, 1); } .rateScore__EndTunnel-FatalError>.blockWrapperEndTunnel__error-illustration, .rateScore__EndTunnel-Duplicate>.blockWrapperEndTunnel__duplicate-illustration, .rateScore__EndTunnel-Success>.blockWrapperEndTunnel__success-illustration { /* width: 100%; */ /* height: 100%; */ /* max-height: 416px; */ margin: 0 auto; padding: 0; /* background-color: yellow; */ } .rateScore__EndTunnel-Duplicate>.blockWrapperEndTunnel span, .rateScore__EndTunnel-FatalError>.blockWrapperEndTunnel span, .rateScore__EndTunnel-Success>.blockWrapperEndTunnel span { width: 100%; height: auto; max-width: 272px; margin: 32px auto 0; padding: 0; } .rateScore__EndTunnel-Duplicate>.blockWrapperEndTunnel>span p, .rateScore__EndTunnel-FatalError>.blockWrapperEndTunnel>span p, .rateScore__EndTunnel-Success>.blockWrapperEndTunnel>span p { margin: 0 auto; padding: 0; color: rgb(4, 45, 90); font-family: 'bree_seriflight'; font-weight: normal; font-style: normal; font-size: 16px; line-height: 19.2px; text-align: center; color: white; /*background: palegoldenrod;*/ } /* === BEGIN INPUTS === */ /* --- Focus effects --- based on Awesome input focus effects https://codepen.io/Takumari85/pen/RaYwpJ by Takuma.I https://codepen.io/Takumari85 */ .input__textEmail-wrapper { position: relative; margin-inline: auto; } .input__textEmail:focus { outline: none; border-bottom-color: rgba(24, 91, 167, 1); padding: 0 0 0 8px; } .input__textEmail::placeholder { width: 100%; height: 100%; color: transparent; } .input__textEmail::-webkit-contacts-auto-fill-button { position: absolute; visibility: hidden; pointer-events: none; } .label__input-textEmail { position: absolute; top: 8px; left: 12px; padding: 0 8px 0 8px; color: rgba(24, 91, 167, .64); font-size: 14px; pointer-events: none; transform-origin: left center; transition: transform 250ms; background-color: transparent; } .input__textEmail:focus+.label__input-textEmail, .input__textEmail:not(:placeholder-shown)+.label__input-textEmail { left: 12px; padding: 0 8px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: rgba(24, 91, 167, 1); transform: translateY(-100%) scale(0.75); background-color: white; } .clear__input-textEmail { height: 8px; width: 8px; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); transition: color 250ms; border: none; border-radius: 50%; color: rgba(24, 91, 167, 1); background: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; } .clear__input-textEmail:hover, .clear__input-textEmail:focus { color: #333; } .input__textEmail:placeholder-shown+.label__input-textEmail+.clear__input-textEmail { display: none; } /* --- START button-To-submit-To-button Send inputs --- */ .mainContactForm input[type='submit'], .mainContactForm input[type='button'], .mainContactForm button[type='button'], .ctaCAIT input[type='submit'], .ctaCAIT input[type='button'], .ctaCAIT button[type='button'], .ctaNSP input[type='submit'], .ctaNSP input[type='button'], .ctaNSP button[type='button'] { width: 100%; height: 100%; max-width: 272px; max-height: 40px; margin: 0; padding: 0; /* -webkit-appearance: none; -moz-appearance: none; -o-appearance:none; -ms-appearance: none; outline: none; */ -webkit-transition: color 0.35s ease-out; -moz-transition: color 0.35s ease-out; -o-transition: color 0.35s ease-out; transition: color 0.35s ease-out; font-family: 'Titillium Web'; font-weight: 600; font-style: normal; font-size: 21px; line-height: 25.2px; text-align: center; } .mainContactForm input[type='submit'], .mainContactForm input[type='button'], .mainContactForm button[type='button'] { max-width: 328px; min-height: 40px; max-height: 40px; /* background-color: red; */ } input[name='sendUserMainContact']#userMainContact { width: 272px; height: 48px; /* margin: 0 auto; */ position: relative; bottom: 0; cursor: pointer; border: solid 1px rgba(24, 91, 167, 1); border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; color: rgba(24, 91, 167, 1); transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; background-color: transparent; } input[name='sendUserMainContact']:hover#userMainContact { color: rgba(242, 242, 242, 1); background-color: rgba(24, 91, 167, 1); } input[name='sendUserMainContact']#userMainContact:disabled, input[name='sendUserMainContact']:hover#userMainContact:disabled { cursor: default; border: solid 1.5px rgba(108, 135, 167, .24); border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; color: rgba(111, 125, 149, .24); -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; background-color: rgba(122, 161, 226, .04); } input[name='sendUserRate']#userRate, input[name='sendUserScore']#userScore { /* display: block; */ margin: 12px 0 0 0; border: solid 1.5px rgba(24, 91, 167, 1); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: rgba(24, 91, 167, 1); background-color: transparent; } input[name='sendUserRate']#userRate { margin: 24px 0 0 0; } input[name='sendUserScore']#userScore { margin: 32px 0 0 0; } input[name='sendUserRate']:hover#userRate, input[name='sendUserScore']:hover#userScore { cursor: pointer; color: rgba(242, 242, 242, 1); background-color: rgba(24, 91, 167, 1); } input[name='sendUserRate']#userRate:disabled, input[name='sendUserRate']:hover#userRate:disabled, input[name='sendUserScore']#userScore:disabled, input[name='sendUserScore']:hover#userScore:disabled { /* display: block; */ border: solid 1.5px rgba(108, 135, 167, .24); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; cursor: default; color: rgba(111, 125, 149, .24); /* background-image: none; */ background-color: rgba(122, 161, 226, .04); -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } input[name='sendUserRate']#userRate:disabled, input[name='sendUserRate']:hover#userRate:disabled { margin: 24px 0 0 0; } input[name='sendUserScore']#userScore:disabled, input[name='sendUserScore']:hover#userScore:disabled { margin: 32px 0 0 0; } /* --- END button-To-submit-To-button Send inputs --- */ /* === END INPUTS === */ /* --- BEGIN caitApp Errors Warning messages --- */ strong.warning, strong.warning#userEmailMainContactWarning, strong.warning#userRgpdMainContactWarning, strong.warning#userWordsMainContactWarning, strong.warning#userEmailWarning, strong.warning#userRgpdWarning, strong.warning#userWordsWarning, strong.warning#userEmailNspWarning, strong.warning#userRgpdNspWarning, strong.warning#userWordsNspWarning, strong.warning#userEmailDpWarning, strong.warning#userRgpdDpWarning { width: 100%; height: 12px; max-width: 100vw; /* max-width: 272px; */ max-height: 12px; display: block; position: absolute; margin: 0 auto; padding: 0; color: rgba(193, 29, 27, 1); font-size: 10px; font-family: 'Open Sans'; font-weight: 600; font-style: normal; line-height: inherit; text-align: center; background-color: transparent; /* background: blue; */ } strong.warning#userWordsMainContactWarning { position: relative; bottom: 8px; /* background-color: pink; */ } strong.warning#userEmailMainContactWarning, strong.warning#userRgpdMainContactWarning { bottom: 176px; left: 0; /* background: chartreuse; */ } strong.warning#userEmailDpWarning, strong.warning#userRgpdDpWarning { bottom: 120px; left: 0; /* background: chartreuse; */ } strong.warning#userEmailWarning, strong.warning#userRgpdWarning { top: -40px; /* background-color: transparent; */ /* background: green; */ } strong.warning#userEmailNspWarning, strong.warning#userRgpdNspWarning { top: -32px; /* background-color: transparent; */ /* background: chocolate; */ } strong.warning#userCommentsWarning, strong.warning#userCommentsNspWarning { bottom: 8px; /* background-color: transparent; */ /* background: lime; */ } strong.warning#userWordsWarning { bottom: 16px; /* background-color: transparent; */ /* background: purple; */ } strong.warning#userWordsNspWarning { bottom: 16px; /* background-color: transparent; */ /* background: purple; */ } /* === END xxx === */ /* ================ END CSS <<< ============ */ /* ==================== >>> START KEYFRAMES ====================== */ /* === Begin Anim CTAs-To-Forms === */ /* --- slideUp__OnPortfolio --- */ @-webkit-keyframes slideUp__OnPortfolio { } @-moz-keyframes slideUp__OnPortfolio { } @keyframes slideUp__OnPortfolio { 0% { /* height: 112px; */ /* bottom: 100%; */ opacity: 0; } /* 50% { opacity: .5; } */ 100% { /* height: auto; */ /* bottom: 0; */ opacity: 1; } } @-webkit-keyframes slideUp__OnPortfolio-mobile {} @-moz-keyframes slideUp__OnPortfolio-mobile {} @keyframes slideUp__OnPortfolio-mobile { 0% { opacity: 0; bottom: 100%; } 50% { opacity: .5; } 100% { opacity: 1; bottom: -64px; } } /* --- slideUp__OnPortfolio --- */ @-webkit-keyframes slideUp__OnContactMe { } @-moz-keyframes slideUp__OnContactMe { } @keyframes slideUp__OnContactMe { 0% { top: -100%; opacity: 0; } 50% { opacity: .75; } 100% { top: 0; opacity: 1; } } /* --- rateme --- */ @-webkit-keyframes rateme { 0% { opacity: 0; transform: scale(0.5) translateX(-20px); } 50% { opacity: 1; transform: scale(0.5) translateX(0); } 100% { opacity: 1; transform: scale(1) translateX(0); } } @-moz-keyframes rateme { 0% { opacity: 0; transform: scale(0.5) translateX(-20px); } 50% { opacity: 1; transform: scale(0.5) translateX(0); } 100% { opacity: 1; transform: scale(1) translateX(0); } } @keyframes rateme { 0% { opacity: 0; transform: scale(0.5) translateX(-20px); } 50% { opacity: 1; transform: scale(0.5) translateX(0); } 100% { opacity: 1; transform: scale(1) translateX(0); } } /* === END Anim CTAs-To-Forms === */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ /* °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° */ @-webkit-keyframes success-checkmark { 0% { stroke-dashoffset: 16px; opacity: 1; } 100% { stroke-dashoffset: 31px; opacity: 1; } } @-moz-keyframes success-checkmark { 0% { stroke-dashoffset: 16px; opacity: 1; } 100% { stroke-dashoffset: 31px; opacity: 1; } } @keyframes success-checkmark { 0% { stroke-dashoffset: 16px; opacity: 1; } 100% { stroke-dashoffset: 31px; opacity: 1; } } @-webkit-keyframes success-circle-outline { 0% { stroke-dashoffset: 72px; opacity: 1; } 100% { stroke-dashoffset: 0px; opacity: 1; } } @-moz-keyframes success-circle-outline { 0% { stroke-dashoffset: 72px; opacity: 1; } 100% { stroke-dashoffset: 0px; opacity: 1; } } @keyframes success-circle-outline { 0% { stroke-dashoffset: 72px; opacity: 1; } 100% { stroke-dashoffset: 0px; opacity: 1; } } @-webkit-keyframes success-circle-fill { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes success-circle-fill { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes success-circle-fill { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes show-endTunnel { 0% { opacity: 0; } 100% { visibility: visible; z-index: 31; opacity: 1; } } @-moz-keyframes show-endTunnel { 0% { opacity: 0; } 100% { visibility: visible; z-index: 31; opacity: 1; } } @keyframes show-endTunnel { 0% { opacity: 0; } 100% { visibility: visible; z-index: 31; opacity: 1; } } /* =================== END KEYFRAMES <<< ============= */ /* ================================================ */ /* === Media-Queries & Breakpoints( as of 2024) === */ /* ================================================ */ /* === BEGIN Responsive === */ /* MOBILE [Portrait] :: 360px -> [Portrait] Target Most Smartphones devices */ @media screen and (max-width: 360px) and (orientation: portrait) { #mainContact { width: 100%; height: 112px; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } #mainContact.slideUp__OnPortfolio { /* height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: -64px; */ /* height: 100vh; min-height: 640px; max-height: max-content; position: absolute; bottom: -96px !important; */ /* top: -488px; */ height: auto; min-height: 640px; position: absolute; bottom: 0; margin: 0; padding: 0; opacity: 1; transform: translate3d(0, 8px, 0); animation: slideUp__OnPortfolio-mobile .15s ease-in-out forwards; /* transition: all .25s ease-out; */ background-color: rgba(255, 255, 255, 1); /* background-color: cornflowerblue; */ } #mainContact.slideUp__OnContactMe { height: 100vh; min-height: 640px; /* max-height: 640px; */ max-height: max-content; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } #infosMC { width: 100vw; margin: 0 auto; } /* #RateScore { background-color: darkorange; } */ .rateScore { width: 100%; max-width: 360px; /* height: 100%; */ height: 100vh; min-height: 640px; } } /* MOBILE [Portrait] Target Smartphones devices w/ max-height: 640px ex. Sony-xPeria */ @media screen and (max-width: 360px) and (max-height: 640px) and (orientation: portrait) { #mainContact { width: 100%; height: 112px; opacity: 1; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } #mainContact.slideUp__OnPortfolio { height: auto; margin: 0; padding: 0; position: absolute; bottom: 0; transform: translate3d(0, 8px, 0); opacity: 1; animation: slideUp__OnPortfolio-mobile .15s ease-in-out forwards; /* transition: all .25s ease-out; */ background-color: rgba(255, 255, 255, 1); /* background-color: gold; */ } #mainContact.slideUp__OnContactMe { height: auto; min-height: 640px; /* max-height: 640px; */ max-height: max-content; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } /* #RateScore { background-color: darkorange; } */ .rateScore { width: 100%; max-width: 360px; /* height: 100%; */ height: 100vh; min-height: 640px; } } /* MOBILE [Portrait] :: 361px to 767px -> target Most New Smartphones devices as of : early 2020s (Portrait) */ @media screen and (min-width: 361px) and (max-width: 767px) and (orientation: portrait) { #mainContact { width: 100%; height: 112px; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: powderblue; */ } #mainContact.slideUp__OnPortfolio { height: auto; position: absolute; top: 0; margin: 0; padding: 0; transform: translate3d(0, -45%, 0); opacity: 1; /* animation: slideUp__OnPortfolio-mobile .15s ease-in-out forwards; */ transition: all .25s ease-out; background-color: rgba(255, 255, 255, 1); /* background-color: darksalmon; */ } #mainContact.slideUp__OnContactMe { height: 100vh; min-height: 640px; max-height: 100vh; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } #infosMC { width: 100vw; margin: 0 auto; } /* #RateScore { background-color: khaki; } */ .rateScore { width: 100vw; height: 100vh; min-height: 640px; } } /* TABLET [Portrait] :: 768px to 1024px -> target most Tablet devices */ /* @media screen and (min-width: 768px) and (orientation: portrait) */ @media screen and (min-width: 768px) and (max-width: 1279px) and (max-height: 1279px) and (orientation: portrait) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 3/2) { #mainContact { width: 100%; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } #mainContact.slideUp__OnPortfolio { height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; } #mainContact.slideUp__OnContactMe { height: 100vh; min-height: 640px; max-height: 100vh; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } /* #RateScore__Container.iPad { top: 64px; } */ /* #RateScore.iPad { background-color: darkorange; } */ .rateScore { width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; /* background-color: salmon; */ } .tablet#mainContact { width: 100%; opacity: 0; } .tablet#mainContact.slideUp__OnPortfolio { height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; } .tablet#mainContact.slideUp__OnContactMe { height: 100vh; min-height: 640px; max-height: 100vh; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } .rateScore.tablet { width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; } } /* TABLET [Landscape] :: 768px to 1024px -> target most Tablet devices */ /* @media screen and (min-width: 1024px) and (orientation: landscape) */ @media screen and (max-width: 1279px) and (max-height: 768px) and (orientation: landscape) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 3/2) { #mainContact { width: 100%; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } #mainContact.slideUp__OnPortfolio { height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; } #mainContact.slideUp__OnContactMe { height: 100vh; min-height: 640px; max-height: 100vh; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } .rateScore { width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; /* background-color: orange; */ } /* :: Facultatif :: Exercice de style (disons) : vérifie si véritablement une tablette -> voir responsiveCustomDevices.js +.json associé */ .tablet#mainContact { width: 100%; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } .tablet#mainContact.slideUp__OnPortfolio { height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; } .tablet#mainContact.slideUp__OnContactMe { height: 100vh; min-height: 640px; max-height: 100vh; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } .rateScore.tablet { width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; /* background-color: orange; */ } } /* --- iPad 8° gen :: !testing! :: --- */ /* --- (Portrait) --- */ @media screen and (min-width: 768px) and (max-width: 1279px) and (max-height: 1279px) and (orientation: portrait) and (min-aspect-ratio: 3/4) { .iPad#mainContact { width: 100%; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } .iPad#mainContact.slideUp__OnPortfolio { height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; } .iPad#mainContact.slideUp__OnContactMe { height: auto; min-height: 640px; /* max-height: 640px; */ max-height: max-content; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } /* #RateScore.iPad { background-color: darkorange; } */ .rateScore.iPad { width: 100%; height: auto; min-height: 640px; /* max-height: 640px; */ max-height: max-content; /* background-color: fuchsia; */ } } /* --- (Landscape) --- */ @media screen and (max-width: 1279px) and (max-height: 768px) and (orientation: landscape) and (min-aspect-ratio: 3/4) { .iPad#mainContact { width: 100%; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } .iPad#mainContact.slideUp__OnPortfolio { height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; } .iPad#mainContact.slideUp__OnContactMe { height: auto; min-height: 640px; /* max-height: 640px; */ max-height: max-content; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } /* #RateScore.iPad { background-color: darkorange; } */ .rateScore.iPad { width: 100%; max-width: 360px; height: auto; min-height: 640px; /* max-height: 640px; */ max-height: max-content; top: 0; /* background-color: salmon; */ } } /* --- END iPad 8° gen !testing! --- */ /* DESKTOP :: 1024px to 1360px -> target most "modern" Laptops and desktops */ @media screen and (min-width: 1025px) and (max-width: 1365px) and (min-aspect-ratio: 8/5) { #mainContact { width: 100%; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } #mainContact.slideUp__OnPortfolio { /* height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; */ height: auto; min-height: 640px; max-height: max-content; position: absolute; bottom: -72px; opacity: 1; animation: slideUp__OnPortfolio .15s ease-in-out forwards; /* background-color: deeppink; */ } #mainContact.slideUp__OnContactMe { height: auto; min-height: 640px; /* max-height: 640px; */ max-height: max-content; position: absolute; top: 0; opacity: 1; animation: slideUp__OnContactMe .15s ease-in-out forwards; } /* #RateScoreCTA__container { z-index: 9; } */ .rateScore__Wrapper { flex-wrap: nowrap; } .rateScore { width: 100%; max-width: 360px; height: 640px; max-height: 640px; top: 40px; } .rateScore__EndTunnel-, .rateScore__EndTunnel-Duplicate, .rateScore__EndTunnel-FatalError, .rateScore__EndTunnel-Success { max-width: 360px; margin: 32px 0 0; } } /* DESKTOP :: 1366px to large screens -> target most large screens */ @media screen and (min-width: 1366px) and (max-width: 1679px) and (min-aspect-ratio: 8/5) { #mainContact { width: 100%; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } #mainContact.slideUp__OnPortfolio { height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; } #mainContact.slideUp__OnContactMe { height: auto; min-height: 640px; /* max-height: 640px; */ max-height: max-content; position: absolute; top: 0; opacity: 1; /* animation: slideUp__OnContactMe .25s ease-in-out forwards; */ } /* #RateScoreCTA__container { z-index: 9; } */ .rateScore__Wrapper { flex-wrap: nowrap; } .rateScore { width: 100%; max-width: 360px; height: 640px; max-height: 640px; top: 40px; } } /* WIDE-SCREENS :: 1680px+ -> target very large screens and wider */ @media screen and (min-width: 1680px) and (min-aspect-ratio: 8/5) { #mainContact { width: 100%; opacity: 0; /* transition: height 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; */ /* background-color: salmon; */ } #mainContact.slideUp__OnPortfolio { height: auto; min-height: 112px; max-height: fit-content; position: absolute; bottom: 0; opacity: 1; animation: slideUp__OnPortfolio .25s ease-in-out forwards; } #mainContact.slideUp__OnContactMe { height: auto; min-height: 640px; /* max-height: 640px; */ max-height: max-content; position: absolute; top: 0; opacity: 1; /* animation: slideUp__OnContactMe .25s ease-in-out forwards; */ } /* #RateScoreCTA__container { z-index: 9; } */ .rateScore__Wrapper { flex-wrap: nowrap; } .rateScore { width: 100%; max-width: 360px; height: 640px; max-height: 640px; top: 40px; } } /* === END Responsive === */ /*! __ ___ ____ __ /\ \ /'___\/\ _`\ __ __/\ \__ \ \ \___ _ __ __ /\ \__/\ \ \/\ \/\_\ __ /\_\ \ ,_\ \ \ _ `\/\`'__\/'__`\ \ \ ,__\\ \ \ \ \/\ \ /'_ `\/\ \ \ \/ \ \ \ \ \ \ \//\ \L\.\_\ \ \_/ \ \ \_\ \ \ \/\ \L\ \ \ \ \ \_ \ \_\ \_\ \_\\ \__/.\_\\ \_\ \ \____/\ \_\ \____ \ \_\ \__\ \/_/\/_/\/_/ \/__/\/_/ \/_/ \/___/ \/_/\/___L\ \/_/\/__/ /\____/ \_/__/ =================================================================== ±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±± ## JS ## 2020-2024 © Achraf (aka hrafDigit) https://www.achrafbel.fr https://codepen.io/hraf https://github.com/hrafdigit from Paris [France https://www.france.fr/] w/ ¶ made w/ ¶ hosted by Grand Jardin Digital https://www.grandjardindigital.fr ±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±± ================================================================== */