.recap .ListDetails { margin: 15px 0; padding: 0; list-style: none; } .recap ul.ListDetails li { padding: 5px 0; } #nos_services_article { background-color: #000010; color: white; font-size: 0.9em; border-radius: 8px; border: 1px solid #ab7d3f; padding: 1px; position: relative; flex: 1.2; } #reservation_confirmation_article, #devenez_chauffeur_postuler_article_mail { background-color: white; color: #000010; font-size: 1em; text-align: center; border-radius: 8px; border: 1px solid #ab7d3f; padding: 1px; position: relative; flex: 1.2; } .table_chauffeur_drivigo { background: rgba(255, 255, 255, 0.89);/* couleur de fond*/ color: black; /* couleur de texte*/ font-size: 1.2em; /*taille du texte*/ border-radius: 5px; /* degré des angles*/ border:1px solid #ab7d3f; /* bordure: taille couleur;*/ padding: 5; /* marge exterieur*/ box-shadow:0px 2px 5px black; /*ombre */ -moz-box-shadow:2px 2px 10px gray; -webkit-box-shadow:2px 2px 10px gray; margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */ text-align: center; //width:400px; } input, select{ border-radius: 3%; border: 1px solid #ab7d3f; transition: 0.2s all linear; outline: none; margin-right: 2px; height: 30px; font-size: 1em; } input { width: 300px; height: 35px; } /* arriere plan formulaire */ #BcBannerMap { width: 100%; height: 550px; background: #ccc; position: relative; } #BannerMap { width: 400px; height: 50%; position: absolute; top: 0; left: 0; z-index: 1; } #BannerImage { width: 100%; height: 100; position: absolute; top: 0; left: 0; z-index: 2; overflow: hidden; } #BcFiltreMap { width: 100%; padding: 30px 20px; background: rgba(255, 255, 255, 1); position: relative; top: inherit; left: inherit; z-index: 1; margin: 10px auto; } .BcRightSearch #BcFiltreMap { left: inherit !important; right: 5% !important; } #BcFiltreMap ul { margin: 0; padding: 0; } /* formulaire */ #BcBannerMap #BcFiltreMap { border:1px solid #ab7d3f; /* bordure: taille couleur;*/ width:400px; padding: 5; background: rgba(255, 255, 255, 0.89);/* couleur de fond*/ color: black; /* couleur de texte*/ position: absolute; top: 2%; left: 4%; z-index: 4; font-size: 1.2em; /*taille du texte*/ padding: 10px; /* marge exterieur*/ border-radius: 5px; /* degré des angles*/ box-shadow:0px 2px 5px black; /*ombre */ -moz-box-shadow:2px 2px 10px gray; -webkit-box-shadow:2px 2px 10px gray; margin: auto; } .FieldStyle1 { height: 40px; line-height: 40px; margin: 0 auto 10px auto; width: 100%; padding: 0 10px; padding-left: 30px; position: relative; font-size: 15px; } .SubmitMap:hover {/*bouton */ width: 100%; display: block; height: 45px; line-height: 45px; text-align: center; background-image:linear-gradient(#ac7e40,#ac7e40); border-radius: 5%; box-shadow: inset 1em 1 1em gold; border: 0; font-size: 20px; } .SubmitMap {/*bouton */ width: 100%; display: block; height: 45px; line-height: 45px; text-align: center; background: linear-gradient(#000, #000); border-radius: 5%; box-shadow: inset 1em 1 1em gold; color: #fff; border: 0; font-size: 20px; } .ListCat { margin: 10px auto; padding: 0; list-style: none; float: left; position: relative; z-index: 2; } .ListCat li { float: left; width: 25px; padding: 0; margin-right: 2px; position: relative; line-height: 1; } .ListCat li label { display: block; border: 1px solid #56ad7c; padding: 7px 2px 0 2px; background: #56ad7c; color: #fff; cursor: pointer; font-size: 0; margin: 0; cursor: pointer; text-align: center; } .ListCat li input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ListCat li.selected label{ background: #23282c; border: 1px solid #23282c; } .ListCat li.selected:before { content: ""; position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; border-top: 10px solid #23282c; font-size: 0; top: 92%; left: 4px; } .ListCat li label i { display: block; margin-bottom: 3px; font-size: 12px; } .BcDescription { text-align: center; } /* sous-menu mise a disposition */ #BcFiltreMap .nav-tabs li.active a, .ListGamme li.selected label { background: #000010; color: #ab7d3f; border-radius: 3%; } #BcFiltreMap .nav-tabs li a { text-align: center; color: #000; text-decoration: none; } #BcFiltreMap .nav-tabs { margin-bottom: 2px; } #BcFiltreMap .tab-content { overflow: hidden; padding: 5px; } #BcFiltreMap .nav-tabs li { width: 50%; } .ListGamme { margin: 90px auto; list-style: none; column-width: 32; } .ListGamme label { float: left; width: 32%; padding: 2px; position: relative; line-height: 1; } .ListGamme li input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ListGamme li label { display: block; border: 1px solid #ab7d3f; padding: 5px 5px; background: white; color: #ab7d3f; cursor: pointer; text-align: center; overflow: hidden; } .ListGamme li img { width: 100%; height: auto !important; } /* Lliste gamme */ .BcPrix p { font-size: 16px; } .BcPrix #BcDetailsPrix { padding: 15px 0; text-align: right; } .vc_btn3.vc_btn3-size-lg { font-size: 30px; padding: 18px 25px; } /* Header */ #head { background:#181015 url(images/bg_header.jpg) no-repeat; background-size: cover; min-height:520px; text-align: center; padding-top:240px; color:white; font-family:"Open sans", Helvetica, Arial; font-weight:300; } #head.secondary { height:100px; min-height: 100px; padding-top:0px; } #head .lead { font-family:"Open sans", Helvetica, Arial; font-size:44px; margin-bottom:6px; color:white; line-height:1.15em; } #head .tagline { color:rgba(255,255,255,0.75); margin-bottom:25px; } #head .tagline a { color:#fff; } #head .btn { margin-bottom:10px;} #head .btn-default { text-shadow: none; background:transparent; color:rgba(255,255,255,.5); -webkit-box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.5); -moz-box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.5); box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.5); background: transparent; } #head .btn-default:hover, #head .btn-default:focus { color:rgba(255,255,255,.8); -webkit-box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.8); -moz-box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.8); box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,.8); background: transparent; } #head .btn-default:active, #head .btn-default.active { color:#fff; -webkit-box-shadow:inset 0px 0px 0px 3px #fff; -moz-box-shadow:inset 0px 0px 0px 3px #fff; box-shadow:inset 0px 0px 0px 3px #fff; background: transparent; } @media (max-width: 767px) { #head { min-height:420px; padding-top:160px; } #head .lead { font-size: 34px; } } /* Navbar list reset and spacing */ .navbar-nav { list-style: none; padding-left: 0; margin: 0; } .navbar-nav .nav-link { font-weight: 600; padding: 8px 12px; } .navbar-nav .nav-item + .nav-item { margin-left: 4px; } /* Autohide navbar */ .slideUp { top:-100px; } .headroom { -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /* Highlights (in jumbotron in most cases) */ .highlight { margin-top:40px; } .h-caption { text-align: center; } .h-caption i { display:block; font-size: 54px; color:#382526; margin-bottom:36px; } .h-caption h4 { color:#382526; font-size: 16px; font-weight: bold; margin-bottom:20px; } .h-body { } /* Typography */ h1 { font-size:39px; line-height: 39px; } h1, h2, h3, h4, h5, h6 { font-family:"Open sans", Helvetica, Arial; } h1, .h1, h2, .h2, h3, .h3 { margin-top:30px; } blockquote { font-style: italic; font-family: Georgia; color:#999; margin:30px 0 30px; } label { color: #777; } .thin { font-weight:300; } .page-title { margin-top:20px; font-weight:300;} .text-muted { color:#888; } .breadcrumb { background:none; padding:0; margin:30px 0 0px 0; } ul.list-spaces li{ margin-bottom:10px; } /* Helpers */ .container-full { margin: 0 auto; width: 100%; } .top-space { margin-top: 60px; } .top-margin { margin-top:20px; } img { max-width:100%; } img.pull-right { margin-left: 10px; } img.pull-left { margin-right: 10px; } #map { width:100%; height:280px; } #social { margin-top:50px; margin-bottom:50px; } #social .wrapper { width:340px; margin:0 auto; } /* Main content block */ .maincontent h1{ color:red; } .text_home { background-color: white; color: black; font-size: 3vw; /* Responsive font size */ font-weight: bold; margin: 0 auto; /* Center the text container */ padding: 1px; width: 100%; text-align: center; /* Center text */ top: 50%; /* Position text in the middle */ left: 50%; /* Position text in the middle */ mix-blend-mode: screen; /* This makes the cutout text possible */ } a {color:#000;} a:hover{color:red;} .row { margin-right:0px; margin-left: 0px; } .mc_intro { border: 1px solid #000; padding: 10px; margin-top: 10px; color:#000; } .mc_intro2 { border-top:1px ridge gray ; padding: 10px; margin-top: 20px; color:#000 ; background-image:linear-gradient(white,white); font-size: 19px; text-align: center; } .mc_row2 { border-top:1px groove red ; padding: 10px; margin-top: 20px; color:#000 ; } .mc_row3 { border-top:1px solid gray ; padding: 10px; margin-top: 20px; color:#000 ; } .mc_row4 { border-top:1px ridge gray ; padding: 10px; margin-top: 20px; color:#000 ; background-image:linear-gradient(#ffcd48,#ffcd48); font-size: 19px; text-align: center; } .mc_row4bis { border-top:1px ridge gray ; padding: 10px; margin-top: 20px; color:#000 ; background-image:linear-gradient(#ffcd48,white); font-size: 19px; text-align: center; } .mc_row5 { border-top:1px solid gray ; padding: 10px; margin-top: 20px; } .mc_row6 { border-top:1px groove red ; padding: 10px; margin-top: 20px; color:#000 ; } .mc_row7 { border:1px ridge #ffcd48 ; padding: 10px; margin: 10px; color:#000 ; font-size: 19px; text-align: center; border-radius: 15px; } .reservation_bouton a {/*bouton */ text-decoration: none; color: white; font-size: 25px; background-image:linear-gradient(#000010,#000010); border:5px solid #000010; /* bordure: taille couleur;*/ border-radius: 10px; padding: 5px; } .reservation_bouton a { text-decoration: none; font-size: 20px; /* Taille de base */ color: #ab7d3f; /* Couleur par défaut */ background: white; border: 2px solid #ab7d3f; /* Bordure par défaut */ border-radius: 10px; padding: 10px 20px; /* Espace intérieur augmenté */ transition: all 0.3s ease; /* Transition douce pour les effets */ display: inline-block; font-weight: bold; } .reservation_bouton a:hover { font-size: 25px; color: white; background: #ab7d3f; border: 5px solid #ab7d3f; border-radius: 10px; padding: 15px 25px; /* Augmentation de padding au survol */ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Ombre douce */ } .reservation_bouton { text-align: center; margin: 15px 0; /* Espacement vertical */ } .reserveslide a:hover{/*bouton */ text-decoration: none; width: 100%; height: 45px; font-size: 40px; color: white; background: red; } .reserveslide a {/*bouton */ text-decoration: none; width: 100%; color: white; font-size: 40px; background-image:linear-gradient(#ac7e40,#ab7d3f); } /* Brand CTA palette (gold & black) */ .btn-primary, .btn-primary:visited, .cta-primary { background-color: #c18a00; border-color: #c18a00; color: #111; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .cta-primary:hover, .cta-primary:focus, .cta-primary:active { background-color: #a86f00; border-color: #a86f00; color: #111; } .btn-dark, .btn-dark:visited, .cta-secondary { background-color: #111; border-color: #111; color: #fff; } .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .cta-secondary:hover, .cta-secondary:focus, .cta-secondary:active { background-color: #000; border-color: #000; color: #fff; } .btn-outline-primary { color: #c18a00; border-color: #c18a00; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: #c18a00; border-color: #c18a00; color: #fff; } /* Mobile spacing for CTA / FAQ */ @media (max-width: 576px) { .cta-wrap, .cta-row, .cta-buttons, .cta-block { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .cta-wrap .btn, .cta-row .btn, .cta-buttons .btn, .cta-block .btn { width: 100%; padding: 14px 18px; } .faq, .faq-list { padding-left: 0; padding-right: 0; } .faq .faq-item { padding: 12px 0; } } /* Font loading optimization */ @font-face { font-family: fc; font-display: swap; src: url(../fontello/font/fc.eot?61304469); src: url(../fontello/font/fc.eot?61304469#iefix) format('embedded-opentype'), url(../fontello/font/fc.woff?61304469) format('woff'), url(../fontello/font/fc.ttf?61304469) format('truetype'), url(../fontello/font/fc.svg?61304469#fc) format('svg'); font-weight: 400; font-style: normal; } /* Utility tweaks */ .menu-large{font-size:130%;} .icon-gold{color:#ab7d3f;font-size:20px;} .quote-panel{padding:2% 1% 2% 2%;background:rgba(225,255,255,.5);} /* Premium layout (ld-*) */ .ld-hero{background:linear-gradient(135deg,#f7f9fc 0%,#eef1f6 100%);padding:44px 24px;text-align:center;border-radius:14px;margin:24px auto;max-width:1180px;box-shadow:0 12px 35px rgba(0,0,0,0.08);} .ld-hero h1{font-size:2rem;font-weight:700;margin-bottom:12px;} .ld-hero .ld-sub{font-size:1.05rem;line-height:1.6;margin-bottom:18px;} .ld-badges span{display:inline-block;margin:6px 8px;padding:8px 12px;border-radius:999px;background:#111;color:#fff;font-size:.9rem;} .ld-section{max-width:1180px;margin:0 auto 32px;padding:0 18px;} .ld-section h2{font-size:1.35rem;font-weight:700;margin-bottom:14px;} .ld-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;} .ld-grid-320{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));} .ld-card{background:#fff;border:1px solid #eceff3;border-radius:12px;padding:16px 18px;box-shadow:0 10px 26px rgba(0,0,0,0.05);} .ld-card p{margin:0 0 8px;line-height:1.6;} .ld-card-inline{display:flex;gap:16px;align-items:center;box-shadow:0 10px 26px rgba(0,0,0,0.05);} .ld-card-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,0.06);padding:22px;} .ld-split-col{border-left:1px solid #eceff3;padding-left:22px;} .ld-card-ico-square{width:56px;height:56px;border-radius:14px;background:#111;display:flex;align-items:center;justify-content:center;color:#f7c240;font-size:1.4rem;} .ld-card-icon{font-size:2rem;color:#c18a00;} .ld-card-img{padding:0;overflow:hidden;} .ld-card-body{padding:16px 18px;} .ld-img-wrap{position:relative;width:100%;aspect-ratio:16/9;min-height:180px;overflow:hidden;} .ld-img-cover{width:100%;height:100%;object-fit:cover;} .ld-chip{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,0.75);color:#fff;padding:6px 10px;border-radius:999px;font-size:.9rem;letter-spacing:0.3px;} .ld-list{line-height:1.6;margin-left:18px;} .ld-section p{max-width:1100px;margin:0 auto 12px;font-size:1.02rem;line-height:1.65;} .ld-section .ld-list{max-width:1100px;margin-left:auto;margin-right:auto;} .ld-section .ld-list li{margin-bottom:10px;} .ld-emphasis{background:#f8fafc;border:1px solid #e6ebf2;border-radius:12px;padding:16px 18px;box-shadow:0 6px 18px rgba(0,0,0,0.04);} .ld-section h2{margin-top:6px;} .cta-inline{display:flex;gap:12px;justify-content:center;align-items:center;margin:16px auto 10px;flex-wrap:wrap;} .cta-inline a.btn{min-width:220px;font-weight:700;border-radius:999px;padding:12px 18px;} .cta-inline .btn-primary{background:#c18a00;border-color:#c18a00;} .cta-inline .btn-primary:hover{background:#a67300;border-color:#a67300;} .cta-inline .btn-secondary{background:#212529;border-color:#212529;color:#fff;} .cta-inline .btn-outline-dark{border-color:#212529;color:#212529;} .cta-inline .btn-outline-dark:hover{background:#212529;color:#fff;} /* FAQ */ .faq .faq-item{border-bottom:1px solid #e2e6ed;padding:2px 0;} .faq .faq-question{background:none;border:none;width:100%;text-align:left;font-weight:700;font-size:1.02rem;padding:14px 0;cursor:pointer;} .faq .faq-answer{display:none;padding:0 0 12px;color:#444;line-height:1.6;} .faq .faq-question:after{content:'+';float:right;font-weight:700;} .faq .faq-question.active:after{content:'–';} .faq-list{max-width:920px;margin:20px auto 0;} .faq-wrap{padding:60px 20px;max-width:1100px;margin:0 auto;} .reviews-block{padding:40px 10px;} .reviews-block h2{letter-spacing:0.5px;} .link-wa{color:#25d366;font-weight:700;text-decoration:none;} .link-wa:hover{color:#1eb15b;text-decoration:underline;} /* Mobile refinement for premium layout (ld-*) */ @media (max-width: 768px){ .ld-hero{padding:28px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.05);} .ld-hero h1{font-size:1.45rem;line-height:1.3;} .ld-hero .ld-sub{font-size:.98rem;line-height:1.45;} .ld-badges span{font-size:.82rem;padding:6px 10px;margin:4px 6px;} .ld-section{padding:0 12px;margin-bottom:24px;} .ld-section h2{font-size:1.18rem;} .ld-grid{grid-template-columns:1fr !important;gap:12px;} .ld-card{padding:14px !important;} .ld-card h2{font-size:1.12rem;} .ld-card h3{font-size:1.05rem;} .ld-card ol, .ld-card ul{margin-left:16px;font-size:1rem;line-height:1.5;} /* Force two-column booking/fleet cards to stack */ .ld-section .ld-card[style*="grid-template-columns"]{ display:block !important; grid-template-columns:1fr !important; padding:16px !important; } /* Avoid horizontal overflow on cards with images */ .ld-card img{height:180px;object-fit:cover;} } @media (max-width: 576px){ .ld-section{padding:0 14px;margin-bottom:22px;} .cta-inline{flex-direction:column;gap:10px;} .cta-inline a.btn{width:100%;} .faq-wrap{padding:40px 14px;} .faq .faq-question{font-size:1rem;} .ld-grid{gap:12px;} } .reserveslide{/*bouton */ text-decoration: none; width: 100%; color: white; font-size: 40px; text-align: center; border-radius: 5px; /* degré des angles*/ border:1px solid #ab7d3f; /* bordure: taille couleur;*/ padding: 30px; /* marge exterieur*/ box-shadow:0px 2px 5px black; /*ombre */ -moz-box-shadow:2px 2px 10px gray; -webkit-box-shadow:2px 2px 10px gray; } /*.bg_banniere_drivigo{ background:#181015 url("/images/banniere_drivigo.webp") no-repeat; background-size: cover; padding-top:25%; padding-bottom: 15%; max-width: 100%; height: auto; }*/ .bg_banniere_drivigo { background-image: url('/images/banniere_drivigo.webp'); background-size: cover; padding-top:25%; padding-bottom: 15%; background-position: center; height: 80vh; /* ou la hauteur souhaitée */ } /* Footer */ .footer1 { text-align: left; background: #000010; font-size: 18px; color: #FEFEFE; border-bottom: 15px solid #ab7d3f; } .footer1 a { color: #fff; } .footer1 a:hover { color: red; } .footer1 .widget-title {font-size: 23px; font-weight:bold; border-bottom: 2px solid #fff; } .footer_link { text-align: left; background: #000010; font-size: 12px; color: #FEFEFE; border-bottom: 1px solid white; } .footer_link a { color: #fff; } .footer_link a:hover { color: red; } .footer_link .widget-title { font-size: 23px; font-weight:bold; border-bottom: 2px solid #fff; } .follow-me-icons { font-size:30px; } .follow-me-icons i { margin:0 20px 10px 10px; } .footer2 { border-top: 1px solid #fff; padding-top: 10px; margin-top: 10px; color: #FEFEFE; font-size: 20px; } .footer2 a { color: #fff; } .footer2 a:hover { color: red; } .widget-simplenav { margin-left:-5px; } .widget-simplenav a{ margin:0 5px; } /* Header */ .simplenav a {padding:20px;} /* Autohide navbar */ .slideUp { top:-100px; } .headroom { -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /* Highlights (in jumbotron in most cases) */ .highlight { margin-top:40px; } .h-caption { text-align: center; } .h-caption i { display:block; font-size: 54px; color:#382526; margin-bottom:36px; } .h-caption h4 { color:#382526; font-size: 16px; font-weight: bold; margin-bottom:20px; } .h-body { } /* Typography */ h1 { font-size:39px; line-height: 39px; } h1, h2, h3, h4, h5, h6 { font-family:"Open sans", Helvetica, Arial; } h1, .h1, h2, .h2, h3, .h3 { margin-top:30px; } blockquote { font-style: italic; font-family: Georgia; color:#999; margin:30px 0 30px; } label { color: #777; } .thin { font-weight:300; } .page-title { margin-top:20px; font-weight:300;} .text-muted { color:#888; } .breadcrumb { background:none; padding:0; margin:30px 0 0px 0; } ul.list-spaces li{ margin-bottom:10px; } /* Helpers */ .container-full { margin: 0 auto; width: 100%; } .top-space { margin-top: 60px; } .top-margin { margin-top:20px; } img { max-width:100%; } img.pull-right { margin-left: 10px; } img.pull-left { margin-right: 10px; } #map { width:100%; height:280px; } #social { margin-top:50px; margin-bottom:50px; } #social .wrapper { width:340px; margin:0 auto; } /* Main content block */ .maincontent h1{ color:red; } .text_home { background-color: white; color: black; font-size: 3vw; /* Responsive font size */ font-weight: bold; margin: 0 auto; /* Center the text container */ padding: 1px; width: 100%; text-align: center; /* Center text */ top: 50%; /* Position text in the middle */ left: 50%; /* Position text in the middle */ mix-blend-mode: screen; /* This makes the cutout text possible */ } /* PLAN DE PAGE */ .color1{ color:red;} .color2{ color:#ab7d3f;} .color3{ color:#003399;} .color4{ color:#000010;} .upper{ text-transform: uppercase;} .plan_de_site { color: #000; font-size: 20px; text-align: left; margin-top: 65px; } .plan_de_site1 { color: #000; font-size: 20px; text-align: left; margin-top: 85px; } .plan-de-site a { color: #000; } .plan-de-site a:hover { color: red; } .avis{ border: 1px solid #ab7d3f; padding: 15px 15px 30px; margin : 0px 0px 30px; -webkit-background-size: cover; background-size: cover; background-color: white; color: #000010; border-radius: 10px; } .resa { border: 0px,5px groove #ab7d3f ; padding: 10px; margin-top: 20px; color:#000 ; } .fusion-column-wrapper{ text-align: center; } /* Sidebars */ .sidebar { padding-top:36px; padding-bottom:30px; } .sidebar .widget { margin-bottom:20px; } .sidebar h1, .sidebar .h1, .sidebar h2, .sidebar .h2, .sidebar h3, .sidebar .h3 { margin-top:20px; } .title, .subtitle { margin-top: 60px; margin-top: 60px; text-align: center; display: block; } .subtitle { color: #000110; } /*========== Base Accordion Styles ==========*/ .accordion-area { padding: 97px 0 67px; background-color: #f7f7f7; } .accordion-toggle { margin-bottom: 15px; } /* Titre de l'accordéon */ .toggle-title { background-color: white; color: #1e1e1e; font-size: 18px; font-weight: bold; padding: 15px; cursor: pointer; border-bottom: 1px solid rgba(233, 205, 12, 0.15); display: block; justify-content: space-between; align-items: center; transition: background-color 0.3s; } .toggle-title:hover { background-color: #ab7d3f; color: white; } .toggle-title span { transition: transform 0.3s ease-in; float: right; } /* Titre actif */ .toggle-title.active { color: #382919; margin-bottom: 10px; border-bottom: none; background-color: #ab7d3f; } /* Rotation flèche */ .toggle-title.active span { transform: rotate(90deg); } /* Contenu de l'accordéon */ .toggle-content { display: none; padding: 15px 15px 32px; background-color: #f1f1f1; border-bottom: 1px solid #ab7d3f; font-size: 18px; } .toggle-content p { line-height: 24px; } /* Style général pour la barre de navigation */ .navbar { background-color: black; /* Fond noir pour tous les écrans */ background-image: linear-gradient(black, #000010); /* Optionnel, dégradé noir */ padding-top: 20px; /* Ajout d'un peu d'espace au-dessus du menu */ padding-bottom: 20px; /* Ajout d'espace sous le menu */ } /* Bouton burger - Fond clair et visible */ .navbar-toggler { display: none; background-color: #ab7d3f; /* Couleur claire pour le bouton burger */ border: 1px solid #ab7d3f; /* Bordure dorée pour la visibilité */ border-radius: 4px; padding: 10px; } /* Afficher le bouton burger sur les petits écrans */ @media screen and (max-width: 963px) { .navbar-toggler { display: block; position: absolute; top: 10px; right: 15px; padding: 15px; background-color: #000; /* Fond clair pour le bouton burger */ border: 1px solid #ab7d3f; border-radius: 4px; cursor: pointer; z-index: 1000; } /* Effet hover sur le bouton burger */ .navbar-toggler:hover { border-color: #fff; /* Changer la couleur de la bordure au survol */ } /* Effet focus sur le bouton burger */ .navbar-toggler:focus { border-color: red; } /* Menu déroulant - texte clair */ .navbar-nav li { color: white; /* Couleur du texte clair */ font-size: 100%; text-align: center; } /* Effet hover sur les éléments du menu */ .navbar-nav li:hover { color: #ab7d3f; /* Couleur du texte au survol */ font-size: 110%; } /* Ajout d'un arrière-plan pour le menu déroulé */ .navbar-collapse { background-color: black; /* Fond noir pour le menu déroulé */ } /* Bouton de contact et autres liens avec texte clair */ .nav-link { color: white !important; /* Texte clair pour tous les liens */ } /* Effet hover sur les liens */ .nav-link:hover { color: #ab7d3f !important; /* Couleur du texte au survol pour les liens */ } } /* Styles pour les écrans entre 763px et 992px (taille ajoutée) */ @media screen and (min-width: 963px) and (max-width: 992px) { .navbar { background-color: black !important; /* Fond noir pour ces tailles d'écran */ } .navbar-nav { display: block; /* Toujours afficher les éléments du menu */ } .navbar-toggler { display: none; /* Cacher le bouton burger */ } .navbar-nav li { color: white; /* Texte clair sur fond noir */ } .navbar-nav li:hover { color: #ab7d3f; font-size: 110%; } .navbar-collapse { background-color: black; /* Fond noir pour le menu déroulé */ } .nav-link { color: white !important; } .nav-link:hover { color: #ab7d3f !important; } } /* Styles pour les grands écrans (min-width: 992px) */ @media screen and (min-width: 992px) { .navbar { background-color: black !important; /* Fond noir pour les grands écrans */ } .navbar-nav li { color: white; /* Texte clair */ } .navbar-nav li:hover { color: #ab7d3f; /* Survol des éléments du menu */ } .navbar-collapse { background-color: black !important; /* Fond noir pour le menu déroulé sur grands écrans */ } .nav-link { color: white !important; } .nav-link:hover { color: #ab7d3f !important; } } /* Pour les très grands écrans (min-width: 1200px) */ @media screen and (min-width: 1200px) { .navbar { background-color: black !important; /* Fond noir pour les très grands écrans */ } .navbar-nav li { color: white; } .navbar-nav li:hover { color: #ab7d3f; font-size: 110%; } .navbar-collapse { background-color: black !important; } .nav-link { color: white !important; } .nav-link:hover { color: #ab7d3f !important; } }