.contact_cad_avatar { width: 32px; height: 32px; display: inline-block; margin: 0 3px; vertical-align: middle; } .contact_avatar { width: 30px; height: 30px; color: #fff; display: table-cell; background-color: var(--brand); border-radius: 50%; text-align: center; vertical-align: middle; font-size: 0.65rem; } .societe_cad_avatar { width: 42px; height: 36px; display: inline-block; margin: 0 3px; vertical-align: middle; } .societe_avatar { width: 42px; height: 36px; color: #fff; display: table-cell; background-color: var(--brand); text-align: center; vertical-align: middle; font-size: 0.65rem; } .cgv_accept { padding-inline-start: 0; line-height: 1rem; } .msgAlert_cadre { position: fixed; top: -100%; left: 5%; right: 5%; width: auto; text-align: center; z-index: 9999; padding: 15px 20px; box-shadow: 1px 1px 12px #555; font-size: 1rem; animation-name: alert_slide; animation-duration: 10s; } @keyframes alert_slide { 0% { top: -100%; opacity: 0; } 10% { top: 0%; opacity: 1; } 90% { top: 0%; opacity: 1; } 100% { top: -100%; opacity: 0; } } .msgAlert_close { animation-name: alert_close; animation-duration: 2s; } @keyframes alert_close { 0% { top: 0%; opacity: 1; } 100% { top: -100%; opacity: 0; } } .msgAlert_cadre_hide { position: absolute; left: 50%; transform: translate(-50%,-130%); text-align: center; z-index: 5; padding: 15px 60px; box-shadow: 1px 1px 12px #555; transition: all 1s; font-size: 1rem; } .msgAlert_niv1 { border: #ebb5b6 solid 1px; background-color: #fde1e2; color: #c65d5c; border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .msgAlert_niv1 a { color: green; } .msgAlert_niv1 a:hover { text-decoration: underline; } .msgAlert_niv2 { border: #dfebb5 solid 1px; background-color: #f7fde1; color: #95bc01; border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .msgAlert_niv3 { border: #2a7ab4 solid 1px; background-color: #e0f2ff; color: #22629b; border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .msgAlert_niv4 { border: #2a7ab4 solid 1px; background-color: #f6f6dc; color: #22629b; border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } a.msgAlert_link { cursor: pointer; } a.msgAlert_link_niv1 { color: #c65d5c; } a.msgAlert_link_niv2 { color: #95bc01; } a.msgAlert_link_niv3 { color: #22629b; } .msgAlert_croix { width: 30px; height: 30px; position: absolute; right: 6px; bottom: 6px; fill: #777; } .msgAlert_croix:hover { opacity: 0.5; } .pwa-popup__window { position: fixed; display: flex; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; background-color: rgba(0, 0, 0, 0.5); transition: .2s; } .pwa-popup__window_show { visibility: visible; opacity: 1; } .pwa-popup__window_hide { visibility: hidden; opacity: 0; } .pwa-popup__cad { background-color: #f9f9f9; box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 30%); margin: auto; padding: 0; position: relative; overflow: auto; max-width: 90%; min-width: 90%; max-height: 90%; min-height: 200px; border-radius: 20px; } .pwa-popup_title{ margin: 0 auto 20px; } .pwa-popup_content{ } .pwa-popups__window_btn{ border: 1px solid #ccc; position: absolute; top: 10px; right: 10px; color: #ea9d0c; cursor: pointer; font-size: 2rem; background-color: #fff; border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; z-index: 1; } .pwa-popups__window_btn:hover { background-color: #f0f0f0; } .carousel { position: relative; width: 100%; margin: 0 auto; aspect-ratio: 3 / 2; overflow: hidden; font-family: sans-serif; border-top-left-radius: 10px; border-top-right-radius: 10px; } .carousel img { width: 100%; height: 100%; object-fit: cover; display: none; border-radius: 0 !important; } .carousel img.active { display: block; } .carousel .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.65); border-radius: 50%; cursor: pointer; user-select: none; z-index: 10; padding: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; border: none; } .carousel .nav.prev { left: 12px; } .carousel .nav.next { right: 12px; } .carousel .nav svg { width: 30px; height: 30px; display: block; fill: white; pointer-events: none; transition: transform 0.2s; } .carousel .nav:hover svg { transform: scale(1.2); } .carousel .counter { position: absolute; bottom: 10px; right: 16px; background: rgba(0,0,0,0.6); color: white; padding: 2px 12px; font-size: 15px; border-radius: 8px; z-index: 12; font-weight: 500; } .chp_cadre { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 35px; margin-bottom: 10px; } .chp_lgd_g { display: flex; justify-content: flex-end; align-items: center; width: 30%; font-family: 'Roboto', sans-serif; font-size: 0.9rem; line-height: 0.9rem; color: #bbb; font-weight: 500; } .chp_ldg_textarea { line-height: initial; padding-top: 5px; } .chp_help_text { margin-top: 5px; padding-left: 30%; color: #999; font-size: 0.8rem; } .chp_help_text2 { position: absolute; top: 40px; padding: 5px; background: #fafabb; font-size: 0.85rem; line-height: 0.85rem; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0px 3px 4px 2px rgb(0 0 0 / 30%); z-index: 1; color: #777; display: none; } .chp_input_inv:focus + .chp_help_text2{ display:block; } .chp_lgd_h { display: block; text-align: left; height: 20px; font-size: 0.9rem; color: #000; } .chp_lgd_hc { display: block; text-align: center; height: 20px; font-size: 0.95rem; color: #999; } .chp_cont_g { display: block; width: 70%; vertical-align: middle; text-align: left !important; border-bottom: 1px solid #ccc; padding-left: 5px; } .chp_cont_g p { padding: 0; } .chp_cont_ta_g { display: block; width: 70%; vertical-align: middle; text-align: left; border-bottom: 1px solid #ccc; padding: 0 0 7px 5px; } .chp_cont_ta_h { display: block; width: 70%; vertical-align: top; text-align: left; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .chp_cont_h { display: block; border-bottom: 1px solid #ccc; } .chp_cont_help { display: block; width: 70%; vertical-align: middle; text-align: left; padding: 0 0 7px 5px; color: grey; font-size: 0.8rem; font-style: italic; } .chp_form_g { display: block; width: 70%; vertical-align: middle; text-align: left; position: relative; } .chp_form_h, .chp_form_hc { display: table-row; } .chp_table { display: flex; width: 100%; vertical-align: middle; text-align: center; } .chp_cell { display: block; vertical-align: middle; width: 68%; } .input_container { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0 !important; margin-bottom: 10px; } .input_legend { margin-bottom: 5px; font-size: 0.9rem; color: #777; text-align: center; } .input_field { width: 100%; border: 1px solid #fff; font-size: 16px; padding: 10px 15px; border-radius: 10px; } .input_number { position: relative; display: inline-block; width: 100%; } .input_select { width: 100%; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAAJFBMVEUAAADd3d3i4uJ1dXUsLCxYWFixsbERERESEhLOzs7T09MBAQGetEwYAAAAC3RSTlMAGBOH1aZI8vApIj9iK/4AAAAxSURBVAjXYyAKCAkJCSqBGNa7d+/eDGKwAhkBYDnv3Vsgipbv7oQw2HYnQPUZMxAJABtHCwji0UX6AAAAAElFTkSuQmCC); background-position-x: 97%; background-position-y: 50%; background-repeat: no-repeat; padding: 10px 15px; height: 40px; positio: relative; background-color: #fff; } .input_number input { width: 100%; padding-right: 65px; box-sizing: border-box; text-align: right; } .input_number .unit { position: absolute; right: 20px; top: 0; height: 100%; display: flex; align-items: center; color: #666; pointer-events: none; } .valid_ligne1 { margin: 0; font-weight: bold; } .valid_ligne2 { margin: 0 0 20px 0; } .img_cadre_rond { border-radius: 50%; display: inline-block; width: 110px; height: 110px; margin: 0 4px 0 0; } .img_input_file { display: inline-block; width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; } .img_show_cadre { position: relative; } .input-img__input-file_container { display: inline-block; width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; } .img_show_cadre { position: relative; width: 175px !important; height: 120px !important; vertical-align: middle; margin: 0; border: 1px solid #ddd; } .img_photo { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid #bbb; } .img_cadre_carre { border: 1px solid #999; display: inline-block; width: 110px; height: 110px; margin: 0 3px; } .img_cadre_rond { border-radius: 50%; display: inline-block; width: 110px; height: 110px; margin: 0 3px; } .img_cadre_none { display: inline-block; width: 110px; height: 110px; margin: 0 3px; } .img_show_carre_arrondi { border-radius: 10%; } .img_show_style { border-radius: 50%; border-top-left-radius: 100%; border-bottom-right-radius: 100%; } .is-dragging { opacity: 0.9; } .drag-placeholder { border: 1px dashed #ccc; background: rgba(0,0,0,0.05); margin: 5px 0; } [data-draggable-container] { touch-action:none; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } [data-drag-handle]{ touch-action:none; } [data-draggable-item] { position: relative; } .img_btn_ordre { border: unset; position : absolute; display: flex; justify-content: center; top: 8px; left: 8px; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 50%; color: #fff; font-weight: 900; width: 25px; height: 25px; box-shadow: 0px 0px 2px 2px rgb(125 125 125 / 50%); } .img_btn_drag { border: unset; position : absolute; display: block; bottom: 8px; left: 8px; background-color: #fff; padding: 5px; border-radius: 50%; color: #ea9d0c; width: 25px; height: 25px; box-shadow: 0px 0px 2px 2px rgb(125 125 125 / 50%); cursor: move; } .img_btn_delete { border: unset; position : absolute; display: block; bottom: 8px; right: 8px; background-color: #fff; padding: 5px; border-radius: 50%; color: #ea9d0c !important; width: 25px; height: 25px; box-shadow: 0px 0px 2px 2px rgb(125 125 125 / 50%); } .img_btn_number { border: unset; position : absolute; top: 5px; left: 8px; background-color: white; padding: 0; border-radius: 12px; width: 25px; height: 25px; text-align: center; box-shadow: 0px 0px 2px 2px rgb(125 125 125 / 50%); } .img_btn_move { border: unset; position : absolute; display: none; bottom: 8px; left: 8px; background-color: rgba(254, 254, 0254, 0.8); padding: 3px; border-radius: 12px; width: 25px; height: 25px; box-shadow: 0px 0px 2px 2px rgb(125 125 125 / 50%); } .img_btn_move:hover { background-color: white; } .img_name_file { background: rgba(255, 255, 255, .7); position: absolute; bottom: -5px; left: 0px; width: 100%; line-height: 8px; color: #555; padding: 3px 0; font-size: 0.45rem; } .chp_cadre_img { display: block; width: 100%; text-align: center; margin-bottom: 10px; } .img_file_cadre { display: inline-block; position: relative; vertical-align: bottom; border-left: 1px solid #ccc; border-top: 1px solid #ccc; color: #fff; text-align: center; cursor: pointer; position: relative; transition: all 0.2s; } .image_modif { display: none; position: absolute; right: 0; bottom: 0; z-index: 2; } .image_modif_image { display: flex; color: #555; height: 100%; width: 100%; position: absolute; font-size: 0.8rem; } .image_modif_image_txt { display: grid; justify-items: center; align-items: center; width: 100%; line-height: 2rem; font-size: 1.3rem; font-weight: 600; color: #fff; text-shadow: 0.1em 0.1em #333; background-color: rgb(0 0 0 / 20%); } .img_file_cadre:hover .image_modif, .img_file_cadre:hover .image_modif_image { display: none; } .image_modif_btn { text-align: center; box-shadow: 1px 1px 3px #999; color: #f2ac29; border: 0; background-color: #fff; width: 25px; height: 25px; margin-left: 5px; cursor: pointer; border-radius: 50%; } .img_file_cadre-size { width: 100px; height: 100px; } .tabs-buttons-div { border: 0; border-bottom: #bbb solid 1px; padding-left: 5px; width: 100%; } .tab_btn_on { border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 5px 10px; background: #ea9d0c; color: #fff; border: #bbb solid 1px; border-bottom: none; cursor: pointer; font-size: 0.9rem; } .tab_btn_off { border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 5px 10px; border: #999 solid 1px; border-bottom: none; opacity: 0.5; } .tab_container_on { display: block; } .tab_container_off { display: none; } .tabs-contents-div { width: 100%; } input[type="checkbox"].btn_ouinon { display: none; } input[type="checkbox"].btn_ouinon + label { box-sizing: border-box; display: inline-block; width: 3rem; height: 1.5rem; border-radius: 1.5rem; padding:2px; background-color: #c0ceda; transition: all 0.5s; cursor: pointer; } input[type="checkbox"].btn_ouinon + label::before { box-sizing: border-box; display: block; content: ""; height: calc(1.5rem - 4px); width: calc(1.5rem - 4px); border-radius: 50%; background-color: #fff; transition: all 0.2s; } input[type="checkbox"].btn_ouinon:checked + label { background-color: #17A0BF; } input[type="checkbox"].btn_ouinon:checked + label::before { margin-left: 1.5rem; } input[type="radio"].radio_new { display: none; } input[type="radio"].radio_new + label { background-color: #fff; width: 100px; text-align: center; user-select : none; cursor: pointer; line-height: 40px; border-radius: 10px; transition: all 0.2s ease-in-out; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 5px; } input[type="radio"].radio_new:checked + label { background-color: #17A0BF; color: #fff; } input[type="radio"].radio_new:checked + label::before { } input[type="radio"].radio_new:not(:checked) + label::before { } input[type="checkbox"].checkbox_new { display: none; } input[type="checkbox"].checkbox_new + label { background-color: #fff; width: 100px; display: inline-block; text-align: left; padding-left: 10px; user-select: none; cursor: pointer; line-height: 40px; border: 1px solid #000; border-radius: 10px; transition: all 0.2s ease-in-out; margin-bottom: 5px; } input[type="checkbox"].checkbox_new:checked + label::before { content: "✓"; display: inline-block; margin-right: 5px; } input[type="checkbox"].checkbox_new:not(:checked) + label::before { content: ""; display: inline-block; margin-right: 15px; } input[type="checkbox"].checkbox_new:checked + label { background-color: #17A0BF; color: #fff; } .input_checkbox_container { display: flex; flex-wrap: wrap; gap: 5px; } .range_div { display: flex; align-items: center; } .range_value { text-align: center; flex: 17%; color: #aaa; } input[type="range"] { display: block; appearance: none; background-color: #17A0BF; width: 100%; height: 8px; border-radius: 4px; flex: 83%; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #17A0BF; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; cursor: pointer; transition: .3s ease-in-out; }​ input[type="range"]::-webkit-slider-thumb:hover { background-color: white; border: 2px solid #e74c3c; } input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.4); } .input_button { border: 1px solid #000; background:var(--brand); color: #fff; font-size: 16px; height: 50px; border-radius: 25px; width: 165px; cursor: pointer; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .input_button_icon { width: 25px; height: 25px; margin-right: 10px; color:white; display: inline-flex; } .bottom_bar { display: flex; width: 100%; align-items: center; justify-content: center; } #content { transition: transform 0.35s ease, opacity 0.35s ease; } .slide-out { transform: translateX(-30px); opacity: 0; } .slide-in { transform: translateX(30px); opacity: 0; } .slide-in-active { transform: translateX(0); opacity: 1; } .nav-btn:active { transform: scale(0.96); transition: transform 0.1s; } #loadingOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; z-index: 10; } #loadingOverlay::after { content: ""; width: 28px; height: 28px; border: 4px solid #ccc; border-top-color: #3498db; border-radius: 50%; animation: spin 0.8s linear infinite; } .hidden { display: none; } @keyframes spin { to { transform: rotate(360deg); } } .iti { width: 100%; } #ident__code_container { display: flex; justify-content: space-evenly; margin: 30px 0; width: 100% } .ident__code_digit { width: 45px; height: 50px; text-align: center; font-size: 2rem; border: 1px solid #ccc; border-radius: 4px; color: #777; } .app-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: all; } .app-overlay.hidden { display: none; } .spinner { display: inline-block; border: 6px solid #f3f3f3; border-top: 6px solid var(--brand); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { to { transform: rotate(360deg); } } *{ box-sizing: border-box; } html, body{ margin:0; padding:0; width:100%; height:100%; max-width:100%; overflow-x:hidden; background:#fff; font-family: Arial; } :root{ --brand:#f21d2f; --appbar-h:64px; --bottombar-h:64px; --touch:48px; --text:#000; --text-dim:rgba(0,0,0,.85); } h3 { margin: 0 0 10px; } p { margin: 0 0 5px; } .qc-appbar{ position:fixed; top:0; left:0; right:0; height:calc(var(--appbar-h) + env(safe-area-inset-top,0px)); padding-top:env(safe-area-inset-top,0px); background:var(--brand); z-index:1000; } .qc-logo{ position:absolute; left:50%; top:calc(env(safe-area-inset-top,0px) + var(--appbar-h)/2); transform:translate(-50%, calc(-50% + 10px)); height:90px; display:block; pointer-events:none; } .qc-menu-btn{ position:absolute; right:12px; top:calc(env(safe-area-inset-top,0px) + var(--appbar-h)/2); transform:translateY(-50%); width:var(--touch); height:var(--touch); background:none; border:0; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; } .qc-burger, .qc-burger::before, .qc-burger::after{ content:""; display:block; width:24px; height:2px; background:currentColor; border-radius:2px; position:relative; } .qc-burger::before{ position:absolute; top:-6px; } .qc-burger::after { position:absolute; top: 6px; } .qc-drawer{ position:fixed; top:0; bottom:0; right:0; width:300px; max-width:86vw; background:#fff; box-shadow:-24px 0 48px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .25s ease; z-index:1200; } .qc-drawer.open{ transform:translateX(0); } .qc-drawer-content{ display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px); } .qc-drawer-content a{ display:block; padding:12px 8px; color:#111; text-decoration:none; font-size:16px; border-radius:6px; } .qc-drawer-content a:hover{ background:#f5f5f5; } .qc-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s; z-index:1100; } .qc-backdrop.show{ opacity:1; pointer-events:auto; } .video-hero{ position: fixed; top: 55px; left: 0; width: 100vw; height: calc(100vh - 55px); overflow: hidden; z-index: 0; } .video-foreground{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .video-iframe{ position: absolute; top: 50%; left: 50%; width: 120vw; height: 120vh; transform: translate(-50%, -50%); transition: opacity 1s; } @media (prefers-reduced-motion: reduce){ .video-iframe{ opacity: 0; } } @media (max-width: 768px){ .video-iframe{ width: 140vw; height: 140vh; } } main.content{ z-index:1; margin:0; padding:0; padding-top:calc(var(--appbar-h) + env(safe-area-inset-top,0px)); padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom,0px)); width:100%; max-width:100%; min-width:0; overflow-x:clip; position: relative; z-index: 2; } .content-inner{ z-index:1; color:#000; display:flex; align-items:center; justify-content:flex-start; flex-direction:column; width:100%; max-width:100%; min-width:0; padding: 20px; overflow-x:clip; } .content-inner-blur { margin: 40px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: unset; } .content-inner img, .content-inner video, .content-inner iframe, .content-inner svg{ max-width:100%; height:auto; display:block; } .content-inner svg{ overflow:hidden; } .qc-bottombar{ position:fixed; left:0; right:0; bottom:0; height:calc(var(--bottombar-h) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); background:var(--brand); display: flex;flex-direction: row;justify-content: space-evenly; border-top:1px solid rgba(0,0,0,.08); z-index:1000; } .qc-bottombar .nav-item{ appearance:none; background:transparent; border:0; height:var(--bottombar-h); padding:6px 8px 8px; color:#fff; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:var(--touch); cursor:pointer; } .qc-bottombar .icon{ width:20px; height:20px; fill:currentColor; display:block; } .qc-bottombar .label{ font-size:11px; line-height:0; letter-spacing:.2px; user-select:none; } .qc-bottombar .nav-item[aria-current="page"], .qc-bottombar .nav-item.active{ color:var(--text); position:relative; } .qc-bottombar .nav-item[aria-current="page"]::before, .qc-bottombar .nav-item.active::before{ content:""; position:absolute; top:4px; width:18px; height:3px; border-radius:2px; background:#fff; opacity:.65; } .qc-bottombar .nav-item:active{ transform:translateY(1px); } .pac-container { z-index: 10000 !important; } .all__flex_container { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; width: 100%; } .all__flex-children_2col { width: calc((100% - 20px) / 2); display: flex; flex-direction: column; align-items: center; } .all__flex-children_3col { width: calc((100% - 40px) / 3); display: flex; flex-direction: column; align-items: center; } .all__flex-children_4col { width: calc((100% - 60px) / 4); display: flex; flex-direction: column; align-items: center; } h1 { text-align: center; margin: 0; } h2 { text-align: center; margin: 0; } h3 { text-align: center; margin: 0; } .all__flex-children_70 { width: 100%; } .spinner { border: 6px solid #f3f3f3; border-top: 6px solid var(--brand); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .container_groupe { border: 1px solid #bbb; width: 100%; padding: 10px 20px; border-radius: 20px; margin-bottom: 20px; } .fleche_direction_final { color: #f21d2f; height: 30px; width: 30px; position: absolute; align-items: center; bottom: -30px; right: calc(50% - 15px); } .contact_ahref { display: flex; flex-direction: row; color: white; justify-content: center; align-items: center; width: 100%; } .prix_table { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; gap: 5px; } .prix_tab_text { width: calc(70% - 5px); display: flex; flex-direction: column; align-items: start; } .prix_tab_numb { width: calc(30% - 5px); display: flex; flex-direction: column; align-items: end; } .progress-container { position: relative; width: 80%; margin: 0 auto; margin-bottom: 20px; } .progress-bar-bg { position: absolute; top: 13px; left: 0; right: 0; height: 6px; background: #e0e0e0; z-index: 1; border-radius: 3px; } .progress-steps { display: flex; justify-content: space-between; position: relative; z-index: 2; } .step { display: flex; flex-direction: column; align-items: center; } .circle { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--brand); font-size: 18px; z-index: 2; } .label { margin-top: 8px; font-size: 13px; text-align: center; } .step.active .circle { background: var(--brand); color: #fff; } .icon_btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; width: 30px; cursor: pointer; font-size: 1rem; } .link { color: #ea9d0c; text-decoration: none; } .all__fields-links_container { display: flex; position: relative; height: 34px; align-items: center; } .all__fields-links_text { display: block; text-align: left; } .all__fields-links_links-container { display: block; position: absolute; top: 0; right: 0; padding-left: 15px; background: linear-gradient(to right, rgba(249, 249, 249, 0) 0%, #f9f9f9 10px, #f9f9f9 100%); transition: visibility 0.3s, opacity 0.3s linear; } .all__fields-links_container:hover .all__fields-links_links-container { opacity: 1; visibility: visible; transition: visibility 0.3s, opacity 0.3s linear; } @media (max-width:380px){ .qc-logo{ height:80px; } .qc-bottombar .label{ font-size:10px; } }