/*
* Spirit Rider — ajustements du thème.
* Le thème d'origine était utilisé en version sombre (.ds). Le site est
* désormais en version claire (.ls) partout, sauf le hero de l'accueil.
* Ce fichier est chargé en dernier et ne modifie que ce qui est nécessaire.
*/
/* ---------- Réglages généraux ---------- */
body {
background-color: #fff;
color: #6a6a6a;
}
.sr-requis {
color: #d0021b;
}
/* ---------- En-tête et bandeau de contact ---------- */
.page_topline {
border-bottom: 1px solid #e8e8e8;
}
.page_topline .media-body {
font-size: 13px;
line-height: 20px;
}
.page_header.ls {
background-color: #fff;
border-bottom: 1px solid #e8e8e8;
}
/* Le logo de marque est blanc (conçu pour fond sombre) : sur l'en-tête clair,
on le pose sur une pastille foncée plutôt que de retoucher le fichier. */
.page_header .logo {
display: inline-block;
background: #262626;
padding: 9px 16px;
border-radius: 3px;
line-height: 0;
}
.page_header .logo img {
max-height: 34px;
width: auto;
}
.page_header .mainmenu > li > a {
color: #262626;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 12px 16px;
display: inline-block;
}
.page_header .mainmenu > li > a:hover,
.page_header .mainmenu > li.active > a {
color: #249dd6;
}
.page_header .mainmenu > li {
display: inline-block;
}
@media (max-width: 991px) {
.page_header .mainmenu {
padding-top: 80px;
text-align: center;
}
.page_header .mainmenu > li {
display: block;
}
.page_header .mainmenu > li > a {
color: #fff;
font-size: 18px;
padding: 14px 0;
}
}
/* ---------- Hero de l'accueil ---------- */
.sr-hero {
position: relative;
overflow: hidden;
background-color: #1b1b1b;
}
.sr-hero-slides {
position: absolute;
inset: 0;
}
.sr-hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.2s ease-in-out;
}
.sr-hero-slide.is-active {
opacity: 1;
}
/* Voile sombre : garantit la lisibilité du texte blanc sur les photos. */
.sr-hero-slides::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65));
}
.sr-hero-content {
position: relative;
z-index: 2;
}
.sr-hero-logo {
max-width: 260px;
height: auto;
}
.sr-hero h1 {
font-size: 38px;
line-height: 1.25;
}
@media (max-width: 767px) {
.sr-hero h1 {
font-size: 24px;
}
.sr-hero-logo {
max-width: 170px;
}
}
.sr-hero-actions .theme_button {
margin: 6px 4px;
}
.sr-hero-dots {
position: absolute;
z-index: 3;
bottom: 24px;
left: 0;
right: 0;
text-align: center;
}
.sr-hero-dots button {
width: 11px;
height: 11px;
margin: 0 5px;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.sr-hero-dots button.is-active {
background: #fff;
}
/* ---------- Carrousels ---------- */
.sr-carousel {
position: relative;
}
.sr-carousel-viewport {
overflow: hidden;
}
.sr-carousel-track {
display: flex;
transition: transform 0.45s ease;
}
.sr-carousel-item {
flex: 0 0 auto;
padding: 0 15px;
}
.sr-carousel-nav {
text-align: center;
margin-top: 26px;
}
.sr-carousel-nav button {
width: 40px;
height: 40px;
margin: 0 5px;
border: 1px solid #d5d5d5;
background: #fff;
color: #262626;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
}
.sr-carousel-nav button:hover:not(:disabled) {
background: #249dd6;
border-color: #249dd6;
color: #fff;
}
.sr-carousel-nav button:disabled {
opacity: 0.35;
cursor: default;
}
.sr-partners .item-media img {
max-height: 60px;
width: auto;
margin: 0 auto;
opacity: 0.65;
transition: opacity 0.2s ease;
}
.sr-partners .item-media img:hover {
opacity: 1;
}
.page_testimonials .blockquote-item {
background: #fff;
border: 1px solid #ececec;
border-left: 3px solid #249dd6;
padding: 26px 28px;
text-align: left;
font-size: 14px;
line-height: 24px;
height: 100%;
}
/* ---------- Tuiles (prestations, galerie) ---------- */
.sr-tuile-col {
padding: 0;
}
.sr-tuile-col .item-media img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}
.sr-liste-prestations {
columns: 2;
margin: 10px 0 20px;
padding-left: 18px;
}
@media (max-width: 600px) {
.sr-liste-prestations {
columns: 1;
}
}
/* ---------- Tableau des tarifs ---------- */
.table.tarif {
background: #fff;
}
.table.tarif td {
border-color: #ececec;
vertical-align: middle;
}
.table.tarif .tarif-header,
.table.tarif tr.tarif-header td {
background: #262626;
color: #fff;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.04em;
}
.table.tarif .tarif-smart,
.table.tarif .tarif-medium,
.table.tarif .tarif-ultra {
text-align: center;
white-space: nowrap;
width: 130px;
}
.sr-notes {
font-size: 13px;
color: #8a8a8a;
margin-top: 22px;
}
/* ---------- Formulaire de devis ---------- */
.sr-chapo {
max-width: 720px;
margin: 0 auto;
font-size: 16px;
}
.sr-devis {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 4px;
padding: 0;
}
.sr-onglets {
display: flex;
border-bottom: 1px solid #e8e8e8;
}
.sr-onglets button {
flex: 1;
padding: 18px 12px;
border: 0;
background: #f7f7f7;
color: #6a6a6a;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.2s ease;
}
.sr-onglets button.is-active {
background: #fff;
color: #249dd6;
box-shadow: inset 0 -3px 0 #249dd6;
}
.sr-etapes {
display: flex;
list-style: none;
margin: 0;
/* La marge basse se joue ici : un