/* Polices hébergées sur le site (document 28, S7, décision D4) : Inter, Open Sans, Poppins, licence SIL OFL,
jeux latin et latin étendu. Plus de requête vers Google Fonts. */
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-400-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-400-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Open Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/opensans-400-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Open Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/opensans-400-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Polices de repli calibrées sur Arial : même encombrement, pas de décalage à l'arrivée de la police (CLS) */
@font-face {font-family: 'Inter Repli'; src: local('Arial'); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%;}
@font-face {font-family: 'Poppins Repli'; src: local('Arial'); ascent-override: 92.33%; descent-override: 30.78%; line-gap-override: 8.79%; size-adjust: 113.73%;}
@font-face {font-family: 'Open Sans Repli'; src: local('Arial'); ascent-override: 101.65%; descent-override: 27.86%; line-gap-override: 0%; size-adjust: 105.21%;}
/*** ======= // TABLE OF CONTENT // ============================
01- Google Fonts
02- General Variables
03- General Styling
03.1- Paddings
03.2- Margins
03.3- Default Colors
03.4- Container
03.5- Column Gap
03.6- Fonts Typography
03.7- Parallax Background
03.8- Background Layer
03.9- Opacity
03.10- Iframe
03.11- Image
03.12- Width
03.13- Cross Browser Compatibility
03.14- Border Radius
03.15- Play Button
03.16- Animations
03.17- Social Media
04- Header Styles
04.1- Dropdown
04.2- Side Menu
04.3- Header Search
04.4- Header Style 1
04.5- Header Style 2
04.6- Header Style 3
05- Sticky Header
05.1- Sticky Header 1
05.2- Sticky Header 2
05.3- Sticky Header 3
06- Featured Area Style 1
07- Sec Title
08- About Style 1
09- Theme Button
10- Event Style 1
11- Reasons Wrap
12- Package Style 1
13- Speakers
14- Event Grid Style 1
15- Discount Wrap
16- Blog Style 1
17- Newsletter Style 1
18- Footer Style 1
19- Footer Bottom
20- Featured Area Style 2
21- Services Style 1
22- Event Grid Style 2
23- About Style 2
24- Facts Style 1
25- Event Style 2
26- Event List Style
27- Sponsors Style 1
28- Packages Style 2
29- Newsletter Style 2
30- Blog Style 2
31- Blog List
32- Testimonials Style 1
33- About Me
34- About Me Counter
35- Services Style 2
36- About Style 3
37- Features Style
38- How It Works Style
39- Testimonials Style 2
40- Filter Links
41- Gallery Style 1
42- Contact Form With Map
43- Sponsors Style 2
44- Footer Style 2
45- Page Title
46- Gallery Style 2
47- Pagination Style
48- 404 Error
49- Facts Style 2
50- Contact Style
51- Faq Style
52- Products Style
53- Product List Style
54- Sidebar
55- Product Detail
55.1- Product Detail Meta
56- Product Cart
57- Product Checkout
58- Blog Detail
59- Event Detail
60- Speaker Detail
61- Login Popup
62- Content Elements
62.1- Dividers
62.2- List Styles
62.3- Alert
62.4- Toggles Style 2
62.5- Toggles Style 3
62.6- Tabs
62.7- Progress
62.8- Buttons
62.9- Gallery Carousel
62.10- Gallery Carousel 2
62.11- Carousel Dots
62.12- Video
62.13- Banners
===================================================== ***/
/*=== Google Fonts ===*/
/* Etape B (6 nov. 2026) : les deux @import (Open Sans, Poppins en 18 graisses, & qui cassait display=swap)
sont remplaces par un seul dans resources/views/layout/front.blade.php :
Open Sans 400/600/700/800, Inter 400/500/600/700, Poppins 400/500/600/700, display=swap. */
/*=== General Variables ===*/
:root {
/*--color1: #121a37;*/
--color1: #070b1b;
--color2: #ff5e15;
--color3: #ffa800;
--color4: #21a010;
--color5: #0a1024;
--color6: #00192a;
--color7: #050918;
--color8: #ffc600;
--color9: #c40172;
--color10: #990fff;
--color11: #ff7500;
--color12: #0072b1;
--color13: #55a61d;
--color14: #e90133;
--color15: #02728e;
--color16: #1ec8bf;
--color17: #ff4747;
--color18: #ffe27a;
--color19: #1f5abc;
/*--color20: #d2eaff;*/
--color20: #970733;
--transition: all 0.2s cubic-bezier(0.19, 0.68, 0.49, 1.21);
--transition2: all .3s linear;
--pill: 2.5rem;
--round: 50%;
--curve: 3px;
--full: 100%;
}
.bg-color1{background-color:var(--theme-color);}
.bg-color2{background-color:var(--color2);}
.bg-color3{background-color:var(--color3);}
.bg-color4{background-color:var(--color4);}
.bg-color5{background-color:#00243d;}
.bg-color6{background-color:var(--color6);}
.bg-color7{background-color:var(--color7);}
.bg-color8{background-color:var(--color8);}
.bg-color9{background-color:var(--color9);}
.bg-color10{background-color:var(--color10);}
.bg-color11{background-color:var(--color11);}
.bg-color12{background-color:var(--color12);}
.bg-color13{background-color:var(--color13);}
.bg-color14{background-color:var(--color14);}
.bg-color15{background-color:var(--color15);}
.bg-color16{background-color:var(--color16);}
.bg-color17{background-color:var(--color17);}
.bg-color18{background-color:var(--color18);}
.bg-color19{background-color:var(--color19);}
.bg-color20{background-color:var(--color20);}
.text-color1{color:var(--color1);}
.text-color2{color:var(--color2);}
.text-color3{color:var(--color3);}
.text-color4{color:var(--color4);}
.text-color5{color:var(--color5);}
.text-color6{color:var(--color6);}
.text-color7{color:var(--color7);}
.text-color8{color:var(--color8);}
.text-color9{color:var(--color9);}
.text-color10{color:var(--color10);}
.text-color11{color:var(--color11);}
.text-color12{color:var(--color12);}
.text-color13{color:var(--color13);}
.text-color14{color:var(--color14);}
.text-color15{color:var(--color15);}
.text-color16{color:var(--color16);}
.text-color17{color:var(--color17);}
.text-color18{color:var(--color18);}
.text-color19{color:var(--color19);}
.text-color20{color:var(--color20);}
strong {font-weight: 600;}
/*=== General Styling ===*/
body,
html {overflow-x: hidden;}
body {
margin: 0;
font-family: Open Sans;
position: relative;
width: 100%;
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Open Sans;
color: #222;
font-weight: 600;
}
p {
font-family: Open Sans;
color: #555555;
line-height: 1.5rem;
font-size: .9rem;
}
ul li,
ol li {
font-family: Open Sans;
color: #555555;
font-size: 0.875rem;
line-height: 1.5rem;
}
a {color: inherit;}
a:hover,
a:focus,
ins {
text-decoration:none;
outline:none;
}
/* Retour du 10 nov. : la couleur de survol générique ne s'impose plus aux composants (elle était en !important et
rendait illisibles les liens et icônes sur fond foncé). Priorité minimale : elle s'applique seulement aux liens sans couleur propre. */
:where(a):hover,
:where(a):focus,
:where(ins) {
color: #00487D;
}
ul li:hover{color:#00487D;}
/* Fond sombre (pied de page, bannières de page, blocs .tp-on-dark) : le bleu clair #95cbed y reste lisible. */
.page-top-wrap .breadcrumb-item.active, .page-top-wrap .breadcrumb a:hover, .page-top-wrap .breadcrumb a:focus, footer a:hover, footer a:focus, footer ul li:hover, .tp-pied-bas a:hover, .tp-pied-bas a:focus, .tp-on-dark a:hover, .tp-on-dark a:focus {color: #95cbed !important;}
input,
textarea,
select,
button {border: 0;}
button,
input[type="submit"],
.fileContainer,
input[type="file"] {cursor: pointer;}
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus,
.form-wrp fieldset p a:focus,
.page-link:focus,
.btn.focus,
.btn:focus,
.bootstrap-select .dropdown-toggle:focus {
border-color: transparent;
outline: none !important;
-webkit-box-shadow: none !important;
-ms-box-shadow: none !important;
-o-box-shadow: none !important;
box-shadow: none !important;
}
textarea {resize: none;}
main,
section,
footer {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 100%;
position:relative;
width:100%;
}
/*=== Paddings ===*/
.pt-10 {padding-top: 0.625rem;}
.pb-10 {padding-bottom: 0.625rem;}
.pt-20 {padding-top: 1.25rem;}
.pb-20 {padding-bottom: 1.25rem;}
.pt-30 {padding-top: 1.875rem;}
.pb-30 {padding-bottom: 1.875rem;}
.pt-40 {padding-top: 2.5rem;}
.pb-40 {padding-bottom: 2.5rem;}
.pt-50 {padding-top: 3.125rem;}
.pb-50 {padding-bottom: 3.125rem;}
.pt-55 {padding-top: 3.4375rem;}
.pb-55 {padding-bottom: 3.4375rem;}
.pt-60 {padding-top: 3.75rem;}
.pb-60 {padding-bottom: 3.75rem;}
.pt-70 {padding-top: 4.375rem;}
.pb-70 {padding-bottom: 4.375rem;}
.px-70 {padding: 0 4.375rem;}
.pt-80 {padding-top: 5rem;}
.pb-80 {padding-bottom: 5rem;}
.pt-90 {padding-top:5.625rem;}
.pb-90 {padding-bottom: 5.625rem;}
.pt-100 {padding-top: 6.25rem;}
.pb-100 {padding-bottom: 6.25rem;}
.pt-110 {padding-top: 6.875rem;}
.pb-110 {padding-bottom: 6.875rem;}
.pt-120 {padding-top: 7.5rem;}
.pb-120 {padding-bottom: 7.5rem;}
.pt-130 {padding-top: 8.125rem;}
.pb-130 {padding-bottom: 8.125rem;}
.pt-140 {padding-top: 8.75rem;}
.pb-140 {padding-bottom: 8.75rem;}
.pt-150 {padding-top: 9.375rem;}
.pb-150 {padding-bottom: 9.375rem;}
.pt-155 {padding-top: 9.6875rem;}
.pb-155 {padding-bottom: 9.6875rem;}
.pt-160 {padding-top: 10rem;}
.pb-160 {padding-bottom: 10rem;}
.pt-170 {padding-top: 10.625rem;}
.pb-170 {padding-bottom: 10.625rem;}
.pt-180 {padding-top: 11.25rem;}
.pb-180 {padding-bottom: 11.25rem;}
.pt-195 {padding-top: 12.1875rem;}
.pb-195 {padding-bottom: 12.1875rem;}
.pt-210 {padding-top: 13.125rem;}
.pb-210 {padding-bottom: 13.125rem;}
.pt-240 {padding-top: 15rem;}
.pb-240 {padding-bottom: 15rem;}
.pt-280 {padding-top: 17.5rem;}
.pb-280 {padding-bottom: 17.5rem;}
.pt-15{padding-top: 15px;}
.pb-15{padding-bottom: 15px;}
/*=== Margins ===*/
.mt-10 {margin-top: 0.625rem;}
.mb-10 {margin-bottom: 0.625rem;}
.mt-15 {margin-top: 0.9375rem;}
.mb-15 {margin-bottom: 0.9375rem;}
.mt-20 {margin-top: 1.25rem;}
.mb-20 {margin-bottom: 1.25rem;}
.mt-25 {margin-top: 1.5625rem;}
.mb-25 {margin-bottom: 1.5625rem;}
.mt-30 {margin-top: 1.875rem;}
.mb-30 {margin-bottom: 1.875rem;}
.mt-35 {margin-top: 2.1875rem;}
.mb-35 {margin-bottom: 2.1875rem;}
.mt-40 {margin-top: 2.5rem;}
.mb-40 {margin-bottom: 2.5rem;}
.mt-45 {margin-top: 2.8125rem;}
.mb-45 {margin-bottom: 2.8125rem;}
.mt-50 {margin-top: 3.125rem;}
.mb-50 {margin-bottom: 3.125rem;}
.mt-55 {margin-top: 3.4375rem;}
.mb-55 {margin-bottom: 3.4375rem;}
.mt-60 {margin-top: 3.75rem;}
.mb-60 {margin-bottom: 3.75rem;}
.mt-65 {margin-top: 4.0625rem;}
.mb-65 {margin-bottom: 4.0625rem;}
.mt-70 {margin-top: 4.375rem;}
.mb-70 {margin-bottom: 4.375rem;}
.mt-80 {margin-top: 5rem;}
.mb-80 {margin-bottom: 5rem;}
.mt-90 {margin-top: 5.625rem;}
.mb-90 {margin-bottom: 5.625rem;}
.mt-100 {margin-top: 6.25rem;}
.mb-100 {margin-bottom: 6.25rem;}
.mt-110 {margin-top: 6.875rem;}
.mb-110 {margin-bottom: 6.875rem;}
.mt-120 {margin-top: 7.5rem;}
.mb-120 {margin-bottom: 7.5rem;}
/*=== Overlap ===*/
.overlap-99 {
position: relative;
z-index: 1;
}
.overlap-99 {margin-bottom: -6.24375rem;}
/*=== Default Colors ===*/
.dark-bg {background-color: #00000b;}
.dark-bg2 {background-color: #171717;}
.gray-bg {background-color: #f6f7fb;}
.gray-bg2 {background-color: #f2f2f2;}
/*=== Container ===*/
.container {
padding: 0;
max-width: 73.125rem;
}
/*=== Column Gap ===*/
.mrg {margin: 0;}
.mrg div[class^="col"] {padding: 0;}
.mrg2 {margin: 0 -1px;}
.mrg2 div[class^="col"] {padding: 0 1px;}
.mrg5 {margin: 0 -0.15625rem;}
.mrg5 div[class^="col"] {padding: 0 0.15625rem;}
.mrg6 {margin: 0 -0.1875rem;}
.mrg6 div[class^="col"] {padding: 0 0.1875rem;}
.mrg10 {margin: 0 -0.3125rem;}
.mrg10 div[class^="col"] {padding: 0 0.3125rem;}
.mrg15 {margin: 0 -0.46875rem;}
.mrg15 div[class^="col"] {padding: 0 0.46875rem;}
.mrg20 {margin: 0 -0.625rem;}
.mrg20 div[class^="col"] {padding: 0 0.625rem;}
.mrg40 {margin: 0 -1.25rem;}
.mrg40 div[class^="col"] {padding: 0 1.25rem;}
.mrg45 {margin: 0 -1.40625rem;}
.mrg45 div[class^="col"] {padding: 0 1.40625rem;}
.mrg50 {margin: 0 -1.5625rem;}
.mrg50 div[class^="col"] {padding: 0 1.5625rem;}
.mrg60 {margin: 0 -1.875rem;}
.mrg60 div[class^="col"] {padding: 0 1.875rem;}
.mrg70 {margin: 0 -2.1875rem;}
.mrg70 div[class^="col"] {padding: 0 2.1875rem;}
.slick-slide div[class^="col"] {
flex: 0 0 100%;
max-width: 100%;
}
/*=== Fonts Typography ===*/
.font-weight-hairline {font-weight: 100;}
.font-weight-thin {font-weight: 200;}
.font-weight-medium {font-weight: 500;}
.font-weight-semibold {font-weight: 600;}
.font-weight-extrabold {font-weight: 800;}
.font-weight-black {font-weight: 900;}
.font-style-italic {font-style: italic;}
.font-style-normal {font-style: normal;}
/*=== Parallax Background ===*/
.fixed-bg,
.parallax-bg {
background-position: center;
height:100%;
width:100%;
margin:0;
position:absolute;
left:0;
top:0;
z-index:-2;
}
.fixed-bg {
background-attachment: scroll;
background-size:cover;
}
.parallax-bg {
background-attachment: fixed;
background-size:contain;
}
.back-post-cntrbtm-norpet {
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
}
.back-post-cntrbtm {background-position: center bottom;}
.back-post-lftcntr {background-position: left center;}
.fixed-bg.patern-bg,
.parallax-bg.patern-bg {background-size: initial;}
.fixed-bg.bg-norepeate {
background-size: initial;
background-repeat: no-repeat;
}
.back-blend-soft-light {background-blend-mode: soft-light;}
.back-blend-difference {background-blend-mode: difference;}
.back-blend-screen {background-blend-mode: screen;}
.back-blend-multiply {background-blend-mode: multiply;}
.back-blend-subtract {background-blend-mode: subtract;}
.paralx-70 .fixed-bg {height: 70%;}
.h-tem + .particles-js {max-height: 35.375rem;}
.h-tst + .particles-js {max-height: 34.6875rem;}
/*=== Background Layer ===*/
.black-layer:before,
.white-layer:before,
.gray-layer:before,
.dark-layer:before,
.dark-layer2:before,
.dark-layer3:before,
.blue-layer:before,
.thm-layer:before {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.black-layer:before {background-color: #000000;}
.white-layer:before {background-color:#ffffff;}
.gray-layer:before {background-color: #f6f7fb}
.dark-layer:before {background-color: #382232;}
.dark-layer2:before {background-color: #00000b;}
.dark-layer3:before {background-color: var(--color7);}
.blue-layer:before {background-color: var(--color1);}
.black-layer.paralx-70:before,
.white-layer.paralx-70:before,
.gray-layer.paralx-70:before,
.dark-layer.paralx-70:before,
.dark-layer2.paralx-70:before,
.blue-layer.paralx-70:before,
.thm-layer.paralx-70:before {height: 70%;}
/*=== Opacity ===*/
.opc1:before {opacity: .1;}
.opc15:before {opacity: .15;}
.opc2:before {opacity: .2;}
.opc25:before {opacity: .25;}
.opc3:before {opacity: .3;}
.opc35:before {opacity: .35;}
.opc4:before {opacity: .4;}
.opc45:before {opacity: .45;}
.opc5:before {opacity: .5;}
.opc55:before {opacity: .55;}
.opc6:before {opacity: .6;}
.opc65:before {opacity: .65;}
.opc7:before {opacity: .7;}
.opc75:before {opacity: .75;}
.opc8:before {opacity: .8;}
.opc85:before {opacity: .85;}
.opc9:before {opacity: .9;}
.opc95:before {opacity: .95;}
.opc97:before {opacity: .97;}
.opc99:before {opacity: .99;}
/*=== Iframe ===*/
iframe {
border: 0;
width: 100%;
}
/*=== Image ===*/
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
/*=== Width ===*/
.wdth5 {width: 5%;}
.wdth10 {width: 10%;}
.wdth15 {width: 15%;}
.wdth20 {width: 20%;}
.wdth25 {width: 25%;}
.wdth30 {width: 30%;}
.wdth35 {width: 35%;}
.wdth40 {width: 40%;}
.wdth45 {width: 45%;}
.wdth50 {width: 50%;}
.wdth55 {width: 55%;}
.wdth60 {width: 60%;}
.wdth65 {width: 65%;}
.wdth70 {width: 70%;}
.wdth75 {width: 75%;}
.wdth80 {width: 80%;}
.wdth85 {width: 85%;}
.wdth90 {width: 90%;}
.wdth95 {width: 95%;}
.wdth100 {width: 100%;}
.wow {visibility: hidden;}
/*=== Cross Browser Compatibility ===*/
i,
a,
img,
input,
button,
textarea,
:before,
:after,
label,
span,
.proj-info,
.toggle-item > h4,
.serv-box-inner > *,
.rsnp-mnu,
.sticky-menu
{
-webkit-transition: var(--transition2);
-ms-transition: var(--transition2);
-o-transition: var(--transition2);
transition: var(--transition2);
}
nav ul li,
.team-social,
.shop-img > a
{
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}
a i,
button i {
-webkit-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/*=== Border Radius ===*/
.brd-rd20
{
-webkit-border-radius: 1.25rem;
border-radius: 1.25rem;
}
.brd-rd10
{
-webkit-border-radius: 0.625rem;
border-radius: 0.625rem;
}
.brd-rd5,
.serv-box2,
.solutions-wrap img,
.post-img,
.proj-thumb,
.about-image > img,
.post-detail > img,
.widget-video-box > a,
.post-detail-gallery-video-box > img,
.comment,
.solutions-list > li > i,
.serv-detail-desc a,
.detail-gal a,
blockquote,
.shop-img,
.shop-img > a,
.simple-btn,
.white-btn,
.contact-info-wrap,
.contact-map
{
-webkit-border-radius: 0.3125rem;
border-radius: 0.3125rem;
}
.brd-rd3
{
-webkit-border-radius: 0.1875rem;
border-radius: 0.1875rem;
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {width: 100%;}
.dropdown-menu {
border: 0;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.15);
-ms-box-shadow: 0 0 10px rgba(0,0,0,.15);
-o-box-shadow: 0 0 10px rgba(0,0,0,.15);
box-shadow: 0 0 10px rgba(0,0,0,.15);
padding: 0;
}
.bootstrap-select .dropdown-menu li {line-height: initial;}
.bootstrap-select .dropdown-menu li:nth-child(2n) {background-color: #f5f5f5;}
.bootstrap-select .dropdown-menu li a {padding: 6px 1.5rem;}
.bootstrap-select .dropdown-menu li a.dropdown-item.active,
.bootstrap-select .dropdown-menu li a.dropdown-item:active,
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {color: #fff !important;}
/*=== Particles ===*/
.particles-js,
.particles-js2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/*=== Animations ===*/
@-webkit-keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@-o-keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes slide-animation {
0% {
-webkit-transform: rotateX(0deg) translateY(0px);
-ms-transform: rotateX(0deg) translateY(0px);
-o-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px); }
50% {
-webkit-transform: rotateX(0deg) translateY(15px);
-ms-transform: rotateX(0deg) translateY(15px);
-o-transform: rotateX(0deg) translateY(15px);
transform: rotateX(0deg) translateY(15px); }
100% {
-webkit-transform: rotateX(0deg) translateY(0px);
-ms-transform: rotateX(0deg) translateY(0px);
-o-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px); }
}
@-webkit-keyframes slide-animation {
0% {
-webkit-transform: rotateX(0deg) translateY(0px);
-ms-transform: rotateX(0deg) translateY(0px);
-o-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px); }
50% {
-webkit-transform: rotateX(0deg) translateY(-10px);
-ms-transform: rotateX(0deg) translateY(-10px);
-o-transform: rotateX(0deg) translateY(-10px);
transform: rotateX(0deg) translateY(-10px); }
100% {
-webkit-transform: rotateX(0deg) translateY(0px);
-ms-transform: rotateX(0deg) translateY(0px);
-o-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
}
.slide-animation {
-webkit-animation: 5s slide-animation infinite;
-ms-animation: 5s slide-animation infinite;
-o-animation: 5s slide-animation infinite;
animation: 5s slide-animation infinite;
}
/*=== Pulse Animation ===*/
.spinner:before,
.spinner:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-top: -4.0625rem;
margin-left: -4.0625rem;
background-color: inherit;
-webkit-animation: pluse 2s linear infinite;
-ms-animation: pluse 2s linear infinite;
-o-animation: pluse 2s linear infinite;
animation: pluse 2s linear infinite;
width: 8.125rem;
height: 8.125rem;
-webkit-border-radius: inherit;
border-radius: inherit;
opacity: 0;
z-index: -2;
}
.spinner:after {
-webkit-animation: pluse 2s linear 2.3s infinite;
-ms-animation: pluse 2s linear 2.3s infinite;
-o-animation: pluse 2s linear 2.3s infinite;
animation: pluse 2s linear 2.3s infinite;
-webkit-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes pluse {
0% {
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
}
@-ms-keyframes pluse {
0% {
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
}
@-o-keyframes pluse {
0% {
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
}
@keyframes pluse {
0% {
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
}
/*=== Zoom Animation ===*/
.zoom-anim {
-webkit-animation: zoom 8s linear infinite;
-ms-animation: zoom 8s linear infinite;
-o-animation: zoom 8s linear infinite;
animation: zoom 8s linear infinite;
}
@-webkit-keyframes zoom {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes zoom {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes zoom {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoom {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
/*=== Blob Animation ===*/
@-webkit-keyframes blob {
0%, 100% {
-webkit-border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
}
25% {
-webkit-border-radius: 47% 53% 44% 56% / 53% 70% 30% 47%;
border-radius: 47% 53% 44% 56% / 53% 70% 30% 47%;
}
50% {
-webkit-border-radius: 30% 47% 53% 70% / 44% 56% 47% 53%;
border-radius: 30% 47% 53% 70% / 44% 56% 47% 53%;
}
75% {
-webkit-border-radius: 53% 70% 30% 47% / 47% 53% 44% 56%;
border-radius: 53% 70% 30% 47% / 47% 53% 44% 56%;
}
}
@-ms-keyframes blob {
0%, 100% {
-webkit-border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
}
25% {
-webkit-border-radius: 47% 53% 44% 56% / 53% 70% 30% 47%;
border-radius: 47% 53% 44% 56% / 53% 70% 30% 47%;
}
50% {
-webkit-border-radius: 30% 47% 53% 70% / 44% 56% 47% 53%;
border-radius: 30% 47% 53% 70% / 44% 56% 47% 53%;
}
75% {
-webkit-border-radius: 53% 70% 30% 47% / 47% 53% 44% 56%;
border-radius: 53% 70% 30% 47% / 47% 53% 44% 56%;
}
}
@-o-keyframes blob {
0%, 100% {
-webkit-border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
}
25% {
-webkit-border-radius: 47% 53% 44% 56% / 53% 70% 30% 47%;
border-radius: 47% 53% 44% 56% / 53% 70% 30% 47%;
}
50% {
-webkit-border-radius: 30% 47% 53% 70% / 44% 56% 47% 53%;
border-radius: 30% 47% 53% 70% / 44% 56% 47% 53%;
}
75% {
-webkit-border-radius: 53% 70% 30% 47% / 47% 53% 44% 56%;
border-radius: 53% 70% 30% 47% / 47% 53% 44% 56%;
}
}
@keyframes blob {
0%, 100% {
-webkit-border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
}
25% {
-webkit-border-radius: 47% 53% 44% 56% / 53% 70% 30% 47%;
border-radius: 47% 53% 44% 56% / 53% 70% 30% 47%;
}
50% {
-webkit-border-radius: 30% 47% 53% 70% / 44% 56% 47% 53%;
border-radius: 30% 47% 53% 70% / 44% 56% 47% 53%;
}
75% {
-webkit-border-radius: 53% 70% 30% 47% / 47% 53% 44% 56%;
border-radius: 53% 70% 30% 47% / 47% 53% 44% 56%;
}
}
/*=== Blob 2 Animation ===*/
@-webkit-keyframes blob2 {
0%, 100% {
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
25% {
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
50% {
-webkit-border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
}
75% {
-webkit-border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
}
}
@-ms-keyframes blob2 {
0%, 100% {
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
25% {
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
50% {
-webkit-border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
}
75% {
-webkit-border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
}
}
@-o-keyframes blob2 {
0%, 100% {
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
25% {
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
50% {
-webkit-border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
}
75% {
-webkit-border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
}
}
@keyframes blob2 {
0%, 100% {
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
25% {
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
50% {
-webkit-border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
}
75% {
-webkit-border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
}
}
/*=== Blob 3 Animation ===*/
@-webkit-keyframes blob3 {
0%, 100% {
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
25% {
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
50% {
-webkit-border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
}
75% {
-webkit-border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
}
}
@-ms-keyframes blob3 {
0%, 100% {
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
25% {
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
50% {
-webkit-border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
}
75% {
-webkit-border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
}
}
@-o-keyframes blob3 {
0%, 100% {
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
25% {
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
50% {
-webkit-border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
}
75% {
-webkit-border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
}
}
@keyframes blob3 {
0%, 100% {
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
25% {
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
50% {
-webkit-border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
border-radius: 45% 45% 55% 35% / 65% 30% 70% 30%;
}
75% {
-webkit-border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
border-radius: 55% 35% 45% 45% / 70% 30% 65% 30%;
}
}
/*=== Slick Arrow ===*/
.slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-arrow {
position: absolute;
right: 0;
/*top: -6.5rem;*/
top: -4.7rem;
background-color: transparent;
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
color: #fff;
width: 4.4375rem;
/*width: 3.4375rem;
height: 3.125rem;*/
height: 2.5em;
z-index: 1;
}
.slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-arrow:hover,
.slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-arrow:focus {color: #fff;}
.slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-arrow:before {
content: "";
top: 0;
right: 0;
left: 0;
bottom: 0;
/* -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.1);
-ms-box-shadow: 0 3px 7px rgba(0,0,0,.1);
-o-box-shadow: 0 3px 7px rgba(0,0,0,.1);
box-shadow: 0 3px 7px rgba(0,0,0,.1);
-webkit-border-radius: inherit;
border-radius: inherit;
background-color: #fff;*/
position: absolute;
z-index: -1;
}
.slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-prev {
right: 22.75%;
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
font-size: 20px;
}
.slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-next {right: 19.3%; font-size: 20px;}
.container .slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-prev {/*right: 4.0625rem;*/right: 5.0625rem;}
.container .slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-next {right: 0;}
.slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-prev:hover {
-webkit-animation: 2s linear blob3 infinite;
-ms-animation: 2s linear blob3 infinite;
-o-animation: 2s linear blob3 infinite;
animation: 2s linear blob3 infinite;
-webkit-border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
border-radius: 70% 30% 65% 30% / 55% 35% 45% 45%;
}
.slick-slider:not(.feat-caro):not(.shop-detail-nav-caro) > button.slick-next:hover {
-webkit-animation: 2s linear blob2 infinite;
-ms-animation: 2s linear blob2 infinite;
-o-animation: 2s linear blob2 infinite;
animation: 2s linear blob2 infinite;
-webkit-border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
border-radius: 65% 30% 70% 30% / 45% 45% 55% 35%;
}
/*=== Line Animations ===*/
.lines {
position: absolute;
top: 0;
left: 6.25rem;
right: 6.25rem;
height: 100%;
margin: auto;
z-index: -2;
}
.lines .line {
position: absolute;
width: 1px;
height: 100%;
top: 0;
background: rgba(18,26,55,.1);
overflow: hidden;
}
.lines .line:nth-child(1) {left: 0;}
.lines .line:nth-child(2) {left: 10%;}
.lines .line:nth-child(3) {left: 20%;}
.lines .line:nth-child(4) {left: 30%;}
.lines .line:nth-child(5) {left: 40%;}
.lines .line:nth-child(6) {right: 50%;}
.lines .line:nth-child(7) {right: 40%;}
.lines .line:nth-child(8) {right: 30%;}
.lines .line:nth-child(9) {right: 20%;}
.lines .line:nth-child(10) {right: 10%;}
.lines .line:nth-child(11) {right: 0%;}
/*=== Social Media ===*/
.facebook,
.facebook-hvr:hover,
.facebook-hvr:focus {
background-color: #3b5999;
border-color: #3b5999;
}
.twitter,
.twitter-hvr:hover,
.twitter-hvr:focus {
background-color: #55acee;
border-color: #55acee;
}
.google,
.google-hvr:hover,
.google-hvr:focus {
background-color: #dd4b39;
border-color: #dd4b39;
}
.pinterest,
.pinterest-hvr:hover,
.pinterest-hvr:focus {
background-color: #bd081c;
border-color: #bd081c;
}
.linkedin,
.linkedin-hvr:hover,
.linkedin-hvr:focus {
background-color: #0077B5;
border-color: #0077B5;
}
.youtube,
.youtube-hvr:hover,
.youtube-hvr:focus {
background-color: #cd201f;
border-color: #cd201f;
}
.instagram,
.instagram-hvr:hover,
.instagram-hvr:focus {
background-color: #e4405f;
border-color: #e4405f;
}
.vimeo,
.vimeo-hvr:hover,
.vimeo-hvr:focus {
background-color: #8cbe0b;
border-color: #8cbe0b;
}
.skype,
.skype-hvr:hover,
.skype-hvr:focus {
background-color: #00AFF0;
border-color: #00AFF0;
}
.rss,
.rss-hvr:hover,
.rss-hvr:focus {
background-color: #f26522;
border-color: #f26522;
}
.facebook-clr,
.facebook:hover,
.facebook:focus {color: #3b5999;}
.twitter-clr,
.twitter:hover,
.twitter:focus {color: #55acee;}
.google-clr,
.google:hover,
.google:focus {color: #dd4b39;}
.pinterest-clr,
.pinterest:hover,
.pinterest:focus {color: #bd081c;}
.linkedin-clr,
.linkedin:hover,
.linkedin:focus {color: #0077B5;}
.youtube-clr,
.youtube:hover,
.youtube:focus {color: #cd201f;}
.instagram-clr,
.instagram:hover,
.instagram:focus {color: #e4405f;}
.vimeo-clr,
.vimeo:hover,
.vimeo:focus {color: #8cbe0b;}
.skype-clr,
.skype:hover,
.skype:focus {color: #00AFF0;}
.rss-clr,
.rss:hover,
.rss:focus {color: #f26522;}
/*===== Theme Style =====*/
/*===== Header Styles =====*/
header {
position: relative;
width: 100%;
z-index: 9999;
}
nav ul li {
font-family: Poppins;
font-weight: 600;
position: relative;
font-size: 0.875rem;
text-transform: initial;
}
nav ul li a {
display: block;
position: relative;
}
nav > div > ul > li {
color: #fff;
margin-right: 0.5rem;
line-height: 3.875rem;
font-size: 0.8rem;
text-transform: uppercase;
font-weight: normal;
}
.header-right-btns > a {
color: #fff;
font-size: 1.125rem;
display: inline-block;
margin-left: .35rem;
}
.topbar-info-list > li i {margin-right: 10px;}
.topbar {padding: 1rem 0;}
.bg-color1 .topbar-info-list > li,
.bg-color5 .topbar-info-list > li {color: #d5d5d5;}
.topbar-info-list > li:not(:first-child) {margin-left: 2.0625rem;}
.topbar-links > li {
font-weight: 600;
position: relative;
font-size: 0.8125rem;
/* color: #d5d5d5;*/
color: #ffffff;
}
.topbar-links > li:not(:first-child) {
margin-left: 1rem;
padding-left: 1.0625rem;
}
.topbar-links > li:not(:first-child):before {
content: "I";
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.logo-info-bar-inner {padding: 1.5625rem 0 3.4375rem;}
.logo {display: inline-block;}
.logo + .social-links,
.call-us + .add-cart {margin-left: 9.375rem;}
.social-links > a {
display: inline-block;
font-size: .9rem;
color: #444;
line-height: 2.5rem;
width: 2.5rem;
text-align: center;
height: 2.5rem;
border-radius: 50%;
background-color: #ecedef;
}
.social-links > a:not(:first-child) {margin-left: 5px;}
.social-links > a:hover,
.social-links > a:focus {color: #fff;}
.call-us {
position: relative;
padding-left: 2.9rem;
}
.call-us > i {
font-size: 2.1875rem;
position: absolute;
left: 0;
/*top: 0;
position: absolute;
left: 0;
line-height: 2.5rem;
width: 2.5rem;
text-align: center;
color: #fff;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 2.5rem;*/
}
.call-us > span {
display: block;
color: #777;
font-size: 0.875rem;
}
.call-us > strong {
font-size: 1.125rem;
color: var(--color1);
font-family: Poppins;
}
.add-cart > a {
position: relative;
display: inline-block;
padding-left: 3.125rem;
color: var(--color1);
font-weight: 600;
font-family: Poppins;
font-size: 0.875rem;
}
.add-cart > a i {
position: absolute;
left: 0;
line-height: 2.5rem;
width: 2.5rem;
text-align: center;
color: #fff;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 2.5rem;
}
.add-cart > a span {
font-size: 0.8125rem;
color: #777;
font-weight: 400;
font-family: Open Sans;
}
.menu-wrap {
margin: -1.9375rem 0;
z-index: 1;
position: relative;
}
nav {
-webkit-border-radius: 5px;
border-radius: 5px;
padding-left: 1.5625rem;
}
.header-right-btns > a.get-quote {
display: block;
line-height: 3.875rem;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
font-size: 0.875rem;
padding: 0 1rem;
background-color: rgba(0,0,0,.3);
position: relative;
z-index: 1;
overflow: hidden;
}
.header-right-btns > a.get-quote:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 80%;
bottom: 0;
background-color: #000;
opacity: 0;
z-index: -1;
}
.header-right-btns > a.get-quote:hover:before,
.header-right-btns > a.get-quote:focus:before {
right: 0;
opacity: .3;
}
.header-right-btns > a.get-quote i {margin: 0 8px;}
.header-right-btns > a.get-quote:hover,
.header-right-btns > a.get-quote:focus,
.header-right-btns > a.get-quote:hover i,
.header-right-btns > a.get-quote:focus i {color: #fff;}
/*=== Header Style 2 ===*/
header.style2 .logo-info-bar-inner {padding-bottom: 1.5625rem;}
header.style2 .menu-wrap {margin: 0;}
header.style2 .menu-wrap nav {background-color: #970733;}
header.style2 {margin-bottom: -10.3rem;}
header.style2 .social-links > a {
color: #fff;
background-color: rgba(255, 255, 255, .15);
}
header.style2 .call-us > span {color: #d5d5d5;}
header.style2 .call-us > strong,
header.style2 .add-cart > a {color: #fff;}
header.style2 .add-cart > a span {color: inherit;}
header.style2 .header-right-btns > a.get-quote:hover,
header.style2 .header-right-btns > a.get-quote:focus {background-color: #970733;}
/*=== Header Style 3 ===*/
header.style3 nav ul li:hover > a,
header.style3 nav ul li.active > a,
header.style3 nav ul li > a:focus {color: var(--color1);}
header.style3 .header-right-btns > a.get-quote {background-color: rgba(255, 255, 255, .15)}
header.style3 .header-right-btns > a.get-quote:hover,
header.style3 .header-right-btns > a.get-quote:focus {background-color: #1a1a1a;}
/*=== Dropdown ===*/
nav > div > ul > li.menu-item-has-children > a {padding-right: 0.8rem;}
nav > div > ul > li.menu-item-has-children > a::before {
content: "\f107";
font-family: "Font Awesome 5 Free";
position: absolute;
right: 0;
top: 0;
color: inherit;
font-weight: 700;
}
nav > div ul ul {
position: absolute;
left: 0;
top: 100%;
min-width: 15rem;
line-height: initial;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
-ms-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
-o-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
}
nav > div ul ul ul {
top: 0;
left: 100%;
}
nav > div ul ul ul:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 20%;
width: 0.375rem;
z-index: 1;
}
nav > div ul ul li {
font-size: 0.875rem;
font-weight: 400;
margin-top: 20px;
opacity: 0;
visibility: hidden;
}
nav > div ul ul li a {
display: block;
background-color: #fff;
padding: 0.625rem 1.875rem;
position: relative;
}
nav > div ul ul li a:before {
content: "\f061";
font-family: "Font Awesome 5 Free";
background-color: transparent;
font-weight: 900;
right: auto;
left: 1.25rem;
top: 11px;
position: absolute;
opacity: 0;
}
nav > div ul ul li:hover > a,
nav > div ul ul li a:focus {
background-color: #f7f7f7;
padding-left: 3.125rem;
}
nav > div ul ul li:hover > a:before,
nav > div ul ul li a:focus:before {
left: 2rem;
opacity: 1;
}
nav > div ul ul li + li {border-top: 0.0625rem solid #ededed;}
nav > div ul li.menu-item-has-children:hover > ul > li {
margin-top: 0;
opacity: 1;
visibility: visible;
}
nav > div ul ul ul li {margin: 0 0 0 10px;}
nav > div ul ul li.menu-item-has-children:hover > ul > li {margin-left: 0;white-space: nowrap;}
nav > div ul li.menu-item-has-children:hover > ul {
opacity: 1;
visibility: visible;
}
nav > div ul li.menu-item-has-children:hover > ul:before {bottom: 0;}
nav > div ul li.menu-item-has-children:hover > ul a:before {color: #00599a!important;}
.menu-item-has-children.list-unstyled ul li a:hover{color: #00599a!important;}
.menu-item-has-children ul li a:hover{color: #00599a!important;}
:where(ul li > a):focus {color: #00487D;} /* retour du 10 nov. : plus de !important (illisible sur fond foncé) */
/*=== Sticky Header ===*/
.sticky-menu {
position: fixed;
top: -5rem;
left: 0;
right: 0;
background-color: #fff;
z-index: 9999;
-webkit-box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
-ms-box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
-o-box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
opacity: 0;
visibility: hidden;
}
body.sticky .sticky-menu {
top: 0;
opacity: 1;
visibility: visible;
}
.sticky-menu nav > div > ul > li {
color: var(--color1);
line-height: 4rem;
}
.sticky-menu nav > div > ul > li:last-child {margin-right: 0;}
/*===== Responsive Header =====*/
.rspn-hdr {
display: none;
width: 100%;
position: relative;
z-index: 999;
}
.rspn-mdbr {
background-color: #252a2c;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.rspn-scil {display: inline-flex;}
.rspn-scil > a {
background-color: rgba(255,255,255,.05);
height: 2.5rem;
width: 2.5rem;
line-height: 2.5rem;
text-align: center;
color: #fff;
}
.rspn-scil > a:not(:first-child) {margin-left: 1px;}
.rspn-srch {
/* height: 2.5rem;*/
position: relative;
/* flex: 0 0 calc(100% - 10.1875rem);
max-width: calc(100% - 10.1875rem);*/
}
.rspn-srch-web {
/* height: 1.5rem;*/
position: relative;
/* flex: 0 0 calc(100% - 11.1875rem);
max-width: calc(100% - 10.1875rem); */
}
.rspn-srch > input {
background-color: transparent;
border: 0 none;
/*color: #7e7e7e;*/
color: #ffffff;
font-size: .75rem;
height: 100%;
padding: 0 4.125rem 0 5%;
/* padding: 0 2.125rem 0 5%;*/
width: 100%;
border-bottom: 1px solid;
}
.rspn-srch > input:focus {font-style: normal;}
.rspn-srch > button {
background-color: transparent;
border: 0;
color: #fff;
font-size: .75rem;
height: 100%;
position: absolute;
right: 0px;
}
.lg-mn {
padding: 1.125rem 5rem 1.125rem .9375rem;
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.rspn-cnt {display: inline-block;}
.rspn-cnt > span {
color: #777;
display: inline-block;
margin: 5px .5rem;
}
.rspn-cnt > span i {margin-right: .5rem;}
.rspn-mnu-btn {
background-color: var(--color1);
color: #fff;
cursor: pointer;
font-size: 0.875rem;
height: 2.5rem;
line-height: 2.5rem;
position: absolute;
right: 1.25rem;
text-align: center;
top: 50%;
width: 2.5rem;
margin-top: -1.25rem;
}
/*=== Responsive Menu ===*/
.rsnp-mnu {
background-color: #0c0c0c;
bottom: 0;
opacity: 0;
padding: 5.3125rem 2.5rem 3.125rem;
position: fixed;
right: -21.875rem;
top: 0;
visibility: hidden;
z-index: 99999;
max-width: 21.875rem;
width: 100%;
}
.rsnp-mnu.slidein {
opacity: 1;
right: 0;
visibility: visible;
}
.rspn-mnu-cls {
background-color: #303030;
color: #fff;
cursor: pointer;
font-size: 0.875rem;
height: 2.5rem;
line-height: 2.5rem;
position: absolute;
right: .75rem;
text-align: center;
top: .75rem;
width: 2.5rem;
}
.rsnp-mnu > ul {
display: inline-block;
list-style: outside none none;
margin-bottom: 0;
padding-left: 0;
overflow-y: auto !important;
width: 100% !important;
}
.rsnp-mnu > ul > li {
color: #fff;
font-size: 1rem;
font-weight: 600;
position: relative;
text-transform: uppercase;
width: 100%;
}
.rsnp-mnu > ul > li a {
color: inherit;
display: block;
}
.rsnp-mnu > ul > li:not(:first-child) {margin-top: 1.25rem;}
.rsnp-mnu > ul ul {
display: none;
list-style: outside none none;
margin-bottom: 0;
padding-left: 1.25rem;
opacity: 1;
position: static;
visibility: visible;
}
.rsnp-mnu ul li.menu-item-has-children.active > a {margin-bottom: 15px;}
.rsnp-mnu > ul li.menu-item-has-children > a::before {
content: "\f107";
font-family: "Font Awesome 5 Free";
position: absolute;
right: 0;
top: 0;
color: inherit;
font-weight: 900;
}
.rsnp-mnu > ul ul > li {
color: #a4a4a4;
font-size: 0.9375rem;
position: relative;
text-transform: initial;
width: 100%;
font-weight: 400;
}
.rsnp-mnu > ul ul > li:not(:first-child) {margin-top: .75rem;}
/*===== Featured Area Style 1 =====*/
.feat-item {
position: relative;
z-index: 1;
background-size: cover;
background-position: center;
padding: 10.8125rem 0;
}
.feat-img {
top: 0;
background-size: cover;
background-position: center;
width: 100%;
-webkit-transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
-ms-transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
-o-transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
height: 100%;
}
.feat-img:before {
content: "";
background-color: var(--color7);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: .3;
z-index: -1;
}
.slick-active .feat-img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.feat-caro {position: relative;}
.feat-caro > button.slick-arrow {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 5.625rem;
height: 5.625rem;
width: 5.625rem;
-webkit-border-radius: 50%;
border-radius: 50%;
color: #fff;
font-size: 2rem;
z-index: 1;
background-color: transparent;
}
.feat-caro > button.slick-prev {left: 1rem;}
.feat-caro > button.slick-next {right: 1rem;}
.feat-caro > button.slick-arrow:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: inherit;
opacity: .1;
background-color: #fff;
}
.feat-caro .slick-dots {
margin-top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 2.5rem;
}
.feat-caro .slick-dots > li button {background-color: rgba(255,255,255,.15);}
.feat-cap {
position: relative;
max-width: 58%;
z-index: 1;
text-shadow: 1px 0 5px #333;
/*padding-left: 60px;*/
}
.feat-cap > h2 {
color: #fff;
font-size: 3.1rem;
font-weight: 400;
}
.feat-cap > h1 + p,
.feat-cap > h2 + p {margin-top: 10px;}
.feat-cap > p {
font-size: 1.125rem;
color: #fff;
line-height: 2rem;
}
.feat-cap > p + .feat-cap-innr {margin-top: 2.5rem;}
.feat-cap-innr > a + a {margin-left: 1.25rem;}
.video-btn {
text-align: initial;
display: inline-block;
vertical-align: middle;
color: #fff;
position: relative;
font-size: 1rem;
font-style: italic;
padding: 6px 0 6px 4.125rem;
font-weight: 600;
}
.video-btn > span {
position: absolute;
left: 0;
text-align: center;
height: 3.6875rem;
width: 3.6875rem;
line-height: 3.6875rem;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: rgba(255,255,255,.1);
top: 0;
}
.video-btn:hover,
.video-btn:focus {color: #fff;}
/*===== Featured Area Style 2 =====*/
.feat-cap > h1 {
font-size: 4.375rem;
color: #fff;
font-weight: 400;
}
.feat-wrap.style2 .feat-cap {
max-width: 80%;
display: inline-block;
}
.feat-cap > h1 strong {font-size: 3.4375rem;}
.feat-wrap.style2 .feat-item {padding-top: 19.6875rem;}
.feat-wrap.style2 .feat-cap > p {
max-width: 70%;
display: inline-block;
}
/*===== Theme Button =====*/
.thm-btn {
display: inline-block;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
position: relative;
z-index: 1;
font-size: 1rem;
font-family: Poppins;
font-weight: 600;
padding: 1.05rem 2.8rem;
overflow: hidden;
vertical-align: middle;
}
.thm-btn:before {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
background-color: #000;
opacity: .05;
-webkit-transform: translate(-30%, -120%) rotate(-55deg);
-ms-transform: translate(-30%, -120%) rotate(-55deg);
-o-transform: translate(-30%, -120%) rotate(-55deg);
transform: translate(-30%, -120%) rotate(-55deg);
width: 180%;
height: 280%;
}
.thm-btn > i {margin-left: 10px;}
.thm-btn:hover{color: #fff!important;background-color: #970733!important; }
.bg-rouge:hover{color: #fff!important;background-color: var(--theme-color)!important; }
.thm-btn:focus {color: #fff!important;}
.thm-btn:hover:before,
.thm-btn:focus:before {
width: 200%;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
/*===== Simple Button =====*/
.simple-btn {
color: #fff;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
padding: 9.5px 1.5625rem;
}
.simple-btn:hover,
.simple-btn:focus {color: #fff!important;}
.simple-btn.thm-bg:hover,
.simple-btn.thm-bg:focus {background-color: var(--color1);
}
/*===== White Button =====*/
.white-btn {
color: var(--theme-color);
border: 1px solid var(--theme-color);
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
padding: 8.5px 1.5625rem;
}
.white-btn:hover,
.white-btn:focus {color: var(--theme-color)!important;}
.white-btn.thm-bg:hover,
.white-btn.thm-bg:focus {background-color: #fff;}
/*===== Sec Title =====*/
.sec-title {
position: relative;
margin-bottom: 2.8125rem;
}
.col-lg-4 .sec-title-inner {max-width: 100%;}
.sec-title-inner {max-width: 45%;}
.sec-title-inner > span {
font-size: 1rem;
letter-spacing: .6px;
font-weight: 600;
}
.sec-title-inner > span + h3 {margin-top: 0.4rem;}
.sec-title-inner > h3 {font-size: 2.1rem;}
.sec-title-inner > h2 {
font-size: 2rem;
font-weight: 500;
}
.sec-title-inner > h2 + p {margin-top: .9375rem;}
.title-with-shape:before {
content: "";
height: 3.75rem;
width: 2.6875rem;
background-size: contain;
background-position: center;
background-image: url(../images/title-shp1.png);
position: absolute;
left: -4.6875rem;
opacity: .2;
top: 0;
}
/*=== Light Title ===*/
.dark-layer .sec-title-inner > h2,
.dark-layer .sec-title-inner > h3,
.dark-layer2 .sec-title-inner > h2,
.dark-layer2 .sec-title-inner > h3,
.dark-layer3 .sec-title-inner > h2,
.dark-layer3 .sec-title-inner > h3,
.blue-layer .sec-title-inner > h2,
.blue-layer .sec-title-inner > h3 {color: #fff;}
/*=== Ver 2 ===*/
.sec-title.v2 .sec-title-inner > span {font-size: 1.125rem;}
/*===== About Style 1 =====*/
.about-desc > h2 {
font-size: 2rem;
line-height: 3rem;
font-weight: 400;
}
.about-desc > h2 + p {margin-top: 0.875rem;}
.about-desc > p {
font-size: 1rem;
line-height: 1.8rem;
color: #414042;
margin-top: 0.875rem;
}
.about-content-wrap + .about-image {margin-top: 4.6875rem;}
.about-image > span {
position: absolute;
color: #fff;
text-align: center;
font-family: Poppins;
font-weight: 600;
font-size: 1.5rem;
line-height: initial;
z-index: 1;
height: 6.5rem;
width: 7.5rem;
padding: 1.5rem 0.9375rem;
-webkit-border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
border-radius: 44% 56% 47% 53% / 30% 47% 53% 70%;
background-color: var(--color2);
left: -3.75rem;
top: -3.25rem;
-webkit-animation: blob 6s linear infinite;
-ms-animation: blob 6s linear infinite;
-o-animation: blob 6s linear infinite;
animation: blob 6s linear infinite;
}
.about-image > span i {
font-style: normal;
font-size: 0.875rem;
font-family: Open Sans;
font-weight: 400;
margin-top: -5px;
}
.about-image > span:before {
content: "";
border: 2px dashed var(--color2);
position: absolute;
left: -1.25rem;
right: -1.25rem;
top: -1.25rem;
bottom: -1.25rem;
z-index: -1;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.about-image > a,
.post-detail-gallery-video-box > a {
position: absolute;
left: 50%;
top: 50%;
background-color: #fff;
line-height: 6.4375rem;
width: 6.4375rem;
height: 6.4375rem;
text-align: center;
font-size: 1.25rem;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.about-image > a:hover,
.about-image > a:focus,
.post-detail-gallery-video-box > a:hover,
.post-detail-gallery-video-box > a:focus {color: #fff;}
/*===== About Style 2 =====*/
.about-desc{text-align: justify;}
.about-wrap.style2 .about-desc,
.about-wrap.style2 .serv-wrap {padding-right: 3rem;}
.about-wrap.style2 .about-image > span {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
top: 3.125rem;
}
/*===== Services Style 1 =====*/
.serv-box {
display: flex;
margin-top: 2.5rem;
}
.serv-box > i {
font-size: 3.5rem;
line-height: initial;
position: relative;
top: -8px;
}
.serv-box > i + .serv-box-inner {margin-left: 1.25rem;}
.serv-box-inner > h3 {
font-size: 1rem;
font-weight: initial;
}
.serv-box-inner > h3 + p {margin-top: 10px;}
.serv-box:hover > i,
.serv-box2:hover > i {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/*===== Services Style 2 =====*/
.serv-box2 {
margin-bottom: 1.875rem;
padding: 3.125rem 1.5625rem 1.25rem;
z-index: 1;
background-position: center;
background-size: cover;
overflow: hidden;
/* border: 1px solid #eaeaea; */
}
.serv-box2:hover {border-color: transparent;}
.serv-box2::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
z-index: -1;
}
.serv-box2:hover:before {
opacity: .9;
background-color: var(--color5);
}
.serv-box2 > i {
font-size: 4.375rem;
display: inline-block;
line-height: 4.375rem;
}
.serv-box2 > i + .serv-box-inner {margin-top: 1.5625rem;}
.serv-box-inner > h3 + span {margin-top: 1.25rem;}
.serv-box-inner > p + span {margin-top: 1.875rem;}
.serv-box-inner > p + span {padding-top: 1.25rem;}
.serv-box-inner > span {
font-family: Open Sans;
font-size: 0.875rem;
color: #414042;
position: relative;
font-weight: 600;
}
.serv-box-inner > span:before {
content: "";
background-color: #eaeaea;
top: 0;
position: absolute;
left: -1.5625rem;
right: -1.5625rem;
height: 1px;
}
.serv-box-inner > span + p {margin-top: 8px;}
.serv-box-inner > span i {font-style: normal;}
.serv-box2:hover > i,
.serv-box2:hover .serv-box-inner > h3,
.serv-box2:hover .serv-box-inner > span,
.serv-box2:hover .serv-box-inner > p {color: #fff;}
.serv-box2:hover .serv-box-inner > span i {color: inherit;}
.serv-box2 .serv-box-inner > h3 a:hover,
.serv-box2 .serv-box-inner > h3 a:focus {color: #333;}
/*===== Facts Style =====*/
.serv-wrap + .facts-wrap {
margin-top: 4.375rem;
margin-bottom: -6.75rem;
}
.facts-wrap {
z-index: 1;
padding: 0.75rem 0 0.5625rem;
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.1);
-ms-box-shadow: 0 3px 7px rgba(0,0,0,.1);
-o-box-shadow: 0 3px 7px rgba(0,0,0,.1);
box-shadow: 0 3px 7px rgba(0,0,0,.1);
}
.fact-box {
/* margin-bottom: 2.1875rem;*/
padding: 15px 15px;
}
.fact-box > h2 {
font-size: 2rem;
font-weight: 400;
line-height: 1;
}
.fact-box > h2 sup {
font-size: 2.25rem;
font-weight: 600;
line-height: 1;
top: -1.4rem;
}
.fact-box > h2 + h4 {margin-top: .9375rem;}
.fact-box > h4 {
font-size: 1.2rem;
font-family: Open Sans;
font-weight: 400;
line-height: 1;
}
.thm-layer .fact-box > h2,
.thm-layer .fact-box > h4 {color: #fff;}
/*===== Project Style =====*/
.proj-box {
padding-top: 1.875rem;
margin-bottom: 1.875rem;
}
.proj-thumb > a {
display: block;
position: relative;
}
.proj-thumb > a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: var(--color1);
z-index: 1;
opacity: 0;
}
.proj-box:hover .proj-thumb img {
-webkit-transform: scale(1.04) rotate(1deg);
-ms-transform: scale(1.04) rotate(1deg);
-o-transform: scale(1.04) rotate(1deg);
transform: scale(1.04) rotate(1deg);
}
.proj-box:hover .proj-thumb > a:before {opacity: .4;}
.proj-info {
top: 0;
left: 0rem;
right: 0;
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.1);
-ms-box-shadow: 0 3px 7px rgba(0,0,0,.1);
-o-box-shadow: 0 3px 7px rgba(0,0,0,.1);
box-shadow: 0 3px 7px rgba(0,0,0,.1);
background-color: #fff;
-webkit-border-radius: 5px 5px 0 5px;
border-radius: 5px 5px 0 5px;
z-index: 1;
padding: 1.8rem .75rem 1.375rem 4.375rem;
height: 70px;
}
.proj-info > i {
position: absolute;
color: var(--color1);
opacity: .5;
font-size: 2.5rem;
left: 1.25rem;
top: 0;
line-height: 5.15rem;
}
.proj-info > h3 {
font-size: 1rem;
font-weight: 400;
}
.proj-info > h3 a:hover,
.proj-info > h3 a:focus {color: #333;}
.proj-box:hover .proj-info > i,
.proj-box:hover .proj-info > h3 {
color: #fff;
opacity: 1;
}
/*===== Get In Touch Style 1 =====*/
.getin-touch-title {position: relative;}
.getin-touch-title.with-shap {padding-left: 4.375rem;}
.with-shap:before {
content: "";
height: 3.75rem;
width: 2.6875rem;
position: absolute;
left: 0;
top: 0;
opacity: .5;
background-size: contain;
background-position: center;
background-image: url(../images/title-shp2.png);
z-index: 1;
}
.getin-touch-title > span {font-size: 1.125rem;}
.getin-touch-title > span + h2 {margin-top: 6px;}
.getin-touch-title > h2 {
font-size: 3rem;
font-weight: 500;
}
.getin-touch-title > h2 + p {margin-top: 12px;}
.getin-touch-title > p {font-size: 1.125rem;}
.blue-layer .getin-touch-title > h2,
.blue-layer .getin-touch-title > p,
.blue-layer .getin-touch-title > span {color: #fff;}
.getin-touch-blob {
width: 40rem;
height: 20rem;
left: 0;
-webkit-transform: translateX(-45%);
-ms-transform: translateX(-45%);
-o-transform: translateX(-45%);
transform: translateX(-45%);
top: -3rem;
-webkit-border-radius: 40% 45% 50% 30% / 60% 35% 50% 40%;
border-radius: 40% 45% 50% 30% / 60% 35% 50% 40%;
z-index: -1;
}
.getin-touch-blob:before,
.getin-touch-blob:after {
content: "";
background-color: inherit;
background-size: cover;
background-position: center;
background-blend-mode: multiply;
position: absolute;
height: inherit;
width: inherit;
top: 0;
left: 0;
}
.getin-touch-blob:before {
-webkit-animation: zoom 8s linear infinite;
-ms-animation: zoom 8s linear infinite;
-o-animation: zoom 8s linear infinite;
animation: zoom 8s linear infinite;
background-image: url(../images/bg-shap1.jpg);
}
.getin-touch-blob:after {opacity: .1;}
/*===== Get In Touch Style 2 =====*/
.getin-touch-wrap.style2 {padding: 2.8125rem 5rem;}
.getin-touch-wrap.style2 .getin-touch-title > h2 {font-size: 2rem;}
.thm-layer .getin-touch-title > h2 {color: #fff;}
.getin-touch-wrap.style2 .getin-touch-btn::before,
.getin-touch-wrap.style2 .getin-touch-btn::after {display: none;}
/*===== Solutions Style =====*/
.sec-title2 {margin-bottom: 2.8125rem;}
.sec-title-inner2 {max-width: 60%;}
.sec-title-inner2 > h2 {
font-size: 2.5rem;
position: relative;
display: inline-block;
}
.sec-title-inner2 > h2 i {
color: #fff;
position: absolute;
height: 3.5rem;
width: 3.5rem;
font-size: 0.875rem;
font-family: Open Sans;
font-weight: 600;
text-align: center;
font-style: normal;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 11px;
bottom: 1.125rem;
right: -1.875rem;
}
.sec-title-inner2 > h2 i::before,
.sec-title-inner2 > h2 i::after {
content: "";
background-color: var(--color2);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-border-radius: inherit;
border-radius: inherit;
}
.sec-title-inner2 > h2 i::after {
-webkit-transform: rotate(153deg);
-ms-transform: rotate(153deg);
-o-transform: rotate(153deg);
transform: rotate(153deg);
}
.sec-title-inner2 > h2 + p {margin-top: 1.0625rem;}
.sec-title-inner2 > p {font-size: 1.25rem;}
.solutions-content-wrap {padding-left: 2.25rem;}
.solutions-content-wrap > h2 {font-size: 2rem;}
.solutions-content-wrap > h2 + ul {margin-top: 0.9375rem;}
.solutions-list > li {
padding: 1.5625rem 0 .75rem 2.5rem;
position: relative;
border-bottom: 1px solid #ecedef;
}
.solutions-list > li > i {
position: absolute;
left: 0;
top: 1.5625rem;
height: 1.5625rem;
width: 1.5625rem;
line-height: 1.5625rem;
/*font-family: Open Sans;*/
font-size: 1.125rem;
font-weight: 600;
color: var(--color1);
background-color: #ecedef;
text-align: center;
}
.solutions-list > li:hover > i {color: #fff;}
.solutions-list > li > h4 {
font-size: 1rem;
font-weight: 400;
}
.solutions-list > li > h4 + p {margin-top: 0.8rem;}
/*===== Testimonials Style 1 =====*/
.testi-wrap > h2 {
text-align: center;
font-size: 3rem;
}
.dark-layer2 .testi-wrap > h2 {color: #fff;}
.testi-caro .slick-list {margin: 0 -0.9375rem;}
.testi-box-wrap {padding: 0 0.9375rem;}
.testi-box {
display: flex;
align-items: center;
margin-bottom: 1.875rem;
}
.testi-wrap > h2 + .testi-caro,
.testi-wrap > h2 + .row {margin-top: 3.125rem;}
.testi-img {
flex: 0 0 10.625rem;
max-width: 10.625rem;
position: relative;
padding-top: 10px;
}
.testi-img + .testi-info {padding-left: 1.875rem;}
/* .testi-img > img {
-weebkit-clip-path: polygon(59% 0, 100% 0, 100% 35%, 100% 74%, 88% 100%, 35% 74%, 10% 94%, 0 70%, 0 32%, 0 0);
clip-path: polygon(59% 0, 100% 0, 100% 35%, 100% 74%, 88% 100%, 35% 74%, 10% 94%, 0 70%, 0 32%, 0 0);
-webkit-border-radius: 50%;
border-radius: 50%;
} */
.testi-img:before {
content: "\f122";
font-family: "Flaticon";
font-size: 3.125rem;
position: absolute;
right: 0;
top: -.9375rem;
z-index: 1;
}
.testi-info > h3 {
font-size: 1rem;
font-weight: 600;
}
.dark-layer2 .testi-info > h3 {color: #fff;}
.dark-layer2 .testi-info > p {color: #d0d0d0;}
.testi-info > p {
font-size: 0.9rem;
line-height: 2rem;
}
.testi-info > h3 + p {margin-top: 0.9375rem;}
.testi-info > p + span {margin-top: 1.375rem;}
.testi-info > span {font-size: 13px;}
.testi-info > span span {
margin-left: 10px;
font-size: 14px;
}
.slick-dots {
padding-left: 0;
list-style: none;
margin: 10px 0 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.slick-dots > li {padding: 0 6px;}
.slick-dots > li button {
background-color: rgba(0,0,0,.1);
color: transparent;
-webkit-border-radius: 2.5rem;
border-radius: 2.5rem;
height: 24px;
width: 1.875rem;
}
.black-layer .slick-dots > li button,
.blue-layer .slick-dots > li button,
.dark-layer .slick-dots > li button,
.dark-layer2 .slick-dots > li button,
.dark-layer3 .slick-dots > li button {background-color: rgba(255,255,255,.1);}
.slick-dots > li.slick-active button {width: 6.5625rem;}
/*===== Faq Style =====*/
.toggle {padding-right: 6.25rem;}
.toggle-item {border-bottom: 1px solid #ecedef;}
.toggle-item > h4 {
font-size: 1.2rem;
font-weight: 400;
padding: 1.0875rem 0 1.0875rem 2.8125rem;
position: relative;
cursor: pointer;
}
.toggle-item .toggle-content {
padding-left: 2.8125rem;
padding-bottom: 1rem;
}
.toggle-item > h4 span {
font-size: 1.125rem;
position: absolute;
left: 0;
top: 0;
line-height: 3.375rem;
}
.toggle-item .toggle-content > p {
color: #282828;
font-size: 1rem;
line-height: 1.75rem;
}
.faq-wrap img {margin-top: -5.5rem;}
/*===== Banner Style =====*/
.banner-inner {max-width: 70%;}
.banner-inner > h2 {
font-size: 3rem;
font-weight: 600;
}
.blue-layer .banner-inner > h2,
.blue-layer .banner-inner > p {color: #fff;}
.banner-inner > h2 + p {margin-top: 10px;}
.banner-inner > p {
font-size: 1.125rem;
line-height: 2rem;
display: inline-block;
max-width: 80%;
}
.banner-inner > p + a {margin-top: 2.5rem;}
/*===== Blog Style =====*/
.post-box {margin-bottom: 3.125rem;}
.post-img > a {
display: block;
position: relative;
}
.post-img > a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: var(--color1);
opacity: 0;
}
.post-box:hover .post-img > a::before {opacity: .5;}
.post-img + .post-info {margin-top: 1.4375rem;}
.post-info > h3 {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 600;
}
.post-info > h3 + p, .post-info > h3 + div {margin-top: .75rem;}
.post-info > p , .post-info > div {
display: inline-block;
/* max-width: 80%;*/
line-height: 2rem;
}
.post-info > p + .post-info-bottom {margin-top: 1.5625rem;}
.post-info-bottom {
border-top: 1px solid #ecedef;
border-bottom: 1px solid #ecedef;
justify-content: space-between;
padding: .75rem 0;
}
.post-info-bottom > span, .post-meta > li {
font-size: 14px;
color: #00599a;
}
.post-info-bottom > span i,
.post-meta > li i {margin-right: 7px;}
.post-meta > li:not(:first-child) {margin-left: 9rem;}
/*===== Clients Sstyle =====*/
.client-box {
/*margin-bottom: 3.125rem;*/
text-align: center;
}
.client-box > a {display: inline-block;}
.client-box > a img {
-webkit-filter: grayscale(1);
-ms-filter: grayscale(1);
-o-filter: grayscale(1);
filter: grayscale(0);
/* opacity: .5;*/
}
.client-box > a:hover img {
-webkit-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
opacity: 1;
}
/*===== Footer Style =====*/
.widget {margin-bottom: 3.125rem;}
.widget .logo + p {margin-top: 1.25rem;}
.widget > p {line-height: 1.75rem;}
.bg-color5 .widget > p,
.bg-color5 .widget ul li {color: #d5d5d5;}
.widget > p + .social-links2 {margin-top: 1.875rem;}
.social-links2 > a {
display: inline-block;
color: #d5d5d5;
font-size: 1.5rem;
}
.social-links2 > a:not(:first-child) {margin-left: 1.4375rem;}
.bg-color5 .widget > h3,
.bg-color5 .visitor-stat-box > h5 {color: #fff;}
.widget > h3 {
margin-bottom: .7rem;
font-size: 1.125rem;
font-weight: 500;
text-transform: uppercase;
}
.widget ul li {
font-size: 0.97rem;
margin-top: 1.125rem;
width: 100%;
white-space: nowrap;
}
.widget ul li:hover > a {padding-left: .75rem;}
.visitor-stat-box > h4 {font-size: 1.5rem;}
.visitor-stat-box > h4 + h5 {margin-top: 4px;}
.visitor-stat-box > h5 {
font-weight: 400;
font-size: 1rem;
}
.visitor-stat-box + .visitor-stat-box {margin-top: 2.625rem;}
.copyright {padding: 0.75rem 0;}
.copyright p {font-size: 1rem; color: #fff;}
.copyright p a {color: #fff;}
/*===== Team Style =====*/
.team-caro,
.team-caro2 {margin: 0 -.9375rem;}
.team-wrap.d-flex > li {
flex: 0 0 20%;
max-width: 20%;
}
.team-box {padding: 0 .9375rem;}
.team-social {
left: 0;
right: 0;
bottom: -3.125rem;
opacity: 0;
}
.team-social > a {
display: inline-block;
color: #fff;
height: 3.25rem;
width: 3.25rem;
text-align: center;
line-height: 3.25rem;
font-size: .875rem;
}
.team-social > a:hover,
.team-social > a:focus {background-color: var(--color1);}
.team-box:hover .team-social {
opacity: 1;
bottom: 10px;
}
.team-img + .team-info {margin-top: .9375rem;}
.team-info > h3 {
font-size: 1.125rem;
font-weight: 500;
}
.team-info > h3 + span {margin-top: 4px;}
.team-info > span {
font-size: 14px;
color: #777;
}
.dark-layer .team-info > h3,
.dark-layer2 .team-info > h3,
.dark-layer3 .team-info > h3,
.blue-layer .team-info > h3 {color: #fff;}
/*===== Page Title Style =====*/
.page-top-wrap > h1 {font-size: 3.4375rem;}
.dark-layer3 .page-top-wrap > h1 {color: #fff;}
ol.breadcrumb {
padding: 0;
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
margin-bottom: 0;
}
.page-top-wrap > h1 + ol.breadcrumb {margin-top: 5px;}
ol.breadcrumb li.breadcrumb-item {
font-size: 1rem;
font-family: Poppins;
color: #fff;
position: relative;
}
ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item {
margin-left: .75rem;
padding-left: 1.5625rem;
}
ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item:before {
color: #fff;
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding: 0;
position: absolute;
left: 0;
}
/*===== Services Detail Style =====*/
.serv-detail-info-inner {
padding-left: 6.25rem;
position: relative;
}
.serv-detail-info-inner > i {
font-size: 4.375rem;
position: absolute;
left: 0;
top: 0;
}
.serv-detail-info-inner > h2 {
font-size: 3rem;
font-weight: 600;
max-width: 85%;
}
.serv-detail-info p {
font-size: 1rem;
margin-top: 2rem;
}
.serv-detail-desc {margin-top: 1.125rem;}
.serv-detail-desc a {
display: block;
margin-top: 1.875rem;
position: relative;
overflow: hidden;
}
.serv-detail-desc a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: var(--color1);
opacity: .3;
}
.serv-detail-desc a:hover:before {opacity: .5;}
.serv-detail-desc {padding: 0 6.25rem;}
.serv-detail-desc > p {margin-top: 2.8125rem;}
.serv-detail-desc > p + p {margin-top: 1.5625rem;}
/*===== Contact =====*/
.contact-map {height: 35.625rem;}
.contact-info-wrap {
left: 6.25rem;
right: 6.25rem;
bottom: 1.25rem;
background-color: #fff;
padding: 0 3.25rem 0.875rem;
}
.contact-info-box {margin-top: 1.875rem;}
.contact-info-box > i {
display: block;
font-size: 2.5rem;
line-height: 2.5rem;
}
.contact-info-box > strong {
display: block;
font-family: Poppins;
font-weight: 600;
color: var(--color1);
margin-bottom: 6px;
}
.contact-info-box > span,
.contact-info-box > a,
.contact-info-box > p {
font-size: 14px;
color: #777;
margin-top: 2px;
}
.contact-info-box > i + strong {margin-top: 1.25rem;}
.contact-form label {
font-size: 14px;
color: #777;
text-align: initial;
margin-bottom: 0;
}
.contact-form label + input,
.contact-form label + textarea {margin-top: 5px;}
.contact-form input:not(.simple-btn),
.contact-form textarea {
width: 100%;
border: 1px solid #cbcdd1;
height: 2.1875rem;
margin-bottom: 15px;
padding: 10px 1.25rem;
font-size: 14px;
color: #777;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.contact-form textarea {
height: 12.5rem;
padding: 1.25rem;
}
.contact-form button {/*margin-top: 0.5625rem;*/}
/*===== Blog Detail =====*/
.post-detail > img + h2 {margin-top: 2.0625rem;}
.post-detail > h2 {font-size: 1.5rem;}
.post-detail > h2 + p {margin-top: 14px;}
.post-detail > p {line-height: 1.875rem;}
.post-detail > p + p {margin-top: 1.875rem;}
.post-detail > p + .post-detail-gallery-video-box,
.post-detail > .post-detail-gallery-video-box + p {margin-top: 2.5rem;}
.detail-gal {margin-top: 10px;}
.detail-gal a {
display: block;
overflow: hidden;
margin-top: 1.875rem;
position: relative;
}
.detail-gal a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: var(--color1);
opacity: .3;
}
.detail-gal a:hover:before {opacity: .5;}
.detail-gal + p {margin-top: 2.5rem;}
blockquote {
font-size: 1.95rem;
font-style: italic;
line-height: 3rem;
position: relative;
background-color: #ecedef;
padding: 2.5rem 3.125rem 3.125rem;
margin: 2.8125rem 0;
font-family: Poppins;
}
blockquote > p {
font-size: inherit;
line-height: inherit;
color: inherit;
font-family: inherit;
}
blockquote > p::before,
blockquote > p::after {
content: "";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
color: var(--color1);
position: relative;
font-size: 1rem;
line-height: initial;
}
blockquote > p::before {
content: "\f10d";
left: -5px;
top: -1.125rem;
}
blockquote > p::after {
content: "\f10e";
right: -5px;
top: -10px;
}
.post-detail > p + .detail-share {
border-top: 1px solid #e8e8e8;
margin-top: 2.5rem;
padding-top: 1.5625rem;
}
.detail-share > span {
display: inline-block;
font-family: Poppins;
color: var(--color1);
}
.detail-share > a {
display: inline-block;
font-size: 1.125rem;
vertical-align: middle;
margin-left: .9375rem;
}
/*=== Comments ===*/
.comments,
.reply-form {margin-top: 5.625rem;}
.comments > h3,
.reply-form > h3 {
font-size: 1.125rem;
text-transform: uppercase;
border-bottom: 1px solid #ccd5e9;
display: inline-block;
padding: 0 1.25rem 7px 0;
}
.comment {
background-color: #f3f3f5;
position: relative;
margin-top: 3.125rem;
display: flex;
flex-wrap: wrap;
z-index: 1;
}
.comment-img {
flex: 0 0 6.875rem;
max-width: 6.875rem;
padding-left: 8px;
-webkit-transform: translateY(6.25rem);
-ms-transform: translateY(6.25rem);
-o-transform: translateY(6.25rem);
transform: translateY(6.25rem);
}
.comment-img + .comment-detail {
flex: 0 0 calc(100% - 6.875rem);
max-width: calc(100% - 6.875rem);
}
.comment-detail {padding: 1.75rem 3.5rem 1.75rem 4.0625rem;}
.comment-img > span {
background-color: #f2f9fa;
height: 5rem;
width: 5rem;
line-height: 5rem;
display: inline-block;
text-align: center;
}
.comment-detail > h4 {font-size: 1rem;}
.comment-detail > h4 + p,
.comment-detail > span + p {margin-top: 1.25rem;}
.comment-detail > p + a,
.comment-detail > a + span {margin-top: .9375rem;}
.comment-detail > span {font-size: 13px;}
.comment-detail > span i,
.comment-reply-link > i {margin-right: 5px;}
.comment-detail > a + span {margin-left: 1.25rem;}
.comment-reply-link {font-size: 13px;}
.comment:before {
content: "";
position: absolute;
left: 0;
top: -2px;
bottom: -2px;
width: 6.875rem;
background-color: #fff;
-webkit-clip-path: polygon(0 0, 100% 55%, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 55%, 100% 100%, 0% 100%);
z-index: -1;
}
.comments-thread ul.children {padding-left: 6.875rem;}
/*=== Reply Form ===*/
.reply-form > h3 + form {margin-top: 1.5625rem;}
.reply-form .field-wrap {margin-top: 1.4375rem;}
.reply-form .field-wrap label {
width: 100%;
font-size: 0.875rem;
color: #777;
margin-bottom: .75rem;
}
.reply-form .field-wrap input,
.reply-form .field-wrap textarea {
width: 100%;
border: 1px solid #ededed;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 0.875rem;
color: #777;
height: 2.1875rem;
padding: .5rem 1.125rem;
}
.reply-form .field-wrap textarea {
padding: 1.125rem;
height: 12.5rem;
}
.reply-form .field-wrap + button {margin-top: 3.125rem;}
/*===== Sidebar =====*/
.widget2 {
background-color: #f8f8f9;
padding: 1.875rem;
overflow: hidden;
}
.widget2 + .widget2 {margin-top: 3.125rem;}
.about-widget {margin-top: 1.125rem;}
.about-widget-img {position: relative;}
.about-widget-img + h4 {margin-top: 1.5625rem;}
.about-widget-img > a {
color: #fff;
font-size: 14px;
line-height: 2.5rem;
width: 2.5rem;
height: 2.5rem;
position: absolute;
left: -10px;
top: 10px;
}
.about-widget-img > a:hover,
.about-widget-img > a:focus {background-color: var(--color1);}
.about-widget > h4 {
font-size: 1.125rem;
font-weight: 600;
}
.about-widget > h4 + p {margin-top: 1.375rem;}
.about-widget > p {
font-size: 1rem;
line-height: 1.75rem;
}
.about-widget > p + span {
border-top: 1px solid #e2e2e4;
margin-top: 1.25rem;
padding-top: .75rem;
}
.about-widget > span {
font-size: 1rem;
color: #777;
}
.about-widget > span img {margin-right: 1.25rem;}
.widget2 > h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1.5625rem;
}
.widget2 > form {position: relative;}
.widget2 > form input {
background-color: #fff;
width: 100%;
border: 1px solid #e2e2e4;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
height: 3.4375rem;
padding: 1rem 2.5rem 1rem 1.875rem;
}
.widget2 > form button {
position: absolute;
right: 0;
width: 2.5rem;
bottom: 0;
top: 0;
background-color: transparent;
}
.widget2 ul {margin-top: -.75rem;}
.widget2 ul li {
width: 100%;
font-size: 14px;
position: relative;
}
.widget2 ul li a {
display: inline-block;
padding-left: 1.5625rem;
}
.widget2.category_widget ul li {text-align: right;}
.widget2.category_widget ul li a {float: left;}
.widget2 ul li a::before,
.widget2 ul li a::after {
content: "";
position: absolute;
left: 0;
top: 4px;
height: .9375rem;
width: .9375rem;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.widget2 ul li a::before {
border: 1px solid #e5f1f3;
background-color: #fff;
}
.widget2 ul li a:after {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.widget2 ul li:hover > a::after,
.widget2 ul li a:focus::after {
opacity: 1;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
}
.widget2 ul li:not(:first-child) {margin-top: .75rem;}
.tagclouds > a {
color: #fff;
display: inline-block;
background-color: var(--color1);
margin: 0 4px 8px;
font-size: 14px;
padding: 5.5px 1.25rem;
position: relative;
z-index: 1;
}
.tagclouds {
margin: 0 -4px -8px;
display: flex;
flex-wrap: wrap;
}
.tagclouds > a:before {
content: "";
left: 50%;
right: 50%;
top: 0;
bottom: 0;
position: absolute;
z-index: -1;
opacity: 0;
}
.tagclouds > a:hover:before,
.tagclouds > a:focus:before {
opacity: 1;
left: 0;
right: 0;
}
.widget2 ul li span.rate {color: var(--color3);}
.blog-mini-post {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.blog-mini-post > a {
flex: 0 0 3.75rem;
height: 3.75rem;
line-height: 3.75rem;
text-align: center;
background-color: #eef3f6;
}
.blog-mini-post > a + .blog-mini-post-info {
flex: 0 0 calc(100% - 3.75rem);
max-width: calc(100% - 3.75rem);
padding-left: 1.125rem;
}
.blog-mini-post-info > h4 {
font-size: 14px;
font-weight: 500;
}
.blog-mini-post-info > span {
font-size: 13px;
margin-top: 2px;
}
.blog-mini-post-info > span.mini-post-date {color: #414042;}
.blog-mini-post-info > span.mini-post-comments {color: #777;}
.blog-mini-post-info > span i {margin-right: 5px;}
.blog-mini-post:not(:first-child) {margin-top: 1.125rem;}
.widget-video-box > a {
color: #fff;
position: absolute;
left: 50%;
top: 50%;
text-align: center;
height: 6.25rem;
line-height: 6.25rem;
width: 6.25rem;
font-size: 2.5rem;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.widget-video-box > a:hover,
.widget-video-box > a:focus {background-color: var(--color1);}
/*===== Shop Filters =====*/
.filter-inner > span {
font-size: 13px;
line-height: 1.875rem;
font-weight: 500;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
.filter-inner > a {
display: inline-block;
vertical-align: middle;
border: 1px solid #e5e5e7;
font-size: 12px;
line-height: 1.875rem;
height: 1.875rem;
width: 1.875rem;
text-align: center;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.filter-inner + .filter-inner {margin-left: 1.875rem;}
.slc-wrp {display: inline-block;}
.slc-wrp .bootstrap-select > button {
font-size: 13px;
color: #777;
background-color: transparent;
border: 1px solid #e5e5e7;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 4.25px 10px;
}
.slc-wrp .bootstrap-select > button:after {margin-left: 5px;}
/*===== Pagination =====*/
.pagination {
margin: -5px;
-webkit-border-radius: 0;
border-radius: 0;
text-align: center;
}
.pagination li.page-item {
font-size: 13px;
color: #333333;
margin: 5px;
font-weight: 500;
}
.pagination li.page-item a.page-link {
border: 1px solid #e5e5e7;
-webkit-border-radius: 3px !important;
border-radius: 3px !important;
padding: 0;
width: 1.875rem;
height: 1.875rem;
line-height: 1.875rem;
color: inherit;
}
.pagination li.page-item a.page-link:hover,
.pagination li.page-item a.page-link:focus,
.pagination li.page-item.active > a.page-link {
background-color: var(--color1);
border-color: var(--color1);
color: #fff;
}
/*===== Shop =====*/
.shop-box {margin-top: 3.125rem;}
.shop-img:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0;
}
.shop-box:hover .shop-img::before {opacity: .8;}
.shop-img > a {
position: absolute;
left: 50%;
top: 80%;
background-color: var(--color20);
color: #fff;
text-transform: uppercase;
font-size: 13px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 7.25px .9375rem;
min-width: 9.5625rem;
font-weight: 600;
opacity: 0;
visibility: hidden;
}
.shop-img > a i {
margin-left: 10px;
font-size: 1.1rem;
vertical-align: middle;
padding-left: 7px;
border-left: 1px solid rgba(255,255,255,.15);
float: right;
}
.shop-img > a:hover,
.shop-img > a:focus {background-color: #ae0018;
color: #fff !important;}
.shop-box:hover .shop-img > a {
opacity: 1;
visibility: visible;
top: 50%;
}
.shop-img + .shop-info {margin-top: 10px;}
.shop-info > h3 {
font-size: 14px;
/*text-transform: uppercase;*/
font-weight: 500;
}
.shop-info > h3 + .shop-info-bottom {margin-top: .85rem;}
.shop-info-bottom span.rate {font-size: 13px;}
.on {color: var(--color3);}
.off {color: #d0d0d0;}
.price {
font-size: 14px;
color: var(--theme-color);
font-weight: 600;
padding-top: 10px;
}
.price ins + del {margin-left: 6px;}
.price del {
font-size: 13px;
font-weight: 500;
color: #777;
}
/*===== Shop Detail =====*/
.shop-detail-imgs {
position: relative;
padding-right: 12.5rem;
}
.shop-detail-nav-caro {
position: absolute;
right: 4.375rem;
top: 58%;
max-width: 6.25rem;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding: 1.25rem 0;
}
.shop-detail-nav-caro > button.slick-arrow {
background-color: transparent;
padding: 0;
width: 100%;
font-size: 14px;
color: #333;
position: absolute;
}
.shop-detail-nav-caro > button.slick-prev {top: 0;}
.shop-detail-nav-caro > button.slick-next {bottom: 0;}
.shop-detail-nav-caro .slick-slide img {
border: 1px solid transparent;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
margin: 10px 0;
}
.shop-detail-info {margin-top: 2rem;}
.shop-detail-info > h2 {
font-size: 1.125rem;
font-weight: 600;
/* text-transform: uppercase; */
line-height: 1.5rem;
max-width: 80%;
}
.shop-detail-info > h2 + span {margin-top: 1.25rem;}
.shop-detail-info > span.rate {font-size: 13px;}
.shop-detail-info > span.rate + .review-link {margin-top: 6px;}
.review-link > span {
font-size: 13px;
font-weight: 600;
}
.review-link > span + a {margin-left: .9375rem;}
.review-link > a {
display: inline-block;
font-size: 13px;
color: #777;
font-weight: 600;
}
.review-link + .price-stock {margin-top: 1rem;}
.price-stock {max-width: 95%;}
.price-stock span.price {font-size: 1.5rem;}
.price-stock span.price del {font-size: 1rem;}
.stock {
font-size: 13px;
font-weight: 600;
color: #333;
}
.stock > i {
font-style: normal;
color: #777777;
text-transform: uppercase;
margin-left: 7px;
}
.shop-detail-info > p {
color: #798795;
max-width: 95%;
margin-top: 1rem;
}
.detail-share {
border-top: 1px solid #e8e8e8;
margin-top: 1.25rem;
padding-top: 1.25rem;
}
/*=== Shop Detail Tabs ===*/
.shop-detail-tabs {
border: 1px solid #ededed;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 3.125rem;
}
.shop-detail-tabs ul.nav-tabs {
border-bottom: 0;
margin-bottom: 1.25rem;
}
.shop-detail-tabs ul.nav-tabs li.nav-item {
margin-bottom: 0;
font-size: 13px;
color: var(--color1);
font-weight: 600;
text-transform: uppercase;
}
.shop-detail-tabs ul.nav-tabs li.nav-item a.nav-link {
-webkit-border-radius: 5px;
border-radius: 5px;
border: 0;
padding: 11px 1.25rem;
background-color: #f3f3f3;
}
.shop-detail-tabs ul.nav-tabs li.nav-item:not(:first-child) {margin-left: 5px;}
.shop-detail-tabs ul.nav-tabs li.nav-item a.nav-link.active,
.shop-detail-tabs ul.nav-tabs li.nav-item a.nav-link:hover,
.shop-detail-tabs ul.nav-tabs li.nav-item a.nav-link:focus {color: #fff;}
.shop-detail-tabs p {line-height: 1.875rem; text-align: justify;}
.shop-detail-tabs p + h4 {margin-top: 2.1875rem;}
.shop-detail-tabs h4 {font-size: 1rem;}
.shop-detail-tabs h4 + ul {margin-top: 1.25rem;}
.shop-detail-tabs ul:not(.nav-tabs):not(.comments-thread):not(.children) li {
font-family: Open Sans;
color: #555555;
font-size: 0.875rem;
line-height: 1.5rem;
width: 100%;
padding-left: 2.5rem;
position: relative;
margin-top: 5px;
}
.shop-detail-tabs ul:not(.nav-tabs) li:before {
content: "";
border: 1px solid;
position: absolute;
height: 10px;
width: 10px;
-webkit-border-radius: 50%;
border-radius: 50%;
left: 1.25rem;
top: 7px;
}
.shop-detail-info ul:not(.nav-tabs):not(.comments-thread):not(.children) li {
font-size: .9rem;
width: 100%;
padding-left: 2.5rem;
position: relative;
margin-top: 5px;
}
.shop-detail-info ul:not(.nav-tabs) li:before {
content: "";
border: 1px solid;
position: absolute;
height: 10px;
width: 10px;
-webkit-border-radius: 50%;
border-radius: 50%;
left: 1.25rem;
top: 7px;
border-color: #970733;
}
.comment-detail > span.rate {float: right;}
.shop-detail-tabs .comment-detail h4 {display: inline-block;}
/*===== Shop Cart =====*/
.product-table {width: 100%;}
.product-table thead th {
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
text-align: center;
padding: 1.188rem;
}
.product-table thead th,
.product-table tbody td {border: 1px solid #ededed;}
.product-table tbody td {
padding: 10px;
font-size: 13px;
color: #777;
}
.product-table tbody td:not(.product-image) {padding: 1.25rem 1.875rem;}
.product-table tbody td h4 {
font-size: 1rem;
font-weight: 500;
}
.product-table tbody td h4 + p {margin-top: 8px;}
.product-table tbody td p {
font-size: 13px;
max-width: 90%;
}
.product-cart-btns {
min-width: 1.5625rem;
text-align: center;
/* max-width: 1.5625rem;*/
}
.product-cart-btns > a {
display: inline-block;
font-size: 14px;
color: #333;
}
.product-cart-btns > a + a {margin-top: 7px;}
.qty-wrp {
display: inline-block;
max-width:7rem;
}
.qty-wrp .bootstrap-touchspin input {
width: 100%;
border: 1px solid #ededed;
-webkit-border-radius: 5px !important;
border-radius: 5px !important;
font-size: 14px;
color: #333;
padding: 5px 1.2rem;
text-align: center;
}
.qty-wrp .bootstrap-touchspin span.input-group-btn {
position: absolute;
margin: 0;
top: 0;
bottom: 0;
z-index: 4;
}
.qty-wrp .bootstrap-touchspin span.input-group-prepend {left: 0;}
.qty-wrp .bootstrap-touchspin span.input-group-append {right: 0;}
.qty-wrp .bootstrap-touchspin span.input-group-btn button {
padding: 0;
background-color: transparent;
border: 0;
color: #333;
-webkit-border-radius: 0;
border-radius: 0;
top: 0;
bottom: 0;
width: 1.2rem;
}
.cart-table-top-btns {
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
border-top: 1px solid #ededed;
/* padding: 1.25rem 1.875rem; */
}
.cart-table-bottom-btns {
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
/* padding: 1.25rem 1.875rem; */
}
.cart-table-bottom-btns + .cart-data {margin-top: 1.25rem;}
.cart-data-box {
border: 1px solid #ededed;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 1.875rem;
padding: 1.5625rem;
}
.cart-data-box > h3 {
font-size: 1rem;
font-weight: 600;
}
.field-box + .field-box {margin-top: 10px;}
.field-box > label {
font-size: 13px;
display: block;
margin-bottom: 8px;
}
.cart-data-box > h3 + .field-box {margin-top: 1.25rem;}
.field-box .slc-wrp {width: 100%;}
.field-box .slc-wrp .bootstrap-select > button,
.field-box input {
background-color: #ffffff;
/*border: 0;*/
-webkit-border-radius: 0;
border-radius: 5px;
padding: 7.75px .9375rem;
font-size: 13px;
color: #777;
width: 100%;
}
.cart-data-box button {display: inline-block;}
.field-btn {
text-align: right;
margin-top: 1.25rem;
}
.cart-data-box > span {
text-align: right;
font-size: 1rem;
font-weight: 600;
}
.cart-data-box > span span.price {
font-weight: inherit;
font-size: inherit;
margin-left: 10px;
}
.checkout-btn {
font-size: 1rem;
padding: 1.125rem 3.125rem;
}
/*===== Shop Checkout =====*/
.checkout-form-box {
border: 1px solid #ededed;
padding-bottom: 2.8125rem;
margin-bottom: 2.8125rem;
border-radius: 10px 10px 0 0;
}
.checkout-form-box-title {
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
background-color: #ededed;
padding: 1.275rem 1.875rem;
}
.checkout-form-box-title > h3 {
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
}
.checkout-form-inner {padding: 1.875rem 25px 0;}
.checkout-form-inner .checkout-form-field {
margin-top: 0.25rem;
display: flex;
}
.checkout-form-field label {
text-align: right;
margin-bottom: 0;
font-size: 13px;
color: #777;
line-height: 1.875rem;
padding-right: 1.125rem;
width: 6.75rem;
}
.checkout-form-field input,
.checkout-form-field .slc-wrp .bootstrap-select > button {
width: 100%;
height: 2.1875rem;
background-color: #ffffff;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 0;
font-size: 13px;
color: #777;
padding: 5px 1rem;
border: 1px solid #cbcdd1;
margin-bottom: 15px;
}
.checkout-form-field .slc-wrp .bootstrap-select > button {width: 100%;}
.checkout-form-field .slc-wrp,
.checkout-form-field .slc-wrp .bootstrap-select {
/*max-width: 16.875rem;*/
width: 100%;
}
.checkout-form-inner > p {
font-size: 13px;
margin-top: 5px;
}
.checkout-form-inner > p + img {margin-top: 1.5625rem;}
.checkout-form-inner .checkout-form-field-wrap .checkout-form-field {
flex: 0 0 47%;
max-width: 47%;
}
.checkout-form-field-wrap .checkout-form-field input {width: 4.375rem;}
.checkout-form-inner > img + .checkout-form-field {margin-top: 3.125rem;}
.checkout-form button.simple-btn {
font-size: 1.125rem;
/* padding: 1.03125rem 3.125rem;*/
text-transform: initial;
}
/*=== Billing Details ===*/
.billing-details table {width: 100%;}
.billing-details table thead th,
.billing-details table tfoot th {
font-family: Poppins;
font-weight: 500;
font-size: 1rem;
}
.billing-details table thead th {
border-bottom: 1px solid #ededed;
padding-bottom: 6px;
padding-right: 30px;
}
.billing-details table tfoot th {
border-top: 1px solid #ededed;
padding-top: 10px;
}
.billing-details table tbody td {
font-size: 13px;
color: #777;
padding: 5px 0;
}
.billing-details table thead th:last-child,
.billing-details table tfoot th:last-child,
.billing-details table tbody td:last-child {text-align: center;}
.billing-details table tbody tr td {padding-top: 1.5rem;}
.billing-details table tbody tr:last-child td {padding-bottom: 1.5rem;}
.billing-details table tbody td span {
max-width: 70%;
display: inline-block;
width: 100%
}
.color-rouge{color: #970733!important;}
.bg-rouge{background-color: #970733!important;}
.color-blue{color: #00599a!important;}
.color-b{color: #62a5d6!important;}
.menu-item-has-children .list-unstyled ul li a:hover{color: #00599a!important;}
/*.menu-item-has-children.list-unstyled:hover > ul > li {
color: #00599a!important;
}*/
.color-h:hover{color: #00599a!important;}
.lang-icon {
height: 25px;
width: 25px;
}
nav > div ul li:nth-last-child(4) ul li ul{
left: auto;
right: 100%;
}
.artualite_text {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box!important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.title_text {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 1rem;
font-weight: 600;
height: 50px;
}
.widget ul li :hover{ white-space: nowrap;}
.icone_footer{color: #3077ab;margin-right: 10px;}
.getin-touch-btn a:hover{color: #ffffff !important;}
.video-bb{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #f00!important;
line-height: 3.4375rem!important;
width: 4.4375rem!important;
height: 3.4375rem!important;
font-size: 1.6rem!important;
border-radius: 12px 12px 12px 12px;
}
.youtube {height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background-color: #f00;
border-radius: 10px;
display: block;
color: #fff;
font-size: 42px;
margin: 0 auto 10px;
/* box-shadow: 0 0px 10px 4px rgb(31 66 135 / 20%); */
box-shadow: 0 2px 15px rgb(168 168 168 / 12%);
transition: all 0.5s;}
.srch::-webkit-input-placeholder{color:#fff!important;}
.srch::-moz-placeholder{color:#fff!important;}
.srch:-ms-input-placeholder{color:#fff!important;}
.srch::-ms-input-placeholder{color: #fff !important;}
.srch::placeholder{color:#fff!important;}
.border-non{ border-top: none;
border-bottom: none; }
.post-info-bottom > span i {
color: #00599a!important;
}
.post-info-bottom > span i:hover {
color: #00487D!important;
}
.shop-info > .shop-info-bottom {
color: #00599a!important;
}
.shop-info > h3 {
font-size: 1rem;
color: #970733;
}
.btn_padd{padding: 0.5rem 1rem!important;}
.titre-des{
color: #00599a !important;
font-weight: 600!important;}
.cad-prod{border: 1px solid #e8e8e8;}
.shop-prod > a {
white-space: nowrap;
background-color: var(--color20);
color: #fff;
text-transform: uppercase;
font-size: 13px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 7.25px 0.9375rem;
min-width: 9.5625rem;
font-weight: 600;
border-radius: 0.3125rem;
}
.shop-prod > a:hover, .shop-prod > a:focus {
background-color: #ae0018;
color: #fff !important;
cursor: pointer;
}
.titre-slide {
background: linear-gradient(94deg, #ffffffab, #ffffff88, #ffffff00);
text-shadow: 1px 0 34px #ffffff26;
color: #00599a!important;
padding: 15px;
border-radius: 20px 0 0 20px;
}
.modal-contenu{
text-align: center;
margin-bottom: 20px;
margin-top: 10px;
}
.thm-bg1 {background-color:#005a99!important}
.select-form
{
border-radius: 5px;
margin-bottom: 20px;
}
.select-des
{background: #00599a;
color: white;}
.desc-info
{
color: #798795;
max-width: 95%;
margin-top: 1rem;
font-family: Open Sans;
color: #555555;
line-height: 1.5rem;
font-size: .9rem;
/* display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; */
}
.desc-info ul {
padding-inline-start: 0px;
}
.desc-info ul li
{
color: #798795;
max-width: 95%;
margin-top: 1rem;
list-style-type: none;
font-family: Open Sans;
color: #555555;
line-height: 1.5rem;
font-size: .9rem;
/* display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; */
}
.modal {
z-index: 99999!important;
}
a.readmore
{
background:#00599a!important;
}
.errors
{
color: red;
}
.optioncart
{
border-bottom: 1px solid #efecec;
}
.ligne_cart
{
border-bottom: 1px solid #efecec;
}
.optionall
{
border: 1px solid #efecec;
}
.order-details {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
}
.order-overview {
flex: 1 1 0%;
margin-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
border-right: 1px solid;
color: #777;
text-align: center;
border-color: rgba(129, 129, 129, 0.2);
list-style: none;
}
.order-overview strong {
display: block;
margin-top: 10px;
color: #2d2a2a;
}
h2.order-title {
letter-spacing: 0px;
display: block;
margin-bottom: 20px;
color: #2d2a2a;
font-weight: 600;
line-height: 1.4;
font-size: 24px;
text-align: center;
}
.order_table table {
width: 100%;
}
.order_table table thead tr th {
min-width: 50%;
text-align: center;
padding: 6px 0;
border-bottom: 3px solid #980c38;
}
.table-responsive table tbody tr td {
border-right: none;
font-weight: 500;
text-transform: capitalize;
font-size: 14px;
text-align: center;
min-width: 140px;
}
.order_table table tbody tr td {
min-width: 50%;
text-align: center;
padding: 15px 0;
border-bottom: 1px solid #980c38;
}
.order_table table tfoot tr th {
min-width: 50%;
text-align: center;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
th.subtotal,
td.subtotal {
border-top: 2px solid #980c38;
}
.order_table table tfoot tr th {
min-width: 50%;
text-align: center;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.order_table table tfoot tr td {
min-width: 50%;
text-align: center;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.about-wrap.style2 ul{list-style: none; padding-right: 3rem; padding-left: 0;}
.about-wrap.style2 ul li{
padding: 1.5625rem 0 0.75rem 2.5rem;
position: relative;
border-bottom: 1px solid #ecedef;
font-size: 1rem;
font-weight: 400;
font-family: Open Sans;
color: #222;
line-height: 1.2;
}
.about-wrap.style2 ul li:before{
content: "\f00c";
font-family: "Font Awesome 5 Free";
position: absolute;
left: 0;
top: 1.5625rem;
height: 1.5625rem;
width: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--color1);
background-color: #ecedef;
text-align: center;
}
/***********************************mega menu*******************************************/
/* adds some margin below the link sets */
.navbar .dropdown-menu div[class*="col"] {
margin-bottom:1rem;
}
.navbar .dropdown-menu {
border:none;
background-color:#fff!important;
}
/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {
/* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
padding-top:0px;
padding-bottom:0px;
}
.navbar .dropdown ul li:hover > a {color: #00599a !important;}
/* makes the dropdown full width */
.navbar .dropdown {position:static;}
.navbar .dropdown-menu {
width:100%;
left:0;
right:0;
top:45px;
display:none;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
}
.sticky-menu .navbar .dropdown-menu {
top: 61px!important;
left:-200px;
}
.dropdown-menu div{line-height: 1.875rem!important;}
.navbar .dropdown:hover .dropdown-menu {
display:block;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.3s linear;
}
.navbar .dropdown-menu {
border: 1px solid rgba(0,0,0,.15);
background-color: #fff;
}
}
.dropdown-header {
display: block;
padding: 0.5rem 0.5rem 0rem 1.5rem!important;
}
.color-h :hover,.dropdown-li :hover,.dropdown-ul :hover , .dropdown-li a :hover,.dropdown-li a :focus, .dropdown-ul :focus, .dropdown-li :focus {
background-color:#fff!important;
}
.dropdown-ul:first-child:hover { color:#fff!important}
.dropdown-li {
margin-top: 0px!important;
opacity: unset!important;
visibility: visible!important;
border-top: unset!important;
list-style-type: none;
}
.dropdown-li a:before {
content: " "!important;}
.dropdown-li a:hover, .dropdown-li a:focus {
color: #00599a !important;
}
.dropdown-li a {
padding: 0px 0px; }
.dropdown-li ul ul li a:focus {
background-color: unset!important;
padding-left: 0 px!important;
}
.dropdown-ul {
position: relative;
top: unset !important;
min-width: 0 px!important;
line-height: unset!important;
opacity: unset!important;
visibility: visible!important;
-webkit-box-shadow: unset!important;
-ms-box-shadow: unset!important;
-o-box-shadow: unset!important;
box-shadow: unset!important;
}
.navbar .dropdown-menu ul ul {
padding-left:20px!important;
}
.navbar .dropdown-menu ul ul {
padding-left:0px!important;
}
.navbar .dropdown-menu div ul li a {
font-weight: 600;
}
.navbar .dropdown-menu div ul ul li a {
font-weight: 400!important;
}
.dropdown-header{font-weight: 600;}
.navbar .dropdown-menu ul :hover > a, .navbar .dropdown-menu li:first-child :focus > a,.navbar .dropdown-menu li:first-child :hover > a, .navbar .dropdown-menu ul :focus {
background-color: #fff!important;
padding-left: 0px!important;
}
.navbar .dropdown-menu ul ul ul li:hover > a, .navbar .dropdown-menu ul ul ul li:focus > a
{ background-color: #fff!important;
padding-left: 30px!important;
}
.navbar .dropdown-menu ul ul ul li > a {font-weight: 400!important;}
.navbar .dropdown-menu div ul ul ul {padding-right:10px!important}
.font-a a:hover, .font-a a:focus
{ background-color: #fff!important;
padding-left: 0px!important;
color:red;
}
.navbar .dropdown-menu ul {
top: 0;
left: 0!important;
}
.pd-10{padding-top:15px}
/***********************************fin style mega menu*******************************************/
.color-bleu{color: #00599a!important;}
@media screen and (min-width: 1920px) {
.feat-cap { margin-left: -170px;}
}
@media only screen and (max-width: 1919px) and (min-width: 1700px) {
.feat-cap { margin-left: -100px;}
}
.hand-none { pointer-events: none;}
/********* My account *********/
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: #970733;
}
.nav-pills a:hover{
color: #00487D;
}
/********* My account **********/
@media screen and (min-width: 1378px) and (max-width: 1558px) {
nav > div > ul > li {
margin-right: 0.4rem;
font-size: 0.7rem;
}
nav > div ul ul li {
font-size: 0.75rem;
}
}
@media screen and (min-width: 1124px) and (max-width: 1377px) {
nav > div > ul > li {
font-size: 0.65rem;
}
nav > div ul ul li {
font-size: 0.7rem;
}
}
@media screen and (min-width: 1035px) and (max-width: 1124px) {
nav > div > ul > li {
font-size: 0.45rem;
}
}
@media screen and (min-width: 1850px) {
nav > div > ul > li {
margin-right: 0.5rem;
font-size: 1rem;
}
nav > div ul ul li {
font-size:0.85rem;
}
}
@media (max-width: 1080px){
nav > div > ul > li {
margin-right: 0.75rem !important;
}
}
.bd-partner{
border: 1px solid #ecedef;
margin: 20px;
}
.fs-20{
font-size: 20px!important;
}
.img-border{
border: 1px solid #dfdfdf; border-radius: 5px;
}
.brd-rd-b{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.shop-detail-wrap .shop-detail-tabs .tab-content .tab-pane ul{list-style: none!important; padding-left:0px; }
.shop-wrap .serv-wrap p , .shop-wrap .serv-wrap p span , .shop-wrap .serv-wrap ul li, .shop-wrap .serv-wrap ul li span{
font-family: Open Sans!important;
color: #555555!important;
line-height: 1.5rem!important;
font-size: .9rem!important;
}
.sous-titre , .sous-titre p{
margin-bottom: 0px!important;
font-size:12px!important;
/* text-align: justify; */
font-family: Open Sans!important;
color: #555555!important;
}
.shop-detail-tabs .tab-content ul li span{
font-family: Open Sans;
color: #555555;
font-size: 0.875rem !important;
line-height: 1.5rem;
}
.shop-detail-tabs .tab-content p span{
font-family: Open Sans;
color: #555555;
font-size: .9rem !important;
line-height: 1.5rem;
}
/* panier */
@media (min-width: 768px) {
.w-md-100 {
width: 100% !important;
}
}
.page-top-wrap span {
font-size: 3.4375rem; color: #fff;
}
.title-categ h1{
color: #00599A;
font-weight: 600;
font-size: 2rem;
line-height: 3rem;
}
/* Bouton WhatsApp fiche produit (vert WhatsApp de la maquette de refonte) */
/* .detail-share > a (theme) impose inline-block et une marge : on le surcharge */
.tp-btn-whatsapp,
.detail-share > .tp-btn-whatsapp {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
margin: 0 0 15px;
padding: 0 16px;
/* Etape B : #128c4b (4,30:1) remplace par --tp-whatsapp #0e7340 (5,92:1), WCAG AA */
background-color: var(--tp-whatsapp, #0e7340);
color: #fff !important;
border: 0;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
text-align: center;
vertical-align: baseline;
text-decoration: none !important;
transition: background-color .15s, box-shadow .15s, transform .15s;
}
/* a.tp-btn-whatsapp : plus precis que a:hover du theme (bleu clair !important) */
a.tp-btn-whatsapp:hover,
a.tp-btn-whatsapp:focus {
background-color: var(--tp-whatsapp-700, #0b5e35);
color: #fff !important;
box-shadow: 0 6px 16px rgba(11, 94, 53, .28);
transform: translateY(-1px);
}
a.tp-btn-whatsapp:active {
box-shadow: none;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
a.tp-btn-whatsapp:hover,
a.tp-btn-whatsapp:focus {transform: none;}
}
.tp-btn-whatsapp:focus-visible {
outline: 3px solid #00599a;
outline-offset: 2px;
}
.tp-btn-whatsapp i {
color: #fff;
font-size: 20px;
}
/* Fiche produit : quantite au-dessus, bouton devis pleine largeur (action principale) */
.tp-achat {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
.tp-quantite {
display: flex;
align-items: center;
gap: 12px;
}
.tp-quantite label {
margin: 0;
font-weight: 600;
font-size: 15px;
color: #0b2a45;
}
.tp-quantite .qty-wrp {
max-width: none;
width: 144px;
}
/* Quantite et Societe : libelles de meme largeur, champs alignes */
.tp-achat .tp-quantite label {min-width: 80px;}
.tp-societe input {
flex: 1;
min-width: 0;
height: 44px;
padding: 0 14px;
border: 1.5px solid #e3e8ee;
border-radius: 8px;
color: #0b2a45;
font-size: 15px;
}
.tp-societe input::placeholder {color: #8a97a5;}
.tp-societe input:focus {
border-color: #00599a;
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 89, 154, .15);
}
.tp-quantite .qty-wrp .bootstrap-touchspin input {
height: 44px;
padding: 0 44px;
font-size: 16px;
font-weight: 600;
border: 1.5px solid #e3e8ee;
border-radius: 8px !important;
}
.tp-quantite .qty-wrp .bootstrap-touchspin span.input-group-btn button {
width: 44px;
font-size: 20px;
color: #0b2a45;
}
.tp-quantite .qty-wrp .bootstrap-touchspin span.input-group-btn button:hover {
background-color: #eaf2f9;
}
.tp-btn-devis {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* meme hauteur et meme corps que le bouton WhatsApp juste en dessous */
min-height: 48px;
padding: 0 16px !important;
background-color: #970733;
color: #fff;
border: 0;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
cursor: pointer;
transition: background-color .15s, box-shadow .15s;
}
.tp-btn-devis:hover,
.tp-btn-devis:focus {
background-color: #7a0529;
color: #fff;
box-shadow: 0 8px 24px rgba(11, 42, 69, .12);
}
.tp-btn-devis:focus-visible {
outline: 3px solid #00599a;
outline-offset: 2px;
}
/* Fiche produit : mention sous les boutons */
.tp-mention-devis {
margin: 0 0 15px;
text-align: center;
font-size: 13px;
color: #5b6b7a;
}
/* Fiche produit : partage Facebook / LinkedIn */
.tp-partage {
display: flex;
align-items: center;
gap: 10px;
}
.tp-partage > span {
font-family: Poppins;
color: #0b2a45;
}
.tp-partage-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 18px;
color: #fff !important;
text-decoration: none !important;
}
.tp-partage-facebook {background-color: #1877f2;}
.tp-partage-linkedin {background-color: #0a66c2;}
.tp-partage-btn:hover,
.tp-partage-btn:focus {filter: brightness(.88);}
.tp-partage-btn:focus-visible {
outline: 3px solid #00599a;
outline-offset: 2px;
}
/* Fiche produit : description sous l'image en ordinateur, apres le bloc devis en mobile */
.tp-description {
max-width: none;
margin-top: 32px;
color: #555;
font-size: 15px;
line-height: 1.7;
text-align: justify;
/* cesure (lang="fr"/"en" sur ) : limite les grands blancs du texte justifie en mobile */
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.tp-titre-description {
position: relative;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid #e8e8e8;
color: #00599a;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
}
.tp-titre-description:after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 56px;
height: 2px;
background: #970733;
}
.tp-description p {
margin: 0 0 14px;
font-size: inherit;
line-height: inherit;
}
.tp-description ul {margin: 0 0 14px;}
.tp-description ul li {
position: relative;
max-width: none;
margin-top: 6px;
padding-left: 24px;
color: inherit;
font-size: inherit;
line-height: inherit;
}
.tp-description ul li:before {
content: "";
position: absolute;
left: 2px;
top: .6em;
width: 9px;
height: 9px;
border: 2px solid #00599a;
border-radius: 50%;
}
/* tailles saisies dans l'editeur : une seule taille de texte */
.tp-description [style*="font-size"] {font-size: inherit !important;}
/* une seule photo : pas de miniature, l'image prend toute la colonne */
.shop-detail-imgs.tp-une-image {padding-right: 0;}
.tp-une-image .shop-detail-nav-caro {display: none !important;}
/* Fiche produit en mobile : bandeau reduit, marges reduites (responsive.css est charge apres) */
@media (max-width: 767px) {
.tp-bandeau-produit {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.tp-bandeau-produit .page-top-wrap > h1 {
font-size: 22px;
line-height: 1.2;
}
.tp-bandeau-produit ol.breadcrumb {
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
}
.tp-bandeau-produit ol.breadcrumb li.breadcrumb-item {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.tp-bandeau-produit ol.breadcrumb li.breadcrumb-item:first-child {flex: none;}
.tp-bandeau-produit ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item {
margin-left: .4rem;
padding-left: 1.1rem;
}
/* le nom du produit est deja le titre juste au-dessus */
.tp-bandeau-produit ol.breadcrumb li.breadcrumb-item.active {display: none;}
.tp-section-produit {
padding-top: 20px !important;
padding-bottom: 30px !important;
}
/* miniatures plus compactes (masquees avec une seule photo, voir .tp-une-image) */
.shop-detail-imgs .shop-detail-nav-caro {margin-top: 8px;}
.shop-detail-imgs .shop-detail-nav-caro .slick-slide {padding: 0 4px;}
.shop-detail-imgs .shop-detail-nav-caro .slick-slide img {margin: 0;}
.shop-detail-inner .shop-detail-info {margin-top: 16px;}
}
/* ===== Pied de page (refonte 2026) ===== */
/* est en flex : les trois blocs prennent toute la largeur */
.tp-pied-contact,
.tp-pied,
.tp-pied-bas {width: 100%;}
/* Bandeau de contact : WhatsApp et telephone (pas de bordeaux : pas d'action principale ici) */
.tp-pied-contact {
background: #f4f7fb;
border-top: 1px solid #e5e9f0;
padding: 32px 0;
}
.tp-pied-contact-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.tp-pied-contact h2 {
margin: 0 0 4px;
color: #00243d;
font-size: 24px;
font-weight: 700;
}
.tp-pied-contact p {
margin: 0;
color: #4b5563;
font-size: 15px;
}
.tp-pied-contact-btns {
display: flex;
flex: none;
flex-wrap: wrap;
gap: 12px;
}
.tp-pied-contact-btns .tp-btn-whatsapp {
width: auto;
margin: 0;
padding: 0 24px;
}
.tp-pied-btn-tel {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 24px;
background: #fff;
border: 1px solid #c9d6e6;
border-radius: 8px;
color: #00599a !important;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
white-space: nowrap;
}
a.tp-pied-btn-tel:hover,
a.tp-pied-btn-tel:focus {
background: #f0f6fc;
border-color: #00599a;
color: #00599a !important;
}
/* Colonnes */
.tp-pied {
position: relative;
padding: 56px 0 24px;
color: #c7d2df;
font-size: 15px;
}
/* contenu au-dessus du fond anime de points (.particles-js, en position absolue) */
.tp-pied > .container {
position: relative;
z-index: 1;
}
.tp-pied-logo {display: inline-block;}
.tp-pied-intro {
margin: 16px 0 24px;
color: #c7d2df;
font-size: 15px;
line-height: 1.7;
}
.tp-pied h3 {margin: 0 0 14px;}
.tp-pied-bascule {
width: 100%;
padding: 0;
background: none;
border: 0;
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: .06em;
text-align: left;
text-transform: uppercase;
cursor: default;
}
.tp-pied ul {margin: 0 0 28px;}
.tp-pied ul li {
margin-bottom: 10px;
color: #c7d2df;
font-size: 15px;
line-height: 1.6;
}
.tp-pied a {color: #c7d2df;}
.tp-pied-tout a {font-weight: 600; color: #fff !important;}
.tp-pied a:hover,
.tp-pied a:focus {
color: #fff;
text-decoration: underline;
}
.tp-pied-coord li {
display: flex;
align-items: flex-start;
gap: 12px;
}
.tp-pied-coord i {
flex: none;
width: 16px;
margin-top: 4px;
color: #7fb3e6;
text-align: center;
}
.tp-pied-coord a {color: #fff;}
.tp-pied-suivre {
margin: 0 0 12px;
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.tp-pied-reseaux {
display: flex;
gap: 10px;
margin-bottom: 28px;
}
.tp-pied-reseaux a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #16365f;
color: #fff;
font-size: 16px;
text-decoration: none !important;
transition: background-color .15s;
}
.tp-pied-reseaux a:hover,
.tp-pied-reseaux a:focus {background: #00599a;}
.tp-pied a:focus-visible,
.tp-pied-bascule:focus-visible {
outline: 3px solid #7fb3e6;
outline-offset: 2px;
}
/* Ligne du bas */
.tp-pied-bas {
background: #001a2d;
color: #9fb0c4;
font-size: 13px;
padding: 14px 0;
}
.tp-pied-bas .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 24px;
}
.tp-pied-bas p {
margin: 0;
color: #9fb0c4;
font-size: 13px;
line-height: 1.6;
}
.tp-pied-bas p a {text-decoration: underline; text-underline-offset: 2px;} /* T20 : lien dans un texte, distinguable sans la couleur (WCAG 1.4.1) */
.tp-pied-bas nav {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
}
.tp-pied-bas a {color: #c7d2df;}
.tp-pied-bas a:hover,
.tp-pied-bas a:focus {color: #fff;}
@media (max-width: 991px) {
.tp-pied-contact-inner {
flex-direction: column;
align-items: flex-start;
}
}
/* Mobile : boutons pleine largeur, rubriques repliables (script.js), Contact ouvert */
@media (max-width: 767px) {
.tp-pied-contact {padding: 24px 0;}
.tp-pied-contact h2 {font-size: 20px;}
.tp-pied-contact-btns {
flex-direction: column;
width: 100%;
}
.tp-pied-contact-btns .tp-btn-whatsapp,
.tp-pied-btn-tel {width: 100%;}
.tp-pied {padding: 32px 0 8px;}
.tp-pied-intro {margin-bottom: 16px;}
.tp-pied-rubrique {border-top: 1px solid #1d3b63;}
.tp-pied h3 {margin: 0;}
.tp-pied-bascule {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 48px;
cursor: pointer;
}
.tp-pied-bascule:after {
content: "+";
font-size: 20px;
font-weight: 400;
}
.tp-ouvert .tp-pied-bascule:after {content: "\2212";}
.tp-pied-rubrique > ul {display: none;}
.tp-pied-rubrique.tp-ouvert > ul {display: block;}
.tp-pied ul {margin-bottom: 16px;}
.tp-pied-bas .container {
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* ===== Pages de contenu (Administration > Pages : mentions legales, confidentialite...) ===== */
.tp-page-contenu {
max-width: 820px;
color: #374151;
font-size: 16px;
line-height: 1.7;
text-align: justify;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.tp-page-contenu p,
.tp-page-contenu ul li,
.tp-page-contenu ol li,
.tp-page-contenu td,
.tp-page-contenu th {
color: inherit;
font-size: inherit;
line-height: inherit;
}
.tp-page-contenu p {margin: 0 0 12px;}
.tp-page-contenu h2 {
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e8e8e8;
color: #00599a;
font-size: 21px;
font-weight: 700;
text-align: left;
}
.tp-page-contenu h2:first-child {margin-top: 0;}
.tp-page-contenu h3 {
margin: 20px 0 8px;
color: #00243d;
font-size: 17px;
font-weight: 700;
text-align: left;
}
/* listes simples de l'editeur ; les listes deja stylees (ex. .list-unstyled de « Qui sommes-nous ») restent intactes */
.tp-page-contenu ul:not([class]),
.tp-page-contenu ol:not([class]) {margin: 0 0 14px; padding-left: 22px;}
.tp-page-contenu ul:not([class]) > li {list-style: disc; margin-bottom: 4px;}
.tp-page-contenu a {color: #00599a; text-decoration: underline;}
.tp-page-contenu .tp-maj {color: #6b7280; font-size: 14px;}
/* tableaux : defilement horizontal en mobile */
.tp-page-contenu .tp-tableau {overflow-x: auto; margin: 6px 0 16px;}
.tp-page-contenu table {width: 100%; border-collapse: collapse; text-align: left;}
.tp-page-contenu th,
.tp-page-contenu td {
padding: 10px 12px;
border-bottom: 1px solid #e5e7eb;
font-size: 15px;
vertical-align: top;
}
.tp-page-contenu th {background: #f4f7fb; color: #00243d; font-weight: 700;}
.tp-page-contenu [style*="font-size"] {font-size: inherit !important;}
@media (max-width: 767px) {
.tp-page-contenu {font-size: 15px;}
.tp-page-contenu h2 {font-size: 19px;}
.tp-page-contenu table {min-width: 520px;}
}
/* ===== Fiche produit : refonte 2026 (galerie carree, bloc de demande fixe, sections ancrees) ===== */
.tp-pdp {
width: 100%;
/* la barre de menu ne deborde plus sur le contenu (en-tete phase 1) */
padding: var(--s-6) 0 var(--s-16);
background: #fff;
}
/* Fil d Ariane (R03 : sans le retrait de la regle globale nav, aligne sur la grille) */
.tp-pdp .tp-ariane {padding: 0; margin: 0; border-radius: 0;}
.tp-ariane ol {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 0 var(--s-6);
padding: 0;
list-style: none;
}
.tp-ariane li {
margin: 0;
color: #6b7280;
font-size: 13px;
line-height: 1.5;
}
.tp-ariane li + li:before {
content: "\203A";
margin: 0 8px;
color: #9ca3af;
}
.tp-ariane a {color: #6b7280 !important;}
.tp-ariane a:hover {color: #00599a !important; text-decoration: underline;}
.tp-ariane li[aria-current] {color: #0b2a45; font-weight: 600;}
/* Grille : galerie 7/12, bloc de demande 5/12 */
.tp-pdp-grille {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--s-12);
align-items: start;
}
/* Galerie */
.tp-galerie {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.tp-galerie.tp-une-image {grid-template-columns: minmax(0, 1fr);}
.tp-vignettes {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 560px;
overflow-y: auto;
}
.tp-vignette {
flex: none;
width: 76px;
height: 76px;
padding: 6px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
}
.tp-vignette img {width: 100%; height: 100%; object-fit: contain;}
.tp-vignette.tp-actif {border: 2px solid #0b2a45; padding: 5px;}
.tp-vignette:focus-visible {outline: 3px solid #00599a; outline-offset: 2px;}
.tp-galerie-cadre {
position: relative;
border-radius: 12px;
background: #f7f8fa;
overflow: hidden;
}
.tp-galerie-piste {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.tp-galerie-piste::-webkit-scrollbar {display: none;}
.tp-galerie-diapo {
flex: 0 0 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 6%;
scroll-snap-align: start;
cursor: zoom-in;
}
.tp-galerie-diapo img {
width: auto; /* R04 : width/height en attributs pour le ratio, taille réelle gardée par le cadre */
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
mix-blend-mode: multiply; /* fond blanc des photos fondu dans le gris clair */
}
.tp-galerie-loupe {
position: absolute;
right: 14px;
bottom: 14px;
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
color: #0b2a45;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
pointer-events: none;
}
.tp-galerie-compteur {
position: absolute;
left: 14px;
bottom: 14px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(11, 42, 69, .75);
color: #fff;
font-size: 12px;
pointer-events: none;
}
.tp-galerie-points {display: none;}
/* Bloc de demande */
.tp-demande {
position: sticky;
top: 96px; /* sous le menu fixe du theme */
}
.tp-surtitre {
display: inline-block;
margin-bottom: 8px;
color: #00599a !important;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.tp-pdp-titre {
margin: 0 0 12px;
color: #0b2a45;
font-size: 30px;
font-weight: 700;
line-height: 1.2;
}
.tp-pdp-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin-bottom: 20px;
color: #6b7280;
font-size: 13px;
}
.tp-pastille {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: #eef5fb;
color: #00599a;
font-size: 12.5px;
font-weight: 600;
}
.tp-doc {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 10px;
color: #0b2a45 !important;
text-decoration: none !important;
transition: border-color .15s, background-color .15s;
}
.tp-doc:hover,
.tp-doc:focus {border-color: #00599a; background: #f7fafd;}
.tp-doc-ic {
flex: none;
width: 38px;
height: 38px;
border-radius: 8px;
background: #fdecef;
color: #970733;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
}
.tp-doc-tx {font-size: 15px; font-weight: 600;}
.tp-doc-dl {margin-left: auto; color: #00599a;}
.tp-doc-section {max-width: 420px; margin-bottom: 0;}
/* Quantite + Societe cote a cote */
.tp-champs {
display: grid;
grid-template-columns: 136px minmax(0, 1fr);
gap: 12px;
margin-bottom: 16px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
}
.tp-champ label {
display: block;
margin: 0 0 6px;
color: #0b2a45;
font-size: 13px;
font-weight: 600;
}
.tp-champ .qty-wrp {display: block; max-width: none; width: 100%;}
.tp-champ .qty-wrp .bootstrap-touchspin input {
height: 48px;
padding: 0 40px;
border: 1.5px solid #d6dde5;
border-radius: 10px !important;
color: #0b2a45;
font-size: 16px;
font-weight: 600;
}
.tp-champ .qty-wrp .bootstrap-touchspin span.input-group-btn button {
width: 40px;
color: #0b2a45;
font-size: 20px;
}
.tp-champ .qty-wrp .bootstrap-touchspin span.input-group-btn button:hover {background-color: #eef5fb;}
.tp-champ.tp-societe input {
width: 100%;
height: 48px;
padding: 0 14px;
border: 1.5px solid #d6dde5;
border-radius: 10px;
color: #0b2a45;
font-size: 15px;
}
/* Boutons */
.tp-actions {display: flex; flex-direction: column; gap: 10px;}
.tp-actions .tp-btn-devis,
.tp-actions .tp-btn-whatsapp {min-height: 52px; margin: 0; font-size: 16px;}
.tp-actions .tp-btn-devis {box-shadow: 0 6px 16px rgba(151, 7, 51, .22);}
/* Garanties (libelles 97 a 99) */
.tp-garanties {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px 0 0;
padding: 16px 0 0;
border-top: 1px solid #e5e7eb;
list-style: none;
}
.tp-garanties li {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 0;
color: #0b2a45;
font-size: 12.5px;
line-height: 1.35;
text-align: center;
}
.tp-garanties i {
width: 38px;
height: 38px;
border-radius: 50%;
background: #eef5fb;
color: #00599a;
display: flex;
align-items: center;
justify-content: center;
}
.tp-demande .tp-partage {margin-top: 18px;}
/* Sections sous la fiche : onglets en ordinateur, accordeons en mobile */
.tp-onglets {margin-top: var(--s-12);}
.tp-onglets-liste {
display: flex;
gap: 32px;
border-bottom: 1px solid #e5e7eb;
}
.tp-onglet {
position: relative;
padding: 14px 0;
border: 0;
background: none;
color: #6b7280;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.tp-onglet:hover,
.tp-onglet[aria-selected="true"] {color: #0b2a45;}
/* bleu nuit : le bordeaux reste reserve a la demande de devis */
.tp-onglet[aria-selected="true"]:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 3px;
border-radius: 3px 3px 0 0;
background: #0b2a45;
}
.tp-onglet:focus {outline: none;}
.tp-onglet:focus-visible {outline: 2px solid #00599a; outline-offset: 4px;}
.tp-pdp-section {
display: block; /* le theme met les section en flex */
max-width: 780px;
padding-top: 24px;
scroll-margin-top: 130px;
}
@media (min-width: 992px) {
.tp-pdp-section.tp-inactif {display: none;}
/* l'onglet sert de titre visible ; le H2 reste dans la page */
.tp-pdp-section h2 {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
}
/* listes de l'editeur : puces rondes de .tp-description, sans la puce native */
.tp-pdp-section .tp-description ul {padding-left: 0; list-style: none;}
.tp-pdp-section .tp-description ul li {list-style: none;}
.tp-pdp-section h2 {margin: 0 0 14px;}
.tp-section-bascule {
padding: 0;
background: none;
border: 0;
color: #0b2a45;
font-size: 22px;
font-weight: 700;
text-align: left;
cursor: default;
}
.tp-pdp-section .tp-description {margin-top: 0; font-size: 16px; line-height: 1.75;}
.tp-video {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
padding: 0;
border: 0;
border-radius: 12px;
background: #1f2937 center / cover no-repeat;
cursor: pointer;
overflow: hidden;
}
.tp-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
.tp-video-play {
position: absolute;
top: 50%;
left: 50%;
width: 72px;
height: 72px;
margin: -36px 0 0 -36px;
border-radius: 50%;
background: rgba(255, 255, 255, .95);
color: #970733;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.tp-barre-mobile {display: none;}
/* Dans la meme categorie */
.tp-similaires {margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid #e5e7eb;}
.tp-similaires-tete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.tp-similaires-tete h2 {margin: 0; color: #0b2a45; font-size: 22px; font-weight: 700;}
a.tp-similaires-tout {color: #00599a !important; font-size: 15px; font-weight: 600; white-space: nowrap;}
a.tp-similaires-tout:hover,
a.tp-similaires-tout:focus {color: #0b2a45 !important; text-decoration: underline;}
.tp-similaires-liste {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.tp-similaires-liste li {list-style: none; margin: 0;}
.tp-similaires-liste li:before {display: none;}
.tp-carte {display: flex; flex-direction: column; height: 100%;}
.tp-carte-img {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
padding: 10%;
border-radius: 12px;
background: #f7f8fa;
overflow: hidden;
}
.tp-carte-img img {max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s;}
.tp-carte-nom {
display: -webkit-box;
margin-top: 12px;
color: #0b2a45;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tp-carte-ref {margin-top: 4px; color: #6b7280; font-size: 13px;}
a.tp-carte:hover .tp-carte-nom,
a.tp-carte:focus .tp-carte-nom {color: #00599a; text-decoration: underline;}
a.tp-carte:hover .tp-carte-img img {transform: scale(1.04);}
/* Tablette et mobile */
@media (max-width: 991px) {
.tp-pdp {padding-top: 20px;}
.tp-pdp-grille {grid-template-columns: minmax(0, 1fr); gap: 20px;}
/* boutons avant la fiche technique : le bouton devis reste dans le premier ecran */
.tp-demande {position: static; display: flex; flex-direction: column;}
.tp-demande > .tp-surtitre {align-self: flex-start;}
.tp-demande > .tp-doc {order: 1; margin: 16px 0 0;}
.tp-demande > .tp-garanties {order: 2;}
.tp-demande > .tp-partage {order: 3;}
.tp-galerie {grid-template-columns: minmax(0, 1fr);}
.tp-vignettes {display: none;}
.tp-galerie-points {
display: flex;
justify-content: center;
gap: 6px;
padding: 10px 0 0;
}
.tp-galerie-points span {width: 6px; height: 6px; border-radius: 3px; background: #cbd5e1; transition: width .2s;}
.tp-galerie-points span.tp-actif {width: 18px; background: #0b2a45;}
.tp-onglets {margin-top: var(--s-6);}
.tp-onglets-liste {display: none;}
/* sections en accordeon (script.js), Description ouverte */
.tp-pdp-section {max-width: none; padding-top: 0; border-top: 1px solid #e5e7eb;}
.tp-pdp-section:last-of-type {border-bottom: 1px solid #e5e7eb;}
.tp-pdp-section h2 {margin: 0;}
.tp-section-bascule {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 52px;
font-size: 17px;
cursor: pointer;
}
.tp-section-bascule:after {content: "+"; font-size: 22px; font-weight: 400;}
.tp-ouvert .tp-section-bascule:after {content: "\2212";}
.tp-pdp-section-corps {display: none; padding-bottom: 18px;}
.tp-ouvert .tp-pdp-section-corps {display: block;}
.tp-pdp-section .tp-description {font-size: 15px;}
/* barre fixe Devis + WhatsApp */
.tp-barre-mobile {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
gap: 10px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -6px 16px rgba(0, 0, 0, .06);
transform: translateY(110%);
transition: transform .2s;
}
.tp-barre-mobile.tp-visible {transform: none;}
.tp-barre-mobile .tp-btn-devis {flex: 1; min-height: 48px; margin: 0; font-size: 15px;}
.tp-barre-mobile .tp-btn-whatsapp {flex: none; width: 52px; min-height: 48px; margin: 0; padding: 0;}
.tp-barre-mobile .tp-btn-whatsapp i {font-size: 22px;}
.tp-pdp {padding-bottom: 88px;} /* la barre ne masque pas la fin de la page */
/* produits de la categorie : rangee a faire glisser */
.tp-similaires {margin-top: var(--s-8); padding-top: 0; border-top: 0;}
.tp-similaires-tete h2 {font-size: 19px;}
.tp-similaires-liste {
display: flex;
gap: 14px;
margin: 0 -15px;
padding: 0 15px 6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 15px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tp-similaires-liste::-webkit-scrollbar {display: none;}
.tp-similaires-liste li {flex: 0 0 28%; scroll-snap-align: start;}
}
@media (max-width: 767px) {
.tp-pdp {padding-top: var(--s-3);}
/* fil d Ariane reduit a un lien retour vers la categorie */
.tp-ariane ol {display: block; margin-bottom: var(--s-3); text-align: left;}
.tp-ariane li {display: none;}
/* la categorie est deja dans le lien retour du fil d'Ariane */
.tp-demande > .tp-surtitre {display: none;}
.tp-ariane li.tp-ariane-retour {display: block;}
.tp-ariane li.tp-ariane-retour:before {content: "\2039"; margin: 0 6px 0 0;}
.tp-ariane li.tp-ariane-retour a {color: #00599a !important; font-weight: 600;}
.tp-galerie-cadre {margin: 0 calc(-1 * var(--gutter)); border-radius: 0;}
.tp-pdp-titre {font-size: 22px; line-height: 1.25;}
.tp-champs {grid-template-columns: 120px minmax(0, 1fr);}
.tp-actions .tp-btn-devis,
.tp-actions .tp-btn-whatsapp {min-height: 48px; font-size: 15px;}
.tp-similaires-liste li {flex-basis: 42%;}
}
@media (prefers-reduced-motion: reduce) {
.tp-galerie-piste {scroll-behavior: auto;}
.tp-barre-mobile {transition: none;}
.tp-carte-img img {transition: none;}
}
/* ===== En-tete : refonte 2026 (phase 1) ===== */
/* Bande du haut, grise et discrete */
.tp-entete {background: #fff; border-bottom: 1px solid #e5e7eb;}
.tp-entete-util {background: #f7f8fa; border-bottom: 1px solid #e5e7eb;}
/* les trois etages alignes sur la meme largeur que la barre de menu */
.tp-entete .container {max-width: none; padding: 0 24px;}
.tp-entete-util .container {display: flex; align-items: center; justify-content: space-between; min-height: 36px;}
.tp-entete-accroche {color: #4b5563; font-size: 13px;}
.tp-entete-liens {display: flex; align-items: center; gap: 22px;}
.tp-entete-liens li {color: #4b5563; font-size: 13px; line-height: 36px;}
.tp-entete-liens a {color: #4b5563 !important;}
.tp-entete-liens a:hover,
.tp-entete-liens a:focus {color: #00599a !important;}
.tp-entete-liens i {margin-right: 4px;}
.tp-langues a + a {margin-left: 8px; padding-left: 8px; border-left: 1px solid #cbd5e1;}
.tp-langues a.tp-actif {color: #0b2a45 !important; font-weight: 700;}
/* Etage principal : logo, recherche, telephone, Mon devis */
.tp-entete-princ .container {display: flex; align-items: center; gap: 28px; min-height: 84px;}
.tp-entete-logo img {display: block; width: auto; height: 44px;}
.tp-recherche {
display: flex;
flex: 1;
max-width: 560px;
height: 46px;
margin: 0;
border: 1.5px solid #cbd5e1;
border-radius: 10px;
background: #fff;
overflow: hidden;
}
.tp-recherche:focus-within {border-color: #00599a; box-shadow: 0 0 0 3px rgba(0, 89, 154, .12);}
.tp-recherche input {
flex: 1;
min-width: 0;
padding: 0 16px;
border: 0;
background: transparent;
color: #1f2937;
font-size: 14.5px;
outline: none;
}
.tp-recherche input::placeholder {color: #9ca3af;}
.tp-recherche button {flex: none; width: 52px; border: 0; background: #0b2a45; color: #fff; font-size: 16px; cursor: pointer;}
.tp-recherche button:hover,
.tp-recherche button:focus {background: #00599a;}
a.tp-entete-tel {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
color: #6b7280 !important;
font-size: 12.5px;
line-height: 1.3;
white-space: nowrap;
}
.tp-entete-tel i:before {color: #00599a; font-size: 26px; margin: 0;}
.tp-entete-tel strong {display: block; color: #0b2a45; font-size: 15px;}
a.tp-entete-tel:hover strong,
a.tp-entete-tel:focus strong {color: #00599a;}
a.tp-entete-devis {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
color: #0b2a45 !important;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
a.tp-entete-devis:hover,
a.tp-entete-devis:focus {border-color: #00599a; color: #00599a !important;}
.tp-entete-devis i {font-size: 18px;}
/* compteur de la demande de devis */
.tp-nb-devis {
position: absolute;
top: -9px;
left: 26px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: #970733;
color: #fff;
font-size: 11.5px;
font-weight: 700;
line-height: 20px;
text-align: center;
}
.tp-nb-devis.tp-vide {display: none;}
/* Barre de menu blanche, texte bleu nuit, casse normale */
.menu-wrap.tp-menu-wrap {margin: 0; border-top: 1px solid #e5e7eb;}
.tp-menu-wrap .container-fluid {padding: 0 24px;}
nav.tp-menu {padding-left: 0; border-radius: 0; background: #fff;}
.tp-menu > div > ul > li {
margin-right: 18px;
color: #0b2a45;
font-family: "Open Sans", sans-serif;
font-size: 13.5px;
font-weight: 600;
line-height: 50px;
text-transform: none;
}
.tp-menu > div > ul > li:last-child {margin-right: 0;}
.tp-menu > div > ul > li > a {color: #0b2a45;}
.tp-menu > div > ul > li:hover > a,
.tp-menu > div > ul > li > a:hover,
.tp-menu > div > ul > li > a:focus,
.tp-menu > div > ul > li.show > a {color: #00599a !important;}
.tp-menu .dropdown-toggle:after {margin-left: 5px; vertical-align: 2px; border-top-width: 4px; border-right-width: 4px; border-left-width: 4px; opacity: .6;}
@media screen and (min-width: 992px) {
.tp-menu-wrap .navbar .dropdown-menu {top: 50px;}
}
/* En-tete fixe au defilement : logo, menu, loupe, Mon devis */
.tp-entete-fixe-inner {display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 24px;}
.tp-entete-fixe-logo img {display: block; width: auto; height: 30px;}
.tp-entete-fixe nav.tp-menu {flex: 1; min-width: 0; padding: 0;}
.sticky-menu.tp-entete-fixe .tp-menu > div > ul > li {margin-right: 12px; font-size: 12.5px; line-height: 64px; white-space: nowrap;}
/* version compacte : le logo mene a l'accueil, fleches des sous-menus retirees */
.sticky-menu.tp-entete-fixe .tp-menu > div > ul > li:first-child {display: none;}
.sticky-menu.tp-entete-fixe .tp-menu .dropdown-toggle:after {display: none;}
.tp-fixe-loupe {
flex: none;
width: 42px;
height: 42px;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
background: #fff;
color: #0b2a45;
cursor: pointer;
}
.tp-fixe-loupe:hover,
.tp-fixe-loupe[aria-expanded="true"] {border-color: #00599a; color: #00599a;}
/* Mon devis : icone et compteur seulement (le libelle reste pour les lecteurs d'ecran) */
.tp-entete-fixe .tp-entete-devis {gap: 0; width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 0;}
.tp-entete-fixe .tp-entete-devis i {font-size: 18px;}
.tp-entete-fixe .tp-entete-devis .tp-nb-devis {top: -8px; left: 24px; font-size: 11.5px;}
.tp-fixe-recherche {max-width: 640px; margin: 0 auto 12px;}
.tp-fixe-recherche[hidden] {display: none;}
/* Entre 1280 et 1440 px : menu resserre */
@media (max-width: 1439px) {
.tp-menu > div > ul > li {margin-right: 12px; font-size: 12.5px;}
.sticky-menu.tp-entete-fixe .tp-menu > div > ul > li {margin-right: 7px; font-size: 11.5px;}
.tp-entete-fixe-inner {gap: 12px; padding: 0 16px;}
.tp-entete-fixe-logo img {height: 24px;}
}
/* En-tete mobile (sous 1280 px) : fixe, Menu, logo, Appeler, Mon devis ; recherche dessous */
.tp-mobile-recherche {display: none;}
.tp-mobile-barre {display: flex; align-items: center; height: 60px; padding: 0 6px 0 4px;}
.rspn-hdr.tp-mobile .rspn-mnu-btn.tp-mobile-menu {
position: static;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
width: 52px;
height: 52px;
margin: 0;
border: 0;
background: none;
color: #0b2a45;
font-size: 20px;
line-height: 1;
}
.tp-mobile-menu span {font-size: 10.5px; font-weight: 700;}
.tp-mobile-logo {margin-right: auto; padding-left: 4px;}
.tp-mobile-logo img {display: block; width: auto; height: 28px;}
a.tp-mobile-ic {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
color: #0b2a45 !important;
font-size: 19px;
}
.tp-mobile-ic .tp-nb-devis {top: 3px; left: 24px;}
@media (max-width: 1279px) {
header.tp-entete,
.sticky-menu.tp-entete-fixe {display: none !important;}
/* fixed et non sticky : le body du theme est en overflow-x hidden, sticky n'y fonctionne pas */
.rspn-hdr.tp-mobile {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #fff;
border-bottom: 1px solid #e5e7eb;
}
body {padding-top: 61px;}
.tp-mobile-recherche {display: flex; max-width: none; height: 44px; margin: 10px 12px; border-width: 1px; border-color: #e5e7eb; background: #f7f8fa;}
.tp-mobile-recherche input {font-size: 16px;} /* 16 px : pas de zoom automatique sur iPhone */
.tp-mobile-recherche button {width: 48px; background: transparent; color: #0b2a45;}
.tp-mobile-recherche button:hover,
.tp-mobile-recherche button:focus {background: transparent; color: #00599a;}
}
/* =====================================================================
DESIGN SYSTEM 2026 (etape B, 6 nov. 2026)
Source : docs/DESIGN.md (jetons par. 2, composants par. 4) et
docs/refonte-2026/maquettes/page-accueil-2026.html.
Classes NOUVELLES uniquement : aucune page existante n'en depend.
Regle : toute variable var(--...) utilisee ici est declaree dans le :root ci-dessous.
Exception assumee a DESIGN.md par. 7.1 : le theme impose
a:hover, a:focus { color: #00487D (#95cbed sur fond sombre) !important; }
a:focus, button:focus { outline: none !important; box-shadow: none !important; }
La couleur des liens et le contour de focus des composants passent donc en !important.
===================================================================== */
/* ----- 1. Jetons ----- */
:root {
/* Marque */
--tp-blue: #00599A; --tp-blue-700: #00487D; --tp-blue-50: #EAF2F9;
--tp-blue-900: #0B2A45; --tp-navy: #071B2E;
--tp-bordeaux: #970733; --tp-bordeaux-700: #7A0529; --tp-bordeaux-50: #FCEBEF;
--tp-bordeaux-900: #3D0216; /* page d'entree uniquement (univers Process) */
--tp-whatsapp: #0E7340; --tp-whatsapp-700: #0B5E35;
/* Etats */
--tp-ok: #1E7B4F; --tp-ok-50: #EAF6EF;
--tp-danger: #B42318; --tp-danger-50: #FEF3F2;
--tp-amber: #9A5B00; --tp-amber-50: #FFF8E6;
/* Texte, surfaces, bordures */
--tp-ink: #1F2933; --tp-muted: #5B6B7A; --tp-placeholder: #6B7785;
--tp-line: #E3E8EE; --tp-line-strong: #7D8794;
--tp-surface: #F5F7FA; --tp-white: #FFFFFF;
/* Focus */
--tp-focus: #00599A; --tp-focus-on-dark: #FFFFFF;
/* Typographie */
--f-head: "Poppins", "Poppins Repli", system-ui, sans-serif;
--f-body: "Inter", "Inter Repli", system-ui, sans-serif;
--fs-14: .875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-22: 1.375rem;
--fs-28: 1.75rem; --fs-36: 2.25rem; --fs-44: 2.75rem;
/* Espacements (echelle de 4 px) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px;
--s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
/* Formes et ombres */
--r: 8px; --r-lg: 12px; --r-pill: 999px;
--sh: 0 2px 8px rgba(11,42,69,.08);
--sh-h: 0 8px 24px rgba(11,42,69,.12);
--sh-bar: 0 -4px 16px rgba(11,42,69,.08);
/* Mise en page, superposition, mouvement */
--wrap: 1280px; --gutter: 16px; --sec: 56px;
--z-sticky: 50; --z-header: 1000; --z-dropdown: 1010; --z-overlay: 1040; --z-modal: 1050;
--t-fast: 150ms; --t-base: 200ms; --t-slow: 400ms; --ease: ease-out;
}
@media (min-width: 768px) {:root {--gutter: 24px; --sec: 72px;}}
@media (min-width: 1024px) {:root {--sec: 88px;}}
/* ----- 2. Focus commun (WCAG 2.4.7) ----- */
.tp-btn:focus-visible,
.tp-link:focus-visible,
.tp-cat:focus-visible,
.tp-card-product h3 a:focus-visible,
.tp-tabs button:focus-visible,
.tp-brand-strip a:focus-visible,
.tp-mobile-bar a:focus-visible {
outline: 3px solid var(--tp-focus) !important;
outline-offset: 2px;
}
/* Fonds sombres : contour blanc (le bleu n'atteint que 2:1 sur le bleu nuit) */
.tp-on-dark .tp-btn:focus-visible,
.tp-on-dark .tp-link:focus-visible,
.tp-btn--light:focus-visible,
.tp-btn--white:focus-visible {
outline-color: var(--tp-focus-on-dark) !important;
}
/* ----- 3. Boutons (.tp-btn) ----- */
.tp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
margin: 0;
padding: 0 22px;
border: 2px solid transparent;
border-radius: var(--r);
background: transparent;
font-family: var(--f-body);
font-size: 15px;
font-weight: 600;
line-height: 1.1;
text-align: center;
text-decoration: none;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tp-btn:hover {text-decoration: none;}
.tp-btn i,
.tp-btn svg {flex: none; width: 20px; height: 20px; font-size: 20px; line-height: 20px; text-align: center;}
/* Principal : une seule fois par ecran */
.tp-btn--primary,
.tp-btn--primary:hover,
.tp-btn--primary:focus {color: var(--tp-white) !important;}
.tp-btn--primary {background-color: var(--tp-bordeaux);}
.tp-btn--primary:not(:disabled):hover {background-color: var(--tp-bordeaux-700); box-shadow: var(--sh-h) !important;}
/* Bleu */
.tp-btn--blue,
.tp-btn--blue:hover,
.tp-btn--blue:focus {color: var(--tp-white) !important;}
.tp-btn--blue {background-color: var(--tp-blue);}
.tp-btn--blue:not(:disabled):hover {background-color: var(--tp-blue-700);}
/* Contour */
.tp-btn--ghost,
.tp-btn--ghost:hover,
.tp-btn--ghost:focus {color: var(--tp-blue) !important; border-color: var(--tp-blue);}
.tp-btn--ghost {background-color: var(--tp-white);}
.tp-btn--ghost:not(:disabled):hover {background-color: var(--tp-blue-50);}
/* Clair (sur fond sombre) */
.tp-btn--light,
.tp-btn--light:hover,
.tp-btn--light:focus {color: var(--tp-white) !important;}
.tp-btn--light {background-color: transparent; border-color: rgba(255,255,255,.7);}
.tp-btn--light:not(:disabled):hover {background-color: rgba(255,255,255,.12); border-color: var(--tp-white);}
/* Blanc (bandeau sombre) */
.tp-btn--white,
.tp-btn--white:hover,
.tp-btn--white:focus {color: var(--tp-blue-900) !important;}
.tp-btn--white {background-color: var(--tp-white);}
.tp-btn--white:not(:disabled):hover {background-color: var(--tp-blue-50);}
/* WhatsApp */
.tp-btn--wa,
.tp-btn--wa:hover,
.tp-btn--wa:focus {color: var(--tp-white) !important;}
.tp-btn--wa {background-color: var(--tp-whatsapp);}
.tp-btn--wa:not(:disabled):hover {background-color: var(--tp-whatsapp-700);}
/* Tailles */
.tp-btn--sm {min-height: 40px; padding: 0 14px; font-size: var(--fs-14);}
.tp-btn--block {display: flex; width: 100%;}
/* Actif */
.tp-btn:active {box-shadow: none !important; transform: none;}
/* Desactive :