From 77c8a1f0812bd9f7e642ee2a15f86f8210446e7d Mon Sep 17 00:00:00 2001 From: Anthony Mahe Date: Tue, 26 Aug 2025 21:56:13 +0200 Subject: [PATCH] FIX CSS : Suppression puce list-style dans le sous menu --- style-min.css | 682 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 681 insertions(+), 1 deletion(-) diff --git a/style-min.css b/style-min.css index e6e2008..4898ae0 100644 --- a/style-min.css +++ b/style-min.css @@ -1 +1,681 @@ -.banner,.citation,.dropdown,.menu li{position:relative}.presentation a,.submenu li a,a,menu li{text-decoration:none}.banner,.cards-list li a{background-position:center}.cards-list,.presentation{gap:1rem;display:flex}.presentation a{color:#5a14a4;transition:color .3s}.presentation a:hover{color:#9b83b5;text-decoration:underline}.button:hover,a h3,h1,h2,li a.active{color:#b00f2e}.cards-list li span,.citation,li a.active,p span{font-weight:700}.banner{width:100%;height:70vh;margin-top:3rem;overflow:hidden}.banner-img{max-width:100%;max-height:100%;object-fit:contain;display:block;margin:3rem auto 0}.button{border:1px solid #f9e7db;color:#f9e7db;padding:.3rem 1rem;cursor:pointer;border-radius:.2rem}.cards-list li a,.cards-list li img{border-radius:8px;display:block;width:100%}.button:hover,.dropdown .submenu,.header,body{background-color:#f9e7db}.citation{color:#734332;font-size:11pt;display:flex;flex-direction:column;align-items:center}.citation span{font-weight:400;align-self:flex-end;font-style:italic}@media (max-width:849px){.banner{height:35vh}.banner-img{width:100%;height:auto}.presentation{flex-direction:column;align-items:center}.portrait img,.specialiste img{max-width:80%;padding:1rem}.texte{padding:1rem}}.cards-list{list-style:none;padding:0;flex-wrap:wrap}.cards-list li{margin:auto;width:250px;box-sizing:border-box;cursor:pointer}.cards-list li a{background-size:cover;transition:transform .3s}.cards-list li:hover a{transform:scale(1.1)}.cards-list li span{margin-top:1rem;display:block;text-align:center;color:#b00f2e;background-color:transparent;font-size:1.5em}.cards-list li h3{margin:-1rem;padding-top:0;font-size:1.2em;color:#b00f2e;text-align:center}.cards-list li img{height:250px;object-fit:cover;object-position:center}.portrait{flex-grow:3}.portrait img{padding:2rem;max-width:250px;height:auto;display:block}.texte{flex-grow:6;text-align:justify}.footer-center,.section-contact,a h3,h1,h2{text-align:center}.footer-center,.specialiste{flex-grow:1}.specialiste img{padding:2rem;width:100px;height:auto}.styled-list{float:none;list-style-type:disc;list-style-position:inside;padding-left:1rem}.styled-list li::marker{color:#b00f2e}.formulaire-contact{display:flex;justify-content:center;align-items:center;padding:2rem 1rem;flex-direction:column}.formulaire-contact iframe{max-width:100%;width:640px;border:none}.section-contact{margin:3rem 0}.btn-container{display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-wrap:wrap}.btn-contact,.btn-phone{display:inline-flex;align-items:center;gap:.5rem;font-size:1rem;text-decoration:none;border-radius:8px;font-weight:700;transition:background-color .3s;color:#fff;background-repeat:no-repeat;background-position-y:6px;background-position-x:6px;background-size:40px 40px;padding:.8rem 1rem .8rem 3rem;background-color:#b00f2e}#menuXL,.contact,.dropdown:hover .submenu,.header{display:flex}.btn-phone{background-image:url('assets/img/phone.png')}.btn-contact{background-image:url('assets/img/form.svg')}.btn-contact:hover,.btn-phone:hover{background-color:#d1776b}.header{position:fixed;width:100%;z-index:3;align-items:center}.header li a::after{content:"";position:absolute;left:0;bottom:-3px;width:0%;height:2px;background-color:#b00f2e;transition:width .3s}.logo,li a.active::after,li a:hover::after{width:100%}.contact{top:0;position:fixed;width:100%;flex-wrap:wrap;row-gap:10px;column-gap:.7rem;justify-content:center;align-items:center;background-color:#b00f2e;padding:1rem;color:#f9e7db;z-index:100;font-size:11px}.submenu li a,a,body{color:#333}.nav-phone,.navigation{display:flex;width:100%}.logo img{display:inline-block;max-height:40px;width:auto;padding:8px 4px 8px 12px;vertical-align:middle}nav{margin-left:auto;display:inline-flex;margin-right:1rem}.footer-right p,.menu,body{margin:0}#menuM,.menu-btn{display:none}.menu{list-style:none;padding:0;gap:1rem;align-items:center}.menu li{white-space:nowrap;padding:.1rem}.dropdown .submenu{display:none;position:fixed;top:6rem;right:1rem;z-index:10;flex-direction:column;box-shadow:0 2px 5px rgba(0,0,0,.15);padding:.5rem;min-width:180px}.dropdown-label{cursor:pointer;padding:.5rem;display:inline-block;color:#333;background-color:transparent}.submenu li a,menu li{display:block;padding:.5rem}@media (max-width:1299px) and (min-width:100px){#menuXL{display:none}#menuM{display:flex}}@media (max-width:999px) and (min-width:850px){.logo span{display:none}}@media (max-width:849px){#menuXL,.header{display:flex}.logo span{display:inline-flex}#menuXL{transform:translateX(100%);opacity:0;transition:transform .3s,opacity .3s;max-height:0;max-width:0;overflow:hidden;flex-direction:column;position:fixed;background-color:#f9e7db;top:3.5rem;right:0;box-shadow:-10px 0 20px rgba(0,0,0,.2)}#menuM{display:none}.menu-icon{display:inline-block!important}}.menu-icon{cursor:pointer;display:none;padding:28px 20px;position:relative;user-select:none;z-index:100}.menu-icon .navicon{background:#333;display:block;height:2px;position:relative;transition:background .2s ease-out;width:18px}.menu-icon .navicon:after,.menu-icon .navicon:before{background:#333;content:'';display:block;height:100%;position:absolute;transition:.2s ease-out;width:100%}.menu-icon .navicon:before{top:5px}.menu-icon .navicon:after{top:-5px}.menu-btn:checked~nav #menuXL{max-height:100vh;max-width:300px;width:300px;height:100%;transform:translateX(0);opacity:1}.menu-btn:checked~.menu-icon .navicon{background:0 0}.menu-btn:checked~.menu-icon .navicon:before{transform:rotate(-45deg)}.menu-btn:checked~.menu-icon .navicon:after{transform:rotate(45deg)}.menu-btn:checked~.menu-icon:not(.steps) .navicon:after,.menu-btn:checked~.menu-icon:not(.steps) .navicon:before{top:0}body{line-height:1.6;padding:0;font-family:Times New Roman}main{padding:0 1rem;margin:0 auto;max-width:1280px}section picture{margin-top:4rem}section{margin-bottom:2rem}h1{vertical-align:baseline;font-size:1.6rem}h2{line-height:1.2}a h3{padding-top:14rem;font-size:1.5rem}h3{color:#ff7d01;text-align:left}p{text-indent:10px}.site-footer{padding:0 1rem;font-size:.8rem;background-color:#b00f2e;color:#f9e7db}.site-footer a{color:#f9e7db;text-decoration:underline}.footer-main{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.footer-right{text-align:right;min-width:150px}@media (max-width:600px){.footer-main{flex-direction:column;align-items:center}.footer-right{text-align:center;margin-top:.5rem}}.faq-section{max-width:900px;margin:0 auto;padding:40px 20px}.faq-item{display:flex;align-items:center;margin-bottom:20px;padding:20px;border-radius:15px;background-color:rgba(176,15,46,.08);box-shadow:2px 2px 6px rgba(0,0,0,.05);transition:transform .2s}.faq-item::before{content:"";display:block;width:80px;height:80px;margin-right:20px;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-position:center}.faq-category:first-of-type .faq-item::before{background-image:url("assets/img/questions-avocat-enfant.webp")}.faq-category:last-of-type .faq-item::before{background-image:url("assets/img/questions-avocat-parent.webp")}.faq-item-content{display:flex;flex-direction:column;width:100%}.faq-item-content h3{color:#ff7d01;margin:0 0 10px;text-align:left;font-weight:700}.faq-item-content p{margin:0;color:#2c3e50;padding-left:20px;border-left:4px solid #b00f2e}@media (min-width:850px){.faq-item-content{flex-direction:column}}@media (max-width:849px){.faq-item{flex-direction:row;align-items:flex-start}.faq-item::before{width:50px;height:50px;margin-right:10px}.faq-item-content h3{font-size:1rem}.faq-item-content p{font-size:.95rem;padding-left:10px}} \ No newline at end of file +.banner, +.citation, +.dropdown, +.menu li { + position: relative +} + +.presentation a, +.submenu li a, +a, +menu li { + text-decoration: none +} + +.banner, +.cards-list li a { + background-position: center +} + +.cards-list, +.presentation { + gap: 1rem; + display: flex +} + +.presentation a { + color: #5a14a4; + transition: color .3s +} + +.presentation a:hover { + color: #9b83b5; + text-decoration: underline +} + +.button:hover, +a h3, +h1, +h2, +li a.active { + color: #b00f2e +} + +.cards-list li span, +.citation, +li a.active, +p span { + font-weight: 700 +} + +.banner { + width: 100%; + height: 70vh; + margin-top: 3rem; + overflow: hidden +} + +.banner-img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + display: block; + margin: 3rem auto 0 +} + +.button { + border: 1px solid #f9e7db; + color: #f9e7db; + padding: .3rem 1rem; + cursor: pointer; + border-radius: .2rem +} + +.cards-list li a, +.cards-list li img { + border-radius: 8px; + display: block; + width: 100% +} + +.button:hover, +.dropdown .submenu, +.header, +body { + background-color: #f9e7db +} + +.citation { + color: #734332; + font-size: 11pt; + display: flex; + flex-direction: column; + align-items: center +} + +.citation span { + font-weight: 400; + align-self: flex-end; + font-style: italic +} + +@media (max-width:849px) { + .banner { + height: 35vh + } + + .banner-img { + width: 100%; + height: auto + } + + .presentation { + flex-direction: column; + align-items: center + } + + .portrait img, + .specialiste img { + max-width: 80%; + padding: 1rem + } + + .texte { + padding: 1rem + } +} + +.cards-list { + list-style: none; + padding: 0; + flex-wrap: wrap +} + +.cards-list li { + margin: auto; + width: 250px; + box-sizing: border-box; + cursor: pointer +} + +.cards-list li a { + background-size: cover; + transition: transform .3s +} + +.cards-list li:hover a { + transform: scale(1.1) +} + +.cards-list li span { + margin-top: 1rem; + display: block; + text-align: center; + color: #b00f2e; + background-color: transparent; + font-size: 1.5em +} + +.cards-list li h3 { + margin: -1rem; + padding-top: 0; + font-size: 1.2em; + color: #b00f2e; + text-align: center +} + +.cards-list li img { + height: 250px; + object-fit: cover; + object-position: center +} + +.portrait { + flex-grow: 3 +} + +.portrait img { + padding: 2rem; + max-width: 250px; + height: auto; + display: block +} + +.texte { + flex-grow: 6; + text-align: justify +} + +.footer-center, +.section-contact, +a h3, +h1, +h2 { + text-align: center +} + +.footer-center, +.specialiste { + flex-grow: 1 +} + +.specialiste img { + padding: 2rem; + width: 100px; + height: auto +} + +.styled-list { + float: none; + list-style-type: disc; + list-style-position: inside; + padding-left: 1rem +} + +.styled-list li::marker { + color: #b00f2e +} + +.formulaire-contact { + display: flex; + justify-content: center; + align-items: center; + padding: 2rem 1rem; + flex-direction: column +} + +.formulaire-contact iframe { + max-width: 100%; + width: 640px; + border: none +} + +.section-contact { + margin: 3rem 0 +} + +.btn-container { + display: flex; + justify-content: center; + align-items: center; + gap: 1.5rem; + flex-wrap: wrap +} + +.btn-contact, +.btn-phone { + display: inline-flex; + align-items: center; + gap: .5rem; + font-size: 1rem; + text-decoration: none; + border-radius: 8px; + font-weight: 700; + transition: background-color .3s; + color: #fff; + background-repeat: no-repeat; + background-position-y: 6px; + background-position-x: 6px; + background-size: 40px 40px; + padding: .8rem 1rem .8rem 3rem; + background-color: #b00f2e +} + +#menuXL, +.contact, +.dropdown:hover .submenu, +.header { + display: flex +} + +.btn-phone { + background-image: url('assets/img/phone.png') +} + +.btn-contact { + background-image: url('assets/img/form.svg') +} + +.btn-contact:hover, +.btn-phone:hover { + background-color: #d1776b +} + +.header { + position: fixed; + width: 100%; + z-index: 3; + align-items: center +} + +.header li a::after { + content: ""; + position: absolute; + left: 0; + bottom: -3px; + width: 0%; + height: 2px; + background-color: #b00f2e; + transition: width .3s +} + +.logo, +li a.active::after, +li a:hover::after { + width: 100% +} + +.contact { + top: 0; + position: fixed; + width: 100%; + flex-wrap: wrap; + row-gap: 10px; + column-gap: .7rem; + justify-content: center; + align-items: center; + background-color: #b00f2e; + padding: 1rem; + color: #f9e7db; + z-index: 100; + font-size: 11px +} + +.submenu li a, +a, +body { + color: #333 +} + +.nav-phone, +.navigation { + display: flex; + width: 100% +} + +.logo img { + display: inline-block; + max-height: 40px; + width: auto; + padding: 8px 4px 8px 12px; + vertical-align: middle +} + +nav { + margin-left: auto; + display: inline-flex; + margin-right: 1rem +} + +.footer-right p, +.menu, +body { + margin: 0 +} + +#menuM, +.menu-btn { + display: none +} + +.menu { + list-style: none; + padding: 0; + gap: 1rem; + align-items: center +} + +.submenu { + list-style: none; + margin: 0; + padding: 0; +} + +.menu li { + white-space: nowrap; + padding: .1rem +} + +.dropdown .submenu { + display: none; + position: fixed; + top: 6rem; + right: 1rem; + z-index: 10; + flex-direction: column; + box-shadow: 0 2px 5px rgba(0, 0, 0, .15); + padding: .5rem; + min-width: 180px +} + +.dropdown-label { + cursor: pointer; + padding: .5rem; + display: inline-block; + color: #333; + background-color: transparent +} + +.submenu li a, +menu li { + display: block; + padding: .5rem +} + +@media (max-width:1299px) and (min-width:100px) { + #menuXL { + display: none + } + + #menuM { + display: flex + } +} + +@media (max-width:999px) and (min-width:850px) { + .logo span { + display: none + } +} + +@media (max-width:849px) { + + #menuXL, + .header { + display: flex + } + + .logo span { + display: inline-flex + } + + #menuXL { + transform: translateX(100%); + opacity: 0; + transition: transform .3s, opacity .3s; + max-height: 0; + max-width: 0; + overflow: hidden; + flex-direction: column; + position: fixed; + background-color: #f9e7db; + top: 3.5rem; + right: 0; + box-shadow: -10px 0 20px rgba(0, 0, 0, .2) + } + + #menuM { + display: none + } + + .menu-icon { + display: inline-block !important + } +} + +.menu-icon { + cursor: pointer; + display: none; + padding: 28px 20px; + position: relative; + user-select: none; + z-index: 100 +} + +.menu-icon .navicon { + background: #333; + display: block; + height: 2px; + position: relative; + transition: background .2s ease-out; + width: 18px +} + +.menu-icon .navicon:after, +.menu-icon .navicon:before { + background: #333; + content: ''; + display: block; + height: 100%; + position: absolute; + transition: .2s ease-out; + width: 100% +} + +.menu-icon .navicon:before { + top: 5px +} + +.menu-icon .navicon:after { + top: -5px +} + +.menu-btn:checked~nav #menuXL { + max-height: 100vh; + max-width: 300px; + width: 300px; + height: 100%; + transform: translateX(0); + opacity: 1 +} + +.menu-btn:checked~.menu-icon .navicon { + background: 0 0 +} + +.menu-btn:checked~.menu-icon .navicon:before { + transform: rotate(-45deg) +} + +.menu-btn:checked~.menu-icon .navicon:after { + transform: rotate(45deg) +} + +.menu-btn:checked~.menu-icon:not(.steps) .navicon:after, +.menu-btn:checked~.menu-icon:not(.steps) .navicon:before { + top: 0 +} + +body { + line-height: 1.6; + padding: 0; + font-family: Times New Roman +} + +main { + padding: 0 1rem; + margin: 0 auto; + max-width: 1280px +} + +section picture { + margin-top: 4rem +} + +section { + margin-bottom: 2rem +} + +h1 { + vertical-align: baseline; + font-size: 1.6rem +} + +h2 { + line-height: 1.2 +} + +a h3 { + padding-top: 14rem; + font-size: 1.5rem +} + +h3 { + color: #ff7d01; + text-align: left +} + +p { + text-indent: 10px +} + +.site-footer { + padding: 0 1rem; + font-size: .8rem; + background-color: #b00f2e; + color: #f9e7db +} + +.site-footer a { + color: #f9e7db; + text-decoration: underline +} + +.footer-main { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap +} + +.footer-right { + text-align: right; + min-width: 150px +} + +@media (max-width:600px) { + .footer-main { + flex-direction: column; + align-items: center + } + + .footer-right { + text-align: center; + margin-top: .5rem + } +} + +.faq-section { + max-width: 900px; + margin: 0 auto; + padding: 40px 20px +} + +.faq-item { + display: flex; + align-items: center; + margin-bottom: 20px; + padding: 20px; + border-radius: 15px; + background-color: rgba(176, 15, 46, .08); + box-shadow: 2px 2px 6px rgba(0, 0, 0, .05); + transition: transform .2s +} + +.faq-item::before { + content: ""; + display: block; + width: 80px; + height: 80px; + margin-right: 20px; + flex-shrink: 0; + background-size: contain; + background-repeat: no-repeat; + background-position: center +} + +.faq-category:first-of-type .faq-item::before { + background-image: url("assets/img/questions-avocat-enfant.webp") +} + +.faq-category:last-of-type .faq-item::before { + background-image: url("assets/img/questions-avocat-parent.webp") +} + +.faq-item-content { + display: flex; + flex-direction: column; + width: 100% +} + +.faq-item-content h3 { + color: #ff7d01; + margin: 0 0 10px; + text-align: left; + font-weight: 700 +} + +.faq-item-content p { + margin: 0; + color: #2c3e50; + padding-left: 20px; + border-left: 4px solid #b00f2e +} + +@media (min-width:850px) { + .faq-item-content { + flex-direction: column + } +} + +@media (max-width:849px) { + .faq-item { + flex-direction: row; + align-items: flex-start + } + + .faq-item::before { + width: 50px; + height: 50px; + margin-right: 10px + } + + .faq-item-content h3 { + font-size: 1rem + } + + .faq-item-content p { + font-size: .95rem; + padding-left: 10px + } +} \ No newline at end of file