| Server IP : 109.234.164.53 / Your IP : 216.73.216.136 Web Server : Apache System : Linux cervelle.o2switch.net 4.18.0-553.32.1.lve.el8.x86_64 #1 SMP Thu Dec 19 13:14:03 UTC 2024 x86_64 User : computer3 ( 1098) PHP Version : 7.1.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/computer3/lachocolateriedevirginie.fr/business/business/ |
Upload File : |
/***********************************/
/* global-css2.css */
/* */
/**********************************/
/* =========================================================
NOVA RH - Refonte visuelle light / cartes modernes
À coller en fin de feuille CSS
========================================================= */
/* ---------- Base ---------- */
.row.three-col, .row.two-col,
.row.two-col-left,
.row.four-col {
display: flex;
flex-wrap: wrap;
align-items: stretch;
clear: both;
position: relative;
z-index: 2;
margin-left: -12px;
margin-right: -12px;
}
.row.three-col > [class*="col-"],
.row.two-col > [class*="col-"],
.row.two-col-left > [class*="col-"],
.row.four-col > [class*="col-"] {
display: flex;
flex-direction: column;
padding-left: 30px;
padding-right: 12px;
}
/* ---------- Cartes principales ---------- */
.box-shadow,
.filet2 {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e7edf4;
border-radius: 24px;
padding: 28px 24px 24px 24px;
box-shadow:
0 10px 30px rgba(15, 23, 42, 0.06),
0 2px 10px rgba(15, 23, 42, 0.04);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.box-shadow:hover,
.filet2:hover {
transform: translateY(-6px);
box-shadow:
0 18px 40px rgba(15, 23, 42, 0.10),
0 4px 16px rgba(15, 23, 42, 0.06);
border-color: #d7e2ee;
}
/* petite barre moderne en haut */
.box-shadow::before,
.filet2::before {
content: "";
display: block;
width: 64px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #d32d48 0%, #ff7a59 100%);
margin-bottom: 18px;
}
/* ---------- Neutralisation du vieux float cassant ---------- */
/*.box-shadow img[style*="float:left"],
.box-shadow img[style*="float:right"],
.filet2 img[style*="float:left"],
.filet2 img[style*="float:right"],*/
.two-col-left img,
.three-col img,
.four-col img {
/* float: none !important;*/
display: block;
height: auto;
/* margin: 0 0 18px 0 !important;*/
}
/* Icônes doubles dans la dernière section */
.four-col .box-shadow img,
.four-col .filet2 img {
}
.box-shadow h2,
.filet2 h2,
.box-shadow h3,
.filet2 h3 {
margin-top: 0;
font-size: 1.4 rem;
}
.box-shadow h3 img,
.filet2 h3 img,
.two-col-left h3 img {
display: inline-block;
vertical-align: middle;
margin: 0 10px 0 0 !important;
}
/* ---------- Textes ---------- */
p[style*="text-align: center"],
h1[style*="text-align: center"],
h2[style*="text-align: center"] {
position: relative;
z-index: 2;
}
p strong span[style],
p span[style*="color:#D32D48"],
p span[style*="color:#cc3300"],
p span[style*="color:#cc0000"] {
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.95rem;
}
/* ---------- Listes offres ---------- */
.box-shadow ul,
.filet2 ul {
padding-left: 0;
margin: 18px 0 0 0;
list-style: none;
}
.box-shadow ul li, .filet2 ul li {
position: relative;
padding-left: 20px;
margin-bottom: 12px;
line-height: 18pt;
font-size: 14pt;
color: #252573;
}
.box-shadow ul li::before, .filet2 ul li::before {
content: "•";
position: absolute;
left: 3px;
top: 0;
color: #d32d48;
font-size: 1.8rem;
line-height: 0.5;
font-weight: 700;
}
/* on masque les faux li vides */
.box-shadow ul li:empty,
.filet2 ul li:empty {
display: none;
}
/* ---------- Boutons / images "en savoir plus" ---------- */
a img[alt*="En savoir plus"] {
display: inline-block;
float: none !important;
max-width: 190px !important;
width: auto;
margin-top: 14px !important;
border-radius: 14px;
transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}
a:hover img[alt*="En savoir plus"] {
transform: translateY(-2px);
filter: brightness(0.78) contrast(1.05);
box-shadow: 0 14px 24px rgba(15, 23, 42, 0.18);
}
/* ---------- Espaces vides moches du CMS ---------- */
.box-shadow p:empty,
.filet2 p:empty {
display: none;
}
/* ---------- Cohérence dernière section ---------- */
.four-col .box-shadow,
.four-col .filet2 {
}
.four-col .col-4 .box-shadow { background: #fbf0f2;
}
.four-col h3 {
}
.three-col .box-shadow p:last-child,
.four-col .box-shadow p:last-child,
.filet2 p:last-child {
margin-bottom: 0;
}
.box_80 {
margin-top: 5px;
padding: 15px 20px 20px 15px;
width:80%;
margin-left:10%
}
/******************************** bouton-blue ******************************** */
a.btn-blue, #Milieu a.btn-blue {
position: relative;
display: inline-block;
padding: 5px 36px;
border-radius: 999px;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.3px;
color: #fff;
text-decoration: none; nowrap;
background: linear-gradient(135deg, #E6CEA0, #C99938, #E6CEA0);
background-size: auto;
background-size: 200% 200%;
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 4px 20px rgba(218, 139, 16, 0.25), inset 0 1px 0 rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.35s ease;
overflow: hidden;
animation: gradientMove 6s ease infinite;
width: 100%;
max-width: 250px;
}
/* Gradient animé */
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Glow */
a.btn-blue::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(120deg, #E6CEA0, #C99938, #E6CEA0);
background-size: 200%;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
filter: blur(10px);
}
a.btn-blue:hover::before {
opacity: 1;
}
/*Shine */
a.btn-blue::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
transform: skewX(-20deg);
}
a.btn-blue:hover::after {
animation: shine 0.8s ease;
}
@keyframes shine {
100% {
left: 125%;
}
}
/* Hover interaction */
a.btn-blue:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 8px 30px rgba(201, 153, 56,0.45),
0 0 25px rgba(201, 153, 56,0.6);
}
/****************************************/
/* **************************** blue-box ****************************** */
/* Box */
.blue-box {
position: relative;
background: #f9f5f5;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: all 0.25s ease;
overflow: hidden;
}
/* Trait bleu */
.blue-box::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #C99938;
}
/* Overlay bleu */
.blue-box::before {
content: "";
position: absolute;
inset: 0;
background: rgba(239, 181, 191, 0.08);
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none; /* FIX */
}
/* Hover */
.blue-box:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.blue-box:hover::before {
opacity: 1;
}
.navbar-header {
padding-bottom: 0;
height: 60px;
}
.slidefull {
margin-top: -3px;
}
.lien_bas_droite {
bottom: 20px !important;
position: absolute;
right: 30px
}
/* redimentionne la hauteur de boite */
.custom-box, .filet1, .filet2 {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#Milieu .blue-box {
position: relative;
background: #f9f5f5;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
color: #2C0D3F;
transition: all 0.25s ease;
overflow: hidden;
}
/******* Box-anim custom-box *********/
/* =========================
DESIGN DE LA BOX
========================= */
.custom-box {
background: #ffffff;
border-radius: 15px;
padding: 20px;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
z-index: 1;
}
#Milieu .custom-box {
background: #ffffff;
color: #2C0D3F;
border-radius: 15px;
padding: 20px;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
z-index: 1;
}
/* =========================
CONTOUR ANIMÉ AU HOVER
========================= */
.custom-box::after {
content: "";
position: absolute;
inset: 0;
border-radius: 15px;
border: 1px solid rgba(0, 123, 255, 0);
transition: all 0.4s ease;
/* ✅ FIX IMPORTANT */
pointer-events: none;
}
/* apparition du contour */
.custom-box:hover::after {
border: 1px solid rgba(0, 123, 255, 0.4);
}
/* léger lift */
.custom-box:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
/* ✅ sécurise le contenu au-dessus */
.custom-box * {
position: relative;
z-index: 2;
}
/* =========================
ANIMATION SCROLL
========================= */
/* état initial */
.box-anim {
opacity: 0;
transform: translateY(60px);
}
/* gauche */
.col-1 .box-anim {
transform: translateX(-80px);
}
/* milieu */
.col-2 .box-anim {
transform: translateY(120px);
}
/* droite */
.col-3 .box-anim {
transform: translateX(80px);
}
/* état visible */
.box-anim.show {
opacity: 1;
transform: translateX(0) translateY(0);
transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================
DELAY CASCADE
========================= */
.col-1 .box-anim.show {
transition-delay: 0.2s;
}
.col-2 .box-anim.show {
transition-delay: 0.5s;
}
.col-3 .box-anim.show {
transition-delay: 0.8s;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 991.98px) {
.row.three-col,
.row.two-col-left,
.row.four-col {
display: block;
margin-left: 0;
margin-right: 0;
}
.row.three-col > [class*="col-"],
.row.two-col-left > [class*="col-"],
.row.four-col > [class*="col-"] {
display: block;
padding-left: 0;
padding-right: 0;
margin-bottom: 18px;
}
.box-shadow,
.filet2 {
height: auto;
}
.row.two-col-left {
padding: 22px 18px;
}
}
@media (max-width: 575.98px) {
.box-shadow,
.filet2 {
padding: 22px 18px;
border-radius: 18px;
}
.specials {
width: 100%;
justify-content: flex-start;
margin-right: 0;
}
a img[alt*="En savoir plus"] {
max-width: 170px !important;
}
.box_80 {
margin-top: 5px;
padding: 15px 10px 10px 15px;
background: transparent;
border: 0;
width: 100%;
margin-left: 0;
}
}
/* suppression barre rouge */
.box-shadow::before,
.filet2::before {
content: none;
display: none;
}
/* suppression barre rouge */
.box-shadow::before,
.filet2::before {
content: none;
display: none;
}
/*------------------------------------------------------*/
/* MODAL PUB */
/*------------------------------------------------------*/
.modalDialogPub {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.25);
z-index: 4000;
opacity: 1;
border: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.modalDialogPub H2{
color: black;
/* font-size : 14pt; */
font-weight : normal;
}
/* ===== Bouton Google Avis (lateral droit) ===== */
.google-review-btn {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 9999;
display: block;
transition: transform 0.3s ease;
}
/* IMPORTANT : on ne force aucune taille */
.google-review-btn img {
display: block;
max-width: none;
height: auto;
}
/* effet hover */
.google-review-btn:hover {
transform: translateY(-50%) scale(1.05);
}
/* mobile : optionnel (réduction uniquement si trop grand) */
@media (max-width: 768px) {
/* .google-review-btn img {
transform: scale(0.85);
transform-origin: right center;
}
*/
.google-review-btn img {
display: none;
}
.box-shadow, .filet2 {
width:100%
}
}
/* =========================================================
FIX RESPONSIVE SLIDESHOW JSSOR
À coller tout en bas du dernier CSS
========================================================= */
/* Tablette */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.jsso1,
.jsso2 {
height: 520px !important;
}
}
/* Mobile */
@media screen and (max-width: 767px) {
.jsso1,
.jsso2 {
width: 100% !important;
max-width: 100% !important;
height: 360px !important;
}
.jsso1 [data-u="slides"],
.jsso2 [data-u="slides"] {
width: 100% !important;
max-width: 100% !important;
}
.jsso2 .item,
.jsso1 .item {
background-size: contain !important;
background-color: #000; background-position: center center !important;
}
}
/* Très petits téléphones */
@media screen and (max-width: 420px) {
.jsso1,
.jsso2 {
height: 300px !important;
}
.google-review-btn img {
display: none;
}
}
/* =========================================================
SLIDER MILIEU (jssor_12)
========================================================= */
@media screen and (max-width: 1024px) {
.jsso-mid {
height: 420px !important;
}
}
@media screen and (max-width: 767px) {
.jsso-mid {
height: 300px !important;
}
}
@media screen and (max-width: 420px) {
.jsso-mid {
height: 260px !important;
}
}
/* =========================================================
FIX BANDES NOIRES JSSOR
========================================================= */
@media screen and (max-width: 767px) {
.jsso1,
.jsso2,
.jsso1 [data-u="slides"],
.jsso2 [data-u="slides"] {
background: transparent !important;
}
.jsso1 [data-u="slides"] > div,
.jsso2 [data-u="slides"] > div,
.jsso1 .item,
.jsso2 .item {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* évite les traits noirs liés au scale / overflow */
.slidefull,
.slide,
.jsso1,
.jsso2 {
background: transparent !important;
overflow: hidden !important;
}
#jssor_1 .item {
background-size: 100% auto !important;
background-position: center top !important;
background-repeat: no-repeat !important;
background-color: #ffffff !important;
}
}
/***********************************/
/* ZOOM BOX IMAGE */
/***********************************/
.zoom-box {
position: relative;
overflow: hidden;
display: block;
width: 100%;
border-radius: 16px;
line-height: 0;
}
.zoom-box p {
margin: 0 !important;
padding: 0 !important;
line-height: 0;
}
.zoom-box img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
transition: transform 0.4s ease, filter 0.4s ease;
}
.zoom-box:hover img {
transform: scale(1.08);
filter: brightness(0.95);
}