diff --git a/style-min.css b/style-min.css index d48682a..ca5367a 100644 --- a/style-min.css +++ b/style-min.css @@ -1,606 +1 @@ -.banner, -.cards-list li a { - background-position: center -} - -.cards-list, -.presentation { - gap: 1rem; - display: flex -} - -.presentation a { - color: #5a14a4; /* Rouge léger */ - text-decoration: none; /* Pas de soulignement */ - transition: color 0.3s; -} - -.presentation a:hover { - color: #9b83b5; /* Rouge plus foncé au survol */ - text-decoration: underline; /* Optionnel : souligne au survol */ -} - -.submenu li a, -a, -menu li { - text-decoration: none -} - -.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 { - position: relative; - width: 100%; - height: 70vh; - margin-top: 3rem; - overflow: hidden; -} - -.banner-img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - display: block; - margin: 0 auto; - margin-top: 3rem; -} - -.button { - border: 1px solid #f9e7db; - color: #f9e7db; - padding: .3rem 1rem; - cursor: pointer; - border-radius: .2rem -} - -.button:hover { - background-color: #f9e7db -} - -.citation { - color: #734332; - font-size: 11pt; - position: relative; - 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 img { - display: block; - width: 100%; - height: auto; - border-radius: 8px; -} - -.cards-list li a { - display: block; - width: 100%; - background-size: cover; - border-radius: 8px; - 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: 0rem; - font-size: 1.2em; - color: #b00f2e; - text-align: center; -} - -.cards-list li img { - display: block; - width: 100%; - height: 250px; /* même hauteur que ta tuile */ - object-fit: cover; /* remplit le carré */ - object-position: center; /* centre le cadrage */ - border-radius: 8px; -} - -.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 -} - -.specialiste { - flex-grow: 1 -} - -.specialiste img { - padding: 2rem; - max-width: 100px -} - -.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 -} - -.dropdown .submenu, -.header, -body { - background-color: #f9e7db -} - -.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 -} - -.dropdown, -.menu li { - position: relative -} - -.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 { - 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 -} - -menu li { - display: block; - padding: .5rem -} - -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-center { - flex-grow: 1 -} - -.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 - } -} \ No newline at end of file +.banner,.citation{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;max-width:100px}.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}.dropdown,.menu li{position:relative}.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}} \ No newline at end of file