, on neutralise */
.elementor .elementor-widget-shortcode p:has(.fe-badges){
margin:0 !important; padding:0 !important; display:block !important;
}
.elementor .elementor-widget-shortcode p:has(.fe-badges) br{ display:none !important; }
/* 1) Le wrapper badges : ligne unique, pas de wrap */
body.single-product .fe-badges{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
white-space:nowrap !important;
width:auto !important;
max-width:100% !important;
margin:0 0 8px !important;
padding:0 !important;
}
/* 2) Les enfants doivent être inline-flex (jamais block), et on tue les
internes */
body.single-product .fe-badges > *{
display:inline-flex !important;
align-items:center !important;
white-space:nowrap !important;
margin:0 !important; padding:0 !important;
}
body.single-product .fe-badges br{ display:none !important; }
/* 3) Style des pastilles : bordure fine 1px, compact */
body.single-product .fe-badge,
body.single-product .fe-badge--l{
padding:4px 10px !important;
font-size:12px !important;
line-height:1 !important;
font-weight:600 !important;
color:#2c5e30 !important;
background:#fff !important;
border:1px solid #2c5e30 !important; /* <<< bordure fine */
border-radius:9999px !important;
box-shadow:none !important;
}
/* ===================== FE CARD BADGES — ESPACES MAÎTRISÉS ===================== */
/* 0) Elementor : retire tout l'espace du widget Shortcode qui contient les badges */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* Auto-détection si tu oublies la classe */
.elementor .elementor-widget-shortcode:has(.fe-card-badges),
.elementor .elementor-widget-shortcode:has(.fe-badges){
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* WP ajoute parfois un
autour du shortcode → on le neutralise */
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:has(.fe-card-badges),
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:has(.fe-badges){
margin:0 !important; padding:0 !important;
}
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:empty{ display:none !important; }
/* 1) Wrapper des badges : variables d’espacement */
.fe-card-badges, .fe-badges{
/* curseurs d'espace (modifie si besoin) */
--badges-mt: 0px; /* marge au-dessus */
--badges-mb: 0px; /* marge au-dessous */
--badges-py: 0px; /* padding vertical interne */
--badges-px: 0px; /* padding horizontal interne */
--badges-gap: 6px; /* espace entre badges */
margin-top: var(--badges-mt) !important;
margin-bottom: var(--badges-mb) !important;
padding: var(--badges-py) var(--badges-px) !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
display:flex; flex-wrap:wrap; align-items:center; gap:var(--badges-gap);
}
/* 2) Badge générique (si ton HTML n’a pas déjà son style) */
.fe-card-badges > *,.fe-badges > *{
display:inline-flex; align-items:center; gap:6px;
height:28px; padding:0 10px; border-radius:999px;
font:600 12px/1 "maison-neue", Helvetica, Arial, sans-serif;
border:1px solid #d6e0ce; background:#f6f9f3; color:#2c3a31;
text-decoration:none; white-space:nowrap;
}
/* 3) Variante compacte : ajoute .fe-card-badges--tight au wrapper */
.fe-card-badges.fe-card-badges--tight,
.fe-badges.fe-card-badges--tight{
--badges-mt: 0px;
--badges-mb: 0px;
--badges-py: 0px;
--badges-px: 0px;
--badges-gap: 4px;
}
/* 4) Utilitaires (au cas par cas) */
.fe-space-none{ margin:0 !important; }
.fe-space-tight{ margin:8px 0 !important; }
.fe-space-normal{ margin:16px 0 !important; }
.fe-space-loose{ margin:32px 0 !important; }
/* 5) Debug (temporaire) : outline pour voir les limites du bloc badges */
.fe-card-badges.fe-debug, .fe-badges.fe-debug{
outline:1px dashed #e26a00 !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-a7464f2 *//* === ZIP panel : 1 seule ligne, version flex robuste === */
.fe-zip-panel{ margin:4px 0 10px; padding:0; background:transparent; border:0; }
.fe-zip-row{
display:flex !important;
align-items:center;
gap:10px;
flex-wrap:nowrap; /* empêche le retour à la ligne */
min-height:38px;
}
/* Icône + libellé compacts, jamais coupés */
.fe-zip-icon{ width:18px; height:18px; flex:0 0 18px; }
.fe-zip-ask{
font:600 14px/1.25 "maison-neue",Helvetica,Arial,sans-serif;
color:#45523e;
white-space:nowrap; /* reste sur la ligne */
margin-right:2px;
}
/* L’input prend tout l’espace restant */
.fe-zip-input{ flex:1 1 260px; min-width:180px; }
.fe-zip-input input{
width:100%;
height:36px;
border:1px solid #45523e;
border-radius:10px;
padding:0 12px;
font:600 13px/1 "maison-neue",Helvetica,Arial,sans-serif;
color:#45523e; background:#fff;
}
/* Bouton compact à droite ; cache tout texte résiduel */
.fe-zip-submit{
flex:0 0 38px; width:38px; height:38px;
border-radius:10px;
border:1px solid #45523e; background:#45523e;
display:inline-flex; align-items:center; justify-content:center;
padding:0; cursor:pointer; font-size:0 !important; color:transparent !important;
}
.fe-zip-submit::before{
content:""; width:10px; height:10px;
border-right:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(-45deg);
}
/* Message sous la ligne uniquement */
.fe-zip-msg{ width:100%; margin-top:8px; display:inline-flex; }
/* Mobile étroit : autoriser le wrap élégant (libellé au-dessus) */
@media (max-width: 520px){
.fe-zip-row{ flex-wrap:wrap; }
.fe-zip-ask{ flex:0 0 100%; margin:0 0 6px 0; }
.fe-zip-input{ flex:1 1 100%; }
}
/* ——— ZIP panel : mettre l'INPUT juste après la question (une seule ligne) ——— */
.fe-zip-row{
display:flex !important;
align-items:center;
gap:10px;
flex-wrap:nowrap !important; /* pas de retour à la ligne */
}
/* Le libellé peut rétrécir pour laisser passer l'input */
.fe-zip-ask{
flex: 0 1 420px; /* largeur cible, mais rétrécissable */
min-width: 0; /* IMPORTANT : autorise le shrink en flex */
white-space: normal; /* on autorise la casse interne si besoin */
margin-right: 2px;
}
/* L'input prend tout l'espace restant, mais reste sur la ligne */
.fe-zip-input{
flex: 1 1 260px; /* s’étire, mais reste sur la ligne */
min-width: 0; /* IMPORTANT en flex */
}
.fe-zip-input input{
width: 100%;
height: 36px;
}
/* Le bouton garde sa taille fixe et reste à droite */
.fe-zip-submit{
flex: 0 0 38px;
width: 38px; height: 38px;
border-radius: 10px;
}
/* (Optionnel) Si tu veux que le libellé ne prenne jamais plus de 45% de la ligne */
@media (min-width: 800px){
.fe-zip-ask{ max-width: 45%; }
}
/* ZIP panel : fond blanc propre */
.fe-zip-panel{
background:#fff !important; /* blanc pur */
border:0 !important; /* supprime le liseré vert pâle éventuel */
box-shadow:none !important; /* au cas où le thème ajoute une ombre */
padding:0 !important;
}
/* garde les pastilles message telles quelles (vert pâle) */
/* === FEYI — Icône géolocalisation “luxe” (SVG + halo doux) === */
.fe-zip-icon{
width:18px; height:18px; flex:0 0 18px;
position:relative; display:inline-block;
overflow:hidden; text-indent:-9999px; font-size:0 !important;
background:transparent !important; color:transparent !important;
}
/* Halo subtil (luxe) */
.fe-zip-icon::before{
content:"";
position:absolute; inset:-3px;
border-radius:50%;
background: radial-gradient(closest-side, rgba(44,94,48,0.14), rgba(44,94,48,0) 70%);
pointer-events:none;
}
/* Pin outline fin + trou central (SVG) */
.fe-zip-icon::after{
content:"";
position:absolute; inset:0;
background: center/contain no-repeat
url('data:image/svg+xml;utf8,\
');
}
/* Variante plus petite en mobile */
@media (max-width:480px){
.fe-zip-icon{ width:16px; height:16px; flex-basis:16px; }
.fe-zip-icon::before{ inset:-2px; }
}
/* ——— 0) Retire tout espace autour du widget Shortcode (Elementor) ——— */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* Si tu oublies la classe, auto-détection du panel */
.elementor .elementor-widget-shortcode:has(.fe-panel),
.elementor .elementor-widget-shortcode:has(.fe-delivery-panel){
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* ——— 1) Panel de livraison : base neutre + rythme serré ——— */
.fe-panel, .fe-delivery-panel{
/* variables de confort (tu peux les changer) */
--panel-pad-y: 8px; /* padding vertical interne */
--panel-pad-x: 0px; /* padding horizontal interne */
--panel-gap: 8px; /* espace entre les éléments internes */
margin:0 !important;
padding:var(--panel-pad-y) var(--panel-pad-x) !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* supprime les marges par défaut des titres/paragraphes dans le panel */
.fe-panel :where(h1,h2,h3,h4,h5,h6,p,ul,ol){ margin:0 !important; }
.fe-panel > * + *{ margin-block-start:var(--panel-gap) !important; }
/* compresse les lignes de formulaire courantes (Woo/Elementor) */
.fe-panel .form-row,
.fe-panel .woocommerce form .form-row,
.fe-panel .elementor-field-group{
margin:0 0 6px !important; padding:0 !important;
}
/* messages/infos dans le panel, marge mini */
.fe-panel .woocommerce-message,
.fe-panel .woocommerce-error,
.fe-panel .woocommerce-info{ margin:6px 0 !important; }
/* ——— 2) Variante encore plus compacte (ajoute .fe-panel--tight au shortcode) ——— */
.fe-panel.fe-panel--tight{
--panel-pad-y: 4px;
--panel-pad-x: 0px;
--panel-gap: 4px;
}
/* Debug : encadre le panel lui-même */
.fe-delivery-panel,
.fe-panel { /* selon le markup que tu as */
position: relative !important;
box-shadow: inset 0 0 0 1px #ff3b30 !important; /* contour rouge */
background: rgba(255,59,48,.06) !important; /* voile rouge pâle */
}
/* Si tu ne vois toujours pas le cadre, encadre le widget Elementor qui le contient */
.elementor .elementor-widget-shortcode:has(.fe-delivery-panel),
.elementor .elementor-widget-shortcode:has(.fe-zip-row),
.single-product .elementor .elementor-widget-shortcode:has(.fe-panel){
box-shadow: inset 0 0 0 1px #ff3b30 !important;
}
/* Retire toute marge/padding autour du widget Elementor */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container,
.elementor .elementor-widget-shortcode:has(.fe-delivery-panel),
.elementor .elementor-widget-shortcode:has(.fe-zip-row){
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* Panel ultra-compact (dessus/dessous = 0) */
.fe-delivery-panel,
.fe-panel{
--panel-pad-y: 0px; /* padding vertical interne */
--panel-pad-x: 0px;
--panel-gap: 6px; /* espace interne minimal */
margin:0 !important;
padding:var(--panel-pad-y) var(--panel-pad-x) !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
}
.fe-panel :where(h1,h2,h3,h4,h5,h6,p){ margin:0 !important; }
.fe-panel > * + *{ margin-block-start:var(--panel-gap) !important; }
/* ---- Ligne ZIP vraiment sur une seule ligne, qui s’adapte ---- */
.fe-zip-row{
display:flex !important; align-items:center; gap:8px; flex-wrap:nowrap !important; min-height:34px;
}
/* Le libellé peut rétrécir pour laisser passer l’input */
.fe-zip-ask{
font:600 14px/1.25 "maison-neue", Helvetica, Arial, sans-serif;
color:#45523e;
flex:0 1 420px; /* largeur cible mais "shrinkable" */
min-width:0; /* clé pour autoriser le shrink en flex */
margin-right:2px;
}
/* L’input prend le reste, sans forcer de retour à la ligne */
.fe-zip-input{ flex:1 1 240px; min-width:0; }
.fe-zip-input input{
width:100%;
height:34px; /* un peu plus compact */
border:1px solid #45523e; border-radius:10px;
padding:0 10px; font:600 13px/1 "maison-neue", Helvetica, Arial, sans-serif; color:#45523e; background:#fff;
}
/* Bouton compact (garde la même hauteur que l’input) */
.fe-zip-submit{
flex:0 0 34px; width:34px; height:34px; border-radius:10px;
border:1px solid #45523e; background:#45523e;
display:inline-flex; align-items:center; justify-content:center;
padding:0; cursor:pointer; font-size:0 !important; color:transparent !important;
}
.fe-zip-submit::before{
content:""; width:10px; height:10px;
border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
/* Message sous la ligne (laisse tel quel mais avec marge mini) */
.fe-zip-msg{ width:100%; margin-top:6px; display:inline-flex; }
/* Mobile étroit : on accepte le wrap proprement */
@media (max-width:520px){
.fe-zip-row{ flex-wrap:wrap; }
.fe-zip-ask{ flex:0 0 100%; margin:0 0 6px 0; }
.fe-zip-input{ flex:1 1 100%; }
}
/* 1) Never wrap the question */
.fe-zip-row{ flex-wrap:nowrap !important; }
.fe-zip-ask{
white-space: nowrap !important; /* no line break */
min-width: max-content !important;/* keep full sentence width */
flex: 0 0 auto !important; /* don't let it shrink */
word-break: normal !important;
hyphens: none !important;
}
/* 2) Let the input take the remaining space */
.fe-zip-input{ flex: 1 1 220px !important; min-width: 160px !important; }
/* 3) If some HTML adds
in the label, kill it */
.fe-zip-ask br{ display:none !important; }
/* (optional) On small screens, slightly reduce label size instead of wrapping */
@media (max-width:520px){
.fe-zip-ask{ font-size:13px; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-ae15ba1 *//* ===== CC BUY — STYLES UNIFIÉS (remplace tout le CSS précédent) ===== */
/* Base & variables (pour un rendu net et stable) */
.cc-buy{
--cc-bg:#f7f9f6; --cc-b:#e6ece4; --cc-primary:#3e5342; --cc-muted:#5a6b5f; --cc-text:#2c3a31;
background:var(--cc-bg); border:1px solid var(--cc-b); border-radius:16px; padding:16px; max-width:780px; margin:auto; color:var(--cc-text);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow:hidden;
}
/* === Variations: grille soignée (label à gauche, champ à droite) === */
.cc-buy table.variations{width:100%; border-collapse:separate; border-spacing:0; border:0;}
.cc-buy table.variations tr{
display:grid; grid-template-columns:240px 1fr; align-items:center; column-gap:12px; row-gap:8px; padding:6px 0;
}
.cc-buy table.variations th{
margin:0; padding:0; border:0; white-space:nowrap; color:var(--cc-muted); font-weight:600; font-synthesis-weight:none;
}
/* Masquer UNIQUEMENT les labels dupliqués dans la cellule de droite */
.cc-buy table.variations td.value .label,
.cc-buy table.variations td.value label{ display:none !important; }
.cc-buy table.variations td{ margin:0; padding:0; border:0; }
/* Select pilule + chevrons, sans débordement */
.cc-buy .variations select{
display:inline-block !important; box-sizing:border-box; width:100%; max-width:360px; height:42px; line-height:42px;
padding:0 36px 0 14px; border:1px solid #c9d3c5; border-radius:999px; background:#fff; font-weight:700; color:#1f2a21; cursor:pointer;
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:linear-gradient(45deg, transparent 50%, #1f2a21 50%), linear-gradient(135deg, #1f2a21 50%, transparent 50%);
background-position:right 14px center, right 8px center; background-size:6px 6px,6px 6px; background-repeat:no-repeat;
outline:2px solid transparent; outline-offset:0; transition:border-color .15s ease, background-color .15s ease, outline-color .15s ease;
}
.cc-buy .variations select:hover{ background:#f4f7f4; border-color:#b7c4b8; }
.cc-buy .variations select:focus{ border-color:var(--cc-primary); outline-color:rgba(62,83,66,.25); }
.cc-buy .reset_variations{ display:none !important; }
.cc-buy .woocommerce-variation{ margin:8px 0 0 0; font-size:.92rem; }
.cc-buy .woocommerce-variation-price{ font-weight:700; }
/* === Qty + CTA (look premium) === */
.cc-buy form.cart{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.cc-buy .quantity{
display:flex; align-items:center; border:1px solid #c9d3c5; border-radius:999px; background:#fff; overflow:hidden; height:42px;
}
.cc-buy .quantity .qty{ height:42px; line-height:42px; width:56px; text-align:center; border:0; padding:0; box-shadow:none; }
.cc-buy .single_add_to_cart_button{
flex:1 1 360px; height:42px; border-radius:999px; background:var(--cc-primary); color:#fff; font-weight:700; border:0;
letter-spacing:.01em; transition:filter .15s ease, transform .15s ease;
}
.cc-buy .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-buy .single_add_to_cart_button[disabled]{ opacity:.5; cursor:not-allowed; }
/* Optionnel: afficher le prix/discount à droite si Woo l’injecte ici */
.cc-buy .price, .cc-buy .woocommerce-variation-price{ margin-left:auto; }
/* === Mobile === */
@media (max-width:560px){
.cc-buy{ padding:12px; }
.cc-buy table.variations tr{ grid-template-columns:1fr; }
.cc-buy .variations select{ max-width:100%; }
}
/* ===== (Optionnel) Upsell carte type Flamingo ===== */
.fe-upsell{ background:#f4f7f2; border:1px solid #e3eadf; border-radius:14px; padding:14px; margin:18px 0; }
.fe-upsell__title{ margin:0 0 10px; font:700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#45523e; }
.fe-upsell__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fe-upsell__item{ display:grid; grid-template-columns:60px 1fr auto; gap:12px; align-items:center; background:#fff; border:1px solid #e6ede2; border-radius:12px; padding:8px 10px; }
.fe-upsell__media img{ width:60px; height:60px; object-fit:cover; border-radius:10px; display:block; }
.fe-upsell__name{ color:#2c5e30; font:700 14px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-decoration:none; }
.fe-upsell__name:hover{ text-decoration:underline; }
.fe-upsell__desc{ margin:.25rem 0 0; font:400 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#6b6f68; }
.fe-upsell__cta{ display:flex; align-items:center; gap:10px; }
.fe-upsell__price{ color:#45523e; font:700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; white-space:nowrap; }
.fe-upsell__btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid #2c5e30; color:#2c5e30; background:#fff; font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-decoration:none; transition:background .2s,color .2s; }
.fe-upsell__btn:hover{ background:#2c5e30; color:#fff; }
.fe-upsell__btn.is-disabled{ opacity:.45; pointer-events:none; }
@media (max-width:560px){
.fe-upsell__item{ grid-template-columns:54px 1fr; grid-template-rows:auto auto; }
.fe-upsell__cta{ grid-column:1 / -1; justify-content:flex-end; }
.fe-upsell__media img{ width:54px; height:54px; }
}
/* === CC-BUY — Style "Flamingo" pour la ligne de variation === */
/* Label fort, net */
.cc-buy table.variations th label{
font-weight:700; color:#2d3a30; font-synthesis-weight:none;
}
/* Select = texte léger, souligné, chevron à droite */
.cc-buy .variations select{
display:inline-block !important;
background:transparent; border:0; border-radius:0;
padding:2px 18px 4px 0; /* place pour le chevron */
font-weight:500; color:#1f2a21; line-height:1.15; cursor:pointer;
border-bottom:2px solid #cfd6cf; /* soulignement */
appearance:none; -webkit-appearance:none; -moz-appearance:none;
/* chevron discret à droite */
background-image:
linear-gradient(45deg, transparent 50%, #1f2a21 50%),
linear-gradient(135deg, #1f2a21 50%, transparent 50%);
background-position: right 4px center, right 0px center;
background-size: 6px 6px, 6px 6px;
background-repeat:no-repeat;
transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
/* Hover/Focus: soulignement plus marqué, ring subtil */
.cc-buy .variations select:hover{ border-bottom-color:#8fa492; }
.cc-buy .variations select:focus{
outline:0;
border-bottom-color:#3e5342;
box-shadow: 0 2px 0 0 #3e5342; /* mini accent sous la ligne */
}
/* Placeholder (option vide) → plus clair, pas gras */
.cc-buy .variations .value:has(select option:checked[value=""]) select{
color:#8a938b; font-weight:500; border-bottom-color:#d9e1db;
}
/* Nettoyage doublons de label côté valeur */
.cc-buy table.variations td.value .label,
.cc-buy table.variations td.value label{ display:none !important; }
/* Alignement de la ligne variations (garde ta grille 2 colonnes) */
.cc-buy table.variations tr{
display:grid; grid-template-columns:240px 1fr; align-items:center; column-gap:12px; row-gap:8px; padding:6px 0;
}
.cc-buy table.variations th,
.cc-buy table.variations td{ margin:0; padding:0; border:0; }
/* Bouton + qty inchangés (look premium existant) */
.cc-buy form.cart{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.cc-buy .quantity{ display:flex; align-items:center; border:1px solid #c9d3c5; border-radius:999px; background:#fff; overflow:hidden; height:42px; }
.cc-buy .quantity .qty{ height:42px; line-height:42px; width:56px; text-align:center; border:0; padding:0; }
.cc-buy .single_add_to_cart_button{ flex:1 1 360px; height:42px; border-radius:999px; background:#3e5342; color:#fff; font-weight:700; border:0; }
/* === CC-BUY — Flamingo strict override (qty + CTA côte à côte) === */
/* Ligne d'action */
.cc-buy form.cart{
display:flex; align-items:center; gap:16px; flex-wrap:nowrap; margin-top:14px;
}
/* --- Quantité : pilule compacte --- */
.cc-buy .quantity{
flex:0 0 auto !important;
display:inline-flex !important; align-items:center; gap:8px;
height:44px !important; padding:0 10px !important;
width:auto !important; max-width:none !important;
background:#fff !important; border:1px solid #cfd8cc !important; border-radius:999px !important;
box-shadow:none !important; position:relative; overflow:hidden;
}
.cc-buy .quantity::before, .cc-buy .quantity::after{ content:none !important; }
/* Champ nombre propre (pas de barre pleine largeur) */
.cc-buy .quantity .qty{
width:48px !important; height:44px !important; line-height:44px !important;
text-align:center !important; border:0 !important; margin:0 !important; padding:0 !important;
box-shadow:none !important; background:transparent !important; font-weight:700; color:#2c3a31;
}
/* retirer les flèches natives */
.cc-buy .quantity .qty::-webkit-outer-spin-button,
.cc-buy .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cc-buy .quantity .qty[type=number]{ -moz-appearance:textfield }
/* Boutons – / + (override total du thème) */
.cc-buy .cc-qty-btn{
all:unset; /* efface styles globaux du thème */
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:999px;
border:1px solid #d6e0d6; background:#fff; color:#1f2a21;
font-size:18px; line-height:1; cursor:pointer;
}
.cc-buy .cc-qty-btn:hover{ background:#f2f6f2 }
/* --- CTA long arrondi --- */
.cc-buy .single_add_to_cart_button{
flex:1 1 auto; min-width:320px; height:44px; border-radius:999px;
background:#3e5342; color:#fff; border:0 !important;
font-weight:800; letter-spacing:.06em; text-transform:uppercase;
transition:filter .15s ease, transform .15s ease;
}
.cc-buy .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.cc-buy .single_add_to_cart_button[disabled]{ opacity:.5; cursor:not-allowed }
/* Variation price sous la ligne pour éviter les décalages */
.cc-buy .woocommerce-variation{ width:100%; order:3; margin:8px 0 0 }
/* Responsive : empile uniquement en très petit */
@media (max-width:600px){ .cc-buy form.cart{ gap:12px } .cc-buy .single_add_to_cart_button{ min-width:0 } }
@media (max-width:420px){ .cc-buy form.cart{ flex-wrap:wrap } .cc-buy .single_add_to_cart_button{ flex-basis:100% } }
/* === CC-BUY — Bouton "Add to Basket" style Flamingo === */
.cc-buy form.cart{
display:flex; align-items:center; gap:16px; flex-wrap:nowrap; /* stepper + CTA côte à côte */
}
/* Stepper (garde ton patch actuel) — largeur auto */
.cc-buy .quantity{ flex:0 0 auto !important; }
/* CTA long, pilule verte, centré */
.cc-buy .single_add_to_cart_button{
flex:1 1 auto !important; /* occupe tout l'espace restant */
min-width:320px; /* visuel long */
height:48px; line-height:48px; /* un poil plus haut que la qty (Flamingo ~48px) */
border-radius:999px;
background:#3e5342 !important; /* vert Flamingo */
color:#fff !important;
border:0 !important;
text-align:center; text-transform:uppercase; letter-spacing:.06em;
font-weight:800; /* bouton bien "dense" */
padding:0 22px; /* évite la casse si min-width retiré */
transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* Hover / Active / Focus */
.cc-buy .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-buy .single_add_to_cart_button:active{ transform:translateY(0); filter:brightness(0.98); }
.cc-buy .single_add_to_cart_button:focus{ outline:0; box-shadow:0 0 0 3px rgba(62,83,66,.22); }
/* Disabled */
.cc-buy .single_add_to_cart_button[disabled],
.cc-buy .single_add_to_cart_button.disabled{
opacity:.5; cursor:not-allowed; transform:none; filter:none;
}
/* Sur très petit écran: empile le CTA en dessous, full width */
@media (max-width:420px){
.cc-buy form.cart{ flex-wrap:wrap; gap:12px; }
.cc-buy .single_add_to_cart_button{ flex-basis:100%; min-width:0; }
}
/* === CC-BUY — CTA pilule ARRONDI “Flamingo” (override fort) === */
.cc-buy form.cart .single_add_to_cart_button,
.cc-buy form.cart .single_add_to_cart_button.button,
.cc-buy form.cart button.single_add_to_cart_button,
.cc-buy form.cart button.single_add_to_cart_button.button,
.cc-buy form.cart a.single_add_to_cart_button.button {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
height:48px !important;
padding:0 28px !important;
/* la clé pour l’arrondi */
border-radius:9999px !important;
overflow:hidden !important;
background:#3e5342 !important;
color:#fff !important;
border:0 !important;
text-transform:uppercase !important;
letter-spacing:.06em !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
.cc-buy form.cart .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-buy form.cart .single_add_to_cart_button:focus{ outline:0; box-shadow:0 0 0 3px rgba(62,83,66,.22) !important; }
.cc-buy form.cart .single_add_to_cart_button[disabled]{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }
/* === CC-BUY — Hauteur du CTA contrôlée === */
.cc-buy{ --cc-cta-h: 35px; } /* ajuste ici: 36 / 40 / 44 / 48 */
/* sélecteurs très spécifiques + !important pour battre le thème */
.cc-buy form.cart .single_add_to_cart_button,
.cc-buy form.cart .single_add_to_cart_button.button,
.cc-buy form.cart button.single_add_to_cart_button,
.cc-buy form.cart button.single_add_to_cart_button.button,
.cc-buy form.cart a.single_add_to_cart_button.button {
height: var(--cc-cta-h) !important;
min-height: var(--cc-cta-h) !important;
line-height: calc(var(--cc-cta-h) - 2px) !important; /* garde le texte centré */
padding: 0 20px !important;
border-radius: 9999px !important;
}
/* (option) synchroniser la hauteur du stepper quantité */
.cc-buy .quantity{ height: var(--cc-cta-h) !important; }
.cc-buy .quantity .qty{
height: var(--cc-cta-h) !important;
line-height: var(--cc-cta-h) !important;
}
/* Force le fond blanc du bloc add-to-cart, en product page */
.single-product .elementor .cc-buy,
.single-product .woocommerce div.product .summary .cc-buy,
.single-product .elementor .fe-panel .cc-buy,
.single-product .fe-atc-block .cc-buy{
background:#fff !important;
border-color:transparent !important;
box-shadow:none !important;
border-radius:16px; /* garde l'arrondi si tu veux */
}
/* Si le beige vient du wrapper Elementor / panel, on le neutralise AUSSI */
.single-product .elementor .fe-panel,
.single-product .elementor .fe-atc-block,
.single-product .woocommerce div.product .summary .cart{
background:#fff !important;
box-shadow:none !important;
border-color:transparent !important;
}
/* Intérieur toujours blanc */
.single-product .cc-buy .variations select,
.single-product .cc-buy .quantity{
background:#fff !important;
}
/* ===== CC BUY — STYLES HARMONISÉS (fond 100% blanc) ===== */
.cc-buy{
/* Thème */
--cc-bg:#fff; /* fond blanc imposé */
--cc-b:#dfe6df;
--cc-text:#243228;
--cc-muted:#627165;
--cc-primary:#3e5342;
/* Rythme & dimensions */
--cc-r:16px;
--cc-gap:14px;
--cc-cta-h:44px; /* hauteur unique select/qty/CTA */
background:var(--cc-bg);
color:var(--cc-text);
border:1px solid transparent; /* why: empêche margin-collapsing */
border-radius:var(--cc-r);
padding:16px;
max-width:780px;
margin:auto;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Supprime l'espace vertical interne par défaut + rythme propre */
.cc-buy :where(h1,h2,h3,h4,h5,h6,p,ul,ol){ margin:0; }
.cc-buy > * + *{ margin-block-start:12px; }
/* ===== Variations (label gauche / champ droite) ===== */
.cc-buy table.variations{ width:100%; border:0; border-collapse:separate; border-spacing:0; }
.cc-buy table.variations tr{
display:grid; grid-template-columns:240px 1fr;
align-items:center; column-gap:12px; row-gap:8px; padding:6px 0;
}
.cc-buy table.variations th,
.cc-buy table.variations td{ margin:0; padding:0; border:0; }
.cc-buy table.variations th{ white-space:nowrap; color:var(--cc-muted); font-weight:600; }
.cc-buy table.variations td.value :where(.label,label){ display:none !important; } /* why: évite doublon */
/* ===== Select — unique style (pilule blanche) ===== */
.cc-buy .variations select{
display:inline-block !important; width:100%; max-width:360px;
height:var(--cc-cta-h); line-height:var(--cc-cta-h);
padding:0 36px 0 14px;
background:#fff;
border:1px solid #c9d3c5; border-radius:999px;
color:#1f2a21; font-weight:600;
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:
linear-gradient(45deg, transparent 50%, #1f2a21 50%),
linear-gradient(135deg, #1f2a21 50%, transparent 50%);
background-position:right 14px center, right 8px center;
background-size:6px 6px,6px 6px; background-repeat:no-repeat;
transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cc-buy .variations select:hover{ background:#f6f8f6; border-color:#b7c4b8; }
.cc-buy .variations select:focus{ outline:0; border-color:var(--cc-primary); box-shadow:0 0 0 3px rgba(62,83,66,.18); }
/* Placeholder (option vide) */
.cc-buy .variations .value:has(select option:checked[value=""]) select{
color:#889289; font-weight:500; border-color:#d7ded7;
}
/* ===== Ligne action : qty + CTA ===== */
.cc-buy form.cart{
display:flex; align-items:center; gap:var(--cc-gap); flex-wrap:nowrap; margin-top:12px;
}
/* Stepper quantité */
.cc-buy .quantity{
display:inline-flex !important; align-items:center; gap:8px;
height:var(--cc-cta-h) !important; padding:0 10px !important;
background:#fff !important; border:1px solid #cfd8cc !important; border-radius:999px !important;
overflow:hidden; flex:0 0 auto !important;
}
.cc-buy .quantity .qty{
width:48px !important; height:var(--cc-cta-h) !important; line-height:var(--cc-cta-h) !important;
text-align:center !important; border:0 !important; margin:0 !important; padding:0 !important;
background:transparent !important; color:var(--cc-text); font-weight:700;
}
.cc-buy .quantity .qty::-webkit-outer-spin-button,
.cc-buy .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cc-buy .quantity .qty[type=number]{ -moz-appearance:textfield }
.cc-buy .cc-qty-btn{
all:unset; display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:999px;
border:1px solid #d6e0d6; background:#fff; color:#1f2a21; font-size:18px; line-height:1; cursor:pointer;
}
.cc-buy .cc-qty-btn:hover{ background:#f2f6f2; }
/* CTA principal (unique) */
.cc-buy .single_add_to_cart_button,
.cc-buy .single_add_to_cart_button.button,
.cc-buy button.single_add_to_cart_button{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
height:var(--cc-cta-h) !important; min-height:var(--cc-cta-h) !important;
padding:0 24px !important; border-radius:9999px !important;
background:#3e5342 !important; color:#fff !important; border:0 !important;
font-weight:800 !important; letter-spacing:.04em !important; text-transform:uppercase !important; line-height:1 !important;
box-shadow:none !important; flex:1 1 320px !important;
transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cc-buy .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-buy .single_add_to_cart_button:focus{ outline:0; box-shadow:0 0 0 3px rgba(62,83,66,.22) !important; }
.cc-buy .single_add_to_cart_button[disabled]{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }
/* Infos variation/prix (évite décalages) */
.cc-buy .woocommerce-variation{ width:100%; order:3; margin-top:8px; }
.cc-buy .woocommerce-variation-price{ font-weight:700; }
/* ===== Mobile ===== */
@media (max-width:560px){
.cc-buy{ padding:12px; }
.cc-buy table.variations tr{ grid-template-columns:1fr; }
.cc-buy .variations select{ max-width:100%; }
}
@media (max-width:420px){
.cc-buy form.cart{ flex-wrap:wrap; gap:12px; }
.cc-buy .single_add_to_cart_button{ flex-basis:100%; }
}
/* ===== Forcer le BLANC sur les wrappers Elementor/Woo ===== */
.single-product .elementor .cc-buy,
.single-product .woocommerce div.product .summary .cc-buy,
.single-product .elementor .fe-panel .cc-buy,
.single-product .fe-atc-block .cc-buy{
background:#fff !important; border-color:transparent !important; box-shadow:none !important;
}
.single-product .elementor .fe-panel,
.single-product .elementor .fe-atc-block,
.single-product .woocommerce div.product .summary .cart{
background:#fff !important; box-shadow:none !important; border-color:transparent !important;
}
/* Intérieur toujours blanc */
.single-product .cc-buy :where(.variations select, .quantity){ background:#fff !important; }
/* ===== Mod optionnel : supprimer tout espace externe quand nécessaire ===== */
.cc-buy--flush{ margin:0 !important; }
/* 1) Couper TOUT l'espace autour du widget shortcode (Elementor) */
.single-product .elementor .elementor-widget-shortcode,
.single-product .elementor .elementor-widget-shortcode > .elementor-widget-container{
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* 2) Couper le gap de la colonne/section qui contient le widget */
.single-product .elementor-column .elementor-widget-wrap{ gap:0 !important; }
.single-product .elementor .e-con{ gap:0 !important; } /* Elementor Container (si utilisé) */
.single-product .elementor .elementor-widget:not(:last-child){ margin-bottom:0 !important; }
/* 3) Bloc cc-buy : pas de marge externe. Garde un léger padding si tu veux */
.single-product .cc-buy{
margin-block:0 !important; /* supprime espace AVANT/APRÈS */
padding-block:8px !important; /* ajuste (0–12px). Mets 0 si tu veux ultra-compact */
}
/* 4) Rythme interne (entre label/select et ligne qty+bouton) minimal */
.single-product .cc-buy > * + *{ margin-block-start:8px !important; } /* réduis l’espace interne */
/* === CC-BUY — Zéro espace au-dessus/au-dessous en s'appuyant sur TES variables === */
.single-product .elementor .elementor-widget-shortcode .cc-buy{
--space-top: 0px; /* marge haute du bloc */
--space-bottom: 0px; /* marge basse du bloc */
--pad-y: 0px; /* padding vertical interne */
--pad-x: 0px; /* padding horizontal interne */
}
/* Couper aussi l’espace ajouté par le widget Elementor autour du shortcode */
.single-product .elementor .elementor-widget-shortcode:has(.cc-buy),
.single-product .elementor .elementor-widget-shortcode.fe-no-gap,
.single-product .elementor .elementor-widget-shortcode:has(.cc-buy) > .elementor-widget-container,
.single-product .elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* (optionnel mais souvent nécessaire) — couper le gap de la colonne/section */
.single-product .elementor-column .elementor-widget-wrap{ gap:0 !important; }
.single-product .elementor .elementor-widget:not(:last-child){ margin-bottom:0 !important; }
/* WordPress met parfois un
autour du shortcode → pas d'espace */ .single-product .elementor .elementor-widget-shortcode > .elementor-widget-container > p:has(.cc-buy){ margin:0 !important; padding:0 !important; } .single-product .elementor .elementor-widget-shortcode > .elementor-widget-container > p:empty{ display:none !important; } /* ===== CC BUY — COMPACT GLOBAL (réduit clairement l'encombrement) ===== */ /* 1) Coupe l'espace ajouté par Elementor autour du shortcode */ .single-product .elementor .elementor-widget-shortcode:has(.cc-buy), .single-product .elementor .elementor-widget-shortcode:has(.cc-buy) > .elementor-widget-container{ margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* Neutralise aussi les gaps de la colonne/section */ .single-product .elementor-column .elementor-widget-wrap{ gap:0 !important; } .single-product .elementor .elementor-widget:not(:last-child){ margin-bottom:0 !important; } /* 2) Bloc cc-buy plus serré */ .single-product .cc-buy{ /* variables de rythme */ --cc-cta-h: 40px; /* 44 → 40 : hauteur qty/CTA */ --cc-gap: 10px; /* 14 → 10 : espace entre qty et CTA */ /* padding interne plus court */ padding:10px 12px !important; /* 16px → 10/12px */ margin:0 !important; /* pas de marge externe */ border-radius:12px; /* léger arrondi seulement */ } /* 3) Ligne variations : resserre la grille et l’écart vertical */ .single-product .cc-buy table.variations tr{ grid-template-columns:200px 1fr; /* 240 → 200 */ column-gap:10px; /* 12 → 10 */ row-gap:6px; /* 8 → 6 */ padding:2px 0; /* 6px → 2px */ } .single-product .cc-buy .variations select{ max-width:340px; /* 360 → 340 */ } /* 4) Ligne d’action : moins d’air au-dessus + gap réduit */ .single-product .cc-buy form.cart{ margin-top:8px !important; /* 12/14 → 8 */ gap:var(--cc-gap) !important; /* 10 par défaut ci-dessus */ } /* 5) Stepper + bouton adaptés à la nouvelle hauteur */ .single-product .cc-buy .quantity{ height:var(--cc-cta-h) !important; padding:0 8px !important; /* 10 → 8 */ } .single-product .cc-buy .quantity .qty{ height:var(--cc-cta-h) !important; line-height:var(--cc-cta-h) !important; width:44px !important; /* 48 → 44 */ } .single-product .cc-buy .single_add_to_cart_button{ height:var(--cc-cta-h) !important; min-height:var(--cc-cta-h) !important; padding:0 18px !important; /* 24/22 → 18 */ flex:1 1 280px !important; /* 320 → 280 */ } /* 6) Option “ULTRA-COMPACT” : ajoute simplement la classe cc-buy--tight au shortcode [cc_buy] */ .single-product .cc-buy.cc-buy--tight{ --cc-cta-h: 36px; --cc-gap: 8px; padding:8px 10px !important; } .single-product .cc-buy.cc-buy--tight table.variations tr{ grid-template-columns:180px 1fr; column-gap:8px; row-gap:4px; padding:0; } .single-product .cc-buy.cc-buy--tight .variations select{ max-width:320px; } .single-product .cc-buy.cc-buy--tight form.cart{ margin-top:6px !important; } .single-product .cc-buy.cc-buy--tight .quantity .qty{ width:40px !important; } .single-product .cc-buy.cc-buy--tight .single_add_to_cart_button{ padding:0 16px !important; } .single-product .cc-buy.cc-buy--tight{ --cc-cta-h: 36px; /* 40 → 36 */ --cc-gap: 8px; /* 10 → 8 */ padding:8px 10px !important; } .single-product .cc-buy.cc-buy--tight table.variations tr{ grid-template-columns:180px 1fr; column-gap:8px; row-gap:4px; padding:0; } .single-product .cc-buy.cc-buy--tight .variations select{ max-width:320px; } .single-product .cc-buy.cc-buy--tight form.cart{ margin-top:6px !important; } .single-product .cc-buy.cc-buy--tight .quantity .qty{ width:40px !important; } .single-product .cc-buy.cc-buy--tight .single_add_to_cart_button{ padding:0 16px !important; } /* 1) Pas d’espace autour du widget qui contient .cc-buy */ .elementor .elementor-widget-shortcode:has(.cc-buy), .elementor .elementor-widget-shortcode:has(.cc-buy) > .elementor-widget-container{ margin:0 !important; padding:0 !important; } /* 2) Pas d’espace à l’intérieur du bloc cc-buy */ .cc-buy{ margin:0 !important; padding-bottom:0 !important; } /* 3) Pas d’espace sous le formulaire / bouton */ .cc-buy form.cart{ margin:0 !important; } .cc-buy form.cart + *{ margin-top:0 !important; } /* 4) WordPress met parfois un
autour du shortcode → on annule */
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:has(.cc-buy){
margin:0 !important; padding:0 !important;
}
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:empty{
display:none !important;
}
/* 5) Éléments Woo qui ajoutent un “liseré” d’espace sous le bouton */
.cc-buy .woocommerce-variation,
.cc-buy .woocommerce-variation-description,
.cc-buy .woocommerce-variation-availability,
.cc-buy .woocommerce-message,
.cc-buy .woocommerce-info,
.cc-buy .woocommerce-error{
margin:0 !important;
padding-bottom:0 !important;
}
/* (option) Si tu veux un bloc ultra serré : active cette classe sur le shortcode */
.cc-buy.cc-tight{ margin-bottom:0 !important; }
/* === CC BUY — FORCER qty + bouton sur UNE LIGNE en MOBILE === */
@media (max-width: 767px){
/* 1) Le formulaire add-to-cart dans cc_buy = ligne horizontale, jamais empilée */
.single-product .cc-buy form.cart,
.single-product .cc-buy form.cart.variations_form {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
margin-top: 10px !important;
}
/* 2) Bloc quantité : taille fixe à gauche */
.single-product .cc-buy .quantity{
order: 0 !important;
flex: 0 0 auto !important;
height: 40px !important;
padding: 0 8px !important;
margin: 0 !important;
}
.single-product .cc-buy .quantity .qty{
width: 44px !important;
height: 40px !important;
line-height: 40px !important;
font-size: 14px !important;
}
/* 3) Bouton AJOUTER AU PANIER : prend tout l'espace restant à droite */
.single-product .cc-buy .single_add_to_cart_button,
.single-product .cc-buy .single_add_to_cart_button.button,
.single-product .cc-buy button.single_add_to_cart_button {
order: 1 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
height: 40px !important;
line-height: 40px !important;
padding: 0 20px !important;
font-size: 13px !important;
text-align: center !important;
}
/* 4) Tout texte de variation/prix passe LIGNE SUIVANTE (en dessous) */
.single-product .cc-buy .woocommerce-variation{
order: 2 !important;
width: 100% !important;
margin-top: 6px !important;
}
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-3deb127 *//* ===== FE Upsell — RESET (aucun cadre par défaut) ===== */
.fe-upsell{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
.elementor .fe-no-frame,
.elementor .fe-no-frame > .elementor-widget-container{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
/* ===== Unique variante : VERT PÂLE (codes fixes) ===== */
.fe-upsell.fe-green{
background:#EFF2E9; /* vert pâle */
border:1px solid #D6E0CE; /* bordure claire */
border-radius:12px;
padding:16px;
color:#45523E; /* texte */
box-shadow:0 1px 0 rgba(0,0,0,.03);
}
/* Contenu */
.fe-upsell.fe-green .fe-card{ display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center; }
.fe-upsell.fe-green .fe-thumb img{ width:56px; height:56px; object-fit:cover; border-radius:8px; display:block; }
.fe-upsell.fe-green .fe-title{ color:#45523E; font-weight:700; text-decoration:underline; margin:0 0 4px; }
.fe-upsell.fe-green .fe-excerpt{
font-size:14px; line-height:1.6; color:#45523E; margin:0 0 12px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* CTA pilule + prix à droite */
.fe-upsell.fe-green .fe-cta{
border:1px solid #2C5E30; /* bordure bouton */
border-radius:9999px; height:40px;
display:flex; align-items:center; justify-content:space-between;
padding:0 14px; gap:16px; background:#FCFBF6; /* léger contraste */
}
.fe-upsell.fe-green .fe-cta .button.fe-add{
background:transparent; border:0; padding:0;
color:#45523E;
font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px; line-height:1;
}
.fe-upsell.fe-green .fe-cta .button.fe-add:hover{ opacity:.85; }
.fe-upsell.fe-green .fe-cta .fe-price{ margin-left:14px; font-weight:800; white-space:nowrap; color:#45523E; }
/* Woo AJAX: masque "Voir le panier" */
.fe-upsell .added_to_cart{ display:none!important; }
/* Responsive */
@media (max-width:640px){
.fe-upsell.fe-green .fe-card{ grid-template-columns:48px 1fr; gap:10px; }
}
/* ——— ANTI-BEIGE GLOBAL (container Elementor du widget Shortcode) ——— */
.elementor .elementor-widget-shortcode > .elementor-widget-container{
background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important;
}
/* FORCE la carte en vert pâle */
.fe-upsell{ background:transparent !important; border:0 !important; padding:0 !important; }
.fe-upsell.fe-green{
background:#EFF2E9 !important;
border:1px solid #D6E0CE !important;
border-radius:12px !important;
padding:16px !important;
color:#45523E !important;
}
/* 🔧 Le beige venait d'ici: fond crème du CTA. On le met VERT PÂLE aussi. */
.fe-upsell .fe-cta{
background:#EFF2E9 !important; /* était #FCFBF6 (crème/beige) */
border:1px solid #2C5E30 !important;
border-radius:9999px !important;
height:40px !important;
display:flex; align-items:center; justify-content:space-between;
padding:0 14px; gap:16px;
}
/* Nettoie les conteneurs Elementor autour si un fond/padding persiste */
.elementor .elementor-widget-shortcode,
.elementor .elementor-widget-shortcode > .elementor-widget-container{
background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
/* (debug temporaire) Voir les bords de la carte — à retirer après test */
/* .fe-upsell.fe-green { outline:2px solid #2C5E30 !important; } */
/* Carte vert pâle (déjà OK) */
.fe-upsell.fe-green{
background:#EFF2E9 !important;
border:1px solid #D6E0CE !important;
border-radius:12px !important;
padding:16px !important;
color:#45523E !important;
box-shadow:0 1px 0 rgba(0,0,0,.03) !important;
}
/* ❌ Annule le "panneau intérieur" ajouté par le thème */
.fe-upsell .fe-card,
.fe-upsell .fe-main{
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
}
/* Image: pas de fond ni arrondis parasites */
.fe-upsell .fe-thumb,
.fe-upsell .fe-thumb img{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* CTA (si tu veux le garder ton sur ton vert pâle) */
.fe-upsell .fe-cta{
background:#EFF2E9 !important; /* ou #FFFFFF si tu préfères blanc */
border:1px solid #2C5E30 !important;
border-radius:9999px !important;
height:40px !important;
display:flex; align-items:center; justify-content:space-between;
padding:0 14px !important; gap:16px !important;
}
/* Contenu texte (inchangé) */
.fe-upsell .fe-title{ color:#45523E !important; font-weight:700; text-decoration:underline; margin:0 0 4px !important; }
.fe-upsell .fe-excerpt{ font-size:14px; line-height:1.6; color:#45523E; margin:0 0 12px; }
.fe-upsell .added_to_cart{ display:none !important; }
/* 1) Parent texte du bloc */
.fe-upsell .fe-main{
text-align:left !important; /* casse tout centrage hérité */
}
/* 2) Le libellé lui-même (nouvelle version avec classe) */
.fe-upsell .fe-lead{
text-align:left !important;
display:block !important;
margin-left:0 !important;
margin-right:auto !important;
color:#2b3a2e !important; /* garde la teinte si écrasée */
}
/* 2bis) Fallback pour l’ancienne version (sans classe, 1er div texte) */
.fe-upsell .fe-main > div:first-child{
text-align:left !important;
display:block !important;
margin-left:0 !important;
margin-right:auto !important;
}
/* 3) Si le widget Elementor centre tout le contenu */
.elementor .elementor-widget-shortcode .fe-upsell{
text-align:left !important;
}
//* Grille 2 colonnes : [thumb | contenu] */
.fe-upsell .fe-card{
display:grid !important;
grid-template-columns:56px 1fr !important; /* ajuste 56 si besoin */
column-gap:12px !important;
row-gap:8px !important;
align-items:start !important;
}
/* Dissout le wrapper pour placer ses enfants directement dans la grille */
.fe-upsell .fe-main{ display:contents !important; }
/* L1 : libellé sur toute la largeur (=> aligné à gauche de la carte) */
.fe-upsell .fe-main .fe-lead{
position:static !important;
grid-column:1 / -1 !important;
grid-row:1 !important;
margin:0 0 6px !important;
font-size:14px; line-height:1.2; opacity:.85; text-align:left;
}
/* L2 : image à gauche, titre à droite */
.fe-upsell .fe-thumb{
grid-column:1 !important;
grid-row:2 !important; /* <-- force SOUS le libellé */
margin:0 !important;
}
.fe-upsell .fe-title{
grid-column:2 !important;
grid-row:2 !important;
margin:0 0 4px !important;
}
/* L3 : extrait */
.fe-upsell .fe-excerpt{
grid-column:2 !important;
grid-row:3 !important;
margin:0 0 12px !important;
}
/* L4 : CTA */
.fe-upsell .fe-cta{
grid-column:2 !important;
grid-row:4 !important;
}
/* Libellé en gras */
.fe-upsell .fe-lead{
font-weight:700 !important;
}
/* Titre produit sans soulignement */
.fe-upsell .fe-title,
.fe-upsell .fe-title:hover,
.fe-upsell .fe-title:focus,
.fe-upsell .fe-title:visited{
text-decoration: none !important;
border-bottom: 0 !important; /* au cas où le thème simule un underline */
outline: none !important;
}
/* 1) Espace sous le TITRE (marge basse) */
.fe-upsell .fe-title{
display:block; /* assure que la marge s’applique bien */
margin-bottom: 2px !important; /* 0–4px selon ton goût */
line-height: 1.25; /* option: un peu plus compact */
}
/* 2) Espace au-dessus de la DESCRIPTION (marge haute) */
.fe-upsell .fe-excerpt{
margin: 0 0 9px !important; /* met 0 si tu veux coller au titre */
}
/* 3) Si l’écart persiste (structure grid) c’est le row-gap */
.fe-upsell .fe-card{
row-gap: 2px !important; /* avant 8px ; ajuste 0–6px */
}
/* Bouton "ADD TO BASKET" sans soulignement */
.fe-upsell .fe-cta .button.fe-add,
.fe-upsell .fe-cta .button.fe-add:hover,
.fe-upsell .fe-cta .button.fe-add:focus,
.fe-upsell .fe-cta .button.fe-add:active,
.fe-upsell .fe-cta .button.fe-add:visited{
text-decoration: none !important; /* retire l'underline */
border-bottom: 0 !important; /* si le thème simule un underline */
outline: none; /* évite le halo bleu par défaut */
}
/* Bouton upsell : retire tout surlignage/underline "stylisé" */
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *{
text-decoration: none !important;
-webkit-text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-color: transparent !important;
/* tue les faux surlignages type "stabilo" */
box-shadow: none !important; /* ex: box-shadow: inset 0 -0.4em ... */
background: none !important; /* ex: background-color */
background-image: none !important; /* ex: linear-gradient(...) underline */
border-bottom: 0 !important; /* underline simulé par border */
}
/* au cas où le thème utilise des pseudo-éléments pour l'underline */
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add::before,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add::after,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *::before,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *::after{
content: none !important;
background: none !important;
box-shadow: none !important;
}
/* Texte vert FE sur le bouton du bloc upsell (et tous ses enfants) */
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add:hover,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add:focus,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add:active,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add:visited{
color:#2C5E30 !important;
background:transparent !important;
text-decoration:none !important;
-webkit-text-fill-color:#2C5E30 !important; /* Safari */
}
/* Assure que le texte interne hérite bien (certains thèmes wrap le label dans ) */
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *:hover{
color:inherit !important;
-webkit-text-fill-color:inherit !important;
text-decoration:none !important;
background:none !important; /* tue un éventuel surlignage */
box-shadow:none !important; /* tue un faux "surline" par shadow */
border-bottom:0 !important;
}
/* Widget Shortcode SANS ESPACE */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
padding:0 !important;
margin:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* Colonne/section sans espace si tu mets la même classe sur la colonne/section */
.elementor .elementor-column.fe-no-gap,
.elementor .elementor-column.fe-no-gap > .elementor-widget-wrap,
.elementor .elementor-section.fe-no-gap{
padding:0 !important;
margin:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* Elementor/WordPress ajoutent souvent un autour du shortcode → tue sa marge */
.elementor .elementor-widget-shortcode > .elementor-widget-container > p{
margin:0 !important;
padding:0 !important;
}
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:empty{
display:none !important;
}
/* Sécurité : évite les marges internes parasites dans ta carte upsell */
.fe-upsell > :first-child{ margin-top:0 !important; }
.fe-upsell > :last-child{ margin-bottom:0 !important; }
/* 0) Shortcode Elementor sans padding/marge autour */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
margin:0 !important; padding:0 !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* 1) FE Upsell 2 — base neutre + contrôle des marges */
.fe-upsell{
/* variables : change-les si tu veux des valeurs par défaut globales */
--up-top: 0px; /* marge au-dessus */
--up-bottom: 0px; /* marge en-dessous */
--up-pad-x: 0px; /* padding interne horizontal si besoin */
--up-pad-y: 0px; /* padding interne vertical si besoin */
margin-top: var(--up-top) !important;
margin-bottom: var(--up-bottom) !important;
padding: var(--up-pad-y) var(--up-pad-x) !important;
/* sécurités anti-surprises */
background: transparent; border: 0; box-shadow: none;
}
/* Nettoie les marges internes par défaut */
.fe-upsell :where(h1,h2,h3,h4,h5,h6,p){ margin:0; }
.fe-upsell > * + *{ margin-top:8px; } /* petit rythme interne optionnel */
/* 2) Variantes toutes prêtes */
.fe-upsell--flush{ /* aucune marge externe */
--up-top: 0px; --up-bottom: 0px;
}
.fe-upsell--tight{ /* marge serrée */
--up-top: 6px; --up-bottom: 6px;
}
.fe-upsell--normal{ /* marge standard si tu veux */
--up-top: 16px; --up-bottom: 16px;
}
/* (optionnel) cadre de debug pour voir le bloc */
.fe-upsell.fe-debug{ outline:1px dashed #c9d3c5; outline-offset:2px; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-66abf4d *//* ===== Style onglets façon maquette (ligne grise + soulignement vert) ===== */
/* Conteneur (cc-tabs OU fe3tabs) */
.cc-tabs,
.fe3tabs-wrapper {
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
}
/* Barre d’onglets */
.cc-tabs__nav,
.fe3tabs-nav {
display: flex;
gap: 40px;
padding: 0;
margin: 0 0 2px;
border-bottom: 1px solid #d9ded6; /* fine ligne grise */
background: #ffffff !important;
}
/* Boutons d’onglet */
.cc-tabs__btn,
.fe3tab-btn {
appearance: none;
background: none !important;
border: 0 !important;
margin: 0;
padding: 14px 0 10px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: #9aa193 !important; /* onglet inactif */
cursor: pointer;
position: relative;
text-transform: none !important; /* garde la casse normale */
}
/* Onglet actif : texte plus foncé */
.cc-tabs__btn[aria-selected="true"],
.fe3tab-btn.active,
.fe3tab-btn[aria-selected="true"] {
color: #4b5e43 !important;
}
/* Soulignement par défaut (transparent) */
.cc-tabs__btn::after,
.fe3tab-btn::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: transparent;
}
/* Soulignement vert sous l’onglet actif */
.cc-tabs__btn[aria-selected="true"]::after,
.fe3tab-btn.active::after,
.fe3tab-btn[aria-selected="true"]::after {
background: #4b5e43;
}
/* Zone de contenu */
.cc-tabs__panels,
.fe3tabs-content {
padding: 18px 0 0;
background: #ffffff !important;
}
/* Panneaux d’onglet */
.cc-tabs__panel,
.fe3tab-content {
display: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.cc-tabs__panel.is-active,
.fe3tab-content.active {
display: block;
opacity: 1;
}
/* Mobile : onglets scrollables si trop larges */
@media (max-width: 640px) {
.cc-tabs__nav,
.fe3tabs-nav {
gap: 24px;
overflow-x: auto;
padding-left: 4px;
}
}
/* Typographie des libellés d’onglets (style FEYI) */
.cc-tabs__btn,
.fe3tab-btn {
font-family: var(--font-maison-neue-bold, "maison-neue", Helvetica, Arial, sans-serif);
font-weight: 700;
font-style: normal;
font-size: 10px;
line-height: 1.6em;
letter-spacing: .03em;
text-align: center;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
}
/* Couleurs : inactif = texte clair, actif = texte/heading */
.cc-tabs__btn,
.fe3tab-btn {
color: var(--text-color-light, #b5bab2) !important;
}
.cc-tabs__btn[aria-selected="true"],
.fe3tab-btn.active,
.fe3tab-btn[aria-selected="true"] {
color: var(--heading-color, #45523e) !important;
}
/* TAILLE des libellés des onglets */
.cc-tabs__btn,
.fe3tab-btn {
font-size: 17px !important; /* change 14px → 13, 15, 16 selon ce que tu veux */
}
/* TYPO des CONTENUS ACF dans les onglets
(texte qui vient des champs Récolte / Calendrier / Guérison)
*/
/* Texte normal */
.cc-tabs__panel,
.cc-tabs__panel p,
.cc-tabs__panel li,
.cc-tabs__panel span,
.fe3tab-content,
.fe3tab-content p,
.fe3tab-content li,
.fe3tab-content span {
font-family: Helvetica, Arial, sans-serif !important;
font-size: 14px !important; /* ⇐ change 14px pour la taille que tu veux */
line-height: 1.6;
font-weight: normal;
}
/* Titres éventuels dans l’éditeur ACF (si tu mets des H2/H3) */
.cc-tabs__panel h2,
.cc-tabs__panel h3,
.fe3tab-content h2,
.fe3tab-content h3 {
font-family: Helvetica, Arial, sans-serif !important;
font-size: 16px; /* ⇐ un peu plus grand que le texte normal */
font-weight: 600;
margin-bottom: 0.6em;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-5fa644b *//* Elementor → Avancé → CSS personnalisé (du widget qui contient le shortcode) */
/* 0) Scope : uniquement la section Comptoir */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir{ --fe-cols: 4; --fe-track-gap: 24px; }
/* 1) Masquer le titre interne (comme hide_title="1") */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-strip__head{ display:none !important; }
/* 2) Grille 4×2 au lieu du carrousel */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-strip__track{
display: grid !important;
grid-template-columns: repeat(var(--fe-cols,4), minmax(0, 1fr)) !important;
gap: var(--fe-track-gap, 24px) !important;
overflow: visible !important;
white-space: normal !important;
scroll-behavior: auto !important;
justify-content: stretch !important;
align-items: start !important;
}
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-arrow,
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-strip__progress{ display:none !important; }
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-strip__track .fe-card{
min-width: 0 !important; width: auto !important; max-width: 100% !important;
}
/* 3) Style “Réserves” pour chaque carte */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card{
position: relative; display:flex !important; flex-direction:column !important;
background: transparent !important; border:0 !important; box-shadow:none !important;
}
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__imgWrap{
position: relative !important; width:100% !important;
aspect-ratio: 4 / 5 !important; overflow:hidden !important; border-radius:16px !important;
background:#f2f2f2 !important; box-shadow:0 10px 26px rgba(0,0,0,.07) !important;
}
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__imgEl{
width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
}
/* Dégradé bas */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__imgWrap::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:26%;
background:linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0));
pointer-events:none;
}
/* 4) Bouton overlay pilule, centré sur l’image */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__ctaWrap{
position:absolute; left:14px; right:14px; bottom:14px; display:flex; justify-content:center; z-index:3;
}
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-btn.fe-btn--overlay{
height:36px; padding:0 18px; border-radius:999px;
background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.08);
font:600 12.5px/1 "Ortica Linear", system-ui; color:#111; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
/* 5) Titres + description (2 lignes) */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__body{ padding:12px 6px 0 !important; margin:0 !important; }
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__title,
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__title a{
font-family:"Ortica Linear", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
font-weight:400 !important; font-size:18px !important; line-height:1.25 !important;
color:#45523e !important; text-decoration:none !important;
}
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__subtitle{
font-family:"Ortica Linear", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
font-weight:400 !important; font-size:13px !important; line-height:1.35 !important; color:#6a6a6a !important;
margin:0 !important; display:-webkit-box !important; -webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important; overflow:hidden !important;
}
/* 6) Responsive */
@media (max-width:1023.98px){
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir{ --fe-cols: 2; }
}
@media (max-width:767.98px){
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir{ --fe-cols: 1; }
}
/* Option A — Elementor > Avancé > CSS personnalisé (du widget qui contient le shortcode) */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card__engagements{ display:none !important; }
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card .engagements,
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card .traceabilites,
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-card [data-engagements]{ display:none !important; }
/* Option B — Global (Apparence > Personnaliser > CSS additionnel) — touche seulement ce bloc */
#fe-comptoir .fe-card__engagements{ display:none !important; }
#fe-comptoir .fe-card .engagements,
#fe-comptoir .fe-card .traceabilites,
#fe-comptoir .fe-card [data-engagements]{ display:none !important; }
/* Elementor → Avancé → CSS personnalisé (du widget qui contient le shortcode) */
/* Coupe la pastille prix (le petit bouton blanc) */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-btn.fe-btn--overlay::after{
content: none !important;
display: none !important;
}
/* Sécurité: si un sous-élément dédié au prix existe */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-btn__price,
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .fe-btn .price-bubble{
display: none !important;
}
/* Évite un second bouton fantôme post-ajout */
.elementor-16836 .elementor-element.elementor-element-5fa644b #fe-comptoir .added_to_cart{
display: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c479dc7 *//* ===================== MODE A — FOND FULL WIDTH BLANC, CONTENU BOXÉ ===================== */
/* Applique la classe "recipes-wide" sur la section */
.recipes-wide{ position: relative; z-index: 0; }
.recipes-wide::before{
content:""; position:absolute; inset:0;
left:50%; width:100vw; transform:translateX(-50%);
background:#ffffff; /* fond blanc */
z-index:-1;
}
/* (Option) traits très subtils pour séparer visuellement la section du reste */
.recipes-wide::after{
content:""; position:absolute; left:50%; width:100vw; transform:translateX(-50%);
top:-1px; height:1px; background:rgba(0,0,0,.05);
box-shadow: 0 calc(100% - 1px) 0 0 rgba(0,0,0,.05); /* ligne en bas */
}
/* conteneur interne large mais centré */
.recipes-wide .elementor-container,
.recipes-wide .e-con{
max-width: clamp(1100px, 92vw, 1440px);
margin-inline: auto;
padding-inline: clamp(16px, 3vw, 40px);
}
/* ===================== MODE B — CONTENU FULL WIDTH (BORD À BORD, BLANC) ===================== */
/* Applique la classe "recipes-wide-content" sur la section */
.recipes-wide-content{
width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
background:#ffffff; /* fond blanc */
--pad-x: clamp(16px, 4vw, 40px);
padding-left:var(--pad-x); padding-right:var(--pad-x);
}
.recipes-wide-content .elementor-container,
.recipes-wide-content .e-con,
.recipes-wide-content [class*="container"],
.recipes-wide-content [class*="wrap"],
.recipes-wide-content [class*="inner"]{
max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important;
}
.recipes-wide-content [style*="max-width"]{ max-width:none !important; }
.recipes-wide-content, .recipes-wide-content *{ overflow:visible !important; }
/* ===================== Grille + cartes (commune aux 2 modes, adapte si besoin) ===================== */
:where(.recipes-wide, .recipes-wide-content)
:is(.wp-block-post-template,.recipes-grid,.posts-grid,.cards,.grid,.feyi-recipes-grid){
display:grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
gap: clamp(16px,2vw,28px);
width:100%;
}
:where(.recipes-wide, .recipes-wide-content) img{
display:block; width:100%; height:auto; border-radius:18px;
}
:where(.recipes-wide, .recipes-wide-content) article,
:where(.recipes-wide, .recipes-wide-content) .card{
background:#fff; border:1px solid #eee; border-radius:18px;
box-shadow:0 1px 2px rgba(0,0,0,.03), 0 8px 20px rgba(0,0,0,.04);
}
/* ===== Elementor: CSS PERSONNALISÉ de ta SECTION qui contient le shortcode ===== */
/* 1) Couleurs + typos DU BLOC (extraites de ton "CSS additionnel") */
.elementor-16836 .elementor-element.elementor-element-c479dc7{ --fe-green:#1d310f; }
.elementor-16836 .elementor-element.elementor-element-c479dc7 h2,
.elementor-16836 .elementor-element.elementor-element-c479dc7 h3,
.elementor-16836 .elementor-element.elementor-element-c479dc7 h2 a,
.elementor-16836 .elementor-element.elementor-element-c479dc7 h3 a{
font-family:"Ortica Linear","Ortica Light",serif !important;
font-weight:300 !important;
color:var(--fe-green) !important;
text-decoration:none !important;
border-bottom:0 !important;
}
.elementor-16836 .elementor-element.elementor-element-c479dc7 small,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .byline,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .entry-meta,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .post-meta,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .author,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .vcard{
font-family:"Ortica Linear","Ortica Light",system-ui !important;
font-weight:300 !important;
color:var(--fe-green) !important;
text-decoration:none !important;
opacity:1 !important;
}
.elementor-16836 .elementor-element.elementor-element-c479dc7 small a,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .byline a,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .entry-meta a,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .post-meta a,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .author a,
.elementor-16836 .elementor-element.elementor-element-c479dc7 .vcard a{
color:var(--fe-green) !important;
text-decoration:none !important;
border-bottom:0 !important;
}
/* Tous les liens du bloc */
.elementor-16836 .elementor-element.elementor-element-c479dc7 a,
.elementor-16836 .elementor-element.elementor-element-c479dc7 a:visited,
.elementor-16836 .elementor-element.elementor-element-c479dc7 a:active{
color:var(--fe-green) !important;
text-decoration:none !important;
border-bottom:0 !important;
}
.elementor-16836 .elementor-element.elementor-element-c479dc7 a:hover{ color:var(--fe-green) !important; opacity:.9; }
/* (optionnel) titre interne du bloc si présent */
.elementor-16836 .elementor-element.elementor-element-c479dc7 .recipes__title{
font-family:"Ortica Linear","Ortica Light",serif !important;
color:var(--fe-green) !important;
}
/* 2) Scroll horizontal + barre visible (NE TOUCHE PAS aux cartes) */
/* Dans Elementor, le rendu du shortcode est dans .elementor-widget-shortcode > .elementor-widget-container */
.elementor-16836 .elementor-element.elementor-element-c479dc7{
position: relative;
padding-inline: clamp(16px,4vw,40px);
padding-bottom: 10px; /* place pour la barre */
}
/* Le conteneur qui SCROLLE = le container du widget shortcode */
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* Barre de défilement visible (Chrome/Safari/Firefox) */
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar{ height:6px; }
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius:4px; }
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.28); border-radius:4px; }
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container{ scrollbar-color: rgba(0,0,0,.28) rgba(0,0,0,.06); scrollbar-width: thin; }
/* 3) Petites flèches latérales (si tu ajoutes deux widgets Bouton/HTML dans la section) */
.elementor-16836 .elementor-element.elementor-element-c479dc7 .rb-arrow{
position:absolute; top:50%; transform:translateY(-50%);
width:34px; height:34px; display:grid; place-items:center;
background:#fff; border:1px solid rgba(0,0,0,.10); border-radius:999px;
box-shadow:0 4px 18px rgba(0,0,0,.08);
color:#1a1a1a; text-decoration:none; z-index:2; opacity:.9;
}
.elementor-16836 .elementor-element.elementor-element-c479dc7 .rb-prev{ left: calc(clamp(16px,4vw,40px) - 6px); }
.elementor-16836 .elementor-element.elementor-element-c479dc7 .rb-next{ right: calc(clamp(16px,4vw,40px) - 6px); }
@media (max-width:480px){
.elementor-16836 .elementor-element.elementor-element-c479dc7 .rb-arrow{ width:30px; height:30px; }
}
/* 4) (Secours) Si aucune barre n’apparaît alors que tu as beaucoup de cartes,
c’est que le wrapper interne force la largeur. Dé-commente au besoin :
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container > *{
display:inline-flex; gap:clamp(16px,2vw,28px); inline-size:max-content;
}
*/
/* ===== Barre de défilement "pilule" (style photo 3) ===== */
/* Elementor (scroller = container du widget shortcode) */
.recipes-block .elementor-widget-shortcode > .elementor-widget-container{
/* rien d’autre ne change */
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scrollbar-gutter: stable; /* évite les sauts (Chrome/Edge) */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #bdbdbd #e9e9e9; /* Firefox: thumb / track */
}
/* WebKit (Chrome/Safari/Edge) */
.recipes-block .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar{
height: 8px; /* épaisseur fine */
}
.recipes-block .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar-track{
background: #e9e9e9; /* rail gris clair */
border-radius: 999px; /* extrémités arrondies */
}
.recipes-block .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar-thumb{
background: #bdbdbd; /* thumb gris moyen */
border-radius: 999px;
border: 2px solid #e9e9e9; /* effet "pilule" propre */
}
.recipes-block .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar-thumb:hover{
background: #a9a9a9; /* léger hover */
}
/* Si tu stylises la section via "CSS personnalisé" (Elementor Pro), tu peux utiliser `.elementor-16836 .elementor-element.elementor-element-c479dc7` :
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container{ scrollbar-width: thin; scrollbar-color:#bdbdbd #e9e9e9; }
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar{ height:8px; }
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar-track{ background:#e9e9e9; border-radius:999px; }
.elementor-16836 .elementor-element.elementor-element-c479dc7 .elementor-widget-shortcode > .elementor-widget-container::-webkit-scrollbar-thumb{ background:#bdbdbd; border-radius:999px; border:2px solid #e9e9e9; }
*/
/* Fond du footer en plein écran, contenu inchangé */
body.elementor-page #colophon,
body.elementor-template-full-width #colophon{ position: relative; z-index: 0; }
body.elementor-page #colophon::before,
body.elementor-template-full-width #colophon::before{
content: "";
position: absolute;
inset: 0;
left: 50%;
width: 100vw; /* fond bord à bord */
transform: translateX(-50%);
background: #1e3118; /* remplace par ton vert exact */
z-index: -1; /* passe derrière le contenu */
}
/* Garde ton contenu centré comme d’habitude */
#colophon .container,
#colophon .wrap,
#colophon .footer-inner{
max-width: clamp(1100px, 92vw, 1440px);
margin-inline: auto;
padding-inline: clamp(16px, 3vw, 40px);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e776c84 *//* ===== CTA "Catégories associées à la boutique" ===== */
.cc-cat-cta {
padding: 80px 20px;
background: #f3f4ed; /* fond très clair façon Flamingo Estate */
text-align: center;
margin-top: 60px;
}
.cc-cat-cta__title {
font-family: var(--heading-font-family, "Exposure VAR", serif);
font-weight: var(--heading-font-weight, 400);
font-size: 24px;
line-height: 1.4;
color: var(--heading-color, #45523e);
margin: 0 0 28px;
}
.cc-cat-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
padding: 10px 30px;
border-radius: 999px; /* bouton ovale */
border: 1px solid #45523e;
font-family: var(--text-font-family, "maison-neue", Helvetica, Arial, sans-serif);
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
color: #45523e;
background: transparent;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.cc-cat-cta__btn:hover {
background: #45523e;
color: #ffffff;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-a8572d9 *//* ====== FEYI — Style "Flamingo-like" pour la galerie mobile ====== */
:root{
--fe-bg: #EEF2E9; /* fond carte */
--fe-card-radius: 26px; /* arrondi carte */
--fe-img-radius: 18px; /* arrondi image */
--fe-dot-track: #E7EBE1; /* fond capsule des dots */
--fe-dot: #C4C9BD; /* points inactifs */
--fe-dot-active: #7D8173; /* point actif (si tu veux) */
}
/* Carte / rail */
.fe-mobile-gallery{ margin:20px auto 10px; max-width: 760px; padding: 0 16px; }
.fe-rail{
background: var(--fe-bg);
border-radius: var(--fe-card-radius);
box-shadow: 0 10px 28px rgba(0,0,0,.06);
padding: 22px 0;
position: relative;
overflow: hidden;
}
/* Effet "bords fondus" aux extrémités comme chez Flamingo */
.fe-rail::before,
.fe-rail::after{
content:"";
position:absolute; top:0; bottom:0; width:34px; pointer-events:none;
z-index:2;
}
.fe-rail::before{ left:0; background:linear-gradient(90deg, var(--fe-bg) 0%, rgba(239,243,233,0) 100%); }
.fe-rail::after { right:0; background:linear-gradient(270deg, var(--fe-bg) 0%, rgba(239,243,233,0) 100%); }
/* Piste — scroll horizontal + peek */
.fe-track{
display:flex; gap:16px; overflow-x:auto; padding:0 34px;
scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.fe-track::-webkit-scrollbar{ display:none; }
/* Slide + marge blanche autour de l’image (look magazine) */
.fe-slide{
scroll-snap-align:center;
flex: 0 0 86%; /* peek ~14% */
max-width:86%;
margin:0;
padding: 18px; /* marge blanche */
}
.fe-media{
width:100%; height: clamp(360px, 62vh, 520px);
object-fit: contain; display:block;
background:#fff;
border-radius: var(--fe-img-radius);
/* ombre douce type Flamingo */
filter: drop-shadow(0 16px 28px rgba(0,0,0,.08)) drop-shadow(0 3px 8px rgba(0,0,0,.05));
}
/* Cacher les grosses icônes loupe (Flamingo ne les affiche pas en fixe) */
.fe-zoom-btn{ display:none !important; }
/* Dots — piste en forme de capsule avec petits points */
.fe-dots{
display:flex; justify-content:center; gap:10px; padding:18px 0 8px;
}
.fe-dots{ /* capsule */
background: var(--fe-dot-track);
border-radius: 999px;
padding: 8px 14px;
width: fit-content;
margin: 12px auto 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.03);
}
.fe-dot{
width: 6px; height: 6px; border-radius:999px; background: var(--fe-dot); display:inline-block; opacity:.95;
}
.fe-dot:hover{ opacity:1; }
/* Si tu veux un "actif" basique: marque le 1er par défaut (sans JS) */
.fe-dot:first-child{ background: var(--fe-dot-active); }
/* Responsive petits téléphones */
@media (max-width: 360px){
.fe-slide{ flex-basis: 90%; max-width:90%; padding: 14px; }
.fe-media{ height: clamp(320px, 58vh, 480px); }
}
/* Masquage de ta galerie desktop sous 1024px (garde ton slider desktop au-dessus) */
@media (max-width:1024px){
.product-media .slick-slider,
.product-gallery,
.woocommerce-product-gallery,
.product__media-wrapper{ display:none !important; }
.fe-mobile-gallery{ display:block; }
}
@media (min-width:1025px){ .fe-mobile-gallery{ display:none; } }
/* === FEYI — Image full-bleed dans chaque diapo (edge-to-edge) === */
/* Carte/diapo (une slide = une carte) */
.fe-slide{
/* diapo = carte visible */
flex: 0 0 86%;
max-width: 86%;
margin: 22px 0;
padding: 0 !important; /* plus de marge autour de l'image */
height: clamp(360px, 62vh, 520px); /* hauteur uniforme des diapos */
border-radius: 26px; /* coins arrondis de la carte */
overflow: hidden; /* masque les bords de l'image */
background: #EFF2E9; /* optionnel, la photo recouvre tout */
box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
/* L'image couvre 100% de la carte */
.fe-media{
width: 100%;
height: 100%;
object-fit: cover; /* remplit la carte (recadrage élégant) */
border-radius: 0 !important; /* l'arrondi est porté par la carte */
background: none !important;
display: block;
filter: none !important; /* l’ombre est sur la carte */
}
/* Piste (peek + défilement fluide) */
.fe-track{
display: flex;
gap: 16px;
overflow-x: auto;
padding: 0 20px;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.fe-track::-webkit-scrollbar{ display: none; }
/* Dots capsule (si tu les utilises) */
.fe-dots{
display:flex; justify-content:center; gap:10px;
background:#E9EDE3; border-radius:999px;
padding:8px 14px; width:fit-content; margin:10px auto 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.03);
}
.fe-dot{ width:6px; height:6px; border-radius:999px; background:#C4C9BD; display:inline-block; opacity:.95; }
.fe-dot:first-child{ background:#7D8173; }
/* Petits écrans */
@media (max-width:360px){
.fe-slide{ flex-basis:90%; max-width:90%; height: clamp(320px, 58vh, 480px); }
}
/* ===== Patch "chaque photo = une diapo" (Flamingo-like) ===== */
/* 1) Le rail ne ressemble plus à une carte : fond transparent, pas d'ombre, pas de fade */
.fe-rail{
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
overflow: visible !important;
position: relative;
}
.fe-rail::before,
.fe-rail::after{ display: none !important; }
/* 2) La piste garde le scroll horizontal + peek */
.fe-track{
display:flex; gap:16px;
overflow-x:auto;
padding: 0 20px; /* léger padding latéral */
scroll-snap-type:x mandatory;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.fe-track::-webkit-scrollbar{ display:none; }
/* 3) Chaque SLIDE devient une carte indépendante (comme Flamingo) */
:root{
--fe-card-bg: #EFF2E9; /* fond très clair (ajuste avec ta charte) */
--fe-card-radius: 26px; /* gros arrondi */
--fe-img-radius: 18px;
}
.fe-slide{
scroll-snap-align:center;
flex: 0 0 86%; /* peek ~14% */
max-width: 86%;
margin: 22px 0; /* respiration verticale */
padding: 18px; /* marge blanche autour de l'image */
background: var(--fe-card-bg); /* chaque diapo = carte */
border-radius: var(--fe-card-radius);
box-shadow: 0 10px 26px rgba(0,0,0,.06); /* ombre douce */
}
/* Media à l'intérieur de la carte */
.fe-media{
width: 100%;
height: clamp(360px, 62vh, 520px);
object-fit: contain;
background: #fff;
border-radius: var(--fe-img-radius);
display: block;
filter: none; /* l’ombre est portée par la carte */
}
/* 4) Capsule de dots (comme Flamingo) */
.fe-dots{
display:flex; justify-content:center; gap:10px;
background: #E9EDE3;
border-radius: 999px;
padding: 8px 14px;
width: fit-content;
margin: 8px auto 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.03);
}
.fe-dot{
width: 6px; height: 6px; border-radius: 999px;
background: #C4C9BD; display:inline-block; opacity: .95;
}
.fe-dot:first-child{ background: #7D8173; } /* "actif" par défaut sans JS */
/* 5) Option: cacher l’icône loupe (Flamingo ne l’affiche pas en fixe) */
.fe-zoom-btn{ display: none !important; }
/* 6) Responsive petits écrans */
@media (max-width: 360px){
.fe-slide{ flex-basis: 90%; max-width: 90%; padding: 14px; }
.fe-media{ height: clamp(320px, 58vh, 480px); }
}
/* 7) Rappels de visibilité (mobile/tablette seulement si tu veux) */
@media (max-width: 1024px){
.product-media .slick-slider,
.product-gallery,
.woocommerce-product-gallery,
.product__media-wrapper{ display: none !important; }
.fe-mobile-gallery{ display: block; }
}
@media (min-width: 1025px){ .fe-mobile-gallery{ display: none; } }
/* ================== OPTION A (recommandé) ================== */
/* Image couvre la carte + hauteur réduite (~2 cm = 80px) */
:root{
--fe-radius-card: 26px;
--fe-h-min: 280px; /* avant ~360px */
--fe-h-pref: 62vh; /* hauteur préférée */
--fe-h-max: 520px; /* avant ~520px */
--fe-h-offset: 80px; /* ≈ 2 cm sur mobile */
}
.fe-slide{
flex: 0 0 86%;
max-width: 86%;
margin: 22px 0;
padding: 0 !important;
height: clamp(var(--fe-h-min),
calc(var(--fe-h-pref) - var(--fe-h-offset)),
calc(var(--fe-h-max) - var(--fe-h-offset)));
border-radius: var(--fe-radius-card);
overflow: hidden;
background: #EFF2E9;
box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.fe-media{
width: 100%;
height: 100%;
object-fit: cover; /* remplit la carte, peut recadrer un peu */
display: block;
border-radius: 0 !important;
background: none !important;
filter: none !important;
}
/* Ajuste un peu sur très petits écrans */
@media (max-width: 360px){
:root{ --fe-h-min: 240px; --fe-h-pref: 56vh; --fe-h-max: 460px; }
}
/* ================== OPTION B (alternative) ================== */
/* La carte prend exactement la hauteur naturelle de l’image (aucun recadrage) */
/* Active cette option si tu préfères, en collant CE bloc APRÈS l’option A. */
.fe-slide.fe-auto-height,
.fe-auto-height .fe-slide{
height: auto !important; /* carte = hauteur de l’image */
}
.fe-slide.fe-auto-height .fe-media,
.fe-auto-height .fe-slide .fe-media{
width: 100%;
height: auto !important; /* pas de recadrage */
object-fit: contain !important;
}
/* ===== Rappels piste/dots si besoin (garde ton peek et les arrondis) ===== */
.fe-track{
display:flex; gap:16px; overflow-x:auto; padding:0 20px;
scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.fe-track::-webkit-scrollbar{ display:none; }
.fe-dots{
display:flex; justify-content:center; gap:10px;
background:#E9EDE3; border-radius:999px; padding:8px 14px; width:fit-content;
margin:10px auto 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.03);
}
.fe-dot{ width:6px; height:6px; border-radius:999px; background:#C4C9BD; display:inline-block; opacity:.95; }
.fe-dot:first-child{ background:#7D8173; }
/* === IMAGE FULL BLEED (couvre entièrement la carte) — COLLER EN BAS DE TON CSS === */
/* Hauteur confortable (tu peux ajuster -80px → -60px/-100px) */
:root{
--fe-h-min: 260px; /* avant 280–360px */
--fe-h-pref: 60vh; /* préférée */
--fe-h-max: 460px; /* avant 520px */
--fe-h-offset: 80px; /* ≈ 2 cm */
}
/* La diapo = carte contenant, sans padding, coins arrondis */
.fe-slide{
flex: 0 0 86%;
max-width: 86%;
margin: 20px 0;
padding: 0 !important; /* zéro padding */
height: clamp(var(--fe-h-min),
calc(var(--fe-h-pref) - var(--fe-h-offset)),
var(--fe-h-max));
position: relative; /* référentiel pour l’image */
overflow: hidden; /* masque les débords */
border-radius: 26px;
background: #EFF2E9; /* optionnel, sera couvert par l'image */
box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
/* L’IMAGE REMPLIT 100% DE LA CARTE */
.fe-slide .fe-media{
position: absolute !important;
inset: 0 !important; /* top/right/bottom/left: 0 */
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* remplit, recadre proprement */
display: block !important;
border-radius: 0 !important; /* l’arrondi est porté par la carte */
background: none !important;
filter: none !important;
}
/* Piste / peek inchangé (glisse horizontale) */
.fe-track{
display:flex; gap:16px; overflow-x:auto; padding:0 20px;
scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.fe-track::-webkit-scrollbar{ display:none; }
/* (facultatif) si tu préfères que la carte prenne la HAUTEUR NATURELLE de l’image (sans recadrage) :
ajoute la classe 'fe-auto-height' au widget => activer ce bloc */
.fe-auto-height .fe-slide{ height:auto !important; }
.fe-auto-height .fe-slide .fe-media{
position: static !important; width:100% !important; height:auto !important; object-fit: contain !important;
}
/* Bloc galerie mobile : enlever les espaces verticals sur mobile */
@media (max-width: 767px) {
/* La section/colonne où tu as mis la classe "fe-mobile-gallery-block" */
.fe-mobile-gallery-block {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Optionnel : resserrer l'espace juste sous la galerie si besoin */
.fe-mobile-gallery-block img,
.fe-mobile-gallery-block .swiper,
.fe-mobile-gallery-block .slick-slider {
margin-bottom: 8px;
}
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-5e01fc3 *//* Badges côte à côte, bien serrés */
.fe-badges{
display: inline-flex !important; /* se cale au contenu, pas toute la ligne */
justify-content: flex-start !important;
align-items: center;
flex-wrap: nowrap; /* évite le retour à la ligne */
gap: 8px; /* espace entre badges */
width: auto !important;
max-width: 100%;
margin: 4px 0 8px;
}
/* Taille des pastilles (optionnel, un peu plus compact) */
.fe-badge{
padding: 4px 10px;
font-size: 12px;
border-radius: 999px;
}
.fe-badges:not(:where(.ignore)){
/* remet les règles même si parent a space-between */
margin-left: 0;
}
.fe-badges, .fe-badges:where(*) { justify-content:flex-start !important; }
/* ===== Réduire l'espace au-dessus des badges + coller au H1 ===== */
/* 1) Le widget Shortcode (où tu mets [fe_card_badges]) : zéro marge/padding */
.single-product .elementor .elementor-widget-shortcode,
.single-product .elementor .elementor-widget-shortcode .elementor-widget-container{
margin: 0 !important;
padding: 0 !important;
}
/* 2) Les badges eux-mêmes : pas de marge haute, petit espace sous-jacent */
.single-product .fe-badges{
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 0 0 8px !important; /* << enlève l'espace en haut */
}
/* 3) Le titre juste après (Heading Elementor ou titre Woo) : tiny top margin */
.single-product .elementor .elementor-heading-title,
.single-product h1.product_title{
margin-top: 6px !important;
}
/* 4) Si une colonne/section ajoute du padding top, on le neutralise proprement */
.single-product .elementor-section .elementor-container,
.single-product .elementor-column .elementor-widget-wrap{
padding-top: 0 !important;
}
/* 5) Si tu as un fil d’Ariane au-dessus, réduit sa marge basse */
.single-product .woocommerce-breadcrumb,
.single-product .product-meta--breadcrumbs{
margin-bottom: 6px !important;
}
/* ===== Badges collés au H1, sans blanc au-dessus ===== */
/* 1) Le widget Shortcode qui contient les badges */
.single-product .fe-badges-w,
.single-product .fe-badges-w .elementor-widget-container{
margin:0 !important;
padding:0 !important;
}
/* 2) Annule le "margin-bottom" par défaut des widgets Elementor juste avant le H1 */
.single-product .fe-badges-w.elementor-widget{
--e-widget-margin-bottom: 0px; /* Elementor v3 */
margin-bottom:0 !important;
}
/* 3) Supprime les gaps verticaux de la colonne (source classique du grand blanc) */
.single-product .elementor .elementor-column .elementor-widget-wrap{
row-gap: 0 !important;
gap: 0 !important;
padding-top: 0 !important;
}
/* 4) Pas d'espace en haut des badges, petit espace dessous seulement */
.single-product .fe-badges{
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 0 0 8px !important;
}
/* 5) Titre: marge haute très faible */
.single-product h1.product_title,
.single-product .elementor .elementor-heading-title{
margin-top: 6px !important;
}
/* 6) Si ton template garde le conteneur Woo (summary) avec du padding/marge */
.single-product div.product .summary{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 7) Si un fil d'ariane est juste au-dessus, réduis sa marge basse */
.single-product .woocommerce-breadcrumb,
.single-product .product-meta--breadcrumbs{
margin-bottom: 6px !important;
}
/* 8) En dernier recours, tire légèrement les badges vers le haut (sécurisé) */
.single-product .fe-badges{ position: relative; top: -4px; } /* ajuste -4 à -8 si besoin */
/* Badges blancs, contour vert, texte vert */
.fe-badge{
background:#ffffff !important;
color:#45523e !important; /* vert texte Flamingo-like */
border:1px solid #D6E7D2 !important; /* vert pâle contour */
box-shadow:none !important; /* retire le halo vert */
}
/* Variante pour garder un léger relief (optionnel) */
.fe-badge{ box-shadow: 0 1px 4px rgba(69,82,62,0.08); }
/* Si le badge gauche avait un style différent, on l’aligne aussi */
.fe-badge--l{
background:#ffffff !important;
color:#45523e !important;
border-color:#D6E7D2 !important;
}
/* ===== FE Badges — alignement horizontal strict + bordures fines ===== */
/* 0) Si Elementor a mis le shortcode dans un , on neutralise */
.elementor .elementor-widget-shortcode p:has(.fe-badges){
margin:0 !important; padding:0 !important; display:block !important;
}
.elementor .elementor-widget-shortcode p:has(.fe-badges) br{ display:none !important; }
/* 1) Le wrapper badges : ligne unique, pas de wrap */
body.single-product .fe-badges{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
white-space:nowrap !important;
width:auto !important;
max-width:100% !important;
margin:0 0 8px !important;
padding:0 !important;
}
/* 2) Les enfants doivent être inline-flex (jamais block), et on tue les autour du shortcode → on le neutralise */
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:has(.fe-card-badges),
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:has(.fe-badges){
margin:0 !important; padding:0 !important;
}
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:empty{ display:none !important; }
/* 1) Wrapper des badges : variables d’espacement */
.fe-card-badges, .fe-badges{
/* curseurs d'espace (modifie si besoin) */
--badges-mt: 0px; /* marge au-dessus */
--badges-mb: 0px; /* marge au-dessous */
--badges-py: 0px; /* padding vertical interne */
--badges-px: 0px; /* padding horizontal interne */
--badges-gap: 6px; /* espace entre badges */
margin-top: var(--badges-mt) !important;
margin-bottom: var(--badges-mb) !important;
padding: var(--badges-py) var(--badges-px) !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
display:flex; flex-wrap:wrap; align-items:center; gap:var(--badges-gap);
}
/* 2) Badge générique (si ton HTML n’a pas déjà son style) */
.fe-card-badges > *,.fe-badges > *{
display:inline-flex; align-items:center; gap:6px;
height:28px; padding:0 10px; border-radius:999px;
font:600 12px/1 "maison-neue", Helvetica, Arial, sans-serif;
border:1px solid #d6e0ce; background:#f6f9f3; color:#2c3a31;
text-decoration:none; white-space:nowrap;
}
/* 3) Variante compacte : ajoute .fe-card-badges--tight au wrapper */
.fe-card-badges.fe-card-badges--tight,
.fe-badges.fe-card-badges--tight{
--badges-mt: 0px;
--badges-mb: 0px;
--badges-py: 0px;
--badges-px: 0px;
--badges-gap: 4px;
}
/* 4) Utilitaires (au cas par cas) */
.fe-space-none{ margin:0 !important; }
.fe-space-tight{ margin:8px 0 !important; }
.fe-space-normal{ margin:16px 0 !important; }
.fe-space-loose{ margin:32px 0 !important; }
/* 5) Debug (temporaire) : outline pour voir les limites du bloc badges */
.fe-card-badges.fe-debug, .fe-badges.fe-debug{
outline:1px dashed #e26a00 !important;
}
/* MOBILE : coller le bloc [fe_card_badges] au titre produit */
@media (max-width: 767px) {
/* 1. Réduire la marge sous le titre WooCommerce */
.single-product h1.product_title,
.single-product .product_title {
margin-bottom: 20px !important; /* tu peux descendre à 0 si tu veux que ce soit ultra collé */
}
/* 2. Enlever tout espace AU-DESSUS du widget qui a la classe fe-badges-w */
.elementor-widget.fe-badges-w,
.elementor-widget.fe-badges-w .elementor-widget-container {
margin-top: 0 !important;
padding-top: 0 !important;
}
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-7147395 *//* === ZIP panel : 1 seule ligne, version flex robuste === */
.fe-zip-panel{ margin:4px 0 10px; padding:0; background:transparent; border:0; }
.fe-zip-row{
display:flex !important;
align-items:center;
gap:10px;
flex-wrap:nowrap; /* empêche le retour à la ligne */
min-height:38px;
}
/* Icône + libellé compacts, jamais coupés */
.fe-zip-icon{ width:18px; height:18px; flex:0 0 18px; }
.fe-zip-ask{
font:600 14px/1.25 "maison-neue",Helvetica,Arial,sans-serif;
color:#45523e;
white-space:nowrap; /* reste sur la ligne */
margin-right:2px;
}
/* L’input prend tout l’espace restant */
.fe-zip-input{ flex:1 1 260px; min-width:180px; }
.fe-zip-input input{
width:100%;
height:36px;
border:1px solid #45523e;
border-radius:10px;
padding:0 12px;
font:600 13px/1 "maison-neue",Helvetica,Arial,sans-serif;
color:#45523e; background:#fff;
}
/* Bouton compact à droite ; cache tout texte résiduel */
.fe-zip-submit{
flex:0 0 38px; width:38px; height:38px;
border-radius:10px;
border:1px solid #45523e; background:#45523e;
display:inline-flex; align-items:center; justify-content:center;
padding:0; cursor:pointer; font-size:0 !important; color:transparent !important;
}
.fe-zip-submit::before{
content:""; width:10px; height:10px;
border-right:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(-45deg);
}
/* Message sous la ligne uniquement */
.fe-zip-msg{ width:100%; margin-top:8px; display:inline-flex; }
/* Mobile étroit : autoriser le wrap élégant (libellé au-dessus) */
@media (max-width: 520px){
.fe-zip-row{ flex-wrap:wrap; }
.fe-zip-ask{ flex:0 0 100%; margin:0 0 6px 0; }
.fe-zip-input{ flex:1 1 100%; }
}
/* ——— ZIP panel : mettre l'INPUT juste après la question (une seule ligne) ——— */
.fe-zip-row{
display:flex !important;
align-items:center;
gap:10px;
flex-wrap:nowrap !important; /* pas de retour à la ligne */
}
/* Le libellé peut rétrécir pour laisser passer l'input */
.fe-zip-ask{
flex: 0 1 420px; /* largeur cible, mais rétrécissable */
min-width: 0; /* IMPORTANT : autorise le shrink en flex */
white-space: normal; /* on autorise la casse interne si besoin */
margin-right: 2px;
}
/* L'input prend tout l'espace restant, mais reste sur la ligne */
.fe-zip-input{
flex: 1 1 260px; /* s’étire, mais reste sur la ligne */
min-width: 0; /* IMPORTANT en flex */
}
.fe-zip-input input{
width: 100%;
height: 36px;
}
/* Le bouton garde sa taille fixe et reste à droite */
.fe-zip-submit{
flex: 0 0 38px;
width: 38px; height: 38px;
border-radius: 10px;
}
/* (Optionnel) Si tu veux que le libellé ne prenne jamais plus de 45% de la ligne */
@media (min-width: 800px){
.fe-zip-ask{ max-width: 45%; }
}
/* ZIP panel : fond blanc propre */
.fe-zip-panel{
background:#fff !important; /* blanc pur */
border:0 !important; /* supprime le liseré vert pâle éventuel */
box-shadow:none !important; /* au cas où le thème ajoute une ombre */
padding:0 !important;
}
/* garde les pastilles message telles quelles (vert pâle) */
/* === FEYI — Icône géolocalisation “luxe” (SVG + halo doux) === */
.fe-zip-icon{
width:18px; height:18px; flex:0 0 18px;
position:relative; display:inline-block;
overflow:hidden; text-indent:-9999px; font-size:0 !important;
background:transparent !important; color:transparent !important;
}
/* Halo subtil (luxe) */
.fe-zip-icon::before{
content:"";
position:absolute; inset:-3px;
border-radius:50%;
background: radial-gradient(closest-side, rgba(44,94,48,0.14), rgba(44,94,48,0) 70%);
pointer-events:none;
}
/* Pin outline fin + trou central (SVG) */
.fe-zip-icon::after{
content:"";
position:absolute; inset:0;
background: center/contain no-repeat
url('data:image/svg+xml;utf8,\
');
}
/* Variante plus petite en mobile */
@media (max-width:480px){
.fe-zip-icon{ width:16px; height:16px; flex-basis:16px; }
.fe-zip-icon::before{ inset:-2px; }
}
/* ——— 0) Retire tout espace autour du widget Shortcode (Elementor) ——— */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* Si tu oublies la classe, auto-détection du panel */
.elementor .elementor-widget-shortcode:has(.fe-panel),
.elementor .elementor-widget-shortcode:has(.fe-delivery-panel){
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* ——— 1) Panel de livraison : base neutre + rythme serré ——— */
.fe-panel, .fe-delivery-panel{
/* variables de confort (tu peux les changer) */
--panel-pad-y: 8px; /* padding vertical interne */
--panel-pad-x: 0px; /* padding horizontal interne */
--panel-gap: 8px; /* espace entre les éléments internes */
margin:0 !important;
padding:var(--panel-pad-y) var(--panel-pad-x) !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* supprime les marges par défaut des titres/paragraphes dans le panel */
.fe-panel :where(h1,h2,h3,h4,h5,h6,p,ul,ol){ margin:0 !important; }
.fe-panel > * + *{ margin-block-start:var(--panel-gap) !important; }
/* compresse les lignes de formulaire courantes (Woo/Elementor) */
.fe-panel .form-row,
.fe-panel .woocommerce form .form-row,
.fe-panel .elementor-field-group{
margin:0 0 6px !important; padding:0 !important;
}
/* messages/infos dans le panel, marge mini */
.fe-panel .woocommerce-message,
.fe-panel .woocommerce-error,
.fe-panel .woocommerce-info{ margin:6px 0 !important; }
/* ——— 2) Variante encore plus compacte (ajoute .fe-panel--tight au shortcode) ——— */
.fe-panel.fe-panel--tight{
--panel-pad-y: 4px;
--panel-pad-x: 0px;
--panel-gap: 4px;
}
/* Debug : encadre le panel lui-même */
.fe-delivery-panel,
.fe-panel { /* selon le markup que tu as */
position: relative !important;
box-shadow: inset 0 0 0 1px #ff3b30 !important; /* contour rouge */
background: rgba(255,59,48,.06) !important; /* voile rouge pâle */
}
/* Si tu ne vois toujours pas le cadre, encadre le widget Elementor qui le contient */
.elementor .elementor-widget-shortcode:has(.fe-delivery-panel),
.elementor .elementor-widget-shortcode:has(.fe-zip-row),
.single-product .elementor .elementor-widget-shortcode:has(.fe-panel){
box-shadow: inset 0 0 0 1px #ff3b30 !important;
}
/* Retire toute marge/padding autour du widget Elementor */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container,
.elementor .elementor-widget-shortcode:has(.fe-delivery-panel),
.elementor .elementor-widget-shortcode:has(.fe-zip-row){
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* Panel ultra-compact (dessus/dessous = 0) */
.fe-delivery-panel,
.fe-panel{
--panel-pad-y: 0px; /* padding vertical interne */
--panel-pad-x: 0px;
--panel-gap: 6px; /* espace interne minimal */
margin:0 !important;
padding:var(--panel-pad-y) var(--panel-pad-x) !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
}
.fe-panel :where(h1,h2,h3,h4,h5,h6,p){ margin:0 !important; }
.fe-panel > * + *{ margin-block-start:var(--panel-gap) !important; }
/* ---- Ligne ZIP vraiment sur une seule ligne, qui s’adapte ---- */
.fe-zip-row{
display:flex !important; align-items:center; gap:8px; flex-wrap:nowrap !important; min-height:34px;
}
/* Le libellé peut rétrécir pour laisser passer l’input */
.fe-zip-ask{
font:600 14px/1.25 "maison-neue", Helvetica, Arial, sans-serif;
color:#45523e;
flex:0 1 420px; /* largeur cible mais "shrinkable" */
min-width:0; /* clé pour autoriser le shrink en flex */
margin-right:2px;
}
/* L’input prend le reste, sans forcer de retour à la ligne */
.fe-zip-input{ flex:1 1 240px; min-width:0; }
.fe-zip-input input{
width:100%;
height:34px; /* un peu plus compact */
border:1px solid #45523e; border-radius:10px;
padding:0 10px; font:600 13px/1 "maison-neue", Helvetica, Arial, sans-serif; color:#45523e; background:#fff;
}
/* Bouton compact (garde la même hauteur que l’input) */
.fe-zip-submit{
flex:0 0 34px; width:34px; height:34px; border-radius:10px;
border:1px solid #45523e; background:#45523e;
display:inline-flex; align-items:center; justify-content:center;
padding:0; cursor:pointer; font-size:0 !important; color:transparent !important;
}
.fe-zip-submit::before{
content:""; width:10px; height:10px;
border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
/* Message sous la ligne (laisse tel quel mais avec marge mini) */
.fe-zip-msg{ width:100%; margin-top:6px; display:inline-flex; }
/* Mobile étroit : on accepte le wrap proprement */
@media (max-width:520px){
.fe-zip-row{ flex-wrap:wrap; }
.fe-zip-ask{ flex:0 0 100%; margin:0 0 6px 0; }
.fe-zip-input{ flex:1 1 100%; }
}
/* 1) Never wrap the question */
.fe-zip-row{ flex-wrap:nowrap !important; }
.fe-zip-ask{
white-space: nowrap !important; /* no line break */
min-width: max-content !important;/* keep full sentence width */
flex: 0 0 auto !important; /* don't let it shrink */
word-break: normal !important;
hyphens: none !important;
}
/* 2) Let the input take the remaining space */
.fe-zip-input{ flex: 1 1 220px !important; min-width: 160px !important; }
/* 3) If some HTML adds autour du shortcode → pas d'espace */
.single-product .elementor .elementor-widget-shortcode > .elementor-widget-container > p:has(.cc-buy){
margin:0 !important; padding:0 !important;
}
.single-product .elementor .elementor-widget-shortcode > .elementor-widget-container > p:empty{
display:none !important;
}
/* ===== CC BUY — COMPACT GLOBAL (réduit clairement l'encombrement) ===== */
/* 1) Coupe l'espace ajouté par Elementor autour du shortcode */
.single-product .elementor .elementor-widget-shortcode:has(.cc-buy),
.single-product .elementor .elementor-widget-shortcode:has(.cc-buy) > .elementor-widget-container{
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* Neutralise aussi les gaps de la colonne/section */
.single-product .elementor-column .elementor-widget-wrap{ gap:0 !important; }
.single-product .elementor .elementor-widget:not(:last-child){ margin-bottom:0 !important; }
/* 2) Bloc cc-buy plus serré */
.single-product .cc-buy{
/* variables de rythme */
--cc-cta-h: 40px; /* 44 → 40 : hauteur qty/CTA */
--cc-gap: 10px; /* 14 → 10 : espace entre qty et CTA */
/* padding interne plus court */
padding:10px 12px !important; /* 16px → 10/12px */
margin:0 !important; /* pas de marge externe */
border-radius:12px; /* léger arrondi seulement */
}
/* 3) Ligne variations : resserre la grille et l’écart vertical */
.single-product .cc-buy table.variations tr{
grid-template-columns:200px 1fr; /* 240 → 200 */
column-gap:10px; /* 12 → 10 */
row-gap:6px; /* 8 → 6 */
padding:2px 0; /* 6px → 2px */
}
.single-product .cc-buy .variations select{
max-width:340px; /* 360 → 340 */
}
/* 4) Ligne d’action : moins d’air au-dessus + gap réduit */
.single-product .cc-buy form.cart{
margin-top:8px !important; /* 12/14 → 8 */
gap:var(--cc-gap) !important; /* 10 par défaut ci-dessus */
}
/* 5) Stepper + bouton adaptés à la nouvelle hauteur */
.single-product .cc-buy .quantity{
height:var(--cc-cta-h) !important;
padding:0 8px !important; /* 10 → 8 */
}
.single-product .cc-buy .quantity .qty{
height:var(--cc-cta-h) !important;
line-height:var(--cc-cta-h) !important;
width:44px !important; /* 48 → 44 */
}
.single-product .cc-buy .single_add_to_cart_button{
height:var(--cc-cta-h) !important;
min-height:var(--cc-cta-h) !important;
padding:0 18px !important; /* 24/22 → 18 */
flex:1 1 280px !important; /* 320 → 280 */
}
/* 6) Option “ULTRA-COMPACT” : ajoute simplement la classe cc-buy--tight au shortcode [cc_buy] */
.single-product .cc-buy.cc-buy--tight{
--cc-cta-h: 36px;
--cc-gap: 8px;
padding:8px 10px !important;
}
.single-product .cc-buy.cc-buy--tight table.variations tr{
grid-template-columns:180px 1fr;
column-gap:8px; row-gap:4px; padding:0;
}
.single-product .cc-buy.cc-buy--tight .variations select{ max-width:320px; }
.single-product .cc-buy.cc-buy--tight form.cart{ margin-top:6px !important; }
.single-product .cc-buy.cc-buy--tight .quantity .qty{ width:40px !important; }
.single-product .cc-buy.cc-buy--tight .single_add_to_cart_button{ padding:0 16px !important; }
.single-product .cc-buy.cc-buy--tight{
--cc-cta-h: 36px; /* 40 → 36 */
--cc-gap: 8px; /* 10 → 8 */
padding:8px 10px !important;
}
.single-product .cc-buy.cc-buy--tight table.variations tr{
grid-template-columns:180px 1fr;
column-gap:8px; row-gap:4px; padding:0;
}
.single-product .cc-buy.cc-buy--tight .variations select{ max-width:320px; }
.single-product .cc-buy.cc-buy--tight form.cart{ margin-top:6px !important; }
.single-product .cc-buy.cc-buy--tight .quantity .qty{ width:40px !important; }
.single-product .cc-buy.cc-buy--tight .single_add_to_cart_button{ padding:0 16px !important; }
/* 1) Pas d’espace autour du widget qui contient .cc-buy */
.elementor .elementor-widget-shortcode:has(.cc-buy),
.elementor .elementor-widget-shortcode:has(.cc-buy) > .elementor-widget-container{
margin:0 !important;
padding:0 !important;
}
/* 2) Pas d’espace à l’intérieur du bloc cc-buy */
.cc-buy{ margin:0 !important; padding-bottom:0 !important; }
/* 3) Pas d’espace sous le formulaire / bouton */
.cc-buy form.cart{ margin:0 !important; }
.cc-buy form.cart + *{ margin-top:0 !important; }
/* 4) WordPress met parfois un autour du shortcode → on annule */
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:has(.cc-buy){
margin:0 !important; padding:0 !important;
}
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:empty{
display:none !important;
}
/* 5) Éléments Woo qui ajoutent un “liseré” d’espace sous le bouton */
.cc-buy .woocommerce-variation,
.cc-buy .woocommerce-variation-description,
.cc-buy .woocommerce-variation-availability,
.cc-buy .woocommerce-message,
.cc-buy .woocommerce-info,
.cc-buy .woocommerce-error{
margin:0 !important;
padding-bottom:0 !important;
}
/* (option) Si tu veux un bloc ultra serré : active cette classe sur le shortcode */
.cc-buy.cc-tight{ margin-bottom:0 !important; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-67305c6 *//* ===== FE Upsell — RESET (aucun cadre par défaut) ===== */
.fe-upsell{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
.elementor .fe-no-frame,
.elementor .fe-no-frame > .elementor-widget-container{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
/* ===== Unique variante : VERT PÂLE (codes fixes) ===== */
.fe-upsell.fe-green{
background:#EFF2E9; /* vert pâle */
border:1px solid #D6E0CE; /* bordure claire */
border-radius:12px;
padding:16px;
color:#45523E; /* texte */
box-shadow:0 1px 0 rgba(0,0,0,.03);
}
/* Contenu */
.fe-upsell.fe-green .fe-card{ display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center; }
.fe-upsell.fe-green .fe-thumb img{ width:56px; height:56px; object-fit:cover; border-radius:8px; display:block; }
.fe-upsell.fe-green .fe-title{ color:#45523E; font-weight:700; text-decoration:underline; margin:0 0 4px; }
.fe-upsell.fe-green .fe-excerpt{
font-size:14px; line-height:1.6; color:#45523E; margin:0 0 12px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* CTA pilule + prix à droite */
.fe-upsell.fe-green .fe-cta{
border:1px solid #2C5E30; /* bordure bouton */
border-radius:9999px; height:40px;
display:flex; align-items:center; justify-content:space-between;
padding:0 14px; gap:16px; background:#FCFBF6; /* léger contraste */
}
.fe-upsell.fe-green .fe-cta .button.fe-add{
background:transparent; border:0; padding:0;
color:#45523E;
font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px; line-height:1;
}
.fe-upsell.fe-green .fe-cta .button.fe-add:hover{ opacity:.85; }
.fe-upsell.fe-green .fe-cta .fe-price{ margin-left:14px; font-weight:800; white-space:nowrap; color:#45523E; }
/* Woo AJAX: masque "Voir le panier" */
.fe-upsell .added_to_cart{ display:none!important; }
/* Responsive */
@media (max-width:640px){
.fe-upsell.fe-green .fe-card{ grid-template-columns:48px 1fr; gap:10px; }
}
/* ——— ANTI-BEIGE GLOBAL (container Elementor du widget Shortcode) ——— */
.elementor .elementor-widget-shortcode > .elementor-widget-container{
background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important;
}
/* FORCE la carte en vert pâle */
.fe-upsell{ background:transparent !important; border:0 !important; padding:0 !important; }
.fe-upsell.fe-green{
background:#EFF2E9 !important;
border:1px solid #D6E0CE !important;
border-radius:12px !important;
padding:16px !important;
color:#45523E !important;
}
/* 🔧 Le beige venait d'ici: fond crème du CTA. On le met VERT PÂLE aussi. */
.fe-upsell .fe-cta{
background:#EFF2E9 !important; /* était #FCFBF6 (crème/beige) */
border:1px solid #2C5E30 !important;
border-radius:9999px !important;
height:40px !important;
display:flex; align-items:center; justify-content:space-between;
padding:0 14px; gap:16px;
}
/* Nettoie les conteneurs Elementor autour si un fond/padding persiste */
.elementor .elementor-widget-shortcode,
.elementor .elementor-widget-shortcode > .elementor-widget-container{
background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
/* (debug temporaire) Voir les bords de la carte — à retirer après test */
/* .fe-upsell.fe-green { outline:2px solid #2C5E30 !important; } */
/* Carte vert pâle (déjà OK) */
.fe-upsell.fe-green{
background:#EFF2E9 !important;
border:1px solid #D6E0CE !important;
border-radius:12px !important;
padding:16px !important;
color:#45523E !important;
box-shadow:0 1px 0 rgba(0,0,0,.03) !important;
}
/* ❌ Annule le "panneau intérieur" ajouté par le thème */
.fe-upsell .fe-card,
.fe-upsell .fe-main{
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
}
/* Image: pas de fond ni arrondis parasites */
.fe-upsell .fe-thumb,
.fe-upsell .fe-thumb img{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* CTA (si tu veux le garder ton sur ton vert pâle) */
.fe-upsell .fe-cta{
background:#EFF2E9 !important; /* ou #FFFFFF si tu préfères blanc */
border:1px solid #2C5E30 !important;
border-radius:9999px !important;
height:40px !important;
display:flex; align-items:center; justify-content:space-between;
padding:0 14px !important; gap:16px !important;
}
/* Contenu texte (inchangé) */
.fe-upsell .fe-title{ color:#45523E !important; font-weight:700; text-decoration:underline; margin:0 0 4px !important; }
.fe-upsell .fe-excerpt{ font-size:14px; line-height:1.6; color:#45523E; margin:0 0 12px; }
.fe-upsell .added_to_cart{ display:none !important; }
/* 1) Parent texte du bloc */
.fe-upsell .fe-main{
text-align:left !important; /* casse tout centrage hérité */
}
/* 2) Le libellé lui-même (nouvelle version avec classe) */
.fe-upsell .fe-lead{
text-align:left !important;
display:block !important;
margin-left:0 !important;
margin-right:auto !important;
color:#2b3a2e !important; /* garde la teinte si écrasée */
}
/* 2bis) Fallback pour l’ancienne version (sans classe, 1er div texte) */
.fe-upsell .fe-main > div:first-child{
text-align:left !important;
display:block !important;
margin-left:0 !important;
margin-right:auto !important;
}
/* 3) Si le widget Elementor centre tout le contenu */
.elementor .elementor-widget-shortcode .fe-upsell{
text-align:left !important;
}
//* Grille 2 colonnes : [thumb | contenu] */
.fe-upsell .fe-card{
display:grid !important;
grid-template-columns:56px 1fr !important; /* ajuste 56 si besoin */
column-gap:12px !important;
row-gap:8px !important;
align-items:start !important;
}
/* Dissout le wrapper pour placer ses enfants directement dans la grille */
.fe-upsell .fe-main{ display:contents !important; }
/* L1 : libellé sur toute la largeur (=> aligné à gauche de la carte) */
.fe-upsell .fe-main .fe-lead{
position:static !important;
grid-column:1 / -1 !important;
grid-row:1 !important;
margin:0 0 6px !important;
font-size:14px; line-height:1.2; opacity:.85; text-align:left;
}
/* L2 : image à gauche, titre à droite */
.fe-upsell .fe-thumb{
grid-column:1 !important;
grid-row:2 !important; /* <-- force SOUS le libellé */
margin:0 !important;
}
.fe-upsell .fe-title{
grid-column:2 !important;
grid-row:2 !important;
margin:0 0 4px !important;
}
/* L3 : extrait */
.fe-upsell .fe-excerpt{
grid-column:2 !important;
grid-row:3 !important;
margin:0 0 12px !important;
}
/* L4 : CTA */
.fe-upsell .fe-cta{
grid-column:2 !important;
grid-row:4 !important;
}
/* Libellé en gras */
.fe-upsell .fe-lead{
font-weight:700 !important;
}
/* Titre produit sans soulignement */
.fe-upsell .fe-title,
.fe-upsell .fe-title:hover,
.fe-upsell .fe-title:focus,
.fe-upsell .fe-title:visited{
text-decoration: none !important;
border-bottom: 0 !important; /* au cas où le thème simule un underline */
outline: none !important;
}
/* 1) Espace sous le TITRE (marge basse) */
.fe-upsell .fe-title{
display:block; /* assure que la marge s’applique bien */
margin-bottom: 2px !important; /* 0–4px selon ton goût */
line-height: 1.25; /* option: un peu plus compact */
}
/* 2) Espace au-dessus de la DESCRIPTION (marge haute) */
.fe-upsell .fe-excerpt{
margin: 0 0 9px !important; /* met 0 si tu veux coller au titre */
}
/* 3) Si l’écart persiste (structure grid) c’est le row-gap */
.fe-upsell .fe-card{
row-gap: 2px !important; /* avant 8px ; ajuste 0–6px */
}
/* Bouton "ADD TO BASKET" sans soulignement */
.fe-upsell .fe-cta .button.fe-add,
.fe-upsell .fe-cta .button.fe-add:hover,
.fe-upsell .fe-cta .button.fe-add:focus,
.fe-upsell .fe-cta .button.fe-add:active,
.fe-upsell .fe-cta .button.fe-add:visited{
text-decoration: none !important; /* retire l'underline */
border-bottom: 0 !important; /* si le thème simule un underline */
outline: none; /* évite le halo bleu par défaut */
}
/* Bouton upsell : retire tout surlignage/underline "stylisé" */
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *{
text-decoration: none !important;
-webkit-text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-color: transparent !important;
/* tue les faux surlignages type "stabilo" */
box-shadow: none !important; /* ex: box-shadow: inset 0 -0.4em ... */
background: none !important; /* ex: background-color */
background-image: none !important; /* ex: linear-gradient(...) underline */
border-bottom: 0 !important; /* underline simulé par border */
}
/* au cas où le thème utilise des pseudo-éléments pour l'underline */
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add::before,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add::after,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *::before,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *::after{
content: none !important;
background: none !important;
box-shadow: none !important;
}
/* Texte vert FE sur le bouton du bloc upsell (et tous ses enfants) */
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add:hover,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add:focus,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add:active,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add:visited{
color:#2C5E30 !important;
background:transparent !important;
text-decoration:none !important;
-webkit-text-fill-color:#2C5E30 !important; /* Safari */
}
/* Assure que le texte interne hérite bien (certains thèmes wrap le label dans ) */
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *,
.single-product .elementor .elementor-widget-shortcode .fe-upsell .fe-cta a.button.fe-add *:hover{
color:inherit !important;
-webkit-text-fill-color:inherit !important;
text-decoration:none !important;
background:none !important; /* tue un éventuel surlignage */
box-shadow:none !important; /* tue un faux "surline" par shadow */
border-bottom:0 !important;
}
/* Widget Shortcode SANS ESPACE */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
padding:0 !important;
margin:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* Colonne/section sans espace si tu mets la même classe sur la colonne/section */
.elementor .elementor-column.fe-no-gap,
.elementor .elementor-column.fe-no-gap > .elementor-widget-wrap,
.elementor .elementor-section.fe-no-gap{
padding:0 !important;
margin:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* Elementor/WordPress ajoutent souvent un autour du shortcode → tue sa marge */
.elementor .elementor-widget-shortcode > .elementor-widget-container > p{
margin:0 !important;
padding:0 !important;
}
.elementor .elementor-widget-shortcode > .elementor-widget-container > p:empty{
display:none !important;
}
/* Sécurité : évite les marges internes parasites dans ta carte upsell */
.fe-upsell > :first-child{ margin-top:0 !important; }
.fe-upsell > :last-child{ margin-bottom:0 !important; }
/* 0) Shortcode Elementor sans padding/marge autour */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
margin:0 !important; padding:0 !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* 1) FE Upsell 2 — base neutre + contrôle des marges */
.fe-upsell{
/* variables : change-les si tu veux des valeurs par défaut globales */
--up-top: 0px; /* marge au-dessus */
--up-bottom: 0px; /* marge en-dessous */
--up-pad-x: 0px; /* padding interne horizontal si besoin */
--up-pad-y: 0px; /* padding interne vertical si besoin */
margin-top: var(--up-top) !important;
margin-bottom: var(--up-bottom) !important;
padding: var(--up-pad-y) var(--up-pad-x) !important;
/* sécurités anti-surprises */
background: transparent; border: 0; box-shadow: none;
}
/* Nettoie les marges internes par défaut */
.fe-upsell :where(h1,h2,h3,h4,h5,h6,p){ margin:0; }
.fe-upsell > * + *{ margin-top:8px; } /* petit rythme interne optionnel */
/* 2) Variantes toutes prêtes */
.fe-upsell--flush{ /* aucune marge externe */
--up-top: 0px; --up-bottom: 0px;
}
.fe-upsell--tight{ /* marge serrée */
--up-top: 6px; --up-bottom: 6px;
}
.fe-upsell--normal{ /* marge standard si tu veux */
--up-top: 16px; --up-bottom: 16px;
}
/* (optionnel) cadre de debug pour voir le bloc */
.fe-upsell.fe-debug{ outline:1px dashed #c9d3c5; outline-offset:2px; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-26d6cb7 *//* ===== Style onglets façon maquette (ligne grise + soulignement vert) ===== */
/* Conteneur (cc-tabs OU fe3tabs) */
.cc-tabs,
.fe3tabs-wrapper {
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
}
/* Barre d’onglets */
.cc-tabs__nav,
.fe3tabs-nav {
display: flex;
gap: 40px;
padding: 0;
margin: 0 0 2px;
border-bottom: 1px solid #d9ded6; /* fine ligne grise */
background: #ffffff !important;
}
/* Boutons d’onglet */
.cc-tabs__btn,
.fe3tab-btn {
appearance: none;
background: none !important;
border: 0 !important;
margin: 0;
padding: 14px 0 10px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: #9aa193 !important; /* onglet inactif */
cursor: pointer;
position: relative;
text-transform: none !important; /* garde la casse normale */
}
/* Onglet actif : texte plus foncé */
.cc-tabs__btn[aria-selected="true"],
.fe3tab-btn.active,
.fe3tab-btn[aria-selected="true"] {
color: #4b5e43 !important;
}
/* Soulignement par défaut (transparent) */
.cc-tabs__btn::after,
.fe3tab-btn::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: transparent;
}
/* Soulignement vert sous l’onglet actif */
.cc-tabs__btn[aria-selected="true"]::after,
.fe3tab-btn.active::after,
.fe3tab-btn[aria-selected="true"]::after {
background: #4b5e43;
}
/* Zone de contenu */
.cc-tabs__panels,
.fe3tabs-content {
padding: 18px 0 0;
background: #ffffff !important;
}
/* Panneaux d’onglet */
.cc-tabs__panel,
.fe3tab-content {
display: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.cc-tabs__panel.is-active,
.fe3tab-content.active {
display: block;
opacity: 1;
}
/* Mobile : onglets scrollables si trop larges */
@media (max-width: 640px) {
.cc-tabs__nav,
.fe3tabs-nav {
gap: 24px;
overflow-x: auto;
padding-left: 4px;
}
}
/* Typographie des libellés d’onglets (style FEYI) */
.cc-tabs__btn,
.fe3tab-btn {
font-family: var(--font-maison-neue-bold, "maison-neue", Helvetica, Arial, sans-serif);
font-weight: 700;
font-style: normal;
font-size: 10px;
line-height: 1.6em;
letter-spacing: .03em;
text-align: center;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
}
/* Couleurs : inactif = texte clair, actif = texte/heading */
.cc-tabs__btn,
.fe3tab-btn {
color: var(--text-color-light, #b5bab2) !important;
}
.cc-tabs__btn[aria-selected="true"],
.fe3tab-btn.active,
.fe3tab-btn[aria-selected="true"] {
color: var(--heading-color, #45523e) !important;
}
/* TAILLE des libellés des onglets */
.cc-tabs__btn,
.fe3tab-btn {
font-size: 17px !important; /* change 14px → 13, 15, 16 selon ce que tu veux */
}
/* TYPO des CONTENUS ACF dans les onglets
(texte qui vient des champs Récolte / Calendrier / Guérison)
*/
/* Texte normal */
.cc-tabs__panel,
.cc-tabs__panel p,
.cc-tabs__panel li,
.cc-tabs__panel span,
.fe3tab-content,
.fe3tab-content p,
.fe3tab-content li,
.fe3tab-content span {
font-family: Helvetica, Arial, sans-serif !important;
font-size: 14px !important; /* ⇐ change 14px pour la taille que tu veux */
line-height: 1.6;
font-weight: normal;
}
/* Titres éventuels dans l’éditeur ACF (si tu mets des H2/H3) */
.cc-tabs__panel h2,
.cc-tabs__panel h3,
.fe3tab-content h2,
.fe3tab-content h3 {
font-family: Helvetica, Arial, sans-serif !important;
font-size: 16px; /* ⇐ un peu plus grand que le texte normal */
font-weight: 600;
margin-bottom: 0.6em;
}
/* === À COLLER TOUT EN BAS DE TON CSS EXISTANT === */
/* Valeur pilotable (par défaut 13px) */
.cc-tabs{ --cc-tabs-m-label-size: 13px; }
/* Mobile: force la taille des libellés (passe devant 17px !important global) */
@media (max-width: 640px){
.cc-tabs .cc-tabs__nav .cc-tabs__btn{
font-size: var(--cc-tabs-m-label-size, 13px) !important;
}
/* si tu as aussi fe3tabs */
.fe3tabs-wrapper .fe3tabs-nav .fe3tab-btn{
font-size: var(--cc-tabs-m-label-size, 13px) !important;
}
}
/* Option par page/produit (ex. produit #69980) */
.postid-69980 .cc-tabs{ --cc-tabs-m-label-size: 12px; }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e9a2be9 *//* ============= FEYI — PRODUITS mobile (2 colonnes) ============= */
.fe-products-m{
--pm-gap: 18px;
--pm-pad: clamp(14px, 3.2vw, 22px);
--pm-radius: 18px;
--pm-shadow: 0 12px 30px rgba(0,0,0,.08);
--pm-green: #3E5137;
width: min(1400px, 97vw);
margin: 36px auto 0;
padding: 0 var(--pm-pad);
box-sizing: border-box;
}
.fe-pm__head{ margin: 0 0 16px; }
.fe-pm__title{
font-family:"Ortica Linear","Ortica Light",serif;
font-weight:400; text-transform:uppercase; letter-spacing:.08em;
font-size: clamp(18px, 2.4vw, 22px); color:#45523e; margin:0;
}
.fe-pm__sub{
margin:.35rem 0 0; color:#5a6a55; font: 300 14px/1.45 "Ortica Linear",system-ui;
}
.fe-pm__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: var(--pm-gap);
}
@media (max-width: 380px){
.fe-pm__grid{ grid-template-columns: 1fr; }
}
.fe-pm__card{ display:flex; flex-direction:column; gap:10px; }
.fe-pm__media{ display:block; }
.fe-pm__imgWrap{
position:relative; aspect-ratio: 4/5;
border-radius: var(--pm-radius); overflow:hidden; background:#f2f2f2;
box-shadow: var(--pm-shadow);
}
.fe-pm__img{ width:100%; height:100%; object-fit:cover; display:block; }
.fe-pm__imgWrap::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:28%;
pointer-events:none; background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
}
/* Badges */
.fe-badges{
position:absolute; top:10px; left:10px; right:10px; display:flex; gap:10px; justify-content:space-between; z-index:2; pointer-events:none;
}
.fe-badge{
pointer-events:auto;
padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.9);
border:1px solid rgba(0,0,0,.1); font:600 12px/1 "Ortica Linear",system-ui; color:#222;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.fe-badge--best{
position:absolute; top:40px; left:10px; padding:7px 12px; border-radius:999px;
background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.12); font:700 12px/1 "Ortica Linear",system-ui;
}
/* Textes */
.fe-pm__body{ padding: 6px 2px 0; }
.fe-pm__name, .fe-pm__name a{
font-family:"Coconat",serif; font-weight:600; color:#263424; text-decoration:none;
font-size: clamp(20px, 3.6vw, 28px); line-height:1.1; margin:0 0 6px;
}
.fe-pm__desc{
font: 300 14px/1.45 "Ortica Linear",system-ui; color:#45523e; margin:0 0 14px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* CTA luxe (vert, fin) */
.fe-pm__cta{ margin-top: 8px; }
.fe-pm__btn{
display:inline-flex; align-items:center; justify-content:center; width:100%;
height: 46px; padding:0 18px; border-radius: 28px;
background: var(--pm-green); color:#fff; text-transform:uppercase; letter-spacing:.06em;
font: 700 16px/1 "Ortica Family", serif; border:1px solid rgba(0,0,0,.12);
box-shadow: 0 8px 22px rgba(62,81,55,.18);
}
.fe-pm__btn:focus-visible{ outline:2px solid #222; outline-offset:2px; }
/* Respacings sous la carte pour ne pas coller la rangée suivante */
.fe-pm__card{ margin-bottom: 6px; }
.fe-pm__cta{ margin-bottom: 8px; }
/* ========== FEYI — Comptoir mobile : même look que Réserves (2 colonnes) ========== */
@media (max-width:1024px){
/* Container & header */
.fe-products-m{ width:min(1200px,97vw); margin:24px auto 0; padding:0 16px; }
.fe-pm__head{ margin:0 0 10px; }
.fe-pm__title{
font-family: var(--heading-font-family,'Exposure VAR',serif);
color: var(--heading-color,#45523e);
font-weight:400; font-size:clamp(18px,4.6vw,24px); letter-spacing:.02em; margin:0 0 6px;
text-transform:none;
}
.fe-pm__sub{
font-family: var(--text-font-family,'maison-neue',Helvetica,Arial,sans-serif);
color: rgba(69,82,62,.85); font-size:14px; line-height:1.5; margin:0 0 10px;
}
/* Grille identique (2 colonnes + espace vertical plus ample) */
.fe-pm__grid{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:16px; row-gap:36px; /* ← espace entre rangées */
}
@media (max-width:380px){ .fe-pm__grid{ grid-template-columns:1fr; } }
/* Carte + média (ratio 4/5, ombre & dégradé comme Réserves) */
.fe-pm__card{ display:flex; flex-direction:column; }
.fe-pm__media{ display:block; text-decoration:none; color:inherit; }
.fe-pm__imgWrap{
position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:14px;
background:#f2f2f2; box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.fe-pm__img{ width:100%; height:100%; object-fit:cover; display:block; }
.fe-pm__imgWrap::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:26%;
background:linear-gradient(to top, rgba(0,0,0,.16), transparent); pointer-events:none;
}
/* Badges (exactement le rendu Réserves) */
.fe-badges{
position:absolute; top:10px; left:10px; right:10px;
display:flex; justify-content:space-between; align-items:center; gap:8px;
z-index:2; pointer-events:none;
}
.fe-badge{
pointer-events:auto; padding:6px 9px; border-radius:999px;
font:600 11px/1 "Ortica Linear",system-ui; letter-spacing:.02em; color:#0f0f0f;
background:rgba(255,255,255,.78); border:1px solid rgba(0,0,0,.10);
box-shadow:0 1px 6px rgba(0,0,0,.06); backdrop-filter:saturate(110%) blur(2px); white-space:nowrap;
}
.fe-badge--best{
position:absolute; top:36px; left:10px; z-index:3; padding:6px 10px;
border-radius:999px; font:700 11px/1 "Ortica Linear",system-ui; color:#2a2a28;
background:rgba(255,255,255,.86); border:1px solid rgba(0,0,0,.12); box-shadow:0 2px 10px rgba(0,0,0,.10);
max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Textes sous l’image (mêmes tailles que Réserves) */
.fe-pm__body{ padding:10px 4px 0; }
.fe-pm__name, .fe-pm__name a{
margin:6px 0 4px; text-decoration:none; text-transform:none;
color:#45523e; font-family:"Ortica Linear",serif !important;
font-weight:400; font-size:18px; line-height:1.25;
}
.fe-pm__desc{
margin:0 0 14px; color:#6a6a6a;
font:400 13px/1.35 "Ortica Linear",system-ui;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* CTA vert “luxe” (identique à Réserves) */
.fe-pm__cta{ margin-top:14px !important; }
.fe-pm__btn{
display:inline-flex; align-items:center; justify-content:center; width:100%;
height:34px; padding:0 18px; border-radius:999px;
background:#45523E; border:1px solid rgba(0,0,0,.12);
color:#fff !important; -webkit-text-fill-color:#fff !important;
text-transform:uppercase; letter-spacing:.06em;
font:600 12.5px/1 "Ortica Linear",system-ui;
text-decoration:none !important;
box-shadow:0 4px 10px rgba(0,0,0,.08);
transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fe-pm__btn:hover{
background:#3e4b36; transform:translateY(-1px);
box-shadow:0 6px 14px rgba(0,0,0,.10);
}
}
/* Option — carte “wide” (rectangulaire) pour certaines références */
.fe-products-m{ --pm-wide-h: 260px; } /* télés */
@media (min-width:768px){ .fe-products-m{ --pm-wide-h: 300px; } }
.fe-products-m .fe-pm__card.is-wide{ grid-column:1 / -1 !important; }
.fe-products-m .fe-pm__card.is-wide .fe-pm__imgWrap{
height:var(--pm-wide-h) !important; aspect-ratio:auto !important; border-radius:18px !important;
}
.fe-products-m .fe-pm__card.is-wide .fe-pm__img{
width:100% !important; height:100% !important; object-fit:cover !important;
}
.fe-products-m .fe-pm__card.is-wide .fe-pm__imgWrap::after{ height:22% !important; }
/* Fix CTA qui grossit (forcer 1 seule ligne + taille réactive) */
.fe-products-m .fe-pm__btn{
white-space: nowrap; /* empêche le retour à la ligne */
font-size: clamp(12px, 3.3vw, 14px); /* rétrécit un peu sur petits écrans */
letter-spacing: .04em; /* moins d’espacement pour tenir sur 1 ligne */
height: 40px; /* hauteur harmonisée */
padding: 0 16px; /* un peu moins large */
border-radius: 999px;
}
/* Sécurité pour très petits écrans */
@media (max-width: 360px){
.fe-products-m .fe-pm__btn{
font-size: 13px;
letter-spacing: .03em;
}
}
/* FEYI — Comptoir FEYI (mobile) : masquer tous les badges */
@media (max-width: 1024px){
.fe-products-m .fe-badges,
.fe-products-m .fe-badge,
.fe-products-m .fe-badge--best,
.fe-products-m [class*="fe-badge"]{
display: none !important;
}
}
/* ===== Strip mobile LE COMPTOIR FEYI — cacher les badges dans les cartes ===== */
@media (max-width: 1024px){
/* Container global du shortcode mobile */
.fe-products-m {
/* rien ici, juste pour référencer le bloc */
}
/* On masque TOUT ce qui ressemble à des badges dans les cartes du strip mobile */
.fe-products-m .fe-badges,
.fe-products-m .fe-badge,
.fe-products-m .fe-badge--best,
.fe-products-m [class*="fe-badge"],
.fe-products-m .fe-card-badges,
.fe-products-m .fe-card-badges-wrap,
.fe-products-m [class*="fe-card-badges"],
.fe-products-m [class*="fe_card_badges"] {
display: none !important;
}
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-f8a9fb4 *//* ===== CTA "Catégories associées à la boutique" ===== */
.cc-cat-cta {
padding: 80px 20px;
background: #f3f4ed; /* fond très clair façon Flamingo Estate */
text-align: center;
margin-top: 60px;
}
.cc-cat-cta__title {
font-family: var(--heading-font-family, "Exposure VAR", serif);
font-weight: var(--heading-font-weight, 400);
font-size: 24px;
line-height: 1.4;
color: var(--heading-color, #45523e);
margin: 0 0 28px;
}
.cc-cat-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
padding: 10px 30px;
border-radius: 999px; /* bouton ovale */
border: 1px solid #45523e;
font-family: var(--text-font-family, "maison-neue", Helvetica, Arial, sans-serif);
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
color: #45523e;
background: transparent;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.cc-cat-cta__btn:hover {
background: #45523e;
color: #ffffff;
}/* End custom CSS */
/* Start custom CSS *//* A) Débride les wrappers du thème sur l'archive produits (évite le plafond 1140/1600) */
.post-type-archive-product .site-main,
.post-type-archive-product .content-area,
.post-type-archive-product .container {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* B) Force ton grand conteneur (ID vu dans ta capture: fe-layout) */
#fe-layout {
/* largeur de contenu cible */
max-width: 1800px; /* mets 1680 ou 1800 selon ton goût */
width: 100%;
margin-inline: auto; /* centre */
padding-left: 120px; /* Desktop → bords plus fins */
padding-right: 120px;
align-items: stretch; /* étire les enfants */
}
/* C) Responsive doux sur ce même conteneur */
@media (max-width: 1024px) {
#fe-layout { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 767px) {
#fe-layout { padding-left: 20px; padding-right: 20px; }
}
/* D) Assure que le widget à l'intérieur prend toute la largeur interne */
#fe-layout > .elementor-widget { width: 100% !important; max-width: none !important; }
/* Déboxe UNIQUEMENT ce modèle Elementor (archive produits) */
.site .container,
.content-area,
.site-content{
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Garantit le vrai bord-à-bord des sections étirées */
.elementor-section.elementor-section-stretched{
left: 0 !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* Utilitaire pour les sections qui doivent toucher les bords
→ ajoute la classe "full-bleed" dans Avancé > Classe CSS */
.elementor .full-bleed{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.elementor .full-bleed.full-bleed--padded{
box-sizing: border-box;
padding-left: clamp(12px, 2vw, 24px);
padding-right: clamp(12px, 2vw, 24px);
}
/* Évite une barre horizontale éventuelle */
html, body { overflow-x: hidden; }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Ortica family';
font-style: normal;
font-weight: normal;
font-display: auto;
src: url('https://feyi-martinique.com/wp-content/uploads/2025/11/OrticaLinear-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Ortica family';
font-style: normal;
font-weight: 600;
font-display: auto;
src: url('https://feyi-martinique.com/wp-content/uploads/2025/11/OrticaLinear-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'Ortica family';
font-style: normal;
font-weight: normal;
font-display: auto;
src: url('https://feyi-martinique.com/wp-content/uploads/2025/11/OrticaLinear-Light.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'ortica gras';
font-style: normal;
font-weight: bold;
font-display: auto;
src: url('https://feyi-martinique.com/wp-content/uploads/2025/11/OrticaLinear-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */
internes */
body.single-product .fe-badges > *{
display:inline-flex !important;
align-items:center !important;
white-space:nowrap !important;
margin:0 !important; padding:0 !important;
}
body.single-product .fe-badges br{ display:none !important; }
/* 3) Style des pastilles : bordure fine 1px, compact */
body.single-product .fe-badge,
body.single-product .fe-badge--l{
padding:4px 10px !important;
font-size:12px !important;
line-height:1 !important;
font-weight:600 !important;
color:#2c5e30 !important;
background:#fff !important;
border:1px solid #2c5e30 !important; /* <<< bordure fine */
border-radius:9999px !important;
box-shadow:none !important;
}
/* ===================== FE CARD BADGES — ESPACES MAÎTRISÉS ===================== */
/* 0) Elementor : retire tout l'espace du widget Shortcode qui contient les badges */
.elementor .elementor-widget-shortcode.fe-no-gap,
.elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* Auto-détection si tu oublies la classe */
.elementor .elementor-widget-shortcode:has(.fe-card-badges),
.elementor .elementor-widget-shortcode:has(.fe-badges){
margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* WP ajoute parfois un
in the label, kill it */
.fe-zip-ask br{ display:none !important; }
/* (optional) On small screens, slightly reduce label size instead of wrapping */
@media (max-width:520px){
.fe-zip-ask{ font-size:13px; }
}
/* ===== FE_DELIVERY_PANEL — Version mobile ===== */
@media (max-width: 767px){
/* Panel : zéro espace inutile, rythme serré */
.fe-delivery-panel,
.fe-panel{
--panel-pad-y: 6px;
--panel-pad-x: 0px;
--panel-gap: 6px;
margin: 0 !important;
padding: var(--panel-pad-y) var(--panel-pad-x) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Ligne ZIP : on accepte le wrap, plus “souple” */
.fe-zip-row{
display: flex !important;
align-items: flex-start;
flex-wrap: wrap !important; /* question au-dessus, input dessous */
gap: 6px;
min-height: auto;
}
/* Icône un peu plus petite et alignée */
.fe-zip-icon{
width: 16px;
height: 16px;
flex: 0 0 16px;
margin-top: 2px;
}
/* Question : prend toute la largeur, texte normal */
.fe-zip-ask{
flex: 0 0 100%;
margin: 0 0 4px 0;
font: 600 13px/1.4 "maison-neue", Helvetica, Arial, sans-serif;
white-space: normal !important; /* autorise les retours à la ligne */
min-width: 0 !important;
}
/* Input : full width sous la question */
.fe-zip-input{
flex: 1 1 100%;
min-width: 0;
}
.fe-zip-input input{
width: 100%;
height: 34px;
font-size: 13px;
padding: 0 10px;
}
/* Bouton : à droite de l’input (même ligne) */
.fe-zip-submit{
flex: 0 0 34px;
width: 34px;
height: 34px;
margin-left: 6px;
}
/* Message sous la ligne, petit texte */
.fe-zip-msg{
width: 100%;
margin-top: 6px;
font-size: 12px;
}
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-4b4789b *//* ===== CC BUY — STYLES UNIFIÉS (remplace tout le CSS précédent) ===== */
/* Base & variables (pour un rendu net et stable) */
.cc-buy{
--cc-bg:#f7f9f6; --cc-b:#e6ece4; --cc-primary:#3e5342; --cc-muted:#5a6b5f; --cc-text:#2c3a31;
background:var(--cc-bg); border:1px solid var(--cc-b); border-radius:16px; padding:16px; max-width:780px; margin:auto; color:var(--cc-text);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow:hidden;
}
/* === Variations: grille soignée (label à gauche, champ à droite) === */
.cc-buy table.variations{width:100%; border-collapse:separate; border-spacing:0; border:0;}
.cc-buy table.variations tr{
display:grid; grid-template-columns:240px 1fr; align-items:center; column-gap:12px; row-gap:8px; padding:6px 0;
}
.cc-buy table.variations th{
margin:0; padding:0; border:0; white-space:nowrap; color:var(--cc-muted); font-weight:600; font-synthesis-weight:none;
}
/* Masquer UNIQUEMENT les labels dupliqués dans la cellule de droite */
.cc-buy table.variations td.value .label,
.cc-buy table.variations td.value label{ display:none !important; }
.cc-buy table.variations td{ margin:0; padding:0; border:0; }
/* Select pilule + chevrons, sans débordement */
.cc-buy .variations select{
display:inline-block !important; box-sizing:border-box; width:100%; max-width:360px; height:42px; line-height:42px;
padding:0 36px 0 14px; border:1px solid #c9d3c5; border-radius:999px; background:#fff; font-weight:700; color:#1f2a21; cursor:pointer;
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:linear-gradient(45deg, transparent 50%, #1f2a21 50%), linear-gradient(135deg, #1f2a21 50%, transparent 50%);
background-position:right 14px center, right 8px center; background-size:6px 6px,6px 6px; background-repeat:no-repeat;
outline:2px solid transparent; outline-offset:0; transition:border-color .15s ease, background-color .15s ease, outline-color .15s ease;
}
.cc-buy .variations select:hover{ background:#f4f7f4; border-color:#b7c4b8; }
.cc-buy .variations select:focus{ border-color:var(--cc-primary); outline-color:rgba(62,83,66,.25); }
.cc-buy .reset_variations{ display:none !important; }
.cc-buy .woocommerce-variation{ margin:8px 0 0 0; font-size:.92rem; }
.cc-buy .woocommerce-variation-price{ font-weight:700; }
/* === Qty + CTA (look premium) === */
.cc-buy form.cart{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.cc-buy .quantity{
display:flex; align-items:center; border:1px solid #c9d3c5; border-radius:999px; background:#fff; overflow:hidden; height:42px;
}
.cc-buy .quantity .qty{ height:42px; line-height:42px; width:56px; text-align:center; border:0; padding:0; box-shadow:none; }
.cc-buy .single_add_to_cart_button{
flex:1 1 360px; height:42px; border-radius:999px; background:var(--cc-primary); color:#fff; font-weight:700; border:0;
letter-spacing:.01em; transition:filter .15s ease, transform .15s ease;
}
.cc-buy .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-buy .single_add_to_cart_button[disabled]{ opacity:.5; cursor:not-allowed; }
/* Optionnel: afficher le prix/discount à droite si Woo l’injecte ici */
.cc-buy .price, .cc-buy .woocommerce-variation-price{ margin-left:auto; }
/* === Mobile === */
@media (max-width:560px){
.cc-buy{ padding:12px; }
.cc-buy table.variations tr{ grid-template-columns:1fr; }
.cc-buy .variations select{ max-width:100%; }
}
/* ===== (Optionnel) Upsell carte type Flamingo ===== */
.fe-upsell{ background:#f4f7f2; border:1px solid #e3eadf; border-radius:14px; padding:14px; margin:18px 0; }
.fe-upsell__title{ margin:0 0 10px; font:700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#45523e; }
.fe-upsell__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fe-upsell__item{ display:grid; grid-template-columns:60px 1fr auto; gap:12px; align-items:center; background:#fff; border:1px solid #e6ede2; border-radius:12px; padding:8px 10px; }
.fe-upsell__media img{ width:60px; height:60px; object-fit:cover; border-radius:10px; display:block; }
.fe-upsell__name{ color:#2c5e30; font:700 14px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-decoration:none; }
.fe-upsell__name:hover{ text-decoration:underline; }
.fe-upsell__desc{ margin:.25rem 0 0; font:400 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#6b6f68; }
.fe-upsell__cta{ display:flex; align-items:center; gap:10px; }
.fe-upsell__price{ color:#45523e; font:700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; white-space:nowrap; }
.fe-upsell__btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid #2c5e30; color:#2c5e30; background:#fff; font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-decoration:none; transition:background .2s,color .2s; }
.fe-upsell__btn:hover{ background:#2c5e30; color:#fff; }
.fe-upsell__btn.is-disabled{ opacity:.45; pointer-events:none; }
@media (max-width:560px){
.fe-upsell__item{ grid-template-columns:54px 1fr; grid-template-rows:auto auto; }
.fe-upsell__cta{ grid-column:1 / -1; justify-content:flex-end; }
.fe-upsell__media img{ width:54px; height:54px; }
}
/* === CC-BUY — Style "Flamingo" pour la ligne de variation === */
/* Label fort, net */
.cc-buy table.variations th label{
font-weight:700; color:#2d3a30; font-synthesis-weight:none;
}
/* Select = texte léger, souligné, chevron à droite */
.cc-buy .variations select{
display:inline-block !important;
background:transparent; border:0; border-radius:0;
padding:2px 18px 4px 0; /* place pour le chevron */
font-weight:500; color:#1f2a21; line-height:1.15; cursor:pointer;
border-bottom:2px solid #cfd6cf; /* soulignement */
appearance:none; -webkit-appearance:none; -moz-appearance:none;
/* chevron discret à droite */
background-image:
linear-gradient(45deg, transparent 50%, #1f2a21 50%),
linear-gradient(135deg, #1f2a21 50%, transparent 50%);
background-position: right 4px center, right 0px center;
background-size: 6px 6px, 6px 6px;
background-repeat:no-repeat;
transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
/* Hover/Focus: soulignement plus marqué, ring subtil */
.cc-buy .variations select:hover{ border-bottom-color:#8fa492; }
.cc-buy .variations select:focus{
outline:0;
border-bottom-color:#3e5342;
box-shadow: 0 2px 0 0 #3e5342; /* mini accent sous la ligne */
}
/* Placeholder (option vide) → plus clair, pas gras */
.cc-buy .variations .value:has(select option:checked[value=""]) select{
color:#8a938b; font-weight:500; border-bottom-color:#d9e1db;
}
/* Nettoyage doublons de label côté valeur */
.cc-buy table.variations td.value .label,
.cc-buy table.variations td.value label{ display:none !important; }
/* Alignement de la ligne variations (garde ta grille 2 colonnes) */
.cc-buy table.variations tr{
display:grid; grid-template-columns:240px 1fr; align-items:center; column-gap:12px; row-gap:8px; padding:6px 0;
}
.cc-buy table.variations th,
.cc-buy table.variations td{ margin:0; padding:0; border:0; }
/* Bouton + qty inchangés (look premium existant) */
.cc-buy form.cart{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.cc-buy .quantity{ display:flex; align-items:center; border:1px solid #c9d3c5; border-radius:999px; background:#fff; overflow:hidden; height:42px; }
.cc-buy .quantity .qty{ height:42px; line-height:42px; width:56px; text-align:center; border:0; padding:0; }
.cc-buy .single_add_to_cart_button{ flex:1 1 360px; height:42px; border-radius:999px; background:#3e5342; color:#fff; font-weight:700; border:0; }
/* === CC-BUY — Flamingo strict override (qty + CTA côte à côte) === */
/* Ligne d'action */
.cc-buy form.cart{
display:flex; align-items:center; gap:16px; flex-wrap:nowrap; margin-top:14px;
}
/* --- Quantité : pilule compacte --- */
.cc-buy .quantity{
flex:0 0 auto !important;
display:inline-flex !important; align-items:center; gap:8px;
height:44px !important; padding:0 10px !important;
width:auto !important; max-width:none !important;
background:#fff !important; border:1px solid #cfd8cc !important; border-radius:999px !important;
box-shadow:none !important; position:relative; overflow:hidden;
}
.cc-buy .quantity::before, .cc-buy .quantity::after{ content:none !important; }
/* Champ nombre propre (pas de barre pleine largeur) */
.cc-buy .quantity .qty{
width:48px !important; height:44px !important; line-height:44px !important;
text-align:center !important; border:0 !important; margin:0 !important; padding:0 !important;
box-shadow:none !important; background:transparent !important; font-weight:700; color:#2c3a31;
}
/* retirer les flèches natives */
.cc-buy .quantity .qty::-webkit-outer-spin-button,
.cc-buy .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cc-buy .quantity .qty[type=number]{ -moz-appearance:textfield }
/* Boutons – / + (override total du thème) */
.cc-buy .cc-qty-btn{
all:unset; /* efface styles globaux du thème */
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:999px;
border:1px solid #d6e0d6; background:#fff; color:#1f2a21;
font-size:18px; line-height:1; cursor:pointer;
}
.cc-buy .cc-qty-btn:hover{ background:#f2f6f2 }
/* --- CTA long arrondi --- */
.cc-buy .single_add_to_cart_button{
flex:1 1 auto; min-width:320px; height:44px; border-radius:999px;
background:#3e5342; color:#fff; border:0 !important;
font-weight:800; letter-spacing:.06em; text-transform:uppercase;
transition:filter .15s ease, transform .15s ease;
}
.cc-buy .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.cc-buy .single_add_to_cart_button[disabled]{ opacity:.5; cursor:not-allowed }
/* Variation price sous la ligne pour éviter les décalages */
.cc-buy .woocommerce-variation{ width:100%; order:3; margin:8px 0 0 }
/* Responsive : empile uniquement en très petit */
@media (max-width:600px){ .cc-buy form.cart{ gap:12px } .cc-buy .single_add_to_cart_button{ min-width:0 } }
@media (max-width:420px){ .cc-buy form.cart{ flex-wrap:wrap } .cc-buy .single_add_to_cart_button{ flex-basis:100% } }
/* === CC-BUY — Bouton "Add to Basket" style Flamingo === */
.cc-buy form.cart{
display:flex; align-items:center; gap:16px; flex-wrap:nowrap; /* stepper + CTA côte à côte */
}
/* Stepper (garde ton patch actuel) — largeur auto */
.cc-buy .quantity{ flex:0 0 auto !important; }
/* CTA long, pilule verte, centré */
.cc-buy .single_add_to_cart_button{
flex:1 1 auto !important; /* occupe tout l'espace restant */
min-width:320px; /* visuel long */
height:48px; line-height:48px; /* un poil plus haut que la qty (Flamingo ~48px) */
border-radius:999px;
background:#3e5342 !important; /* vert Flamingo */
color:#fff !important;
border:0 !important;
text-align:center; text-transform:uppercase; letter-spacing:.06em;
font-weight:800; /* bouton bien "dense" */
padding:0 22px; /* évite la casse si min-width retiré */
transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* Hover / Active / Focus */
.cc-buy .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-buy .single_add_to_cart_button:active{ transform:translateY(0); filter:brightness(0.98); }
.cc-buy .single_add_to_cart_button:focus{ outline:0; box-shadow:0 0 0 3px rgba(62,83,66,.22); }
/* Disabled */
.cc-buy .single_add_to_cart_button[disabled],
.cc-buy .single_add_to_cart_button.disabled{
opacity:.5; cursor:not-allowed; transform:none; filter:none;
}
/* Sur très petit écran: empile le CTA en dessous, full width */
@media (max-width:420px){
.cc-buy form.cart{ flex-wrap:wrap; gap:12px; }
.cc-buy .single_add_to_cart_button{ flex-basis:100%; min-width:0; }
}
/* === CC-BUY — CTA pilule ARRONDI “Flamingo” (override fort) === */
.cc-buy form.cart .single_add_to_cart_button,
.cc-buy form.cart .single_add_to_cart_button.button,
.cc-buy form.cart button.single_add_to_cart_button,
.cc-buy form.cart button.single_add_to_cart_button.button,
.cc-buy form.cart a.single_add_to_cart_button.button {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
height:48px !important;
padding:0 28px !important;
/* la clé pour l’arrondi */
border-radius:9999px !important;
overflow:hidden !important;
background:#3e5342 !important;
color:#fff !important;
border:0 !important;
text-transform:uppercase !important;
letter-spacing:.06em !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
.cc-buy form.cart .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-buy form.cart .single_add_to_cart_button:focus{ outline:0; box-shadow:0 0 0 3px rgba(62,83,66,.22) !important; }
.cc-buy form.cart .single_add_to_cart_button[disabled]{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }
/* === CC-BUY — Hauteur du CTA contrôlée === */
.cc-buy{ --cc-cta-h: 35px; } /* ajuste ici: 36 / 40 / 44 / 48 */
/* sélecteurs très spécifiques + !important pour battre le thème */
.cc-buy form.cart .single_add_to_cart_button,
.cc-buy form.cart .single_add_to_cart_button.button,
.cc-buy form.cart button.single_add_to_cart_button,
.cc-buy form.cart button.single_add_to_cart_button.button,
.cc-buy form.cart a.single_add_to_cart_button.button {
height: var(--cc-cta-h) !important;
min-height: var(--cc-cta-h) !important;
line-height: calc(var(--cc-cta-h) - 2px) !important; /* garde le texte centré */
padding: 0 20px !important;
border-radius: 9999px !important;
}
/* (option) synchroniser la hauteur du stepper quantité */
.cc-buy .quantity{ height: var(--cc-cta-h) !important; }
.cc-buy .quantity .qty{
height: var(--cc-cta-h) !important;
line-height: var(--cc-cta-h) !important;
}
/* Force le fond blanc du bloc add-to-cart, en product page */
.single-product .elementor .cc-buy,
.single-product .woocommerce div.product .summary .cc-buy,
.single-product .elementor .fe-panel .cc-buy,
.single-product .fe-atc-block .cc-buy{
background:#fff !important;
border-color:transparent !important;
box-shadow:none !important;
border-radius:16px; /* garde l'arrondi si tu veux */
}
/* Si le beige vient du wrapper Elementor / panel, on le neutralise AUSSI */
.single-product .elementor .fe-panel,
.single-product .elementor .fe-atc-block,
.single-product .woocommerce div.product .summary .cart{
background:#fff !important;
box-shadow:none !important;
border-color:transparent !important;
}
/* Intérieur toujours blanc */
.single-product .cc-buy .variations select,
.single-product .cc-buy .quantity{
background:#fff !important;
}
/* ===== CC BUY — STYLES HARMONISÉS (fond 100% blanc) ===== */
.cc-buy{
/* Thème */
--cc-bg:#fff; /* fond blanc imposé */
--cc-b:#dfe6df;
--cc-text:#243228;
--cc-muted:#627165;
--cc-primary:#3e5342;
/* Rythme & dimensions */
--cc-r:16px;
--cc-gap:14px;
--cc-cta-h:44px; /* hauteur unique select/qty/CTA */
background:var(--cc-bg);
color:var(--cc-text);
border:1px solid transparent; /* why: empêche margin-collapsing */
border-radius:var(--cc-r);
padding:16px;
max-width:780px;
margin:auto;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Supprime l'espace vertical interne par défaut + rythme propre */
.cc-buy :where(h1,h2,h3,h4,h5,h6,p,ul,ol){ margin:0; }
.cc-buy > * + *{ margin-block-start:12px; }
/* ===== Variations (label gauche / champ droite) ===== */
.cc-buy table.variations{ width:100%; border:0; border-collapse:separate; border-spacing:0; }
.cc-buy table.variations tr{
display:grid; grid-template-columns:240px 1fr;
align-items:center; column-gap:12px; row-gap:8px; padding:6px 0;
}
.cc-buy table.variations th,
.cc-buy table.variations td{ margin:0; padding:0; border:0; }
.cc-buy table.variations th{ white-space:nowrap; color:var(--cc-muted); font-weight:600; }
.cc-buy table.variations td.value :where(.label,label){ display:none !important; } /* why: évite doublon */
/* ===== Select — unique style (pilule blanche) ===== */
.cc-buy .variations select{
display:inline-block !important; width:100%; max-width:360px;
height:var(--cc-cta-h); line-height:var(--cc-cta-h);
padding:0 36px 0 14px;
background:#fff;
border:1px solid #c9d3c5; border-radius:999px;
color:#1f2a21; font-weight:600;
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:
linear-gradient(45deg, transparent 50%, #1f2a21 50%),
linear-gradient(135deg, #1f2a21 50%, transparent 50%);
background-position:right 14px center, right 8px center;
background-size:6px 6px,6px 6px; background-repeat:no-repeat;
transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cc-buy .variations select:hover{ background:#f6f8f6; border-color:#b7c4b8; }
.cc-buy .variations select:focus{ outline:0; border-color:var(--cc-primary); box-shadow:0 0 0 3px rgba(62,83,66,.18); }
/* Placeholder (option vide) */
.cc-buy .variations .value:has(select option:checked[value=""]) select{
color:#889289; font-weight:500; border-color:#d7ded7;
}
/* ===== Ligne action : qty + CTA ===== */
.cc-buy form.cart{
display:flex; align-items:center; gap:var(--cc-gap); flex-wrap:nowrap; margin-top:12px;
}
/* Stepper quantité */
.cc-buy .quantity{
display:inline-flex !important; align-items:center; gap:8px;
height:var(--cc-cta-h) !important; padding:0 10px !important;
background:#fff !important; border:1px solid #cfd8cc !important; border-radius:999px !important;
overflow:hidden; flex:0 0 auto !important;
}
.cc-buy .quantity .qty{
width:48px !important; height:var(--cc-cta-h) !important; line-height:var(--cc-cta-h) !important;
text-align:center !important; border:0 !important; margin:0 !important; padding:0 !important;
background:transparent !important; color:var(--cc-text); font-weight:700;
}
.cc-buy .quantity .qty::-webkit-outer-spin-button,
.cc-buy .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cc-buy .quantity .qty[type=number]{ -moz-appearance:textfield }
.cc-buy .cc-qty-btn{
all:unset; display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:999px;
border:1px solid #d6e0d6; background:#fff; color:#1f2a21; font-size:18px; line-height:1; cursor:pointer;
}
.cc-buy .cc-qty-btn:hover{ background:#f2f6f2; }
/* CTA principal (unique) */
.cc-buy .single_add_to_cart_button,
.cc-buy .single_add_to_cart_button.button,
.cc-buy button.single_add_to_cart_button{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
height:var(--cc-cta-h) !important; min-height:var(--cc-cta-h) !important;
padding:0 24px !important; border-radius:9999px !important;
background:#3e5342 !important; color:#fff !important; border:0 !important;
font-weight:800 !important; letter-spacing:.04em !important; text-transform:uppercase !important; line-height:1 !important;
box-shadow:none !important; flex:1 1 320px !important;
transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cc-buy .single_add_to_cart_button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-buy .single_add_to_cart_button:focus{ outline:0; box-shadow:0 0 0 3px rgba(62,83,66,.22) !important; }
.cc-buy .single_add_to_cart_button[disabled]{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }
/* Infos variation/prix (évite décalages) */
.cc-buy .woocommerce-variation{ width:100%; order:3; margin-top:8px; }
.cc-buy .woocommerce-variation-price{ font-weight:700; }
/* ===== Mobile ===== */
@media (max-width:560px){
.cc-buy{ padding:12px; }
.cc-buy table.variations tr{ grid-template-columns:1fr; }
.cc-buy .variations select{ max-width:100%; }
}
@media (max-width:420px){
.cc-buy form.cart{ flex-wrap:wrap; gap:12px; }
.cc-buy .single_add_to_cart_button{ flex-basis:100%; }
}
/* ===== Forcer le BLANC sur les wrappers Elementor/Woo ===== */
.single-product .elementor .cc-buy,
.single-product .woocommerce div.product .summary .cc-buy,
.single-product .elementor .fe-panel .cc-buy,
.single-product .fe-atc-block .cc-buy{
background:#fff !important; border-color:transparent !important; box-shadow:none !important;
}
.single-product .elementor .fe-panel,
.single-product .elementor .fe-atc-block,
.single-product .woocommerce div.product .summary .cart{
background:#fff !important; box-shadow:none !important; border-color:transparent !important;
}
/* Intérieur toujours blanc */
.single-product .cc-buy :where(.variations select, .quantity){ background:#fff !important; }
/* ===== Mod optionnel : supprimer tout espace externe quand nécessaire ===== */
.cc-buy--flush{ margin:0 !important; }
/* 1) Couper TOUT l'espace autour du widget shortcode (Elementor) */
.single-product .elementor .elementor-widget-shortcode,
.single-product .elementor .elementor-widget-shortcode > .elementor-widget-container{
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* 2) Couper le gap de la colonne/section qui contient le widget */
.single-product .elementor-column .elementor-widget-wrap{ gap:0 !important; }
.single-product .elementor .e-con{ gap:0 !important; } /* Elementor Container (si utilisé) */
.single-product .elementor .elementor-widget:not(:last-child){ margin-bottom:0 !important; }
/* 3) Bloc cc-buy : pas de marge externe. Garde un léger padding si tu veux */
.single-product .cc-buy{
margin-block:0 !important; /* supprime espace AVANT/APRÈS */
padding-block:8px !important; /* ajuste (0–12px). Mets 0 si tu veux ultra-compact */
}
/* 4) Rythme interne (entre label/select et ligne qty+bouton) minimal */
.single-product .cc-buy > * + *{ margin-block-start:8px !important; } /* réduis l’espace interne */
/* === CC-BUY — Zéro espace au-dessus/au-dessous en s'appuyant sur TES variables === */
.single-product .elementor .elementor-widget-shortcode .cc-buy{
--space-top: 0px; /* marge haute du bloc */
--space-bottom: 0px; /* marge basse du bloc */
--pad-y: 0px; /* padding vertical interne */
--pad-x: 0px; /* padding horizontal interne */
}
/* Couper aussi l’espace ajouté par le widget Elementor autour du shortcode */
.single-product .elementor .elementor-widget-shortcode:has(.cc-buy),
.single-product .elementor .elementor-widget-shortcode.fe-no-gap,
.single-product .elementor .elementor-widget-shortcode:has(.cc-buy) > .elementor-widget-container,
.single-product .elementor .elementor-widget-shortcode.fe-no-gap > .elementor-widget-container{
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* (optionnel mais souvent nécessaire) — couper le gap de la colonne/section */
.single-product .elementor-column .elementor-widget-wrap{ gap:0 !important; }
.single-product .elementor .elementor-widget:not(:last-child){ margin-bottom:0 !important; }
/* WordPress met parfois un