.elementor-140 .elementor-element.elementor-element-196194f{margin-top:0px;margin-bottom:30px;}.elementor-140 .elementor-element.elementor-element-9258566{text-align:center;}.elementor-140 .elementor-element.elementor-element-9258566.elementor-widget-heading .elementor-heading-title{color:#ff512f;}.elementor-140 .elementor-element.elementor-element-9258566 .elementor-heading-title{font-family:"CitrusGothicSolid", Sans-serif;font-size:70px;font-weight:300;font-style:normal;}.elementor-140 .elementor-element.elementor-element-4e893d1:not(.elementor-motion-effects-element-type-background), .elementor-140 .elementor-element.elementor-element-4e893d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jacknroll.fr/img/cms/Landings/welcome/site%20web.jpg");}.elementor-140 .elementor-element.elementor-element-4e893d1 > .elementor-background-overlay{opacity:0;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-140 .elementor-element.elementor-element-4e893d1{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-140 .elementor-element.elementor-element-860b657:not(.elementor-motion-effects-element-type-background), .elementor-140 .elementor-element.elementor-element-860b657 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jacknroll.fr/img/cms/Landings/welcome/boutique.jpg");}.elementor-140 .elementor-element.elementor-element-860b657{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-140 .elementor-element.elementor-element-860b657 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-140 .elementor-element.elementor-element-0c2ca2f:not(.elementor-motion-effects-element-type-background), .elementor-140 .elementor-element.elementor-element-0c2ca2f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jacknroll.fr/img/cms/Landings/welcome/roller.jpg");}.elementor-140 .elementor-element.elementor-element-0c2ca2f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-140 .elementor-element.elementor-element-0c2ca2f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-140 .elementor-element.elementor-element-ea2ec17:not(.elementor-motion-effects-element-type-background), .elementor-140 .elementor-element.elementor-element-ea2ec17 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jacknroll.fr/img/cms/Landings/welcome/blog.webp");}.elementor-140 .elementor-element.elementor-element-ea2ec17{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-140 .elementor-element.elementor-element-ea2ec17 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-140 .elementor-element.elementor-element-8a9069f{margin-top:50px;margin-bottom:10px;}.elementor-140 .elementor-element.elementor-element-d7a68ed{text-align:center;}.elementor-140 .elementor-element.elementor-element-d7a68ed.elementor-widget-heading .elementor-heading-title{color:#ff512f;}.elementor-140 .elementor-element.elementor-element-d7a68ed .elementor-heading-title{font-family:"CitrusGothicSolid", Sans-serif;font-size:30px;font-weight:300;font-style:normal;}.elementor-140 .elementor-element.elementor-element-3aefdde > .elementor-container{max-width:537px;}.elementor-140 .elementor-element.elementor-element-3aefdde{margin-top:0px;margin-bottom:0px;}.elementor-140 .elementor-element.elementor-element-d6cafc5 .elementor-image img{border-radius:30px 30px 30px 30px;}.elementor-140 .elementor-element.elementor-element-82601c4 .elementor-image img{border-radius:30px 30px 30px 30px;}.elementor-140 .elementor-element.elementor-element-8731ceb .elementor-image img{border-radius:30px 30px 30px 30px;}.elementor-140 .elementor-element.elementor-element-e281a13 .elementor-image img{border-radius:30px 30px 30px 30px;}.elementor.elementor-140{padding:0px 200px 0px 200px;}@media(max-width:1024px){.elementor.elementor-140{padding:0px 30px 0px 30px;}}@media(max-width:767px){.elementor-140 .elementor-element.elementor-element-196194f{margin-top:0px;margin-bottom:0px;}.elementor-140 .elementor-element.elementor-element-9258566 .elementor-heading-title{font-size:31px;}.elementor-140 .elementor-element.elementor-element-18b03fd .elementor-image img{border-radius:20px 20px 20px 20px;}.elementor-140 .elementor-element.elementor-element-668bec1 iframe{height:150px;}.elementor-140 .elementor-element.elementor-element-f32adab .elementor-image img{border-radius:20px 20px 20px 20px;}.elementor-140 .elementor-element.elementor-element-eeb34b3 .elementor-image img{border-radius:20px 20px 20px 20px;}.elementor-140 .elementor-element.elementor-element-8a9069f{margin-top:30px;margin-bottom:0px;}.elementor-140 .elementor-element.elementor-element-d7a68ed .elementor-heading-title{font-size:22px;}.elementor-140 .elementor-element.elementor-element-d7a68ed > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-140 .elementor-element.elementor-element-3aefdde{margin-top:0px;margin-bottom:0px;}.elementor-140 .elementor-element.elementor-element-c751a3a{width:25%;}.elementor-140 .elementor-element.elementor-element-d6cafc5 .elementor-image img{border-radius:10px 10px 10px 10px;}.elementor-140 .elementor-element.elementor-element-744956c{width:25%;}.elementor-140 .elementor-element.elementor-element-82601c4 .elementor-image img{border-radius:10px 10px 10px 10px;}.elementor-140 .elementor-element.elementor-element-06f5fbe{width:25%;}.elementor-140 .elementor-element.elementor-element-8731ceb .elementor-image img{border-radius:10px 10px 10px 10px;}.elementor-140 .elementor-element.elementor-element-fb177f3{width:25%;}.elementor-140 .elementor-element.elementor-element-e281a13 .elementor-image img{border-radius:10px 10px 10px 10px;}}/* Start custom CSS for google_maps, class: .elementor-element-668bec1 */#elementor .elementor-element-668bec1 iframe{
border-radius: 20px;
}/* End custom CSS */
/* Start custom CSS *//* ========= BENTO (Axon: Sections + Colonnes) ========= */
:root{
--bento-h: 400px; /* hauteur totale du bento */
--bento-gap:20px; /* espace entre cartes */
--bento-radius: 30px; /* arrondi des cartes */
}
/* Section bento = hauteur fixe */
.elementor-section.bento{
height: var(--bento-h) !important;
min-height: var(--bento-h) !important;
}
/* Le container/rangée prend 100% de la hauteur */
.elementor-section.bento > .elementor-container,
.elementor-section.bento .elementor-row{
height: 100% !important;
align-items: stretch !important;
}
/* Les 3 colonnes font toutes la même hauteur */
.elementor-section.bento .elementor-column,
.elementor-section.bento .elementor-column-wrap,
.elementor-section.bento .elementor-widget-wrap{
height: 100% !important;
min-height: 0 !important;
}
/* Dans chaque colonne, empiler verticalement les cartes */
.elementor-section.bento .elementor-widget-wrap{
display: flex !important;
flex-direction: column !important;
gap: var(--bento-gap) !important;
}
/* Cartes */
.bento-card{
position: relative !important;
overflow: hidden !important;
border-radius: var(--bento-radius) !important;
min-height: 0 !important;
/* background image rendu bento */
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Répartition en hauteur (flex) */
.bento-c1-top{ flex: 3 !important; }
.bento-c1-map{ flex: 2 !important; }
.bento-c2-full{ flex: 1 !important; }
.bento-c3-a{ flex: 1 !important; }
.bento-c3-b{ flex: 1 !important; }
/* Lien overlay (cartes images) */
.bento-link{
position: absolute !important;
inset: 0 !important;
z-index: 5 !important;
display: block !important;
}
/* ===== Map: le widget remplit la carte ===== */
.bento-c1-map{
display: flex !important;
flex-direction: column !important;
}
.bento-c1-map .bento-map-widget{
flex: 1 1 auto !important;
min-height: 0 !important;
}
/* Forcer la chaîne interne Google Maps à prendre 100% */
.bento-c1-map .bento-map-widget,
.bento-c1-map .bento-map-widget .elementor-widget-container,
.bento-c1-map .bento-map-widget .elementor-custom-embed{
height: 100% !important;
min-height: 0 !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
}
/* Iframe cover */
.bento-c1-map .bento-map-widget iframe{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
}
/* ===== Largeur des 3 colonnes (Axon/Elementor sections+colonnes) ===== */
.elementor-section.bento .elementor-row{
display:flex !important;
}
.elementor-section.bento .elementor-column{
flex: 1 1 0 !important; /* 3 colonnes égales */
width: 0 !important; /* évite qu'une colonne "prenne le minimum" */
min-width: 0 !important;
}
/* ===== Les cartes doivent remplir la colonne ===== */
.elementor-section.bento .bento-card{
width: 100% !important;
}
/* ===== Les sections internes (cartes) ne doivent pas être "boxed" ===== */
.elementor-section.bento .bento-card > .elementor-container{
width: 100% !important;
max-width: 100% !important;
}
/* ===== À l'intérieur d'une carte, la colo*
/* ===== CARTE MAP (section interne) : toute la chaîne en 100% ===== */
.bento-c1-map{
min-height: 0 !important;
height: auto !important;
}
/* La section interne a son propre container/row/col : on les étire */
.bento-c1-map > .elementor-container,
.bento-c1-map .elementor-row,
.bento-c1-map .elementor-column,
.bento-c1-map .elementor-column-wrap,
.bento-c1-map .elementor-widget-wrap{
height: 100% !important;
min-height: 0 !important;
}
/* La wrap de colonne empile, sinon le widget ne "grandit" pas */
.bento-c1-map .elementor-widget-wrap{
display: flex !important;
flex-direction: column !important;
}
/* Le widget Google Maps devient un enfant flex qui prend toute la place */
.bento-c1-map .bento-map-widget{
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
}
/* Les wrappers Elementor du widget maps */
.bento-c1-map .bento-map-widget .elementor-widget-container,
.bento-c1-map .bento-map-widget .elementor-custom-embed{
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Iframe: 100% (sans absolute pour éviter l'effet "tout fin") */
.bento-c1-map .bento-map-widget iframe{
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
}
/* ========= 1) Répartition hauteur Colonne 1 (image + map) ========= */
/* Mets les ratios que tu veux ici */
.bento-c1-top{ flex: 1 !important; }
.bento-c1-map{ flex: 1 !important; } /* égal au bloc du haut */
/* Si tu veux plutôt 60/40 par ex :
.bento-c1-top{ flex: 3 !important; }
.bento-c1-map{ flex: 2 !important; }
*/
/* ========= 2) Carte map: radius + clip + zéro padding ========= */
.bento-c1-map{
border-radius: 30px !important; /* adapte à ton design */
overflow: hidden !important; /* indispensable pour clipper l'iframe */
padding: 0 !important;
background: #f4f4f4; /* optionnel, pour éviter blanc flash */
}
/* Elementor (section interne) ajoute souvent du padding via container/column */
.bento-c1-map > .elementor-container,
.bento-c1-map .elementor-column-wrap,
.bento-c1-map .elementor-widget-wrap{
padding: 0 !important;
}
/* ========= 3) Le widget Google Maps: enlever padding/marges internes ========= */
.bento-c1-map .elementor-widget-google_maps,
.bento-c1-map .elementor-widget-google_maps .elementor-widget-container,
.bento-c1-map .elementor-widget-google_maps .elementor-custom-embed{
padding: 0 !important;
margin: 0 !important;
height: 100% !important;
min-height: 0 !important;
}
/* iframe plein bloc */
.bento-c1-map iframe{
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
}
/* ===== Liens cliquables sur les cartes images ===== */
.bento-card{
position: relative !important;
}
.bento-link{
position: absolute !important;
inset: 0 !important;
z-index: 50 !important;
display: block !important;
cursor: pointer !important;
}
/* Empêche les "couches" décoratives Elementor de bloquer le clic */
.bento-card .elementor-background-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
/* Si tu as du contenu texte dans une carte et tu veux qu'il reste cliquable aussi,
tu peux laisser tel quel. Si tu veux des éléments cliquables à l'intérieur (bouton),
on fera une exception plus tard. */
/* Le lien overlay couvre toute la carte */
.bento-card{ position: relative !important; }
.bento-link{
position: absolute !important;
inset: 0 !important;
z-index: 9999 !important;
display: block !important;
cursor: pointer !important;
pointer-events: auto !important;
}
/* Texte invisible mais présent (pour éviter suppression du lien) */
.bento-sr{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
/* Neutralise les couches Elementor qui peuvent capter le clic */
.bento-card .elementor-background-overlay,
.bento-card .elementor-element-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
.bento-link{ outline: 2px solid red !important; }
/* Les cartes images passent devant */
.bento-c1-top, .bento-c2-full, .bento-c3-a, .bento-c3-b{
position: relative !important;
z-index: 10 !important;
}
/* La map reste derrière (évite qu’une iframe déborde et vole les clics) */
.bento-c1-map{
position: relative !important;
z-index: 1 !important;
}
/* ===== LAYER CLIQUABLE (widget bouton) ===== */
.bento-card{ position: relative !important; }
/* Le wrapper du bouton couvre toute la carte */
.bento-card .bento-click,
.bento-card .bento-click .elementor-button-wrapper,
.bento-card .bento-click .elementor-button{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 9999 !important;
}
/* Le bouton devient invisible mais cliquable */
.bento-card .bento-click .elementor-button{
opacity: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
}
/* Empêche des couches Elementor de voler le clic */
.bento-card .elementor-background-overlay,
.bento-card .elementor-element-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
/* ===== Overlay cliquable sur toute la carte (bouton) ===== */
.bento-card{
position: relative !important;
}
/* Le widget du bouton prend toute la surface de la carte */
.bento-card .bento-click{
position: absolute !important;
inset: 0 !important;
z-index: 9999 !important;
width: 100% !important;
height: 100% !important;
}
/* Tous les wrappers du bouton prennent 100% */
.bento-card .bento-click,
.bento-card .bento-click .elementor-widget-container,
.bento-card .bento-click .elementor-button-wrapper{
width: 100% !important;
height: 100% !important;
}
/* Le lien du bouton doit être block + 100% */
.bento-card .bento-click .elementor-button{
display: block !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
}
/* Si Elementor ajoute une couche au-dessus, on la rend "non cliquable" */
.bento-card .elementor-background-overlay,
.bento-card .elementor-element-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
/* ===== BASE: la carte doit être le référentiel ===== */
.bento-card{
position: relative !important;
overflow: hidden !important; /* garde le radius propre */
}
/* Dans une section interne Elementor, le vrai "corps" est le container */
.bento-card > .elementor-container{
position: relative !important;
height: 100% !important;
min-height: 0 !important;
}
/* Et la colonne/les wraps internes doivent aussi faire 100% */
.bento-card .elementor-row,
.bento-card .elementor-column,
.bento-card .elementor-column-wrap,
.bento-card .elementor-widget-wrap{
height: 100% !important;
min-height: 0 !important;
}
/* ===== OVERLAY: le widget bouton recouvre toute la carte ===== */
.bento-card .bento-click{
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 9999 !important;
}
/* Tous les wrappers du bouton en 100% */
.bento-card .bento-click,
.bento-card .bento-click .elementor-widget-container,
.bento-card .bento-click .elementor-button-wrapper,
.bento-card .bento-click a.elementor-button{
width: 100% !important;
height: 100% !important;
}
/* Le lien doit être un bloc plein */
.bento-card .bento-click a.elementor-button{
display: block !important;
opacity: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
}
/* Empêche des calques Elementor de manger le clic */
.bento-card .elementor-background-overlay,
.bento-card .elementor-element-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
.bento-card .bento-click a.elementor-button{
opacity: .15 !important; /* juste pour voir la zone cliquable */
}
.bento--tablet{ --bento-h: auto; }
#elementor .elementor-element-c169586 iframe {
height: 167px;
border-radius: 20px;
}
/* =========================
TABLETTE: 3 colonnes + hauteur 300px
(Elementor sections + colonnes)
========================= */
@media (min-width: 768px) and (max-width: 1024px){
/* 1) On fixe la hauteur du bento */
.elementor-section.bento{
height: 300px !important;
min-height: 300px !important;
}
/* 2) Toute la structure interne suit la hauteur */
.elementor-section.bento > .elementor-container,
.elementor-section.bento .elementor-row,
.elementor-section.bento .elementor-column,
.elementor-section.bento .elementor-column-wrap,
.elementor-section.bento .elementor-widget-wrap{
height: 100% !important;
min-height: 0 !important;
}
/* 3) Forcer les 3 colonnes à rester sur une ligne */
.elementor-section.bento .elementor-container{
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
}
.elementor-section.bento .elementor-column{
flex: 1 1 0 !important;
width: 33.333% !important;
min-width: 0 !important;
}
}
@media (min-width: 768px) and (max-width: 1024px){
.elementor-section.bento .elementor-column{
float: left !important;
}
}
/* Carte map: radius + clip + hauteur */
.map-card{
border-radius: 20px;
overflow: hidden;
padding: 0;
}
/* Map: remplit la carte */
.map-card iframe{
width: 100%;
height: 100%;
border: 0;
display: block;
}/* End custom CSS */
/* Start custom CSS *//* ========= BENTO (Axon: Sections + Colonnes) ========= */
:root{
--bento-h: 400px; /* hauteur totale du bento */
--bento-gap:20px; /* espace entre cartes */
--bento-radius: 30px; /* arrondi des cartes */
}
/* Section bento = hauteur fixe */
.elementor-section.bento{
height: var(--bento-h) !important;
min-height: var(--bento-h) !important;
}
/* Le container/rangée prend 100% de la hauteur */
.elementor-section.bento > .elementor-container,
.elementor-section.bento .elementor-row{
height: 100% !important;
align-items: stretch !important;
}
/* Les 3 colonnes font toutes la même hauteur */
.elementor-section.bento .elementor-column,
.elementor-section.bento .elementor-column-wrap,
.elementor-section.bento .elementor-widget-wrap{
height: 100% !important;
min-height: 0 !important;
}
/* Dans chaque colonne, empiler verticalement les cartes */
.elementor-section.bento .elementor-widget-wrap{
display: flex !important;
flex-direction: column !important;
gap: var(--bento-gap) !important;
}
/* Cartes */
.bento-card{
position: relative !important;
overflow: hidden !important;
border-radius: var(--bento-radius) !important;
min-height: 0 !important;
/* background image rendu bento */
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Répartition en hauteur (flex) */
.bento-c1-top{ flex: 3 !important; }
.bento-c1-map{ flex: 2 !important; }
.bento-c2-full{ flex: 1 !important; }
.bento-c3-a{ flex: 1 !important; }
.bento-c3-b{ flex: 1 !important; }
/* Lien overlay (cartes images) */
.bento-link{
position: absolute !important;
inset: 0 !important;
z-index: 5 !important;
display: block !important;
}
/* ===== Map: le widget remplit la carte ===== */
.bento-c1-map{
display: flex !important;
flex-direction: column !important;
}
.bento-c1-map .bento-map-widget{
flex: 1 1 auto !important;
min-height: 0 !important;
}
/* Forcer la chaîne interne Google Maps à prendre 100% */
.bento-c1-map .bento-map-widget,
.bento-c1-map .bento-map-widget .elementor-widget-container,
.bento-c1-map .bento-map-widget .elementor-custom-embed{
height: 100% !important;
min-height: 0 !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
}
/* Iframe cover */
.bento-c1-map .bento-map-widget iframe{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
}
/* ===== Largeur des 3 colonnes (Axon/Elementor sections+colonnes) ===== */
.elementor-section.bento .elementor-row{
display:flex !important;
}
.elementor-section.bento .elementor-column{
flex: 1 1 0 !important; /* 3 colonnes égales */
width: 0 !important; /* évite qu'une colonne "prenne le minimum" */
min-width: 0 !important;
}
/* ===== Les cartes doivent remplir la colonne ===== */
.elementor-section.bento .bento-card{
width: 100% !important;
}
/* ===== Les sections internes (cartes) ne doivent pas être "boxed" ===== */
.elementor-section.bento .bento-card > .elementor-container{
width: 100% !important;
max-width: 100% !important;
}
/* ===== À l'intérieur d'une carte, la colo*
/* ===== CARTE MAP (section interne) : toute la chaîne en 100% ===== */
.bento-c1-map{
min-height: 0 !important;
height: auto !important;
}
/* La section interne a son propre container/row/col : on les étire */
.bento-c1-map > .elementor-container,
.bento-c1-map .elementor-row,
.bento-c1-map .elementor-column,
.bento-c1-map .elementor-column-wrap,
.bento-c1-map .elementor-widget-wrap{
height: 100% !important;
min-height: 0 !important;
}
/* La wrap de colonne empile, sinon le widget ne "grandit" pas */
.bento-c1-map .elementor-widget-wrap{
display: flex !important;
flex-direction: column !important;
}
/* Le widget Google Maps devient un enfant flex qui prend toute la place */
.bento-c1-map .bento-map-widget{
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
}
/* Les wrappers Elementor du widget maps */
.bento-c1-map .bento-map-widget .elementor-widget-container,
.bento-c1-map .bento-map-widget .elementor-custom-embed{
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Iframe: 100% (sans absolute pour éviter l'effet "tout fin") */
.bento-c1-map .bento-map-widget iframe{
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
}
/* ========= 1) Répartition hauteur Colonne 1 (image + map) ========= */
/* Mets les ratios que tu veux ici */
.bento-c1-top{ flex: 1 !important; }
.bento-c1-map{ flex: 1 !important; } /* égal au bloc du haut */
/* Si tu veux plutôt 60/40 par ex :
.bento-c1-top{ flex: 3 !important; }
.bento-c1-map{ flex: 2 !important; }
*/
/* ========= 2) Carte map: radius + clip + zéro padding ========= */
.bento-c1-map{
border-radius: 30px !important; /* adapte à ton design */
overflow: hidden !important; /* indispensable pour clipper l'iframe */
padding: 0 !important;
background: #f4f4f4; /* optionnel, pour éviter blanc flash */
}
/* Elementor (section interne) ajoute souvent du padding via container/column */
.bento-c1-map > .elementor-container,
.bento-c1-map .elementor-column-wrap,
.bento-c1-map .elementor-widget-wrap{
padding: 0 !important;
}
/* ========= 3) Le widget Google Maps: enlever padding/marges internes ========= */
.bento-c1-map .elementor-widget-google_maps,
.bento-c1-map .elementor-widget-google_maps .elementor-widget-container,
.bento-c1-map .elementor-widget-google_maps .elementor-custom-embed{
padding: 0 !important;
margin: 0 !important;
height: 100% !important;
min-height: 0 !important;
}
/* iframe plein bloc */
.bento-c1-map iframe{
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
}
/* ===== Liens cliquables sur les cartes images ===== */
.bento-card{
position: relative !important;
}
.bento-link{
position: absolute !important;
inset: 0 !important;
z-index: 50 !important;
display: block !important;
cursor: pointer !important;
}
/* Empêche les "couches" décoratives Elementor de bloquer le clic */
.bento-card .elementor-background-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
/* Si tu as du contenu texte dans une carte et tu veux qu'il reste cliquable aussi,
tu peux laisser tel quel. Si tu veux des éléments cliquables à l'intérieur (bouton),
on fera une exception plus tard. */
/* Le lien overlay couvre toute la carte */
.bento-card{ position: relative !important; }
.bento-link{
position: absolute !important;
inset: 0 !important;
z-index: 9999 !important;
display: block !important;
cursor: pointer !important;
pointer-events: auto !important;
}
/* Texte invisible mais présent (pour éviter suppression du lien) */
.bento-sr{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
/* Neutralise les couches Elementor qui peuvent capter le clic */
.bento-card .elementor-background-overlay,
.bento-card .elementor-element-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
.bento-link{ outline: 2px solid red !important; }
/* Les cartes images passent devant */
.bento-c1-top, .bento-c2-full, .bento-c3-a, .bento-c3-b{
position: relative !important;
z-index: 10 !important;
}
/* La map reste derrière (évite qu’une iframe déborde et vole les clics) */
.bento-c1-map{
position: relative !important;
z-index: 1 !important;
}
/* ===== LAYER CLIQUABLE (widget bouton) ===== */
.bento-card{ position: relative !important; }
/* Le wrapper du bouton couvre toute la carte */
.bento-card .bento-click,
.bento-card .bento-click .elementor-button-wrapper,
.bento-card .bento-click .elementor-button{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 9999 !important;
}
/* Le bouton devient invisible mais cliquable */
.bento-card .bento-click .elementor-button{
opacity: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
}
/* Empêche des couches Elementor de voler le clic */
.bento-card .elementor-background-overlay,
.bento-card .elementor-element-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
/* ===== Overlay cliquable sur toute la carte (bouton) ===== */
.bento-card{
position: relative !important;
}
/* Le widget du bouton prend toute la surface de la carte */
.bento-card .bento-click{
position: absolute !important;
inset: 0 !important;
z-index: 9999 !important;
width: 100% !important;
height: 100% !important;
}
/* Tous les wrappers du bouton prennent 100% */
.bento-card .bento-click,
.bento-card .bento-click .elementor-widget-container,
.bento-card .bento-click .elementor-button-wrapper{
width: 100% !important;
height: 100% !important;
}
/* Le lien du bouton doit être block + 100% */
.bento-card .bento-click .elementor-button{
display: block !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
}
/* Si Elementor ajoute une couche au-dessus, on la rend "non cliquable" */
.bento-card .elementor-background-overlay,
.bento-card .elementor-element-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
/* ===== BASE: la carte doit être le référentiel ===== */
.bento-card{
position: relative !important;
overflow: hidden !important; /* garde le radius propre */
}
/* Dans une section interne Elementor, le vrai "corps" est le container */
.bento-card > .elementor-container{
position: relative !important;
height: 100% !important;
min-height: 0 !important;
}
/* Et la colonne/les wraps internes doivent aussi faire 100% */
.bento-card .elementor-row,
.bento-card .elementor-column,
.bento-card .elementor-column-wrap,
.bento-card .elementor-widget-wrap{
height: 100% !important;
min-height: 0 !important;
}
/* ===== OVERLAY: le widget bouton recouvre toute la carte ===== */
.bento-card .bento-click{
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 9999 !important;
}
/* Tous les wrappers du bouton en 100% */
.bento-card .bento-click,
.bento-card .bento-click .elementor-widget-container,
.bento-card .bento-click .elementor-button-wrapper,
.bento-card .bento-click a.elementor-button{
width: 100% !important;
height: 100% !important;
}
/* Le lien doit être un bloc plein */
.bento-card .bento-click a.elementor-button{
display: block !important;
opacity: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
}
/* Empêche des calques Elementor de manger le clic */
.bento-card .elementor-background-overlay,
.bento-card .elementor-element-overlay,
.bento-card .elementor-shape{
pointer-events: none !important;
}
.bento-card .bento-click a.elementor-button{
opacity: .15 !important; /* juste pour voir la zone cliquable */
}
.bento--tablet{ --bento-h: auto; }
#elementor .elementor-element-c169586 iframe {
height: 167px;
border-radius: 20px;
}
/* =========================
TABLETTE: 3 colonnes + hauteur 300px
(Elementor sections + colonnes)
========================= */
@media (min-width: 768px) and (max-width: 1024px){
/* 1) On fixe la hauteur du bento */
.elementor-section.bento{
height: 300px !important;
min-height: 300px !important;
}
/* 2) Toute la structure interne suit la hauteur */
.elementor-section.bento > .elementor-container,
.elementor-section.bento .elementor-row,
.elementor-section.bento .elementor-column,
.elementor-section.bento .elementor-column-wrap,
.elementor-section.bento .elementor-widget-wrap{
height: 100% !important;
min-height: 0 !important;
}
/* 3) Forcer les 3 colonnes à rester sur une ligne */
.elementor-section.bento .elementor-container{
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
}
.elementor-section.bento .elementor-column{
flex: 1 1 0 !important;
width: 33.333% !important;
min-width: 0 !important;
}
}
@media (min-width: 768px) and (max-width: 1024px){
.elementor-section.bento .elementor-column{
float: left !important;
}
}
/* Carte map: radius + clip + hauteur */
.map-card{
border-radius: 20px;
overflow: hidden;
padding: 0;
}
/* Map: remplit la carte */
.map-card iframe{
width: 100%;
height: 100%;
border: 0;
display: block;
}/* End custom CSS */