.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; } #gen_popup { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); z-index: 999999; } .gen-popup__window_show { display: flex !important; } .gen-popup__window_hide { display: none !important; } .gen-popup__cad { position: relative; background: #fff; border-radius: 20px; max-width: 90%; max-height: 90%; overflow: auto; } .gen-popups__window_btn { position: absolute; top: 10px; right: 10px; z-index: 10; } .share-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: flex-end; justify-content: center; z-index: 9999; } .share-overlay.active { display: flex; } .share-box { background: #f3f3e9; width: 100%; max-width: 500px; border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 20px 20px 30px; box-shadow: 0 -5px 20px rgba(0,0,0,0.2); animation: slideUp 0.25s ease; position: relative; } .share-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 10px; height: 140px; margin-top: 15px; } .share-buttons button { border: none; cursor: pointer; color: #000; font-size: 0.8rem; width: calc(((100% - 30px) / 5)); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; background-color: unset; } .share-close { position: absolute; right: 5px; top: -20px; width: 40px; height: 40px; background: none; border: none; font-size: 18px; cursor: pointer; background-color: #fff; border-radius: 50%; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .carousel { position: relative; width: 100%; margin: 0 auto; aspect-ratio: 3 / 2; overflow: hidden; font-family: sans-serif; border-radius: 10px; } .carousel img, .carousel video { width: 100%; height: 100%; object-fit: cover; display: none; border-radius: 0 !important; } .carousel img.active, .carousel video.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: u2019Robotou2019, 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_input_inv { box-sizing: border-box; border: none; background: none; color: #000; line-height: 35px; width: 100%; padding: 0 10px; } .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_visible { background-color: #f5f5f5; border: 1px solid #ccc; border-bottom: none; border-right: none; position: relative; line-height: 35px; border-radius: 10px; padding: 0 5px; } .div_visvisible_cb_2items { display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .input_invisible, .input_field { box-sizing: border-box; border: none; background: none; width: 100%; color: #555; font-size: 1rem; font-weight: 500; line-height: 1.1rem; padding: 10px 10px; margin: 0; } .input_number { position: relative; display: inline-block; width: 100%; } .input_select { width: 100%; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; background-image: url(https://ty-helles.com/svg/fleche-select.svg); background-size: 27px; background-position-x: 97%; background-position-y: 50%; background-repeat: no-repeat; padding: 10px 15px; 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; } .qty { display: inline-flex; align-items: center; border-radius: 8px; overflow: hidden; } .qty-btn { width: 30px; height: 40px; border: none; background: #f5f5f5; font-size: 18px; cursor: pointer; transition: background 0.2s; } .qty-btn:hover { background: #e0e0e0; } .qty-btn:disabled { opacity: 0.4; cursor: not-allowed; } .qty-input { width: 60px; height: 40px; border: none; text-align: center; font-size: 16px; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-input[type=number] { -moz-appearance: textfield; } .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: 160px !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: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; } [data-drag-handle]{ touch-action: none; } [data-draggable-item] { position: relative; touch-action: auto; } .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: 1.4rem; font-size: 1rem; 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.8rem; } .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; font-size: 0.8rem; } .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 #fff; background:var(--brand); color: #fff; font-size: 16px; height: 50px; border-radius: 25px; cursor: pointer; padding: 0 15px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .input_google_button { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 16px; height: 50px; border-radius: 25px; text-decoration: none; cursor: pointer; padding: 0 15px; margin: 0 auto; background-color: white; border: 1px solid grey; color: #555; } .input_button svg { width: 20px; height: 20px; margin-left: 5px; } .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; padding: 0; line-height: 50px; box-sizing: border-box; text-align: center; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 4px; color: #777; -webkit-appearance: none; appearance: none; } .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); } } :root{ --brand:#0f528c; --text:#111; --bg:#fff; --muted:#111; } *{box-sizing:border-box} html,body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; } .wrap{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px; } .card{ width:100%; max-width:640px; border:1px solid #e5e7eb; border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.06); background:#fff; } .brand{ display:flex; align-items:center; gap:12px; margin-bottom:8px; } .brand img{ width:100px; height:100px; border-radius: 50%; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); } .brand h1{ font-size:28px; margin:0; text-align: center; } .muted{ color:var(--muted); font-size:14px; margin:30px 0 16px; } .cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:16px 0 6px; } button.install{ appearance:none; border:0; cursor:pointer; background:var(--brand); color:#fff; padding:12px 16px; border-radius:10px; font-size:16px; font-weight:600; display:block; margin:10px auto 0px; } button.install[disabled], #btnInstall.is-disabled, #btnInstall[disabled]{ opacity:.55; cursor:not-allowed; filter:saturate(.6); } .pwa_link{ display:inline-block; padding:12px 16px; border-radius:10px; border:1px solid #e5e7eb; background:#fafafa; text-decoration:none; color:#111; } details{ background:#fafafa; border:1px solid #eee; border-radius:10px; padding:12px 14px; margin-top:10px; } details summary{ cursor:pointer; font-weight:600; } .note{ font-size:13px; color:var(--muted); margin-top:8px; } .note.warn-box{ display:block; padding:10px 12px; border-radius:10px; background:#fff7ed; border:1px solid #fdba74; color:#9a3412; } .ok{ display:inline-block; background:#10b981; color:#fff; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; } .warn{ display:inline-block; background:#f59e0b; color:#111; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; } .footer{ margin-top:18px; font-size:12px; color:#9ca3af; } .diag-list{ display:grid; gap:8px; margin-top:10px; } .diag-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid #eee; } .diag-item strong{ display:block; margin-bottom:2px; } .diag-item span{ flex:0 0 auto; font-weight:700; } .diag-ok{ color:#047857; } .diag-warn{ color:#b45309; } .diag-bad{ color:#b91c1c; } ul li, ol li{ text-align:left; } dialog{ width:min(640px, 92vw); border:none; border-radius:12px; padding:16px; } dialog::backdrop{ background:var(--brand); } .hidden{ display:none; } @media (display-mode: standalone){ #installedFlag{display:block;} }