.elementor-131 .elementor-element.elementor-element-602e9fc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-131 .elementor-element.elementor-element-0065f0a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-131 .elementor-element.elementor-element-95ef501{--display:flex;--min-height:130px;--justify-content:center;--gap:010px 0px;--row-gap:010px;--column-gap:0px;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-131 .elementor-element.elementor-element-95ef501:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-95ef501 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mbps.fr/wp-content/uploads/2026/05/Limiteurs-de-hauteur-variables.jpg");background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-131 .elementor-element.elementor-element-421e4a4{text-align:start;}.elementor-131 .elementor-element.elementor-element-421e4a4 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:1.375rem;font-weight:700;color:var( --e-global-color-secondary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-131 .elementor-element.elementor-element-9f33660{font-family:"Poppins", Sans-serif;font-size:0.8rem;font-weight:300;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-957e6c0{--display:flex;--min-height:130px;--justify-content:center;--gap:010px 0px;--row-gap:010px;--column-gap:0px;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-131 .elementor-element.elementor-element-957e6c0:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-957e6c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mbps.fr/wp-content/uploads/2026/05/Limiteurs-de-hauteur-fixes.jpg");background-repeat:no-repeat;background-size:cover;}.elementor-131 .elementor-element.elementor-element-5a356f4{text-align:start;}.elementor-131 .elementor-element.elementor-element-5a356f4 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:1.375rem;font-weight:700;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-0d16b5a{font-family:"Poppins", Sans-serif;font-size:0.8rem;font-weight:300;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-3cfe541{--display:flex;--min-height:130px;--justify-content:center;--gap:010px 0px;--row-gap:010px;--column-gap:0px;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-131 .elementor-element.elementor-element-3cfe541:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-3cfe541 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mbps.fr/wp-content/uploads/2026/05/Pregabarits.jpg");background-repeat:no-repeat;background-size:cover;}.elementor-131 .elementor-element.elementor-element-44b9b02{text-align:start;}.elementor-131 .elementor-element.elementor-element-44b9b02 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:1.375rem;font-weight:700;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-87f2390{font-family:"Poppins", Sans-serif;font-size:0.8rem;font-weight:300;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-f67e1a5{--display:flex;--min-height:130px;--justify-content:center;--gap:010px 0px;--row-gap:010px;--column-gap:0px;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-131 .elementor-element.elementor-element-f67e1a5:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-f67e1a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mbps.fr/wp-content/uploads/2026/05/Obstacles-et-Herses-1.png");background-repeat:no-repeat;background-size:cover;}.elementor-131 .elementor-element.elementor-element-2f86de8{text-align:start;}.elementor-131 .elementor-element.elementor-element-2f86de8 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:1.375rem;font-weight:700;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-e256f2e{font-family:"Poppins", Sans-serif;font-size:0.8rem;font-weight:300;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-4256b16{--display:flex;--min-height:130px;--justify-content:center;--gap:010px 0px;--row-gap:010px;--column-gap:0px;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-131 .elementor-element.elementor-element-4256b16:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-4256b16 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mbps.fr/wp-content/uploads/2026/05/Barrieres.png");background-position:center right;background-repeat:no-repeat;background-size:cover;}.elementor-131 .elementor-element.elementor-element-090cdec{text-align:start;}.elementor-131 .elementor-element.elementor-element-090cdec .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:1.375rem;font-weight:700;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-fa1479b{font-family:"Poppins", Sans-serif;font-size:0.8rem;font-weight:300;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-33253e9{--display:flex;--min-height:130px;--justify-content:center;--gap:010px 0px;--row-gap:010px;--column-gap:0px;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-131 .elementor-element.elementor-element-33253e9:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-33253e9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mbps.fr/wp-content/uploads/2026/05/Bornes-fixes-escamotables.jpg");background-repeat:no-repeat;background-size:cover;}.elementor-131 .elementor-element.elementor-element-afa5fde{text-align:start;}.elementor-131 .elementor-element.elementor-element-afa5fde .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:1.375rem;font-weight:700;color:var( --e-global-color-secondary );}.elementor-131 .elementor-element.elementor-element-4e2e0a9{font-family:"Poppins", Sans-serif;font-size:0.8rem;font-weight:300;color:var( --e-global-color-secondary );}@media(max-width:1024px){.elementor-131 .elementor-element.elementor-element-0065f0a{--justify-content:center;--gap:020px 030px;--row-gap:020px;--column-gap:030px;}.elementor-131 .elementor-element.elementor-element-95ef501:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-95ef501 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:contain;}.elementor-131 .elementor-element.elementor-element-421e4a4 .elementor-heading-title{font-size:1.1rem;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-131 .elementor-element.elementor-element-9f33660{font-size:0.9rem;}.elementor-131 .elementor-element.elementor-element-5a356f4 .elementor-heading-title{font-size:1.1rem;}.elementor-131 .elementor-element.elementor-element-0d16b5a{font-size:0.9rem;}.elementor-131 .elementor-element.elementor-element-44b9b02 .elementor-heading-title{font-size:1.1rem;}.elementor-131 .elementor-element.elementor-element-87f2390{font-size:0.9rem;}.elementor-131 .elementor-element.elementor-element-2f86de8 .elementor-heading-title{font-size:1.1rem;}.elementor-131 .elementor-element.elementor-element-e256f2e{font-size:0.9rem;}.elementor-131 .elementor-element.elementor-element-090cdec .elementor-heading-title{font-size:1.1rem;}.elementor-131 .elementor-element.elementor-element-fa1479b{font-size:0.9rem;}.elementor-131 .elementor-element.elementor-element-afa5fde .elementor-heading-title{font-size:1.1rem;}.elementor-131 .elementor-element.elementor-element-4e2e0a9{font-size:0.9rem;}}@media(max-width:767px){.elementor-131 .elementor-element.elementor-element-0065f0a{--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-131 .elementor-element.elementor-element-95ef501{--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-131 .elementor-element.elementor-element-95ef501:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-95ef501 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center left;}.elementor-131 .elementor-element.elementor-element-421e4a4 .elementor-heading-title{font-size:1rem;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-131 .elementor-element.elementor-element-9f33660{font-size:0.8rem;}.elementor-131 .elementor-element.elementor-element-957e6c0{--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-131 .elementor-element.elementor-element-957e6c0:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-957e6c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center left;}.elementor-131 .elementor-element.elementor-element-5a356f4 .elementor-heading-title{font-size:1rem;}.elementor-131 .elementor-element.elementor-element-0d16b5a{font-size:0.8rem;}.elementor-131 .elementor-element.elementor-element-3cfe541{--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-131 .elementor-element.elementor-element-3cfe541:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-3cfe541 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center left;}.elementor-131 .elementor-element.elementor-element-44b9b02 .elementor-heading-title{font-size:1rem;}.elementor-131 .elementor-element.elementor-element-87f2390{font-size:0.8rem;}.elementor-131 .elementor-element.elementor-element-f67e1a5{--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-131 .elementor-element.elementor-element-f67e1a5:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-f67e1a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center left;}.elementor-131 .elementor-element.elementor-element-2f86de8 .elementor-heading-title{font-size:1rem;}.elementor-131 .elementor-element.elementor-element-e256f2e{font-size:0.8rem;}.elementor-131 .elementor-element.elementor-element-4256b16{--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-131 .elementor-element.elementor-element-4256b16:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-4256b16 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center left;}.elementor-131 .elementor-element.elementor-element-090cdec .elementor-heading-title{font-size:1rem;}.elementor-131 .elementor-element.elementor-element-fa1479b{font-size:0.8rem;}.elementor-131 .elementor-element.elementor-element-33253e9{--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-131 .elementor-element.elementor-element-33253e9:not(.elementor-motion-effects-element-type-background), .elementor-131 .elementor-element.elementor-element-33253e9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center left;}.elementor-131 .elementor-element.elementor-element-afa5fde .elementor-heading-title{font-size:1rem;}.elementor-131 .elementor-element.elementor-element-4e2e0a9{font-size:0.8rem;}}@media(min-width:768px){.elementor-131 .elementor-element.elementor-element-95ef501{--width:47%;}.elementor-131 .elementor-element.elementor-element-957e6c0{--width:47%;}.elementor-131 .elementor-element.elementor-element-3cfe541{--width:47%;}.elementor-131 .elementor-element.elementor-element-f67e1a5{--width:47%;}.elementor-131 .elementor-element.elementor-element-4256b16{--width:47%;}.elementor-131 .elementor-element.elementor-element-33253e9{--width:47%;}}@media(max-width:1024px) and (min-width:768px){.elementor-131 .elementor-element.elementor-element-95ef501{--width:100%;}.elementor-131 .elementor-element.elementor-element-957e6c0{--width:100%;}.elementor-131 .elementor-element.elementor-element-3cfe541{--width:100%;}.elementor-131 .elementor-element.elementor-element-f67e1a5{--width:100%;}.elementor-131 .elementor-element.elementor-element-4256b16{--width:100%;}.elementor-131 .elementor-element.elementor-element-33253e9{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-95ef501 *//* ============================================
CARTE SOLUTION - VERSION RESPONSIVE COMPLÈTE
============================================ */
/* ====== BASE (Desktop par défaut) ====== */
.solution-card {
position: relative !important;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
background-size: 105% !important;
background-position: center !important;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease,
background-size 0.6s ease;
/* UX tactile : enlève le flash bleu sur mobile */
-webkit-tap-highlight-color: transparent;
/* Performance : prépare le GPU pour les animations */
will-change: transform;
}
/* Accessibilité : focus visible pour navigation clavier */
.solution-card:focus-visible {
outline: 3px solid #C52328;
outline-offset: 4px;
}
/* ====== OVERLAY SOMBRE (dégradé pour lisibilité) ====== */
.solution-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.75) 100%);
transition: background 0.4s ease;
z-index: 1;
pointer-events: none;
}
/* Contenu (titre + texte) au-dessus du gradient */
.solution-card > * {
position: relative;
z-index: 2;
}
/* ====== BADGE BLANC AVEC FLÈCHE - ÉTAT REPOS ====== */
.solution-card::after {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background-color: white;
border: 2px solid #C52328;
border-radius: 50%;
z-index: 3;
box-sizing: border-box;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.4s ease;
}
/* ====== HOVER (uniquement appareils avec souris) ====== */
@media (hover: hover) and (pointer: fine) {
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
background-size: 115% !important;
}
.solution-card:hover::before {
background: linear-gradient(180deg,
rgba(197, 35, 40, 0.25) 0%,
rgba(0, 0, 0, 0.85) 100%);
}
.solution-card:hover::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* ====== TAP / ACTIVE (mobile + tablette - feedback tactile) ====== */
.solution-card:active {
transform: scale(0.98);
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solution-card:active::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================
RESPONSIVE - TABLETTE (≤ 1024px)
============================================ */
@media (max-width: 1024px) {
.solution-card {
border-radius: 18px;
}
.solution-card::after {
width: 34px;
height: 34px;
top: 14px;
right: 14px;
}
}
/* ============================================
RESPONSIVE - MOBILE (≤ 767px)
============================================ */
@media (max-width: 767px) {
.solution-card {
border-radius: 16px;
background-size: cover !important; /* pas de zoom au repos sur mobile */
}
/* Overlay un peu plus marqué pour meilleure lisibilité petit écran */
.solution-card::before {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.8) 100%);
}
.solution-card::after {
width: 32px;
height: 32px;
top: 12px;
right: 12px;
border-width: 1.5px;
}
/* On bloque uniquement le zoom de l'image au tap, le reste (badge rouge, overlay) reste actif */
.solution-card:hover,
.solution-card:active {
background-size: cover !important;
}
/* Réduit l'intensité du tap pour ne pas casser le layout */
.solution-card:active {
transform: scale(0.97);
}
}
/* ============================================
ACCESSIBILITÉ - Utilisateurs sensibles aux animations
============================================ */
@media (prefers-reduced-motion: reduce) {
.solution-card,
.solution-card::before,
.solution-card::after {
transition: none !important;
}
.solution-card:hover,
.solution-card:active {
transform: none;
}
.solution-card:hover::after,
.solution-card:active::after {
transform: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-957e6c0 *//* ============================================
CARTE SOLUTION - VERSION RESPONSIVE COMPLÈTE
============================================ */
/* ====== BASE (Desktop par défaut) ====== */
.solution-card {
position: relative !important;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
background-size: 105% !important;
background-position: center !important;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease,
background-size 0.6s ease;
/* UX tactile : enlève le flash bleu sur mobile */
-webkit-tap-highlight-color: transparent;
/* Performance : prépare le GPU pour les animations */
will-change: transform;
}
/* Accessibilité : focus visible pour navigation clavier */
.solution-card:focus-visible {
outline: 3px solid #C52328;
outline-offset: 4px;
}
/* ====== OVERLAY SOMBRE (dégradé pour lisibilité) ====== */
.solution-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.75) 100%);
transition: background 0.4s ease;
z-index: 1;
pointer-events: none;
}
/* Contenu (titre + texte) au-dessus du gradient */
.solution-card > * {
position: relative;
z-index: 2;
}
/* ====== BADGE BLANC AVEC FLÈCHE - ÉTAT REPOS ====== */
.solution-card::after {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background-color: white;
border: 2px solid #C52328;
border-radius: 50%;
z-index: 3;
box-sizing: border-box;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.4s ease;
}
/* ====== HOVER (uniquement appareils avec souris) ====== */
@media (hover: hover) and (pointer: fine) {
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
background-size: 115% !important;
}
.solution-card:hover::before {
background: linear-gradient(180deg,
rgba(197, 35, 40, 0.25) 0%,
rgba(0, 0, 0, 0.85) 100%);
}
.solution-card:hover::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* ====== TAP / ACTIVE (mobile + tablette - feedback tactile) ====== */
.solution-card:active {
transform: scale(0.98);
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solution-card:active::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================
RESPONSIVE - TABLETTE (≤ 1024px)
============================================ */
@media (max-width: 1024px) {
.solution-card {
border-radius: 18px;
}
.solution-card::after {
width: 34px;
height: 34px;
top: 14px;
right: 14px;
}
}
/* ============================================
RESPONSIVE - MOBILE (≤ 767px)
============================================ */
@media (max-width: 767px) {
.solution-card {
border-radius: 16px;
background-size: cover !important; /* pas de zoom au repos sur mobile */
}
/* Overlay un peu plus marqué pour meilleure lisibilité petit écran */
.solution-card::before {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.8) 100%);
}
.solution-card::after {
width: 32px;
height: 32px;
top: 12px;
right: 12px;
border-width: 1.5px;
}
/* On bloque uniquement le zoom de l'image au tap, le reste (badge rouge, overlay) reste actif */
.solution-card:hover,
.solution-card:active {
background-size: cover !important;
}
/* Réduit l'intensité du tap pour ne pas casser le layout */
.solution-card:active {
transform: scale(0.97);
}
}
/* ============================================
ACCESSIBILITÉ - Utilisateurs sensibles aux animations
============================================ */
@media (prefers-reduced-motion: reduce) {
.solution-card,
.solution-card::before,
.solution-card::after {
transition: none !important;
}
.solution-card:hover,
.solution-card:active {
transform: none;
}
.solution-card:hover::after,
.solution-card:active::after {
transform: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cfe541 *//* ============================================
CARTE SOLUTION - VERSION RESPONSIVE COMPLÈTE
============================================ */
/* ====== BASE (Desktop par défaut) ====== */
.solution-card {
position: relative !important;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
background-size: 105% !important;
background-position: center !important;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease,
background-size 0.6s ease;
/* UX tactile : enlève le flash bleu sur mobile */
-webkit-tap-highlight-color: transparent;
/* Performance : prépare le GPU pour les animations */
will-change: transform;
}
/* Accessibilité : focus visible pour navigation clavier */
.solution-card:focus-visible {
outline: 3px solid #C52328;
outline-offset: 4px;
}
/* ====== OVERLAY SOMBRE (dégradé pour lisibilité) ====== */
.solution-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.75) 100%);
transition: background 0.4s ease;
z-index: 1;
pointer-events: none;
}
/* Contenu (titre + texte) au-dessus du gradient */
.solution-card > * {
position: relative;
z-index: 2;
}
/* ====== BADGE BLANC AVEC FLÈCHE - ÉTAT REPOS ====== */
.solution-card::after {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background-color: white;
border: 2px solid #C52328;
border-radius: 50%;
z-index: 3;
box-sizing: border-box;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.4s ease;
}
/* ====== HOVER (uniquement appareils avec souris) ====== */
@media (hover: hover) and (pointer: fine) {
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
background-size: 115% !important;
}
.solution-card:hover::before {
background: linear-gradient(180deg,
rgba(197, 35, 40, 0.25) 0%,
rgba(0, 0, 0, 0.85) 100%);
}
.solution-card:hover::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* ====== TAP / ACTIVE (mobile + tablette - feedback tactile) ====== */
.solution-card:active {
transform: scale(0.98);
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solution-card:active::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================
RESPONSIVE - TABLETTE (≤ 1024px)
============================================ */
@media (max-width: 1024px) {
.solution-card {
border-radius: 18px;
}
.solution-card::after {
width: 34px;
height: 34px;
top: 14px;
right: 14px;
}
}
/* ============================================
RESPONSIVE - MOBILE (≤ 767px)
============================================ */
@media (max-width: 767px) {
.solution-card {
border-radius: 16px;
background-size: cover !important; /* pas de zoom au repos sur mobile */
}
/* Overlay un peu plus marqué pour meilleure lisibilité petit écran */
.solution-card::before {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.8) 100%);
}
.solution-card::after {
width: 32px;
height: 32px;
top: 12px;
right: 12px;
border-width: 1.5px;
}
/* On bloque uniquement le zoom de l'image au tap, le reste (badge rouge, overlay) reste actif */
.solution-card:hover,
.solution-card:active {
background-size: cover !important;
}
/* Réduit l'intensité du tap pour ne pas casser le layout */
.solution-card:active {
transform: scale(0.97);
}
}
/* ============================================
ACCESSIBILITÉ - Utilisateurs sensibles aux animations
============================================ */
@media (prefers-reduced-motion: reduce) {
.solution-card,
.solution-card::before,
.solution-card::after {
transition: none !important;
}
.solution-card:hover,
.solution-card:active {
transform: none;
}
.solution-card:hover::after,
.solution-card:active::after {
transform: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f67e1a5 *//* ============================================
CARTE SOLUTION - VERSION RESPONSIVE COMPLÈTE
============================================ */
/* ====== BASE (Desktop par défaut) ====== */
.solution-card {
position: relative !important;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
background-size: 105% !important;
background-position: center !important;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease,
background-size 0.6s ease;
/* UX tactile : enlève le flash bleu sur mobile */
-webkit-tap-highlight-color: transparent;
/* Performance : prépare le GPU pour les animations */
will-change: transform;
}
/* Accessibilité : focus visible pour navigation clavier */
.solution-card:focus-visible {
outline: 3px solid #C52328;
outline-offset: 4px;
}
/* ====== OVERLAY SOMBRE (dégradé pour lisibilité) ====== */
.solution-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.75) 100%);
transition: background 0.4s ease;
z-index: 1;
pointer-events: none;
}
/* Contenu (titre + texte) au-dessus du gradient */
.solution-card > * {
position: relative;
z-index: 2;
}
/* ====== BADGE BLANC AVEC FLÈCHE - ÉTAT REPOS ====== */
.solution-card::after {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background-color: white;
border: 2px solid #C52328;
border-radius: 50%;
z-index: 3;
box-sizing: border-box;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.4s ease;
}
/* ====== HOVER (uniquement appareils avec souris) ====== */
@media (hover: hover) and (pointer: fine) {
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
background-size: 115% !important;
}
.solution-card:hover::before {
background: linear-gradient(180deg,
rgba(197, 35, 40, 0.25) 0%,
rgba(0, 0, 0, 0.85) 100%);
}
.solution-card:hover::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* ====== TAP / ACTIVE (mobile + tablette - feedback tactile) ====== */
.solution-card:active {
transform: scale(0.98);
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solution-card:active::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================
RESPONSIVE - TABLETTE (≤ 1024px)
============================================ */
@media (max-width: 1024px) {
.solution-card {
border-radius: 18px;
}
.solution-card::after {
width: 34px;
height: 34px;
top: 14px;
right: 14px;
}
}
/* ============================================
RESPONSIVE - MOBILE (≤ 767px)
============================================ */
@media (max-width: 767px) {
.solution-card {
border-radius: 16px;
background-size: cover !important; /* pas de zoom au repos sur mobile */
}
/* Overlay un peu plus marqué pour meilleure lisibilité petit écran */
.solution-card::before {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.8) 100%);
}
.solution-card::after {
width: 32px;
height: 32px;
top: 12px;
right: 12px;
border-width: 1.5px;
}
/* On bloque uniquement le zoom de l'image au tap, le reste (badge rouge, overlay) reste actif */
.solution-card:hover,
.solution-card:active {
background-size: cover !important;
}
/* Réduit l'intensité du tap pour ne pas casser le layout */
.solution-card:active {
transform: scale(0.97);
}
}
/* ============================================
ACCESSIBILITÉ - Utilisateurs sensibles aux animations
============================================ */
@media (prefers-reduced-motion: reduce) {
.solution-card,
.solution-card::before,
.solution-card::after {
transition: none !important;
}
.solution-card:hover,
.solution-card:active {
transform: none;
}
.solution-card:hover::after,
.solution-card:active::after {
transform: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4256b16 *//* ============================================
CARTE SOLUTION - VERSION RESPONSIVE COMPLÈTE
============================================ */
/* ====== BASE (Desktop par défaut) ====== */
.solution-card {
position: relative !important;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
background-size: 105% !important;
background-position: center !important;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease,
background-size 0.6s ease;
/* UX tactile : enlève le flash bleu sur mobile */
-webkit-tap-highlight-color: transparent;
/* Performance : prépare le GPU pour les animations */
will-change: transform;
}
/* Accessibilité : focus visible pour navigation clavier */
.solution-card:focus-visible {
outline: 3px solid #C52328;
outline-offset: 4px;
}
/* ====== OVERLAY SOMBRE (dégradé pour lisibilité) ====== */
.solution-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.75) 100%);
transition: background 0.4s ease;
z-index: 1;
pointer-events: none;
}
/* Contenu (titre + texte) au-dessus du gradient */
.solution-card > * {
position: relative;
z-index: 2;
}
/* ====== BADGE BLANC AVEC FLÈCHE - ÉTAT REPOS ====== */
.solution-card::after {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background-color: white;
border: 2px solid #C52328;
border-radius: 50%;
z-index: 3;
box-sizing: border-box;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.4s ease;
}
/* ====== HOVER (uniquement appareils avec souris) ====== */
@media (hover: hover) and (pointer: fine) {
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
background-size: 115% !important;
}
.solution-card:hover::before {
background: linear-gradient(180deg,
rgba(197, 35, 40, 0.25) 0%,
rgba(0, 0, 0, 0.85) 100%);
}
.solution-card:hover::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* ====== TAP / ACTIVE (mobile + tablette - feedback tactile) ====== */
.solution-card:active {
transform: scale(0.98);
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solution-card:active::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================
RESPONSIVE - TABLETTE (≤ 1024px)
============================================ */
@media (max-width: 1024px) {
.solution-card {
border-radius: 18px;
}
.solution-card::after {
width: 34px;
height: 34px;
top: 14px;
right: 14px;
}
}
/* ============================================
RESPONSIVE - MOBILE (≤ 767px)
============================================ */
@media (max-width: 767px) {
.solution-card {
border-radius: 16px;
background-size: cover !important; /* pas de zoom au repos sur mobile */
}
/* Overlay un peu plus marqué pour meilleure lisibilité petit écran */
.solution-card::before {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.8) 100%);
}
.solution-card::after {
width: 32px;
height: 32px;
top: 12px;
right: 12px;
border-width: 1.5px;
}
/* On bloque uniquement le zoom de l'image au tap, le reste (badge rouge, overlay) reste actif */
.solution-card:hover,
.solution-card:active {
background-size: cover !important;
}
/* Réduit l'intensité du tap pour ne pas casser le layout */
.solution-card:active {
transform: scale(0.97);
}
}
/* ============================================
ACCESSIBILITÉ - Utilisateurs sensibles aux animations
============================================ */
@media (prefers-reduced-motion: reduce) {
.solution-card,
.solution-card::before,
.solution-card::after {
transition: none !important;
}
.solution-card:hover,
.solution-card:active {
transform: none;
}
.solution-card:hover::after,
.solution-card:active::after {
transform: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33253e9 *//* ============================================
CARTE SOLUTION - VERSION RESPONSIVE COMPLÈTE
============================================ */
/* ====== BASE (Desktop par défaut) ====== */
.solution-card {
position: relative !important;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
background-size: 105% !important;
background-position: center !important;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease,
background-size 0.6s ease;
/* UX tactile : enlève le flash bleu sur mobile */
-webkit-tap-highlight-color: transparent;
/* Performance : prépare le GPU pour les animations */
will-change: transform;
}
/* Accessibilité : focus visible pour navigation clavier */
.solution-card:focus-visible {
outline: 3px solid #C52328;
outline-offset: 4px;
}
/* ====== OVERLAY SOMBRE (dégradé pour lisibilité) ====== */
.solution-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.75) 100%);
transition: background 0.4s ease;
z-index: 1;
pointer-events: none;
}
/* Contenu (titre + texte) au-dessus du gradient */
.solution-card > * {
position: relative;
z-index: 2;
}
/* ====== BADGE BLANC AVEC FLÈCHE - ÉTAT REPOS ====== */
.solution-card::after {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background-color: white;
border: 2px solid #C52328;
border-radius: 50%;
z-index: 3;
box-sizing: border-box;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.4s ease;
}
/* ====== HOVER (uniquement appareils avec souris) ====== */
@media (hover: hover) and (pointer: fine) {
.solution-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
background-size: 115% !important;
}
.solution-card:hover::before {
background: linear-gradient(180deg,
rgba(197, 35, 40, 0.25) 0%,
rgba(0, 0, 0, 0.85) 100%);
}
.solution-card:hover::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
}
/* ====== TAP / ACTIVE (mobile + tablette - feedback tactile) ====== */
.solution-card:active {
transform: scale(0.98);
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solution-card:active::after {
transform: rotate(90deg);
background-color: #C52328;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================
RESPONSIVE - TABLETTE (≤ 1024px)
============================================ */
@media (max-width: 1024px) {
.solution-card {
border-radius: 18px;
}
.solution-card::after {
width: 34px;
height: 34px;
top: 14px;
right: 14px;
}
}
/* ============================================
RESPONSIVE - MOBILE (≤ 767px)
============================================ */
@media (max-width: 767px) {
.solution-card {
border-radius: 16px;
background-size: cover !important; /* pas de zoom au repos sur mobile */
}
/* Overlay un peu plus marqué pour meilleure lisibilité petit écran */
.solution-card::before {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.8) 100%);
}
.solution-card::after {
width: 32px;
height: 32px;
top: 12px;
right: 12px;
border-width: 1.5px;
}
/* On bloque uniquement le zoom de l'image au tap, le reste (badge rouge, overlay) reste actif */
.solution-card:hover,
.solution-card:active {
background-size: cover !important;
}
/* Réduit l'intensité du tap pour ne pas casser le layout */
.solution-card:active {
transform: scale(0.97);
}
}
/* ============================================
ACCESSIBILITÉ - Utilisateurs sensibles aux animations
============================================ */
@media (prefers-reduced-motion: reduce) {
.solution-card,
.solution-card::before,
.solution-card::after {
transition: none !important;
}
.solution-card:hover,
.solution-card:active {
transform: none;
}
.solution-card:hover::after,
.solution-card:active::after {
transform: none;
}
}/* End custom CSS */