/* ------------------------------------------------------------ */ /* BLOODY ME > GENERAL CSS */ /* ------------------------------------------------------------ */ :root { --beige:#F6F0E8; --dark:#252222; --orange:#FF6A3D; --orange-dark:#E2572C; --white: #fff; --grey: #b7b7b7; } /* ------------------------------------------------------------ */ /* CSS GÉNÉRIQUE */ /* ------------------------------------------------------------ */ body { display: flex; flex-direction: column; min-height: 100vh; background:var(--beige); font-family: "Lora", sans-serif; color:var(--dark); } main { flex: 1; padding: 30px 0; } h1, h2, h3, h4, h5, h6, p { margin:0; padding:0; } h1 { font-size: 3rem; font-weight: 700; } h2 { font-size: 1.5rem; font-weight: 500; } h3 { font-size: 2.5rem; font-weight: 500; } h4 { font-size: 2rem; font-weight: 500; } h5 { font-size: 1.8rem; font-weight: 400; } h6 { font-size: 1.5rem; font-weight: 400; } p { font-size: 1rem; font-weight: 400; } p.big { font-size: 2rem; font-weight: 400; } p.small { font-size: .8rem; font-weight: 400; } a { color:var(--orange); text-decoration:none; } a:hover { color:var(--orange-dark); } ul, ol { margin:0; } ul li, ol li { font-size: 1.15rem; } blockquote { border-left:4px solid var(--dark); padding-left:20px; margin:0; } label:hover { cursor: pointer; } /* Responsive */ @media(max-width:430px) { h1 { font-size: 2rem; } h2 { font-size: 1.25rem; } } /* ------------------------------------------------------------ */ /* BOUTONS */ /* ------------------------------------------------------------ */ .btn-theme { background:var(--beige); border:4px solid var(--dark); font-size: 1.25rem; font-weight: 500; border-radius: 20px; padding: 16px 40px 16px 40px; text-align: center; transition: all .3s; margin:0; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5); color:var(--dark); } .btn-theme:hover { cursor:pointer; background:var(--dark); color:var(--beige); } .btn-theme-dl { background:var(--beige); border:2px solid var(--dark); font-size: 1.25rem; font-weight: 500; border-radius: 7px; padding: 4px 10px; text-align: center; transition: all .3s; margin:0; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5); color:var(--dark); } .btn-theme-dl:hover { cursor:pointer; background:var(--dark); color:var(--beige); } /* ------------------------------------------------------------ */ /* OFFRES */ /* ------------------------------------------------------------ */ /* OFFRES > [STEPS] */ /* ------------------------------------------------------------ */ .prices-section .progress-steps { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 40px 0; padding: 0 20px; } .prices-section .progress-steps::before { content: ""; position: absolute; top: 40px; left: calc(50% / 4); right: calc(50% / 4); /* Divise par nombre d'items */ height: 3px; background-color: var(--dark); opacity: 1; z-index: 0; } .prices-section .step { text-align: center; position: relative; z-index: 1; flex: 1; } .prices-section .step-icon { width: 80px; height: 80px; border-radius: 50%; background-color: var(--white); border: 3px solid var(--dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 2rem; color: var(--dark); position: relative; z-index: 1; } .prices-section .step-label { font-size: 1.25rem; font-weight:500; color: var(--dark); } .prices-section .step.active .step-label { font-weight: 700; } /* ------------------------------------------------------------ */ /* OFFRES > [CARDS] */ /* ------------------------------------------------------------ */ .prices-section .pricing-cards { padding:80px 0 0; } .prices-section .pricing-cards .card { position: relative; display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; background: var(--white); border:2px solid var(--dark); overflow: hidden; } .prices-section .pricing-cards .card .price-title hr { height:2px; background: var(--dark); opacity:1; margin:0 auto; width:100%; } .prices-section .pricing-cards .card hr { height:2px; background: var(--dark); opacity:1; margin:0 auto; width:100%; } .prices-section .pricing-cards .card h2 { margin:0; padding:20px 0; font-weight:800; } .prices-section .pricing-cards .btn-price-duration-group { display: flex; justify-content: center; gap: 0; border-top:2px solid var(--dark); border-bottom:2px solid var(--dark); padding:20px 0; } .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration { color:var(--dark); background:var(--beige); border:1px solid var(--dark); font-size: 1rem; font-weight: 500; transition: all .3s; padding:7px 12px; margin:0; } .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration.active { background:var(--dark); color:var(--beige); } .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration:hover { background:var(--dark); color:var(--beige); } .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration:nth-child(2), .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration:nth-child(3), .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration:nth-child(4), .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration:nth-child(5) { border-left:none; } .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration:first-child { border-top-left-radius:10px; border-bottom-left-radius:10px; } .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration:last-child { border-top-right-radius:10px; border-bottom-right-radius:10px; } .prices-section .pricing-cards .price-subtitle { min-height:84px; display:flex; align-items:center; justify-content:center; border-top:2px solid var(--dark); border-bottom:2px solid var(--dark); } .prices-section .pricing-cards .price-subtitle h4 { font-size: 1.25rem; font-style: italic; margin:0 0 10px; padding:10px 0 0; } .prices-section .pricing-cards .price-display h4 { font-size: 1rem; font-style: italic; } .prices-section .pricing-cards .price-content { padding:20px; } .prices-section .pricing-cards .price-content h4 { font-size: 1.25rem; margin:0 0 10px; padding:0; } .prices-section .pricing-cards .price-content hr { margin:20px auto; } .prices-section .pricing-cards .price-content p { margin:0 0 5px; } .prices-section .pricing-cards .btn-price-select { background:var(--beige); border:4px solid var(--dark); font-size: 1.25rem; font-weight: 500; border-radius: 20px; padding: 16px 40px 16px 40px; text-align: center; transition: all .3s; margin:40px 0 0; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5); } .prices-section .pricing-cards .btn-price-select:hover { cursor:pointer; background:var(--dark); color:var(--beige); } .prices-section .pricing-cards .card.highlighted { transform: scale(1.15); z-index: 1; border-width: 3px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.3); } .prices-section .pricing-cards .card.highlighted hr { height:3px; } .prices-section .pricing-cards .card.highlighted .price-subtitle { background:var(--dark); color:var(--beige); } .prices-section .pricing-cards .badge-populaire { position: absolute; top: 50px; right: 10px; width: 175px; background-color: var(--orange); color: var(--white); text-align: center; padding: 6px 0; font-weight: bold; font-size: 0.85rem; transform: rotate(45deg) translate(35%, -35%); transform-origin: top right; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); pointer-events: none; letter-spacing: 0.085em; } /* ------------------------------------------------------------ */ /* OFFRES > [RESPONSIVE] */ /* ------------------------------------------------------------ */ @media(max-width:1281px) { .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration { font-size: .85rem; } .prices-section .pricing-cards .btn-price-select { font-size: 1rem; } } @media(max-width:1024px) { .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration { font-size: .65rem; } .prices-section .pricing-cards .btn-price-select { font-size: 1.25rem; line-height: 1.15em; } } @media (max-width: 834px) { .prices-section .progress-steps { flex-direction: column; align-items: stretch; margin:0 0 20px; padding:0; } .prices-section .progress-steps::before { display: none; } .prices-section .step { margin-bottom: 20px; } .prices-section .step:not(.active) { display:none; } .prices-section .pricing-cards { padding-top: 0; } .prices-section .pricing-cards .card.highlighted { transform: none; } .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration { font-size: 1rem; } } @media (max-width: 430px) { .prices-section .pricing-cards .btn-price-duration-group .btn-price-duration { font-size: .85rem; } } /* ------------------------------------------------------------ */ /* CUSTOM RANGE */ /* ------------------------------------------------------------ */ .custom-range-section { display: flex; flex-direction: column; align-items: center; max-width:1000px; margin:0 auto; } .custom-range-section .slider-container { width: 100%; position: relative; margin-bottom: 4rem; height: 200px; } .custom-range-section .slider-line { height: 4px; position: absolute; bottom: 60px; width: 100%; z-index: 1; background: var(--dark); } .custom-range-section .slider-dot { position: absolute; top: -6px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); z-index: 2; background-color: var(--dark); } .custom-range-section .slider-labels { position: absolute; bottom: 90px; width: 100%; pointer-events: none; z-index: 3; } .custom-range-section .slider-labels span { position: absolute; transform: translateX(-50%); font-size: 0.8rem; color: #000; } .custom-range-section .slider-labels span:last-child { transform: translateX(-50%); width:60px; } .custom-range-section .slider-tooltip { background: var(--dark); position: absolute; bottom: 130px; transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; white-space: nowrap; pointer-events: none; transition: left 0.1s ease, background-color 0.3s ease; color: white; z-index: 4; } .custom-range-section .slider-arrow { position: absolute; bottom: 90px; transform: translateX(-50%); cursor: pointer; user-select: none; transition: left 0.1s ease; z-index: 5; } .custom-range-section .arrow-svg { width: 40px; height: 40px; display: block; transition: fill 0.3s ease; fill: var(--dark); } .custom-range-section input[type="range"] { -webkit-appearance: none; background: transparent; width: 100%; position: absolute; bottom: 60px; height: 20px; pointer-events: none; z-index: 10; } .custom-range-section input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; } .custom-range-section input[type="range"]::-moz-range-thumb { width: 0; height: 0; border: none; background: transparent; } .custom-range-section .character-group { position: absolute; bottom: -80px; left: 0; width: 100%; height: 100px; pointer-events: none; } .custom-range-section .character { position: absolute; transform: translateX(-50%); width: 18vw; max-width: 100px; object-fit: contain; transition: transform 0.2s ease; } .custom-range-section #kcal-display { min-width:200px; text-align: center; } .custom-range-section #kcal-display-mobile { display:none; min-width:200px; text-align: center; } .custom-range-section .kcal-daily-text { background: var(--dark); color:var(--beige); font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; border-radius: 1.25rem; transition: background-color 0.3s ease, color 0.3s ease; } .custom-range-section .labels { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-top: 4rem; width: 100%; gap: 2rem; } .custom-range-section .labels div:nth-child(3) { text-align: right; } @media (max-width: 1080px) { .custom-range-section .slider-labels span:last-child { margin-left:35px; } } @media (max-width: 600px) { .custom-range-section .arrow-svg { width: 28px; height: 28px; } .custom-range-section .character { width: 16vw; } .custom-range-section .slider-labels span:last-child { margin-left:30px; } .custom-range-section #kcal-display-mobile { display:block; margin-top:2rem; } .custom-range-section .labels { flex-direction: row; gap: 1rem; text-align: left; margin-top:2rem; } .custom-range-section .labels div:nth-child(2) { display:none; } .custom-range-section .labels div { width: 50%; } } /* ------------------------------------------------------------ */ /* MASSE CORPORELLE */ /* ------------------------------------------------------------ */ .masse-corporelle-section { display: flex; flex-direction: column; align-items: center; max-width:1000px; margin:0 auto; } .masse-corporelle-section .masse-corporelles { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: nowrap; gap: 1rem; width: 100%; margin-top:5rem; } .masse-corporelle-section .masse-corporelle { flex: 1; max-width: 100px; transition: transform 0.3s ease, filter 0.3s ease; } .masse-corporelle-section .masse-corporelle img { width: 100%; height: auto; display: block; } .masse-corporelle-section .masse-corporelle.active { transform: scale(1.3); z-index: 2; filter: drop-shadow(0 0 6px rgba(0,0,0,0.3)); } .masse-corporelle-section .masse-corporelles-content { margin-top:2rem } @media (max-width: 600px) { .masse-corporelle-section .masse-corporelles { gap: 0.5rem; } .masse-corporelle-section .masse-corporelle { max-width: 60px; } } /* ------------------------------------------------------------ */ /* FORMULAIRE */ /* ------------------------------------------------------------ */ .form-section { display: flex; flex-direction: column; align-items: center; max-width:1000px; margin:0 auto; } .form-section .questionnaire { border:1px solid var(--dark); border-radius:25px; width:100%; padding:50px; margin:2rem 0; } .form-section .form-check-input { border-color: var(--dark); } .form-section .form-check-input:checked { background-color: var(--dark); border-color: var(--dark); } .form-section .form-check-input:focus { box-shadow: none; border-color: var(--dark); } .form-section .choice-box { display: flex; width: fit-content; margin:0 auto; border-radius: 30px; overflow: hidden; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.5); background-color: var(--white); } .form-section .choice-box button.choice { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 0 1 auto; background-color: var(--white); color: var(--dark); font-size: 1.25rem; padding: 0.5rem 2rem; border: none; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; } .form-section .choice-box button.choice:first-child { border-top:3px solid var(--dark); border-bottom:3px solid var(--dark); border-left:3px solid var(--dark); border-top-left-radius: 30px; border-bottom-left-radius: 30px; } .form-section .choice-box button.choice:last-child { border-top:3px solid var(--dark); border-bottom:3px solid var(--dark); border-right:3px solid var(--dark); border-top-right-radius: 30px; border-bottom-right-radius: 30px; } .form-section .choice-box button.choice:hover:not(.active) { background-color: var(--beige); } .form-section .choice-box button.choice.active { background-color: var(--dark); color: var(--beige); } /* Prev / Next */ .form-section button.btn-next-prev { font-size: 2.5rem; padding: 8px 20px; text-align: center; transition: all .3s; margin:0; transform:scale(1); } .form-section button.btn-next-prev:hover { cursor:pointer; transform:scale(1.25); } @media (max-width: 600px) { .form-section .questionnaire { padding:25px; } .form-section .choice-box button.choice { gap: 0.5rem; font-size: 1.25rem; padding: 0.5rem 1rem; } .form-section button.btn-next-prev { padding: 4px 15px; } } /* ------------------------------------------------------------ */ /* ESPACE CLIENT */ /* ------------------------------------------------------------ */ .bloc-title hr { margin:10px 0 30px; background:var(--dark) !important; height:2px; border:none !important; opacity:1; } /* ------------------------------------------------------------ */ /* HEADER */ /* ------------------------------------------------------------ */ #espace-client header { background:var(--dark); color:var(--beige); padding:20px 0; } #espace-client .btn-disconnect { float:right; background:var(--beige); color:var(--dark); font-size: 1rem; font-weight: 500; border-radius: 20px; padding: 10px 20px; text-align: center; transition: all .3s; margin:0; } #espace-client .btn-disconnect:hover { cursor:pointer; background:var(--beige); color:var(--orange); } @media(max-width:991px) { #espace-client .btn-disconnect { font-size:.8rem; } } @media(max-width:430px) { #espace-client header a { margin:0 auto; } #espace-client header h1 { width:100%; text-align:center; margin:0 auto 20px; } #espace-client .btn-disconnect { margin:0 auto; } } /* ------------------------------------------------------------ */ /* FOOTER */ /* ------------------------------------------------------------ */ #espace-client footer { background:var(--dark); color:var(--beige); padding:20px 0; } #espace-client footer .footer-nav { margin:0; } #espace-client footer .footer-nav ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } #espace-client footer .footer-nav ul li { float:left; margin:0 15px; } #espace-client footer .footer-nav ul li a { color:var(--beige); font-weight:800; transition: all .3s; } #espace-client footer .footer-nav ul li a:hover { color:var(--orange); } #espace-client footer .copyright p { font-size:.8rem; } #espace-client footer .copyright p br { display:none; } #espace-client footer .copyright p a { color:var(--orange); } #espace-client footer .footer-socials { padding-top:20px; } #espace-client footer .footer-socials ul { list-style-type:none; } #espace-client footer .footer-socials ul li { float:left; margin:0 10px; } #espace-client footer .footer-socials ul li a { transition: all .3s; } #espace-client footer .footer-socials ul li a:hover { opacity:.7; } @media(max-width:1199px) { #espace-client footer .footer-logo { text-align: center !important; margin:0 auto 20px; } #espace-client footer .footer-socials ul { display: inline-block; margin-left:-30px; } } @media(max-width:991px) { #espace-client footer .footer-logo a { display: inline-block; } #espace-client footer .footer-nav { order:3; } #espace-client footer .footer-nav div { margin:20px auto 0; } #espace-client footer .footer-socials { order:2; } } @media(max-width:768px) { #espace-client footer .footer-nav ul { padding:0; } #espace-client footer .footer-nav ul li { display:block; width:100%; text-align:center; margin:0; } } @media(max-width:430px) { #espace-client footer .copyright p { text-align:center; } #espace-client footer .copyright p span { display:none; } #espace-client footer .copyright p br { display:block; } } /* ------------------------------------------------------------ */ /* PAGINATION */ /* ------------------------------------------------------------ */ .pagination .page-link { color: var(--dark); background-color: var(--white); border: 2px solid var(--dark); padding: 6px 14px; font-weight: 500; margin:0 10px 0 0; } .pagination .page-item.active .page-link { background-color: var(--dark); color: var(--beige); border-color: var(--dark); } .pagination .page-item.disabled .page-link { background-color: #eee; color: #999; pointer-events: none; cursor: not-allowed; } .pagination .page-item .page-link:hover { background-color: var(--dark); color: var(--beige); border-color: var(--dark); } @media(max-width:430px) { .pagination .page-item:nth-child(3), .pagination .page-item:nth-child(4) { display:none; } } /* ------------------------------------------------------------ */ /* ALERTES */ /* ------------------------------------------------------------ */ .alert-warning { background-color: var(--beige); color: var(--dark); border: 2px solid var(--dark); border-left: 5px solid var(--dark); border-radius: 12px; font-size: 1rem; padding: 1rem 1.25rem; line-height: 1.4; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25); } .alert-warning a { font-weight: 600; color: var(--dark); text-decoration: underline; } .alert-warning.fade-in { animation: fadeInSlide 0.4s ease forwards; opacity: 0; transform: translateY(10px); } @keyframes fadeInSlide { to { opacity: 1; transform: translateY(0); } } .alert-secondary { background-color: var(--white); color: var(--dark); border: 2px solid var(--dark); border-left: 5px solid var(--dark); border-radius: 12px; font-size: 1rem; padding: 1rem 1.25rem; line-height: 1.4; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25); } .alert-secondary a { font-weight: 600; color: var(--dark); text-decoration: underline; } .alert-secondary.fade-in { animation: fadeInSlide 0.4s ease forwards; opacity: 0; transform: translateY(10px); } @keyframes fadeInSlide { to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------ */ /* ONGLET 1ER NIVEAU */ /* ------------------------------------------------------------ */ #espace-client #mainTab.nav-tabs .nav-item { } #espace-client #mainTab.nav-tabs .nav-item .nav-link { color:var(--dark); background:var(--beige); border:none; font-weight:bold; padding:10px 20px; } #espace-client #mainTab.nav-tabs .nav-item .nav-link.active { background:var(--white); border:2px solid var(--dark); border-bottom:none; } #espace-client #mainTab.nav-tabs .nav-item .nav-link span { overflow:hidden; border-left:2px solid transparent; border-right:2px solid transparent; } #espace-client #mainTab.nav-tabs .nav-item .nav-link.active span { border:none; } #espace-client #mainTabContent.tab-content { border:2px solid var(--dark); border-radius: 0 10px 10px 10px; } #espace-client #mainTabContent .tab-pane .card { background:var(--white); border:none; } #espace-client .tab-content { margin-top:-2px; } /* ------------------------------------------------------------ */ /* ONGLET 2EME NIVEAU */ /* ------------------------------------------------------------ */ /* CONSOLE UTILISATEUR */ #espace-client #subTab.nav-tabs .nav-item { } #espace-client #subTab.nav-tabs .nav-item .nav-link { color:var(--dark); background:var(--white); border:none; font-weight:bold; padding:10px 20px; } #espace-client #subTab.nav-tabs .nav-item .nav-link.active { background:var(--beige); border:2px solid var(--dark); border-bottom:none; position: relative; z-index: 2; } #espace-client #subTab.nav-tabs .nav-item .nav-link img { border-left:2px solid transparent; } #espace-client #subTab.nav-tabs .nav-item .nav-link span { border-right:2px solid transparent; } #espace-client #subTab.nav-tabs .nav-item .nav-link.active img { border:none; transform: scale(1.1) } #espace-client #subTab.nav-tabs .nav-item .nav-link.active span { border:none; } #espace-client #subTabContent.tab-content { background:var(--beige); border:2px solid var(--dark); border-radius: 0 10px 10px 10px; margin-top:-2px; } #espace-client #subTabContent .tab-pane .card { background:var(--white); border:none; } #espace-client #subTabContent .inner-panel { padding:30px 30px 90px 30px; } #espace-client #subTabContent hr { margin:10px 0; background:var(--dark) !important; height:2px; border:none !important; opacity:1; } #espace-client #subTabContent .content { padding:20px 0; } /* MON PLAN */ #espace-client #subTab2.nav-tabs .nav-item { } #espace-client #subTab2.nav-tabs .nav-item .nav-link { color:var(--dark); background:var(--white); border:none; font-weight:bold; padding:10px 20px; } #espace-client #subTab2.nav-tabs .nav-item .nav-link.active { background:var(--beige); border:2px solid var(--dark); border-bottom:none; position: relative; z-index: 2; } #espace-client #subTab2.nav-tabs .nav-item .nav-link img { border-left:2px solid transparent; } #espace-client #subTab2.nav-tabs .nav-item .nav-link span { border-right:2px solid transparent; } #espace-client #subTab2.nav-tabs .nav-item .nav-link.active img { border:none; transform: scale(1.1) } #espace-client #subTab2.nav-tabs .nav-item .nav-link.active span { border:none; } #espace-client #subTabContent2.tab-content { background:var(--beige); border:2px solid var(--dark); border-radius: 0 10px 10px 10px; margin-top:-2px; } #espace-client #subTabContent2 .tab-pane .card { background:var(--white); border:none; } #espace-client #subTabContent2 .inner-panel { padding:30px 30px 90px 30px; } #espace-client #subTabContent2 hr { margin:10px 0; background:var(--dark) !important; height:2px; border:none !important; opacity:1; } #espace-client #subTabContent2 .content { padding:20px; } @media(max-width:991px) { #espace-client #subTab.nav-tabs .nav-item .nav-link span, #espace-client #subTab2.nav-tabs .nav-item .nav-link span { display:none; } #espace-client #subTab.nav-tabs .nav-item .nav-link img, #espace-client #subTab2.nav-tabs .nav-item .nav-link img { border-left:2px solid transparent; border-right:2px solid transparent; } } @media(max-width:430px) { #espace-client #mainTabContent .tab-pane .card { padding: 0.5rem !important; } #espace-client #subTab.nav-tabs .nav-item .nav-link, #espace-client #subTab2.nav-tabs .nav-item .nav-link { padding: 5px 10px; } #espace-client #subTabContent .inner-panel, #espace-client #subTabContent2 .inner-panel { padding:30px 20px; } #espace-client #subTabContent .content { padding: 20px 0; } } /* ------------------------------------------------------------ */ /* GESTION > MES ABONNEMENTS */ /* ------------------------------------------------------------ */ #espace-client .pricing-cards { padding-top:40px; } #espace-client .pricing-cards .card { position: relative; display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; background: var(--white); border:2px solid var(--dark); overflow: hidden; } #espace-client .section-abonnement .pricing-cards .card .price-title hr { height:2px; background: var(--dark); opacity:1; margin:0 auto; width:100%; } #espace-client .section-abonnement .pricing-cards .card hr { height:2px; background: var(--dark); opacity:1; margin:0 auto; width:100%; } #espace-client .section-abonnement .pricing-cards .card h2 { margin:0; padding:20px 0; font-weight:800; } #espace-client .section-abonnement .pricing-cards .btn-price-duration-group { display: flex; justify-content: center; gap: 0; border-top:2px solid var(--dark); border-bottom:2px solid var(--dark); padding:20px 0; } #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration { color:var(--dark); background:var(--beige); border:1px solid var(--dark); font-size: .85rem; font-weight: 500; transition: all .3s; padding:7px 12px; margin:0; } #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration.active { background:var(--dark); color:var(--beige); } #espace-client .section-abonnement .pricing-cards .card:not(.disabled) .btn-price-duration-group .btn-price-duration:hover { background:var(--dark); color:var(--beige); } #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration:nth-child(2), #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration:nth-child(3), #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration:nth-child(4), #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration:nth-child(5) { border-left:none; } #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration:first-child { border-top-left-radius:10px; border-bottom-left-radius:10px; } #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration:last-child { border-top-right-radius:10px; border-bottom-right-radius:10px; } #espace-client .section-abonnement .pricing-cards .price-subtitle { min-height:84px; display:flex; align-items:center; justify-content:center; border-top:2px solid var(--dark); border-bottom:2px solid var(--dark); } #espace-client .section-abonnement .pricing-cards .price-subtitle h4 { font-size: 1.25rem; font-style: italic; margin:0 0 10px; padding:10px 0 0; } #espace-client .section-abonnement .pricing-cards .price-display h4 { font-size: 1rem; font-style: italic; } #espace-client .section-abonnement .pricing-cards .price-content { padding:20px 0; } #espace-client .section-abonnement .pricing-cards .price-content h4 { font-size: 1.25rem; margin:0 0 10px; padding:0; } #espace-client .section-abonnement .pricing-cards .price-content hr { margin:20px auto; } #espace-client .section-abonnement .pricing-cards .price-content p { margin:0 0 5px; } #espace-client .section-abonnement .pricing-cards .btn-price-select { background:var(--beige); border:4px solid var(--dark); font-size: 1rem; font-weight: 500; border-radius: 20px; padding: 16px 40px 16px 40px; text-align: center; transition: all .3s; margin:40px 0 0; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5); } #espace-client .section-abonnement .pricing-cards .btn-price-select.btn-little { font-size: .65rem; padding: 5px 15px 5px 15px; border:2px solid var(--dark); margin:20px 0 0; border-radius: 10px; } #espace-client .section-abonnement .pricing-cards .card:not(.disabled) .btn-price-select:hover { cursor:pointer; background:var(--dark); color:var(--beige); } #espace-client .section-abonnement .pricing-cards .card.highlighted { transform: scale(1.15); z-index: 1; border-width: 3px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.3); } #espace-client .section-abonnement .pricing-cards .card.highlighted hr { height:3px; } #espace-client .section-abonnement .pricing-cards .card.highlighted .price-subtitle { background:var(--dark); color:var(--beige); } #espace-client .section-abonnement .badge-populaire { position: absolute; top: 50px; right: 10px; width: 175px; background-color: var(--orange); color: var(--white); text-align: center; padding: 6px 0; font-weight: bold; font-size: 0.85rem; transform: rotate(45deg) translate(35%, -35%); transform-origin: top right; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); pointer-events: none; letter-spacing: 0.085em; } #espace-client .section-abonnement .pricing-cards .card.disabled { position: relative; opacity: 0.5; cursor: not-allowed; } #espace-client .section-abonnement .pricing-cards .card.disabled::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 10px, transparent 10px, transparent 20px); border-radius: inherit; } #espace-client .section-abonnement .pricing-cards .card.disabled .price-display-btn { height:100px; } #espace-client .section-abonnement .pricing-cards .card.disabled + .price-btn-wrapper { position:relative; top:-130px; display:flex; justify-content: center; padding:0 20px; } #espace-client .section-abonnement .pricing-cards .card.disabled + .price-btn-wrapper .btn-price-select:hover { cursor:pointer; background:var(--dark); color:var(--beige); } #espace-client .section-abonnement .pricing-cards .card.disabled .price-title { margin-bottom:-40px; } #espace-client .section-abonnement .pricing-cards .card.highlighted.col-offre-2 .price-title, #espace-client .section-abonnement .pricing-cards .card.highlighted.col-offre-3 .price-title { margin-bottom:-20px; } #espace-client .section-abonnement .abonnement-active { background:var(--dark); color:var(--beige); padding:20px; margin:30px 0 0; } #espace-client .section-abonnement .abonnement-not-active { display:flex; flex-direction: column; align-items:center; gap:30px; margin:0 0 150px; } #espace-client .section-abonnement .abonnement-not-active h3 { font-size: 1.8rem; text-align:center; } @media(max-width:1281px) { #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration { font-size: .7rem; padding:7px 12px; } #espace-client .section-abonnement .pricing-cards .btn-price-select { font-size: .85rem; } } @media(max-width:1024px) { #espace-client .section-abonnement .pricing-cards .card.highlighted { transform: none; } #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration { font-size: 1rem; } #espace-client .section-abonnement .pricing-cards .btn-price-select { font-size: 1.25rem; } #espace-client .section-abonnement .pricing-cards .card.disabled.col-offre-2 .price-title { margin-bottom:-30px; } #espace-client .section-abonnement .pricing-cards .card.disabled.col-offre-1 .price-title { margin-bottom:-30px; } #espace-client .section-abonnement .pricing-cards .card.highlighted.col-offre-2 .price-title { margin-bottom:0; } } @media(max-width:430px) { #espace-client .section-abonnement .pricing-cards .btn-price-duration-group .btn-price-duration { font-size: .7rem; } #espace-client .section-abonnement .pricing-cards .btn-price-select { font-size: .85rem; padding: 10px 20px 10px 20px; } #espace-client .section-abonnement .abonnement-not-active h3 { font-size: 1.5rem; } #espace-client .section-abonnement .abonnement-not-active a { font-size: 1rem; } } /* ------------------------------------------------------------ */ /* GESTION > MES PAIEMENTS */ /* ------------------------------------------------------------ */ #espace-client .section-paiements .paiement-not-active { display:flex; flex-direction: column; align-items:center; gap:30px; margin:30px 0 30px; } #espace-client .section-paiements .paiement-not-active h3 { font-size: 1.8rem; text-align:center; } #espace-client .section-paiements .paiement-update { position:relative; top:-85px; display:flex; align-items: end; justify-content: end; margin:0 0 20px; } #espace-client .section-paiements .paiement-update a.btn-theme { font-size:1rem; padding: 8px 20px 8px 20px; border-radius: 10px; } #espace-client .section-paiements .paiement-code-promo { margin:-70px 0 40px; padding:0 20px; } #espace-client .section-paiements .paiement-historique-transactions { padding:0 20px; } #espace-client .section-paiements h3 { font-size: 1.25rem; margin:0 0 10px 10px; } #espace-client .section-paiements table { width:100%; margin:0; padding:0; border-radius: 20px; } #espace-client .section-paiements table thead th { padding: 12px 0 12px 20px; background:var(--dark); color:var(--beige); text-align:left; } #espace-client .section-paiements table thead th:first-child { border-top-left-radius: 10px; } #espace-client .section-paiements table thead th:last-child { border-top-right-radius: 10px; } #espace-client .section-paiements table tbody { } #espace-client .section-paiements table tbody tr.odd { background: var(--white); } #espace-client .section-paiements table tbody td { font-size: 1.1rem; font-weight: 400; text-align:left; padding: 6px 0 6px 20px; } #espace-client .section-paiements .table-responsive-custom { width: 100%; border-collapse: collapse; } #espace-client .section-paiements .table-responsive-custom thead { display: table-header-group; } #espace-client .section-paiements .table-responsive-custom td, #espace-client .section-paiements .table-responsive-custom th { padding: 10px; text-align: left; } @media(max-width:1024px) { #espace-client .section-paiements .paiement-update { position:initial; display:flex; align-items: start; justify-content: center; } #espace-client .section-paiements .paiement-code-promo { margin-top:30px; } } @media(max-width:768px) { #espace-client .section-paiements .paiement-update { position:initial; } #espace-client .section-paiements .paiement-update a.btn-theme { font-size: 1rem; } #espace-client .section-paiements .paiement-code-promo { margin-top:30px; padding: 0; } #espace-client .section-paiements .paiement-historique-transactions { padding: 0; } #espace-client .section-paiements .table-responsive-custom thead { display: none; } #espace-client .section-paiements .table-responsive-custom tr { display: block; margin-bottom: 20px; border: 2px solid var(--dark); border-radius: 10px; overflow: hidden; background: transparent !important; } #espace-client .section-paiements .table-responsive-custom td { display: grid; grid-template-columns: 40% 60%; align-items: stretch; padding: 0; font-size: .9em; text-align: left !important; background: none; } #espace-client .section-paiements .table-responsive-custom td:nth-child(odd) { background: linear-gradient(to right, var(--dark) 0 40%, var(--beige) 40% 100%); } #espace-client .section-paiements .table-responsive-custom td:nth-child(even) { background: linear-gradient(to right, var(--dark) 0 40%, var(--white) 40% 100%); } #espace-client .section-paiements .table-responsive-custom td + td { border-top: 1px solid var(--white); } #espace-client .section-paiements .table-responsive-custom td::before { content: attr(data-label); color: var(--beige); font-weight: 600; padding: 10px 12px; } #espace-client .section-paiements .table-responsive-custom td span { padding: 10px 12px; text-align: left; line-height: 1.3; word-break: break-word; background: transparent !important; } #espace-client .section-paiements .table-responsive-custom td:last-child { border-bottom: none; } #espace-client .section-paiements .btn-theme-dl { width: 40% !important; margin: 12px; float:left; } } /* ------------------------------------------------------------ */ /* GESTION > MES DONNÉES */ /* ------------------------------------------------------------ */ #espace-client .section-donnees .donnees-reset-password { position:relative; top:-85px; display:flex; align-items: end; justify-content: end; margin:0 0 20px; } #espace-client .section-donnees .donnees-reset-password a.btn-theme { font-size:1rem; padding: 8px 20px 8px 20px; border-radius: 10px; } #espace-client .section-donnees .questionnaire { margin:-70px 0 40px; width: 100%; padding: 20px; } #espace-client .section-donnees .questionnaire h5 { font-size: 1.25rem; color: var(--dark); } #espace-client .section-donnees .form-label { font-weight: 600; color: var(--dark); } #espace-client .section-donnees .form-control { background-color: var(--white); border-color: var(--dark); border-width: 2px; border-radius: 10px 10px 10px 10px; padding: 4px 12px; min-height: 33px; font-size: 1.25rem; margin:0 0 10px; } #espace-client .section-donnees .form-select { background-color: var(--white); border-color: var(--dark); border-width: 2px; border-radius: 10px 10px 10px 10px; padding: 4px 12px; min-height: 33px; font-size: 1.25rem; margin:0 0 10px; } #espace-client .section-donnees .form-control:disabled, #espace-client .section-donnees .form-select:disabled { background-color: #f8f8f8; color: #666; opacity: 1; cursor: not-allowed; } #espace-client .section-donnees .section-donnees-block-btn hr { margin:0 0 30px 0 !important; } #espace-client .section-donnees .section-donnees-block-btn .section-donnees-btn > div:first-of-type { display:flex; justify-content: start; } #espace-client .section-donnees .section-donnees-block-btn .section-donnees-btn > div:first-of-type button { padding: 8px 20px; font-size: 1rem; line-height: 1.2; margin:0 5px 0 0; } #espace-client .section-donnees .section-donnees-block-btn .section-donnees-btn > div:last-of-type { display:flex; justify-content: end; } #espace-client .section-donnees .section-donnees-block-btn .section-donnees-btn .btn-little { font-size: .65rem; padding: 5px 15px 5px 15px; border:2px solid var(--dark); margin:20px 0 0; border-radius: 10px; } @media(max-width:1024px) { #espace-client .section-donnees .donnees-reset-password { position:initial; display:flex; align-items: start; justify-content: center; } #espace-client .section-donnees .questionnaire { margin-top:30px; } } @media(max-width:768px) { #espace-client .section-donnees .donnees-reset-password { position:initial; } #espace-client .section-donnees .questionnaire { margin-top:30px; } } @media(max-width:430px) { #espace-client .section-donnees .section-donnees-block-btn .section-donnees-btn > div:first-of-type { order:2 ;} #espace-client .section-donnees .section-donnees-block-btn .section-donnees-btn > div:first-of-type { justify-content: center; margin:20px 0 0 0; } } /* ------------------------------------------------------------ */ /* GESTION > MES NEWSLETTERS */ /* ------------------------------------------------------------ */ #espace-client .section-newsletters .newsletter-not-active { display:flex; flex-direction: column; align-items:center; gap:30px; margin:30px 0 30px; } #espace-client .section-newsletters .newsletter-not-active h3 { font-size: 1.8rem; text-align:center; } #espace-client .section-newsletters .newsletter-update { position:relative; top:-85px; display:flex; align-items: end; justify-content: end; margin:0 0 20px; } #espace-client .section-newsletters .newsletter-update a.btn-theme { font-size:1rem; padding: 8px 20px 8px 20px; border-radius: 10px; } #espace-client .section-newsletters .listing-newsletters { margin:-70px 0 40px; padding:0 20px; } #espace-client .section-newsletters h3 { font-size: 1.25rem; margin:0 0 10px 10px; } #espace-client .section-newsletters table { width:100%; margin:0; padding:0; border-radius: 20px; } #espace-client .section-newsletters table thead th { padding: 12px 0 12px 20px; background:var(--dark); color:var(--beige); text-align:left; } #espace-client .section-newsletters table thead th:first-child { border-top-left-radius: 10px; } #espace-client .section-newsletters table thead th:last-child { border-top-right-radius: 10px; } #espace-client .section-newsletters table tbody { } #espace-client .section-newsletters table tbody tr.odd { background: var(--white); } #espace-client .section-newsletters table tbody td { font-size: 1.1rem; font-weight: 400; text-align:left; padding: 6px 0 6px 20px; } #espace-client .section-newsletters .table-responsive-custom { width: 100%; border-collapse: collapse; } #espace-client .section-newsletters .table-responsive-custom thead { display: table-header-group; } #espace-client .section-newsletters .table-responsive-custom td, #espace-client .section-newsletters .table-responsive-custom th { padding: 10px; text-align: left; } @media(max-width:1024px) { #espace-client .section-newsletters .newsletter-update { position:initial; display:flex; align-items: start; justify-content: center; } #espace-client .section-newsletters .listing-newsletters { margin-top:30px; } } @media(max-width:768px) { #espace-client .section-newsletters .newsletter-update { position:initial; } #espace-client .section-newsletters .listing-newsletters { margin-top:30px; padding:0; } #espace-client .section-newsletters .table-responsive-custom thead { display: none; } #espace-client .section-newsletters .table-responsive-custom tr { display: block; margin-bottom: 20px; border: 2px solid var(--dark); border-radius: 10px; overflow: hidden; background: transparent !important; } #espace-client .section-newsletters .table-responsive-custom td { display: grid; grid-template-columns: 30% 70%; align-items: stretch; padding: 0; font-size: .95em; text-align: left; background: none; } #espace-client .section-newsletters .table-responsive-custom td:nth-child(odd) { background: linear-gradient(to right, var(--dark) 0 30%, var(--beige) 30% 100%); } #espace-client .section-newsletters .table-responsive-custom td:nth-child(even) { background: linear-gradient(to right, var(--dark) 0 30%, var(--white) 30% 100%); } #espace-client .section-newsletters .table-responsive-custom td + td { border-top: 1px solid #fff; } #espace-client .section-newsletters .table-responsive-custom td::before { content: attr(data-label); color: var(--beige); font-weight: 600; padding: 10px 12px; text-align: left !important; } #espace-client .section-newsletters .table-responsive-custom td span { padding: 10px 12px; line-height: 1.35; word-break: break-word; background: transparent !important; text-align: left; } #espace-client .section-newsletters .table-responsive-custom td[data-label="Voir"] a { justify-self: start; align-self: center; margin: 8px 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; background: transparent; } #espace-client .section-newsletters .table-responsive-custom td:last-child { border-bottom: none; } #espace-client .section-newsletters .table-responsive-custom td[data-label="Titre"] span { font-weight: 600; } #espace-client .section-newsletters .btn-theme-dl { width: auto; } } /* ------------------------------------------------------------ */ /* GESTION > MES PRÉFÉRENCES */ /* ------------------------------------------------------------ */ #espace-client .section-preferences .accordion-custom .accordion-item { border: 2px solid var(--dark); border-radius: 10px; overflow: hidden; margin-bottom: 15px; background: var(--white); } #espace-client .section-preferences .accordion-custom .accordion-button { background-color: var(--beige); color: var(--dark); font-weight: 600; padding: 16px 20px; font-size: 1.1rem; box-shadow: none; transition: background-color 0.3s ease; } #espace-client .section-preferences .accordion-custom .accordion-button:not(.collapsed) { background-color: var(--dark); color: var(--beige); } #espace-client .section-preferences .accordion-custom .accordion-button::after { background-image: none; content: '\f078'; font-family: 'Font Awesome 6 Free', serif; font-weight: 900; margin-left: auto; transition: transform 0.3s ease; } #espace-client .section-preferences .accordion-custom .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } #espace-client .section-preferences .accordion-custom .accordion-body { padding: 20px; background-color: var(--white); color: var(--dark); font-size: 1rem; } #espace-client .section-preferences .accordion-custom .accordion-button:hover { background-color: var(--dark); color: var(--beige); } /* FORM */ #espace-client .section-preferences .choice-box { display: flex; width: fit-content; margin:0; border-radius: 30px; overflow: hidden; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.5); background-color: var(--white); } #espace-client .section-preferences .choice-box button.choice { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 0 1 auto; background-color: var(--white); color: var(--dark); font-size: 1.25rem; padding: 0.5rem 2rem; border: none; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; } #espace-client .section-preferences .choice-box button.choice:first-child { border-top:3px solid var(--dark); border-bottom:3px solid var(--dark); border-left:3px solid var(--dark); border-top-left-radius: 30px; border-bottom-left-radius: 30px; } #espace-client .section-preferences .choice-box button.choice:last-child { border-top:3px solid var(--dark); border-bottom:3px solid var(--dark); border-right:3px solid var(--dark); border-top-right-radius: 30px; border-bottom-right-radius: 30px; } #espace-client .section-preferences .choice-box button.choice:hover:not(.active) { background-color: var(--beige); } #espace-client .section-preferences .choice-box button.choice:nth-child(1) {border-right:3px solid var(--dark); } #espace-client .section-preferences .choice-box button.choice.active { background-color: var(--orange); color: var(--beige); } #espace-client .section-preferences .choice-box-little { margin:5px 0 0; } #espace-client .section-preferences .choice-box-little button.choice { font-size: 1rem; padding: 0.3rem 1.5rem; } #espace-client .section-preferences .bloc-meme-repas { margin:5px 0 0; } #espace-client .section-preferences .form-label { font-weight: 600; color: var(--dark); } #espace-client .section-preferences .input-group .form-control { background-color: var(--white); border-color: var(--dark); border-width: 2px; border-radius: 10px 0 0 10px; padding: 4px 12px; min-height: 33px; font-size: 1.25rem; } #espace-client .section-preferences .input-group .input-group-text { background-color: var(--beige); border-color: var(--dark); border-width: 2px; border-left: none; border-radius: 0 10px 10px 0; font-size: 1.1rem; color: var(--dark); padding: 4px 12px; } #espace-client .section-preferences .btn-multi-choices button { width:100%; color:var(--dark); border: 2px solid var(--dark); background-color: var(--white); border-radius: 30px; padding: 8px 16px; min-height: 33px; font-size: 1rem; margin:0 0 10px; } #espace-client .section-preferences .btn-multi-choices button:hover:not(.active) { background-color: var(--beige); } #espace-client .section-preferences .btn-multi-choices button.active { background-color: var(--orange); color: var(--beige); border-color: var(--dark); } #espace-client .section-preferences hr { margin:20px 0 !important; } #espace-client .section-preferences .inputTaillePoids input { flex: 0 0 70px; min-width: 0; } #espace-client .section-preferences .inputTaillePoids input:nth-child(1) { border-radius:10px; } #espace-client .section-preferences .inputTaillePoids .input-virgule { margin:0 10px; font-weight:bold; padding:15px 0 0; } /* Custom Range > Réglette */ #espace-client .section-preferences .slider-container { width: 90%; position: relative; margin:0 auto 4rem; height: 170px; } #espace-client .section-preferences #slider-container { opacity: 0; transition: opacity 0.3s ease; } #espace-client .section-preferences #slider-container.ready { opacity: 1; } #espace-client .section-preferences .slider-line { height: 4px; position: absolute; bottom: 60px; width: 100%; z-index: 1; background: var(--dark); } #espace-client .section-preferences .slider-dot { position: absolute; top: -6px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); z-index: 2; background-color: var(--dark); } #espace-client .section-preferences .slider-labels { position: absolute; bottom: 90px; width: 100%; pointer-events: none; z-index: 3; } #espace-client .section-preferences .slider-labels span { position: absolute; transform: translateX(-50%); font-size: 0.8rem; color: #000; } #espace-client .section-preferences .slider-labels span:last-child { transform: translateX(-50%); width:60px; } #espace-client .section-preferences .slider-tooltip { background: var(--dark); position: absolute; bottom: 130px; transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; white-space: nowrap; pointer-events: none; transition: left 0.1s ease, background-color 0.3s ease; color: white; z-index: 4; } #espace-client .section-preferences .slider-arrow { position: absolute; bottom: 90px; transform: translateX(-50%); cursor: pointer; user-select: none; transition: left 0.1s ease; z-index: 5; } #espace-client .section-preferences .arrow-svg { width: 40px; height: 40px; display: block; transition: fill 0.3s ease; fill: var(--dark); } #espace-client .section-preferences input[type="range"] { -webkit-appearance: none; background: transparent; width: 100%; position: absolute; bottom: 60px; height: 20px; pointer-events: none; z-index: 10; } #espace-client .section-preferences input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; } #espace-client .section-preferences input[type="range"]::-moz-range-thumb { width: 0; height: 0; border: none; background: transparent; } #espace-client .section-preferences .character-group { position: absolute; bottom: -80px; left: 0; width: 100%; height: 100px; pointer-events: none; } #espace-client .section-preferences .character { position: absolute; transform: translateX(-50%); width: 18vw; max-width: 100px; object-fit: contain; transition: transform 0.2s ease; } #espace-client .section-preferences #kcal-display { min-width:200px; text-align: center; } #espace-client .section-preferences #kcal-display-mobile { display:none; min-width:200px; text-align: center; } #espace-client .section-preferences .kcal-daily-text { background: var(--dark); color:var(--beige); font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; border-radius: 1.25rem; transition: background-color 0.3s ease, color 0.3s ease; } #espace-client .section-preferences .labels { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-top: 8rem; width: 100%; gap: 2rem; } #espace-client .section-preferences .labels div:nth-child(3) { text-align: right; } #espace-client .section-preferences input[type="date"] { background-color: var(--white); border: 2px solid var(--dark); border-radius: 10px; padding: 4px 12px; min-height: 33px; font-size: 1.25rem; margin-bottom: 10px; color: var(--dark); } #espace-client .section-preferences small.text-muted { font-size: 1rem; } #espace-client .section-preferences .form-select { background-color: var(--white); border-color: var(--dark); border-width: 2px; border-radius: 10px 10px 10px 10px; padding: 4px 12px; min-height: 33px; font-size: 1.25rem; margin:0 0 10px; } #espace-client .section-preferences .choice-menu { display: flex; width: fit-content; margin:0; border-radius: 30px; overflow: hidden; background-color: var(--white); } #espace-client .section-preferences .choice-menu button.choice { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 0 1 auto; background-color: var(--white); color: var(--dark); font-size: 1.25rem; padding: 0.5rem 2rem; border: none; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; } #espace-client .section-preferences .choice-menu.multiple { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } #espace-client .section-preferences .choice-menu.multiple .choice { border: 3px solid var(--dark); border-radius: 30px; color: var(--dark); padding: 0.5rem 1.5rem; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; } #espace-client .section-preferences .choice-menu.multiple .choice.active { background-color: var(--dark); color: var(--beige); } #espace-client .section-preferences .choice-menu { box-shadow: none; } #espace-client .section-preferences .choice-menu button.choice:hover:not(.active) { background-color: var(--beige); } #espace-client .section-preferences .choice-menu button.choice.active { background-color: var(--dark); color: var(--beige); } #espace-client .section-preferences .diet-choice, #espace-client .section-preferences .diet-option { position: relative; display: inline-block; cursor: pointer; } #espace-client .section-preferences .diet-img { max-width: 80px; transition: filter 0.2s ease; } /* Tooltip style */ #espace-client .section-preferences .diet-choice::after, #espace-client .section-preferences .diet-option::after { content: attr(data-tooltip); position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background-color: var(--white); color: var(--beige); padding: 5px 10px; border-radius: 10px; font-size: 0.85rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 10; } #espace-client .section-preferences .diet-choice:hover::after, #espace-client .section-preferences .diet-option:hover::after { opacity: 1; } #espace-client .section-preferences .diet-choice, #espace-client .section-preferences .diet-option { display: inline-block; cursor: pointer; } #espace-client .section-preferences .diet-choice img, #espace-client .section-preferences .diet-option img { width: 50px; height: auto; cursor: pointer; transition: transform 0.3s ease; } #espace-client .section-preferences .diet-choice img:hover, #espace-client .section-preferences .diet-option img:hover { transform: scale(1.10); } #espace-client .section-preferences .btn-allergy { border: 2px solid var(--dark); background:var(--white); color:var(--dark); border-radius: 30px; padding: 4px 16px; min-height: 33px; font-size: 1rem; } #espace-client .section-preferences .btn-allergy:hover:not(.active) { background: var(--beige); } #espace-client .section-preferences .btn-allergy.active { background-color: var(--orange); color: var(--beige); border-color: var(--dark); } #espace-client .section-preferences .btn-allergy:focus { outline: none; box-shadow: none; } #espace-client .section-preferences .select2-container--default .select2-selection--multiple { background-color: var(--white); border: 2px solid var(--dark); border-radius: 10px; min-height: 40px; font-size: 1.25rem; padding: 0 4px 4px 4px; } #espace-client .section-preferences .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--orange); color: var(--beige); border: none; padding: 4px 16px; border-radius: 20px; margin-top: 5px; } #espace-client .section-preferences .select2-container--default .select2-selection--multiple .select2-selection__choice__display { padding-left: 20px; } #espace-client .section-preferences .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { height: 100%; font-size: 1.25em; color: var(--beige); padding: 0 6px 0 8px; border:1px solid transparent; border-right:1px solid var(--white); } #espace-client .section-preferences .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { height: 100%; background: var(--beige); border:2px solid var(--dark); border-radius:20px 0 0 20px; } #espace-client .section-preferences .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover span { color: var(--dark); } #espace-client .section-preferences .select2-container .select2-selection--multiple .select2-selection__clear { font-size: 1.25em; margin-top: 4px; } #espace-client .section-preferences .select2-container .select2-search--inline .select2-search__field { height: 30px; } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--dark) !important; color: var(--beige) !important; } /* Overflow-y */ .select2-container .select2-dropdown .select2-results > .select2-results__options { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(37, 34, 34, 1) rgba(246, 240, 232, 1); /* Firefox */ max-height:45vh; } .select2-container .select2-dropdown .select2-results > .select2-results__options::-webkit-scrollbar { width: 4px; } .select2-container .select2-dropdown .select2-results > .select2-results__options::-webkit-scrollbar-track { background: rgba(37, 34, 34, 1); /* fond sombre */ } .select2-container .select2-dropdown .select2-results > .select2-results__options::-webkit-scrollbar-thumb { background-color: rgba(246, 240, 232, 1); /* thumb clair, semi-transparent */ border-radius: 0; border: none; } .select2-container .select2-dropdown .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover { background-color: rgba(246, 240, 232, 1); } .select2-container--open .select2-dropdown--below { width: 1075px !important; margin: 0 0 0 10px; } #espace-client .section-preferences .btn-repas { border: 2px solid var(--dark); background:var(--white); color:var(--dark); border-radius: 30px; padding: 4px 16px; min-height: 33px; font-size: 1rem; } #espace-client .section-preferences .btn-repas:hover:not(.active) { background: var(--beige); } #espace-client .section-preferences .btn-repas.active { background-color: var(--orange); color: var(--beige); border-color: var(--dark); } #espace-client .section-preferences .btn-repas:focus { outline: none; box-shadow: none; } #espace-client .section-preferences .no-pr { padding-right:0;} #espace-client .section-preferences .label-repas { background: var(--beige); border: 2px solid var(--dark); border-radius: 30px; padding: 6px 16px; min-height: 33px; font-size: 1rem; font-weight: 500; text-align: center; color: var(--dark); margin:5px 0 0 0; display: inline-block; } #espace-client .section-preferences .preparation-box, #espace-client .section-preferences .type-box { position: relative; display: inline-block; cursor: pointer; } #espace-client .section-preferences .preparation-box img { max-width: 50px; transition: transform 0.3s ease; } #espace-client .section-preferences .preparation-box img:hover, #espace-client .section-preferences .type-box img:hover { transform: scale(1.15); } #espace-client .section-preferences .type-box img { max-width: 45px; transition: transform 0.3s ease; } #espace-client .section-preferences .bloc-btn-choix-menu { margin-top:-25px; } #espace-client .section-preferences .label-repas.active { background: var(--dark); border: 2px solid var(--dark); color: var(--beige); } #espace-client .section-preferences .choice-img.not-allowed, #espace-client .section-preferences .btn-repas.not-allowed { opacity: 0.3; cursor: not-allowed !important; pointer-events: auto; pointer-events: visiblePainted; user-select: none; } #espace-client .section-preferences #collapseWeekRepas .choice.not-allowed, #espace-client .section-preferences #collapseWeekendRepas .choice.not-allowed { opacity: 0.3; cursor: not-allowed !important; pointer-events: none; pointer-events: visiblePainted; user-select: none; } #espace-client .section-preferences #collapseWeekRepas .choice.not-allowed:hover, #espace-client .section-preferences #collapseWeekendRepas .choice.not-allowed:hover { opacity: 0.3; cursor: not-allowed !important; pointer-events: visiblePainted; user-select: none; } #espace-client .section-preferences #memeRepasAccordion .row { height:60px; } #espace-client .section-preferences #TimeTypeAccordion #collapseWeek .row:not(:first-child), #espace-client .section-preferences #TimeTypeAccordion #collapseWeekend .row:not(:first-child) { height:60px; } /* Responsive */ @media (max-width: 1400px) { #espace-client .section-preferences .btn-repas { padding: 4px 10px; font-size: 1rem; } #espace-client .section-preferences #collapseWeekRepas p.small {font-size: .7rem; } } @media (max-width: 1280px) { .select2-container--open .select2-dropdown--below { width: 890px !important; } } @media (max-width: 1200px) { #espace-client .section-preferences .block-same-meal { height:125px !important; overflow:hidden; } } @media (max-width: 1024px) { .select2-container .select2-dropdown .select2-results > .select2-results__options { max-height: none !important; } .select2-container--open .select2-dropdown--below { width: 715px !important; } } @media(min-width:992px) { #espace-client .section-preferences #collapseWeek label.type-label { display:none; } #espace-client .section-preferences #collapseWeekend label.type-label { display:none; } #espace-client .section-preferences .accordion-custom .accordion-button br { display:none; } } @media(max-width:991px) { #espace-client .section-preferences #TimeTypeAccordion #collapseWeek .row:not(:first-child), #espace-client .section-preferences #TimeTypeAccordion #collapseWeekend .row:not(:first-child) { height: 150px; } #espace-client .section-preferences .collapse-header { display:none; } #espace-client .section-preferences .collapse-header .form-label { font-size: .85rem; } #espace-client .section-preferences #TimeTypeAccordion #collapseWeek .row > div.col-12, #espace-client .section-preferences #TimeTypeAccordion #collapseWeekend .row > div.col-12 { padding:0; } .select2-container--open .select2-dropdown--below { width: 475px !important; } } @media(max-width:768px) { #espace-client .section-preferences #TimeTypeAccordion #collapseWeek .row:not(:first-child), #espace-client .section-preferences #TimeTypeAccordion #collapseWeekend .row:not(:first-child) { height: 250px; } #espace-client .section-preferences #collapseWeek label.type-label { display:block; text-align:center; font-size: .85rem; } #espace-client .section-preferences #collapseWeekend label.type-label { display:block !important; text-align:center; font-size: .85rem; } #espace-client .section-preferences .label-repas { display: inline-block; margin: 5px auto 0; } #espace-client .section-preferences .col-12 { text-align: center; } #espace-client .section-preferences .block-same-meal { height:auto !important; overflow:hidden; margin-bottom:20px; } #espace-client .section-preferences .choice-box-little { margin: 5px auto 0; } #espace-client .section-preferences #collapseWeekRepas .block-same-meal, #espace-client .section-preferences #collapseWeekendRepas .block-same-meal { display: flex; flex-direction: column; gap: 10px; } #espace-client .section-preferences #collapseWeekRepas .block-same-meal > [class*="col-"], #espace-client .section-preferences #collapseWeekendRepas .block-same-meal > [class*="col-"] { width: 100%; max-width: 100%; } #espace-client .section-preferences .bloc-meme-repas { flex-direction: column; } #espace-client .section-preferences .bloc-meme-repas .btn-repas { width: 100%; } #espace-client .section-preferences .btn-theme:not(.btn-repas, .btn-allergy) { font-size: .9rem; padding: 16px 30px 16px 30px; } .select2-container--open .select2-dropdown--below { width: 295px !important; } } @media(min-width:432px) { #espace-client .section-preferences .form-label br { display:none; } } @media(max-width:431px) { #espace-client #subTabContent2 .content.section-preferences { padding: 0 !important; } #espace-client .section-preferences .accordion-custom .accordion-body { padding: 10px; } #espace-client .section-preferences #bloc-preferences-genre, #espace-client .section-preferences #bloc-preferences-enceinte, #espace-client .section-preferences #bloc-preferences-allaite, #espace-client .section-preferences #bloc-preferences-poids-actuel, #espace-client .section-preferences #bloc-preferences-taille, #espace-client .section-preferences #bloc-preferences-poids-voulu, #espace-client .section-preferences #bloc-preferences-jour-demarrage, #espace-client .section-preferences #bloc-preferences-jour-peser, #espace-client .section-preferences #bloc-preferences-choix-menu, #espace-client .section-preferences #bloc-preferences-allergies > div { display: flex; flex-direction: column; align-items: center; } #espace-client .section-preferences .inputTaillePoids { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } #espace-client .section-preferences .inputTaillePoids .input-group-text { padding: 6px 12px; } #espace-client .section-preferences #bloc-preferences-jour-peser { margin-top:20px; } #espace-client .section-preferences .diet-choice-group, #espace-client .section-preferences .diet-options-group { justify-content: center !important; } #espace-client .section-preferences #bloc-preferences-allergies { padding:0 !important; margin: 0; } #espace-client .section-preferences .list-allergy { display: flex; flex-direction: column; justify-content: center; margin: 10px 0 0 0 !important; } #espace-client .section-preferences .list-allergy > div { align-items: center; justify-content: center; } #espace-client .section-preferences #bloc-preferences-aliments-eviter { margin-top: 0 !important; } #espace-client .section-preferences #bloc-preferences-aliments-eviter label { text-align:center; } #espace-client .section-preferences #bloc-preferences-choix-repas label { text-align:center } #espace-client .section-preferences .choice-box button.choice { font-size: 1rem; padding: 0.5rem 1.5rem; } #espace-client .section-preferences .btn-multi-choices button { border-radius: 15px; } #espace-client .section-preferences .slider-labels span { font-size: 0; } #espace-client .section-preferences .slider-labels span::before { font-size: 16px; } #espace-client .section-preferences .slider-labels span:nth-child(1)::before { content: "1900"; } #espace-client .section-preferences .slider-labels span:nth-child(2)::before { content: "1800"; } #espace-client .section-preferences .slider-labels span:nth-child(3)::before { content: "1700"; } #espace-client .section-preferences .slider-labels span:nth-child(4)::before { content: "1600"; } #espace-client .section-preferences .slider-labels span:last-child { width:auto; margin: 0 0 0 20px; } #espace-client .section-preferences .slider-labels span:last-child::before { content: "1500"; } #espace-client .section-preferences .labels { margin-top: 6rem; } #espace-client .section-preferences .labels div:not(#kcal-display) { border:1px solid red; display:none; } #espace-client .section-preferences #kcal-display { margin: 0 auto; } #espace-client .section-preferences .diet-choice-group { gap: .5rem !important; } #espace-client .section-preferences .diet-choice img, #espace-client .section-preferences .diet-option img { width: 45px; } #espace-client .section-preferences .btn-repas { width: 100%; } } @media (max-width: 391px) { #espace-client .section-preferences .diet-choice img, #espace-client .section-preferences .diet-option img { width: 40px; } .select2-container--open .select2-dropdown--below { width: 260px !important; } } @media (max-width: 376px) { #espace-client .section-preferences .choice-box button.choice { font-size: 1rem; padding: 0.5rem .8rem; } #espace-client .section-preferences .diet-choice img, #espace-client .section-preferences .diet-option img { width: 35px; } .select2-container--open .select2-dropdown--below { width: 245px !important; } } /* ------------------------------------------------------------ */ /* GESTION > LISTE DE COURSES */ /* ------------------------------------------------------------ */ #espace-client .section-liste-courses .liste-courses { margin:-70px 0 40px; padding:0 20px; width:100%; } #espace-client .section-liste-courses .download-liste-courses a.btn-theme { font-size:1rem; padding: 8px 20px 8px 20px; border-radius: 10px; } #espace-client .section-liste-courses h3 { font-size: 1.25rem; margin:0 0 10px 10px; } #espace-client .section-liste-courses-paiements table { width:100%; margin:0; padding:0; border-radius: 20px; } #espace-client .section-liste-courses table thead th { padding: 12px 0 12px 20px; background:var(--dark); color:var(--beige); text-align:left; } #espace-client .section-liste-courses table thead th:first-child { border-top-left-radius: 10px; } #espace-client .section-liste-courses table thead th:last-child { border-top-right-radius: 10px; } #espace-client .section-liste-courses table thead th:nth-child(2), #espace-client .section-liste-courses table thead th:nth-child(3) { text-align:center; } #espace-client .section-liste-courses table tbody tr.odd { background: var(--white); } #espace-client .section-liste-courses table tbody td { font-size: 1.1rem; font-weight: 400; text-align:left; padding: 6px 0 6px 20px; } #espace-client .section-liste-courses table tbody td:nth-child(2), #espace-client .section-liste-courses table tbody td:nth-child(3) { text-align:center; } #espace-client .section-liste-courses table tbody tr.odd td span.badge { background: var(--beige); color:var(--dark); border-radius:10px; padding:8px 20px; } #espace-client .section-liste-courses table tbody tr td span.badge { background: var(--white); color:var(--dark); border-radius:10px; padding:8px 20px; } #espace-client .section-liste-courses .table-responsive-custom { width: 100%; border-collapse: collapse; } #espace-client .section-liste-courses .table-responsive-custom thead { display: table-header-group; } #espace-client .section-liste-courses .table-responsive-custom td, #espace-client .section-liste-courses .table-responsive-custom th { padding: 10px; text-align: left; } #espace-client .section-liste-courses .grid-masonry { column-count: 2; column-gap: 2rem; } #espace-client .section-liste-courses .grid-simple { width:50%; } #espace-client .section-liste-courses .grid-simple table thead th:nth-child(1) { width:50%; } #espace-client .section-liste-courses .carte-famille { break-inside: avoid; margin-bottom: 2rem; } #espace-client .section-liste-courses .slider-semaines { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 100px; padding:0 25px 20px; border-bottom:2px solid var(--dark) } #espace-client .section-liste-courses .slider-semaines .arrow { background:none; border: none; color: var(--dark); font-size: 2rem; cursor: pointer; transition: all 0.2s ease-in-out; } #espace-client .section-liste-courses .slider-semaines .arrow:hover { color: var(--orange); } #espace-client .section-liste-courses .slider-semaines .titre-semaine { font-size: 1.25rem; margin: 0; text-align: center; } #espace-client .section-liste-courses .download-liste-courses { width: 100%; display: flex; justify-content: center; margin: 30px 0 40px; } #espace-client .section-liste-courses .download-liste-courses a.btn-theme { font-size:1rem; padding: 8px 20px 8px 20px; border-radius: 10px; } @media (max-width: 1024px) { #espace-client .section-liste-courses .slider-semaines { margin-bottom: 30px; } #espace-client .section-liste-courses .download-liste-courses { position:initial; display:flex; align-items: start; justify-content: center; } #espace-client .section-liste-courses .liste-courses { margin-top:30px; } #espace-client .section-liste-courses .grid-masonry { column-count: 1 !important; } } @media(max-width:768px) { #espace-client .section-liste-courses .slider-semaines { padding:0 0 20px; } #espace-client .section-liste-courses .slider-semaines .titre-semaine { font-size: 1rem; } #espace-client .section-liste-courses { padding:20px 0 !important; } #espace-client .section-liste-courses .download-liste-courses { position: initial; margin:0 0 20px 0; } #espace-client .section-liste-courses .download-liste-courses a.btn-theme { font-size: .8rem; } #espace-client .section-liste-courses .liste-courses { margin-top: 30px; padding: 0; } #espace-client .section-liste-courses table thead th, #espace-client .section-liste-courses table tbody td { font-size: .9rem; font-weight:bold; } } /* ------------------------------------------------------------ */ /* GESTION > MES PROGRES */ /* ------------------------------------------------------------ */ #espace-client .section-progres .form-label { font-weight: 600; color: var(--dark); } #espace-client .section-progres .input-group .form-control { background-color: var(--white); border-color: var(--dark); border-width: 2px; border-radius: 10px 0 0 10px; padding: 4px 12px; min-height: 33px; font-size: 1.25rem; } #espace-client .section-progres .input-group .input-group-text { background-color: var(--beige); border-color: var(--dark); border-width: 2px; border-left: none; border-radius: 0 10px 10px 0; font-size: 1.1rem; color: var(--dark); padding: 4px 12px; } #espace-client .section-progres .inputTaillePoids input { flex: 0 0 70px; min-width: 0; } #espace-client .section-progres .inputTaillePoids input:nth-child(1) { border-radius:10px; } #espace-client .section-progres .inputTaillePoids .input-virgule { margin:0 10px; font-weight:bold; padding:15px 0 0; } #espace-client .section-progres button#submit-poids, #espace-client .section-progres button#submit-mensurations, #espace-client .section-progres button#toggle-mensurations { font-size:1rem; padding: 8px 20px 8px 20px; border-radius: 10px; } #espace-client .section-progres button#submit-poids { margin:0 0 0 20px; } #espace-client .section-progres button#submit-mensurations { margin:0; } #espace-client .section-progres .bloc-toggle-mensurations { display:flex; align-items:end; justify-content:end; } #espace-client .section-progres button#toggle-mensurations i { margin:0 7px 0 0; } #espace-client .section-progres #bloc-mensurations { padding:20px; background: var(--white); border-radius:20px; } #espace-client .section-progres #poidsChart { width: 100%; height: auto } #espace-client .section-progres .accordion-custom .accordion-item { border: 2px solid var(--dark); border-radius: 10px; overflow: hidden; margin-bottom: 15px; background: var(--white); } #espace-client .section-progres .accordion-custom .accordion-button { background-color: var(--beige); color: var(--dark); font-weight: 600; padding: 16px 20px; font-size: 1.1rem; box-shadow: none; transition: background-color 0.3s ease; } #espace-client .section-progres .accordion-custom .accordion-button:not(.collapsed) { background-color: var(--dark); color: var(--beige); } #espace-client .section-progres .accordion-custom .accordion-button::after { background-image: none; content: '\f078'; font-family: 'Font Awesome 6 Free', serif; font-weight: 900; margin-left: auto; transition: transform 0.3s ease; } #espace-client .section-progres .accordion-custom .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } #espace-client .section-progres .accordion-custom .accordion-body { padding: 20px; background-color: var(--white); color: var(--dark); font-size: 1rem; } #espace-client .section-progres .accordion-custom .accordion-button:hover { background-color: var(--dark); color: var(--beige); } #espace-client .section-progres table { width:100%; margin:0; padding:0; border-radius: 20px; } #espace-client .section-progres table thead th { padding: 12px 0 12px 20px; background:var(--dark); color:var(--beige); text-align:center; } #espace-client .section-progres table thead th:first-child { border-top-left-radius: 10px; } #espace-client .section-progres table thead th:last-child { border-top-right-radius: 10px; } #espace-client .section-progres table tbody { } #espace-client .section-progres table tbody tr.odd { background: var(--beige); } #espace-client .section-progres table tbody td { font-size: 1.1rem; font-weight: 400; text-align:center; padding: 6px 0 6px 20px; } #espace-client .section-progres .table-responsive-custom { width: 100%; border-collapse: collapse; } #espace-client .section-progres .table-responsive-custom thead { display: table-header-group; } #espace-client .section-progres .table-responsive-custom td, #espace-client .section-progres .table-responsive-custom th { padding: 10px; text-align: center; } @media(max-width:992px) { #espace-client .section-progres .bloc-toggle-mensurations { justify-content: start; margin-top:10px; } } @media(max-width:768px) { #espace-client .section-progres { padding:20px 0 !important; } #espace-client .section-progres .table-responsive-custom thead { display: none; } #espace-client .section-progres table tbody tr.odd { background: transparent !important; } #espace-client .section-progres .table-responsive-custom tr, #espace-client .section-progres .table-responsive-custom tr:nth-child(odd), #espace-client .section-progres .table-responsive-custom tr:nth-child(even) { background: transparent !important; } #espace-client .section-progres .table-responsive-custom tr { display: block; margin-bottom: 20px; border: 2px solid var(--dark); border-radius: 10px; overflow: hidden; } #espace-client .section-progres .table-responsive-custom td { display: grid; grid-template-columns: 50% 50%; align-items: center; padding: 0; font-size: .95em; text-align: left; } #espace-client .section-progres .table-responsive-custom td::before { content: attr(data-label); background: var(--dark); color: var(--beige); font-weight: 600; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--white); } #espace-client .section-progres .table-responsive-custom td span { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--white); } #espace-client .section-progres .table-responsive-custom td:nth-child(odd) span { background: var(--beige); } #espace-client .section-progres .table-responsive-custom td:nth-child(even) span { background: var(--white); } #espace-client .section-progres .table-responsive-custom td:last-child::before, #espace-client .section-progres .table-responsive-custom td:last-child span { border-bottom: none; } } @media(max-width:430px) { #espace-client .section-progres .inputTaillePoids input { flex: 0 0 60px; min-width: 0; } #espace-client .section-progres button#submit-poids { margin:0 0 0 10px; } #espace-client .section-progres #poidsChart { aspect-ratio: auto; height: 300px !important; } } @media(max-width:375px) { #espace-client .section-progres .inputTaillePoids input { flex: 0 0 60px; min-width: 0; } #espace-client .section-progres .inputTaillePoids .input-virgule { margin:0 5px; } #espace-client .section-progres button#submit-poids, #espace-client .section-progres button#toggle-mensurations { padding: 8px 5px 8px 5px; } #espace-client .section-progres button#submit-poids { margin:0 0 0 3px; } } /* ------------------------------------------------------------ */ /* GESTION > MON MENU */ /* ------------------------------------------------------------ */ #espace-client .section-menu .slider-jours { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 100px; padding:0 25px 20px; border-bottom:2px solid var(--dark) } #espace-client .section-menu .slider-jours .arrow { background:none; border: none; color: var(--dark); font-size: 2rem; cursor: pointer; transition: all 0.2s ease-in-out; } #espace-client .section-menu .slider-jours .arrow:hover { color: var(--orange); } #espace-client .section-menu .slider-jours .titre-jour { font-size: 1.25rem; margin: 0; text-align: center; } #espace-client .section-menu .accordion .accordion-item { border: 2px solid var(--dark); border-radius: 10px; overflow: hidden; margin-bottom: 15px; background: var(--white); } #espace-client .section-menu .accordion .accordion-button { background-color: var(--beige); color: var(--dark); font-weight: 600; padding: 16px 20px; font-size: 1.1rem; box-shadow: none; transition: background-color 0.3s ease; } #espace-client .section-menu .accordion .accordion-button:not(.collapsed) { background-color: var(--dark); color: var(--beige); } #espace-client .section-menu .accordion .accordion-button::after { background-image: none; content: '\f078'; font-family: 'Font Awesome 6 Free', serif; font-weight: 900; margin-left: auto; transition: transform 0.3s ease; } #espace-client .section-menu .accordion .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } #espace-client .section-menu .accordion .accordion-body { padding: 20px; background-color: var(--white); color: var(--dark); font-size: 1rem; } #espace-client .section-menu .accordion .accordion-button:hover { background-color: var(--dark); color: var(--beige); } #espace-client .section-menu .accordion .accordion-button span.badge { background: var(--orange); color:var(--white); } #espace-client .section-menu .accordion .badge { font-size: 1rem; } #espace-client .section-menu .accordion .badge i { margin:0 7px 0 0; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-data-recette, #foodRecipeAlternative .bloc-infos-data-recette { display: flex; flex-direction: row; gap:7px; } #espace-client .section-menu .accordion .accordion-body .badge.badge-sucre-sale, #foodRecipeAlternative .badge.badge-sucre-sale { background: var(--orange); color:var(--white); } #espace-client .section-menu .accordion .accordion-body .badge.badge-heure, #foodRecipeAlternative .badge.badge-heure { background: var(--grey); color:var(--white); } #espace-client .section-menu .accordion .accordion-body .badge.badge-duree, #foodRecipeAlternative .badge.badge-duree { background: var(--beige); color:var(--dark); } #espace-client .section-menu .accordion .accordion-body .badge.badge-kcal, #foodRecipeAlternative .badge.badge-kcal { background: var(--white); color:var(--dark); } #espace-client .section-menu .accordion .accordion-body .bloc-infos-calories, #foodRecipeAlternative .bloc-infos-calories { background: var(--beige); border-radius:10px; padding:7px 0; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-calories div:nth-child(2), #foodRecipeAlternative .bloc-infos-calories div:nth-child(2) { border-left:2px solid var(--white); border-right:2px solid var(--white) } #espace-client .section-menu .accordion .accordion-body .badge.badge-temps, #foodRecipeAlternative .badge.badge-temps { font-size: .85rem; width:100%; background: var(--dark); color:var(--white); } #espace-client .section-menu .accordion .accordion-body h4 { font-size: 1.25rem; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients { align-items: center; padding:5px; border-radius:5px;} #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients.odd { background: var(--beige); } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients img { width:50px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients .infos-libelle { display: flex; flex-direction: column; justify-content: center; height: 100%; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients .infos-quantite { display: flex; flex-direction: column; justify-content: center; align-items: end; height: 100%; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients .infos-quantite span.badge-quantite { font-size: 1rem; width:75%; background: var(--orange); color:var(--white); padding:10px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-recette .position-relative, #foodRecipeAlternative .bloc-infos-recette .position-relative { position: relative; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-picto { position: absolute; inset: 0; padding: 10px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; pointer-events: none; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-picto > div { pointer-events: auto; } #espace-client .section-menu .accordion .accordion-body h5 { font-weight:bold; font-size: 1rem; margin:10px 0; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-picto img, #foodRecipeAlternative .bloc-infos-picto img { width: 35px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-picto .type-repas-choice { position:absolute; right:130px; bottom:10px; } #foodRecipeAlternative .bloc-infos-picto .type-repas-choice { position:absolute; right:10px; bottom:10px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-picto .like-choice { position:absolute; right:10px; bottom:10px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-picto .no-like-choice { position:absolute; right:50px; bottom:10px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-picto .refresh-choice { position:absolute; right:90px; bottom:10px; } @media(max-width:1025px) { #espace-client .section-menu .accordion .accordion-body .bloc-infos-temps i { display:none; } } @media(max-width:835px) { #espace-client .section-menu .accordion .accordion-body .bloc-infos-recette { margin-bottom: 20px; } } @media(max-width:430px) { .section-menu { padding: 0 !important; } #espace-client .section-menu .slider-jours { padding: 0 0 20px; } #espace-client .section-menu .accordion .accordion-button { display:flex; flex-direction:column; padding: 16px 10px; gap: .5rem !important; } #espace-client .section-menu .accordion .accordion-button::after { margin: 0 auto; } #espace-client .section-menu .accordion .accordion-body { padding: 10px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-data-recette, #foodRecipeAlternative .bloc-infos-data-recette { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; } #espace-client .section-menu .accordion .badge { font-size: .9rem; } #espace-client .section-menu .accordion .accordion-body .badge.badge-sucre-sale { display:block; } #espace-client .section-menu .accordion .accordion-body .badge.badge-heure { display:block; } #espace-client .section-menu .accordion .accordion-body .badge.badge-duree { display:block; } #espace-client .section-menu .accordion .accordion-body .badge.badge-kcal { display:block; } #espace-client .section-menu .accordion h3 { font-size: 1.5rem; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-temps i { display:inline-block; } #espace-client .section-menu .accordion .accordion-body .badge.badge-temps { font-size: .9rem; margin:0 0 5px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients { flex-wrap: wrap; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients .col-2 { flex: 0 0 50px; max-width: 50px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients .infos-libelle { flex: 1; max-width: calc(100% - 50px); padding-left:20px; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients .infos-quantite { flex: 0 0 100%; max-width: 100%; margin: 5px 0 0 70px; display: flex; justify-content: flex-start; align-items: start; } #espace-client .section-menu .accordion .accordion-body .bloc-infos-ingredients .infos-quantite span.badge-quantite { width: auto; font-size: .9rem; padding: 5px 10px; } } /* ------------------------------------------------------------ */ /* MODAL */ /* ------------------------------------------------------------ */ .modal .modal-header { background: var(--dark); color:var(--beige); border:none; } .modal .modal-header button i { color: var(--beige); font-size: 1.5rem; margin-top:-5px; } .modal .modal-header button:hover i { opacity:.7; } .modal .modal-header .btn-close { --bs-btn-close-bg: none; --bs-btn-close-opacity: 1; --bs-btn-close-hover-opacity: 1; --bs-btn-close-focus-shadow: none; } .modal .modal-body { padding:20px; border:4px solid var(--dark); background: var(--beige); } .modal .modal-footer { background: var(--dark); color:var(--beige); border:none; } .modal .modal-footer button { font-size: 1.2rem; font-weight:bold; padding:8px 20px; border-radius: 15px; border: 2px solid var(--dark); box-shadow:none; } .modal .modal-footer button:hover { background: rgba(246, 240, 232,.8); border: 2px solid var(--dark); color:var(--dark); } /* ------------------------------------------------------------ */ /* SWEET ALERT */ /* ------------------------------------------------------------ */ .swal2-popup { background-color: var(--beige) !important; border: 4px solid var(--dark); color: var(--dark); font-family: 'Lora', serif; border-radius: 10px; } .swal2-html-container { font-size: 1.1rem; } .swal2-confirm, .swal2-cancel { font-size: 1.2rem; font-weight: bold; padding: 8px 20px; border-radius: 15px; border: 2px solid var(--dark); box-shadow: none; background: var(--beige); color: var(--dark); } .swal2-confirm:hover, .swal2-cancel:hover { background: var(--dark); color: var(--beige); border: 2px solid var(--dark); } .swal2-icon { margin-top: 20px; } .swal2-error.swal2-error, .swal2-icon.swal2-info { border-color: var(--orange); color: var(--orange); } .swal2-icon.swal2-error .swal2-icon-content, .swal2-icon.swal2-info .swal2-icon-content { color: var(--orange); } /* ------------------------------------------------------------ */ /* BLOODY ME > GÉNÉRATION D'IMAGES (PAGE) */ /* ------------------------------------------------------------ */ /* Formulaire */ #section-generation #plat.form-control { background-color: var(--white); border-color: var(--dark); border-width: 2px; border-radius: 10px 0 0 10px; padding: 6px 12px; min-height: 40px; font-size: 1.1rem; } #section-generation #plat.form-control:focus { box-shadow: none; border-color: var(--dark); } #section-generation #btn-generer.btn-theme { background: var(--beige); color: var(--dark); border: 2px solid var(--dark); border-radius: 0 10px 10px 0; font-weight: 600; transition: all .2s ease; font-size: 1rem; padding: 8px 20px 8px 20px; } #section-generation #btn-generer.btn:hover { background: var(--dark); color: var(--beige); } /* Alerte d’erreur (harmonisée au thème) */ #section-generation #alert { background-color: var(--beige); color: var(--dark); border: 2px solid var(--dark); border-left: 6px solid var(--dark); border-radius: 12px; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.25); font-size: 1rem; margin:0 0 20px !important; } /* Grille des cartes */ #section-generation #card-container .card.selectable-card { background: var(--white); border: 2px solid var(--dark); border-radius: 10px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; box-shadow: 0 12px 24px -16px rgba(0,0,0,.35); cursor: pointer; } #section-generation #card-container .card.selectable-card:hover { transform: translateY(-2px); box-shadow: 0 18px 28px -16px rgba(0,0,0,.4); } #section-generation #card-container .card.selectable-card .card-img-top { display: block; width: 100%; height: auto; } /* État sélectionné (JS ajoute .border-primary) */ #section-generation #card-container .card.selectable-card.border-primary { border-color: var(--orange) !important; box-shadow: 0 24px 40px -20px rgba(0,0,0,.45); } /* Loader sur chaque carte */ #section-generation #card-container .card .loader { inset: 0; padding: 12px; width: auto; height: auto; } #section-generation #card-container .card .loader .spinner-border { width: 2.25rem; height: 2.25rem; border-width: .25rem; color: var(--dark); } #section-generation #card-container .card .loader .small { color: var(--dark); } /* Boutons d’action */ #section-generation #btn-choisir.btn-theme, #section-generation #btn-refresh.btn-theme { border: 2px solid var(--dark); border-radius: 20px; font-weight: 600; box-shadow: 0 24px 40px -20px rgba(0,0,0,.5); transition: all .2s ease; font-size: 1rem; padding: 8px 20px 8px 20px; } #section-generation #btn-choisir.btn-theme { background: var(--beige); color: var(--dark); } #section-generation #btn-choisir.btn-theme:hover:not(:disabled) { background: var(--dark); color: var(--beige); } #section-generation #btn-refresh.btn-theme { background: var(--white); color: var(--dark); } #section-generation #btn-refresh.btn-theme:hover:not(:disabled) { background: var(--dark); color: var(--beige); } /* États disabled cohérents */ #section-generation #btn-choisir:disabled, #section-generation #btn-refresh:disabled, #section-generation #btn-generer:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; } /* Coût estimé */ #section-generation #cost { font-style: italic; color: var(--dark) !important; } /* Responsive : ajustements légers */ @media (max-width: 834px) { #section-generation #card-container .card.selectable-card { transform: none; } } @media (max-width: 430px) { #section-generation #plat.form-control { min-height: 38px; font-size: 1rem; } #section-generation #btn-generer.btn { font-size: 1rem; padding: 6px 14px; } #section-generation #btn-choisir.btn, #btn-refresh.btn { font-size: .95rem; padding: 8px 18px; } } .carousel { width: 65%; margin: 0 auto; border: solid 2px black; border-radius: 10px !important; } .carousel .carousel-item { border-radius: 15px !important; } @media (max-width: 768px) { .carousel { width: 95% !important; } } .carousel-control-next-icon, .carousel-control-prev-icon { background-color: black; border-radius: 20px; background-size: 60%; } .carousel-caption { background-color: var(--orange-dark); padding: 5px; border-radius: 25px; opacity: 0.8; } .carousel-caption h5 { color:#fff; font-size: 1rem; }