.elementor-16145 .elementor-element.elementor-element-07f9b9f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 4px;--row-gap:0px;--column-gap:4px;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;}.elementor-16145 .elementor-element.elementor-element-07f9b9f.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-16145 .elementor-element.elementor-element-ae2f8d0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:0px 0px 0px 0px;}.elementor-16145 .elementor-element.elementor-element-ae2f8d0.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-16145 .elementor-element.elementor-element-56cfd67{--spacer-size:10px;}.elementor-16145 .elementor-element.elementor-element-8c40782 .elementor-heading-title{font-family:"Ortica family", Sans-serif;}.elementor-16145 .elementor-element.elementor-element-f9fb2ca{font-size:13px;}.elementor-16145 .elementor-element.elementor-element-450e586{--spacer-size:29px;}.elementor-16145 .elementor-element.elementor-element-60c6a33{font-family:"Ortica family", Sans-serif;font-size:17px;font-weight:bold;letter-spacing:0px;}.elementor-16145 .elementor-element.elementor-element-c175cfc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16145 .elementor-element.elementor-element-1a1d789{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16145 .elementor-element.elementor-element-c7cbf42{--spacer-size:20px;}.elementor-16145 .elementor-element.elementor-element-45ac350{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 21px;--row-gap:0px;--column-gap:21px;}.elementor-16145 .elementor-element.elementor-element-45ac350.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-16145 .elementor-element.elementor-element-0dfffac{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16145 .elementor-element.elementor-element-8d7778e{--spacer-size:1px;}.elementor-16145 .elementor-element.elementor-element-d312e7f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16145 .elementor-element.elementor-element-066a7e5{--spacer-size:7px;}.elementor-16145 .elementor-element.elementor-element-3667027{--spacer-size:50px;}.elementor-16145 .elementor-element.elementor-element-da03b30{--display:flex;}.elementor-16145 .elementor-element.elementor-element-b6fefcf{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-16145 .elementor-element.elementor-element-b6fefcf.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-16145 .elementor-element.elementor-element-59908ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16145 .elementor-element.elementor-element-f24c46d{--spacer-size:42px;}@media(max-width:767px){.elementor-16145 .elementor-element.elementor-element-45ac350{--gap:17px 17px;--row-gap:17px;--column-gap:17px;}}@media(min-width:768px){.elementor-16145 .elementor-element.elementor-element-07f9b9f{--width:101.709%;}.elementor-16145 .elementor-element.elementor-element-ae2f8d0{--width:43.862%;}.elementor-16145 .elementor-element.elementor-element-c175cfc{--width:50%;}.elementor-16145 .elementor-element.elementor-element-45ac350{--width:99.829%;}.elementor-16145 .elementor-element.elementor-element-0dfffac{--width:50%;}.elementor-16145 .elementor-element.elementor-element-d312e7f{--width:50%;}.elementor-16145 .elementor-element.elementor-element-b6fefcf{--width:106.068%;}}/* Start custom CSS for container, class: .elementor-element-ae2f8d0 *//* PATCH "look FE" basé sur la capture (desktop) */ /* 1) Colonne : plus étroite pour forcer les retours du H1 */ .fe-recipe-hero{ max-width: 500px; /* why: mêmes césures que la capture */ padding: 36px 12px 36px 32px; /* why: gutter gauche un poil réduit */ } /* Rythme vertical desktop */ .fe-recipe-hero .fe-subhead{ margin: 0 0 22px; } /* why: un peu plus d’air au-dessus du H1 */ .fe-recipe-hero h1{ margin: -3px 0 18px; } .fe-recipe-hero .fe-byline{ margin: 0 0 6px; } .fe-recipe-hero .fe-date{ margin: 0 0 20px; } /* why: rapproche “Serves” */ /* 2) H1 plus “compact” visuellement */ .fe-recipe-hero h1{ font-size: 62px; /* 64 → 62 pour obtenir mêmes césures */ line-height: 0.96; /* why: rendu très serré comme FE */ letter-spacing: -0.005em; /* why: éviter trop de négatif */ } /* 3) Méta (byline/date) inchangées en 14px mais plus denses */ .fe-recipe-hero .elementor-widget-text-editor, .fe-recipe-hero .elementor-heading-title.elementor-size-small, .fe-recipe-hero .fe-byline, .fe-recipe-hero .fe-date{ font-size: 14px; line-height: 1.4; /* 1.45 → 1.4 */ } /* 4) Carte “Serves” : centrée + bordure claire + plus “carrée” */ .fe-serves{ border: 1px solid var(--fe-grey, #e6e9e2); /* why: la bordure FE paraît plus claire que #52604a */ border-radius: 12px; padding: 18px 24px; /* 16×22 → 18×24, plus d’ampleur */ min-width: 140px; /* 128 → 140 */ margin: 12px 0 28px; /* why: collé à la date comme sur la capture */ display: grid; row-gap: 8px; justify-items: center; /* why: centrage visuel FE */ text-align: center; /* why: cohérence (titre + valeur) */ background: transparent; } .fe-serves .elementor-heading-title{ font-size: 13px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; margin: 0; opacity: .85; } .fe-serves .elementor-widget-text-editor{ font-size: 15px; /* 16 → 15, la valeur paraît un poil plus petite */ line-height: 1.2; font-weight: 500; margin-top: 0; } /* 5) “In this Recipe” : label discret, visuel plus grand */ .fe-mini-product{ margin-top: 18px; } /* 14 → 18 pour respirer */ .fe-mini-product .elementor-heading-title{ font-size: 12px; /* why: petit label dans la capture */ font-weight: 600; text-transform: none; /* why: “In this Recipe” en casse normale */ letter-spacing: 0; margin: 0 0 12px; opacity: .9; } .fe-mini-product img{ width: 120px; /* 88 → 120, comme la capture */ height: auto; border-radius: 0; } .fe-mini-product .elementor-widget-heading:last-child .elementor-heading-title{ font-size: 13px; line-height: 1.3; margin-top: 10px; font-weight: 500; } /* Option : micro-ajustement couleur du H1 pour matcher les titres FE */ .fe-recipe-hero h1{ color: var(--heading-color, #45523e); } /* ==== 0) Variables FE (sécurise la couleur/typo) ==== */ .fe-recipe-hero{ --fe-head: var(--heading-font-family, "Ortica Light", serif); --fe-text: var(--text-font-family, "maison-neue", Helvetica, Arial, sans-serif); --fe-green: #45523e; --fe-green-muted: #9eb091; --fe-border: #52604a; --fe-beige: #fcfbf6; color: var(--fe-green); font-family: var(--fe-text); } /* ==== 1) Typo & couleurs unifiées ==== */ .fe-recipe-hero h1{ font-family: var(--fe-head); color: var(--fe-green); } .fe-recipe-hero a, .fe-recipe-hero .elementor-heading-title a, .fe-recipe-hero .elementor-widget-text-editor a{ color: var(--fe-green) !important; /* why: écrase le rose du thème */ text-decoration-color: rgba(69,82,62,.35); } /* ==== 2) Rythme vertical – “chef” collé au titre ==== */ .fe-recipe-hero h1{ margin: -3px 0 14px; line-height: .96; letter-spacing: -0.005em; } .fe-recipe-hero .fe-byline{ margin: 0 0 6px; opacity: .95; } /* Par Chef... */ .fe-recipe-hero .fe-date{ margin: 0 0 18px; opacity: .8; } /* date plus près du chef */ /* ==== 3) Carte Serves (centrée, plus lumineuse) ==== */ .fe-serves{ border: 1px solid #e6e9e2; border-radius: 12px; padding: 18px 24px; min-width: 140px; margin: 10px 0 26px; display: grid; row-gap: 8px; justify-items: center; text-align: center; background: transparent; } .fe-serves .elementor-heading-title{ font-size: 13px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; margin:0; opacity:.85; } .fe-serves .elementor-widget-text-editor{ font-size: 15px; font-weight: 500; line-height: 1.2; margin-top: 0; } /* ==== 4) Bloc “Dans cette recette” ==== */ /* Titre de section discret (comme FE) */ .fe-mini-product .elementor-heading-title{ font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0 0 12px; opacity: .9; color: var(--fe-green); } /* Visuel produit un peu plus grand pour respirer sur desktop */ .fe-mini-product img{ width: 120px; height: auto; display:block; border-radius: 0; } /* Nom du produit (vert, pas rose) */ .fe-mini-product .elementor-widget-heading:last-child .elementor-heading-title, .fe-mini-product .elementor-widget-heading:last-child .elementor-heading-title a{ font-size: 13px; line-height: 1.3; margin-top: 10px; font-weight: 500; color: var(--fe-green) !important; } /* ==== 5) Prix produit (quand il est affiché) ==== */ /* Si tu utilises un widget Prix WooCommerce ou un Texte dynamique */ .fe-mini-product .price, .fe-mini-product .woocommerce-Price-amount, .fe-mini-product .elementor-widget-text-editor.fe-price{ color: var(--fe-green) !important; font-size: 14px; font-weight: 500; line-height: 1.3; margin-top: 6px; } /* ==== 6) Option “carte colonne gauche” (fond beige + fine bordure arrondie) ==== */ /* Ajoute la classe supplémentaire `fe-recipe-hero--card` à la colonne si tu veux cet aspect */ .fe-recipe-hero.fe-recipe-hero--card{ background: var(--fe-beige); border: 1px solid rgba(69,82,62,.18); border-radius: 16px; /* garde tes paddings/flex fournis par Elementor */ } /* (Facultatif) Lien hover subtil, comme FE */ .fe-recipe-hero a:hover{ text-decoration-color: var(--fe-green); } /* Cache PRIX + OPTIONS uniquement dans la colonne gauche (bloc mini-produit) */ .fe-recipe-hero .fe-mini-product .price, .fe-recipe-hero .fe-mini-product .woocommerce-Price-amount, .fe-recipe-hero .fe-mini-product [class*="price"], .fe-recipe-hero .fe-mini-product .fe-price, /* si tu avais mis un texte custom */ .fe-recipe-hero .fe-mini-product .elementor-widget-woocommerce-product-price, .fe-recipe-hero .fe-mini-product .woocommerce-variation-price{ display: none !important; } /* Cache boutons/options (variable/simple) + formulaire variations */ .fe-recipe-hero .fe-mini-product .elementor-widget-woocommerce-product-add-to-cart, .fe-recipe-hero .fe-mini-product .single_add_to_cart_button, .fe-recipe-hero .fe-mini-product .add_to_cart_button, .fe-recipe-hero .fe-mini-product .elementor-button, .fe-recipe-hero .fe-mini-product .button, .fe-recipe-hero .fe-mini-product .variations_form, .fe-recipe-hero .fe-mini-product .product_type_variable, .fe-recipe-hero .fe-mini-product .product_type_simple{ display: none !important; } /* Optionnel : retire l’espace laissé par les widgets masqués */ .fe-recipe-hero .fe-mini-product .elementor-widget-woocommerce-product-price, .fe-recipe-hero .fe-mini-product .elementor-widget-woocommerce-product-add-to-cart{ margin: 0 !important; padding: 0 !important; } /* ===== Mini-produit : taille image pilotée par variables ===== */ /* Applique à ton conteneur mini-produit (classe .fe-mini-product) */ .fe-mini-product{ /* >>> CHANGE UNIQUEMENT CES VALEURS <<< */ --mini-img-w: 160px; /* largeur de l’image (ex: 120px, 160px, 30%) */ --mini-img-maxw: none; /* ex: 220px ou none */ --mini-img-radius: 0; /* ex: 8px si tu veux des coins arrondis */ --mini-gap: 10px; /* espace entre image et titre */ --mini-align: start; /* start | center | end (aligne le bloc) */ /* ----------------------------------------------------------- */ display: grid; justify-items: var(--mini-align); row-gap: var(--mini-gap); } /* Cible l’image (Elementor Image, WP img, etc.) */ .fe-mini-product img, .fe-mini-product .elementor-widget-image img{ width: var(--mini-img-w); max-width: var(--mini-img-maxw); height: auto; /* why: pas de déformation */ border-radius: var(--mini-img-radius); display: block; } /* Titre sous l’image : garde l’alignement choisi */ .fe-mini-product .elementor-widget-heading .elementor-heading-title{ text-align: left; /* change en center si tu centres l’image */ } /* === Modificateurs pratiques (ajoute la classe au conteneur) === */ /* 1) Pleine largeur du conteneur (utile si tu veux très grand) */ .fe-mini-product.is-full img{ width: 100%; max-width: var(--mini-img-maxw); } /* 2) Centrer le contenu rapidement */ .fe-mini-product.is-center{ --mini-align: center; } /* ===== Tuer le "cadre gris" dans la colonne gauche ===== */ /* 1) Spacer Elementor (garde la hauteur, vire la bordure/ombre) */ .fe-recipe-hero .elementor-widget-spacer, .fe-recipe-hero .elementor-widget-spacer .elementor-widget-container, .fe-recipe-hero .elementor-spacer, .fe-recipe-hero .elementor-spacer-inner{ border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } /* 2) Wrappers de bouton/CTA susceptibles d’appliquer une bordure */ .fe-recipe-hero .fe-mini-product .elementor-widget-button, .fe-recipe-hero .fe-mini-product .elementor-button-wrapper, .fe-recipe-hero .fe-mini-product .elementor-button{ border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } /* 3) Cas WooCommerce (formulaire d’options / add-to-cart) */ .fe-recipe-hero .fe-mini-product .cart, .fe-recipe-hero .fe-mini-product .variations_form, .fe-recipe-hero .fe-mini-product .button{ border: 0 !important; background: transparent !important; box-shadow: none !important; } /* ===== KILL FRAMES dans le mini-produit de la colonne gauche ===== */ .fe-recipe-hero .fe-mini-product *{ border: 0 !important; outline: 0 !important; box-shadow: none !important; background-image: none !important; } /* Cibles fréquentes Elementor */ .fe-recipe-hero .fe-mini-product .elementor-widget-container, .fe-recipe-hero .fe-mini-product .elementor-widget-divider, .fe-recipe-hero .fe-mini-product .elementor-divider, .fe-recipe-hero .fe-mini-product .elementor-button-wrapper, .fe-recipe-hero .fe-mini-product .elementor-widget-button, .fe-recipe-hero .fe-mini-product .elementor-widget-spacer, .fe-recipe-hero .fe-mini-product .elementor-spacer, .fe-recipe-hero .fe-mini-product .elementor-spacer-inner{ border: 0 !important; background: transparent !important; box-shadow: none !important; } /* WooCommerce (form/cart/cta qui laissent souvent un cadre) */ .fe-recipe-hero .fe-mini-product .cart, .fe-recipe-hero .fe-mini-product form.cart, .fe-recipe-hero .fe-mini-product .variations_form, .fe-recipe-hero .fe-mini-product .button, .fe-recipe-hero .fe-mini-product .single_add_to_cart_button, .fe-recipe-hero .fe-mini-product .add_to_cart_button{ border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Si c’est un Divider “solid” invisible mais avec bordure: masque-le */ .fe-recipe-hero .fe-mini-product .elementor-widget-divider, .fe-recipe-hero .fe-mini-product hr{ display: none !important; } /* Nettoie les marges du widget qui laisse le vide */ .fe-recipe-hero .fe-mini-product .elementor-widget-divider, .fe-recipe-hero .fe-mini-product .elementor-widget-button, .fe-recipe-hero .fe-mini-product .elementor-widget-spacer{ margin: 0 !important; padding: 0 !important; } /* Option “tout le bloc gauche” si besoin (décommente pour élargir la portée) */ /* .fe-recipe-hero *{ border: 0 !important; outline: 0 !important; box-shadow: none !important; } */ /* Colonne gauche en "carte" (applique la classe fe-recipe-hero--card à la colonne) */ .fe-recipe-hero{ --fe-green: #45523e; /* couleur des textes FE */ } /* Bordure fine, même couleur que l'écriture, coins légèrement arrondis */ .fe-recipe-hero.fe-recipe-hero--card{ color: var(--fe-green); /* garantit la bonne teinte */ border: 1px solid currentColor; /* même couleur que le texte */ border-radius: 14px; /* ajuste: 12–16px */ background: #fcfbf6; /* option: fond beige FE ; retire si tu n’en veux pas */ } /* Option : bordure "hairline" ultra fine (≈0.5px sur retina) */ .fe-recipe-hero.fe-recipe-hero--card.is-hairline{ border: 0; box-shadow: inset 0 0 0 .5px currentColor; /* why: trait très fin sans aliasing */ } /* Ajuste rapidement les valeurs ici si besoin */ :root{ /* Tu peux surcharger côté page avec : .fe-recipe-hero--card{ border-radius: 16px; } */ } /* === Réglages rapides (CHANGE CES VALEURS) === */ .fe-recipe-hero{ --card-color: #45523e; /* même couleur que le texte */ --card-width: 1px; /* 1px (ou .5px si tu veux extra fin sur Retina) */ --card-radius: 14px; /* arrondi des coins */ --card-bg: #fcfbf6; /* beige FE (mets transparent si tu n'en veux pas) */ } /* A) OVERRIDE DIRECT de la bordure Elementor sur la colonne */ .fe-recipe-hero, .fe-recipe-hero > .elementor-widget-wrap, .fe-recipe-hero > .e-con-inner, /* Containers flex Elementor */ .fe-recipe-hero.elementor-column, .fe-recipe-hero .elementor-element-populated{ border: var(--card-width) solid var(--card-color) !important; border-radius: var(--card-radius) !important; background: var(--card-bg) !important; box-shadow: none !important; overflow: hidden; /* évite que le contenu dépasse les coins arrondis */ } /* B) GARANTI (si Elementor écrase): on dessine la bordure par-dessus */ .fe-recipe-hero.fe-card-border{ position: relative; background: var(--card-bg); /* même rendu */ } .fe-recipe-hero.fe-card-border::before{ content: ""; position: absolute; inset: 0; border: var(--card-width) solid var(--card-color); border-radius: var(--card-radius); pointer-events: none; /* ne bloque pas les clics */ } /* Option "hairline" ultra-fin (≈0.5px) */ .fe-recipe-hero.is-hairline, .fe-recipe-hero.is-hairline > .elementor-widget-wrap{ border-width: .5px !important; } /* === Variables communes (facultatif) === */ :root{ --fe-bg: #fff; /* blanc pur */ --fe-beige: #fcfbf6; /* beige très léger */ --fe-green: #45523e; } /* Base commune à appliquer à la carte avant les variantes */ .card-ux{ background: var(--fe-bg); border: 0; border-radius: 14px; overflow: hidden; } /* 1) Élévation douce (ombre très propre, sans “flou sale”) */ .card-elev{ box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); } /* 2) Hairline intérieur (effet “serti” haut de gamme, sans vraie bordure) */ .card-inner-hairline{ position: relative; } .card-inner-hairline::before{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 .5px rgba(69,82,62,.25); /* ~0.5px */ border-radius: inherit; pointer-events:none; } /* 3) Halo de bord (dégradé latéral ultra léger) */ .card-edge-halo{ position: relative; } .card-edge-halo::after{ content:""; position:absolute; inset:0; background: linear-gradient( to right, rgba(0,0,0,.06), transparent 20% ), linear-gradient( to left , rgba(0,0,0,.06), transparent 20% ); opacity:.06; /* crucial: subtil */ border-radius: inherit; pointer-events:none; } /* 4) Barre d’accent en haut (1–2px) comme repère visuel chic */ .card-topbar{ position: relative; } .card-topbar::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background: rgba(69,82,62,.18); /* vert adouci */ } /* 5) Fond légèrement teinté + ombre ultra light (rappelle Flamingo) */ .card-beige{ background: var(--fe-beige); box-shadow: 0 4px 18px rgba(0,0,0,.035); } /* Micro-interaction (desktop only) : soulève de 2px au hover */ @media (hover:hover){ .card-elev:hover{ transform: translateY(-2px); transition: transform .25s ease; } } .fe-recipe-hero, .fe-recipe-hero.fe-recipe-hero--card, .fe-recipe-hero > .elementor-widget-wrap, .fe-recipe-hero > .e-con-inner{ background:#fff !important; border:0 !important; box-shadow:none !important; }/* End custom CSS */ /* Start custom CSS for theme-post-featured-image, class: .elementor-element-6bd2fba *//* ===== Colonne droite – Image héro (Flamingo-like) ===== */ /* Mets la classe `fe-hero-media` sur le widget Image OU sur la colonne de droite */ .fe-hero-media{ /* >>> CHANGE ICI UNIQUEMENT <<< */ --media-w: 820px; /* largeur visuelle max de l’image */ --media-h: 640px; /* hauteur visuelle (cover) ; ex: 680/720 */ --radius: 10px; /* arrondi coins droits uniquement */ --gap: 28px; /* gutter entre colonnes (gauche/droite) */ --ratio: 4/5; /* aspect ratio cible (portrait FE) */ /* -------------------------------- */ } /* Gutter à gauche de l’image (sépare des contenus gauche) */ .fe-hero-media{ margin-left: var(--gap); } /* Si la classe est sur la colonne : cible l’image interne */ .fe-hero-media img, .fe-hero-media .elementor-widget-image img{ display: block; width: 100%; max-width: var(--media-w); height: var(--media-h); object-fit: cover; /* why: occupe, crop propre */ object-position: center center; aspect-ratio: var(--ratio); /* moderne, sert de garde-fou */ border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); border-top-left-radius: 0; border-bottom-left-radius: 0; margin: 0; padding: 0; border: 0; } /* Pour une colonne “plein-bleed” (image touche le bord droit) */ .fe-hero-media.is-bleed{ margin-right: 0; } /* ===== Breakpoints ===== */ @media (max-width: 1199.98px){ .fe-hero-media{ --media-w: 760px; --media-h: 560px; --gap: 24px; } } @media (max-width: 991.98px){ .fe-hero-media{ --media-w: 640px; --media-h: 520px; --gap: 20px; } } @media (max-width: 767.98px){ /* En mobile, on laisse l’image fluide sans crop violent */ .fe-hero-media{ margin-left: 0; --media-w: 100%; --media-h: auto; } .fe-hero-media img, .fe-hero-media .elementor-widget-image img{ height: auto; /* pas de crop en mobile */ aspect-ratio: auto; border-radius: 0; /* option : coins droits non arrondis en mobile */ } } /* ===== Option : même hauteur que la carte de gauche ===== */ /* Ajoute la classe `match-left` sur .fe-hero-media et sur la colonne gauche `fe-recipe-hero` */ .fe-hero-media.match-left img{ height: auto; min-height: calc(var(--left-card-h, 0px)); /* set dynamiquement si tu veux via JS, sinon retire */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c175cfc *//* ===== Colonne droite – Image héro (Flamingo-like) ===== */ /* Mets la classe `fe-hero-media` sur le widget Image OU sur la colonne de droite */ .fe-hero-media{ /* >>> CHANGE ICI UNIQUEMENT <<< */ --media-w: 840px; /* largeur visuelle max de l’image */ --media-h: 70px; /* hauteur visuelle (cover) ; ex: 680/720 */ --radius: 10px; /* arrondi coins droits uniquement */ --gap:28px; /* gutter entre colonnes (gauche/droite) */ --ratio: 4/5; /* aspect ratio cible (portrait FE) */ /* -------------------------------- */ } /* Gutter à gauche de l’image (sépare des contenus gauche) */ .fe-hero-media{ margin-left: var(--gap); } /* Si la classe est sur la colonne : cible l’image interne */ .fe-hero-media img, .fe-hero-media .elementor-widget-image img{ display: block; width: 100%; max-width: var(--media-w); height: var(--media-h); object-fit: cover; /* why: occupe, crop propre */ object-position: center center; aspect-ratio: var(--ratio); /* moderne, sert de garde-fou */ border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); border-top-left-radius: 0; border-bottom-left-radius: 0; margin: 0; padding: 0; border: 0; } /* Pour une colonne “plein-bleed” (image touche le bord droit) */ .fe-hero-media.is-bleed{ margin-right: 0; } /* ===== Breakpoints ===== */ @media (max-width: 1199.98px){ .fe-hero-media{ --media-w: 760px; --media-h: 560px; --gap: 24px; } } @media (max-width: 991.98px){ .fe-hero-media{ --media-w: 640px; --media-h: 520px; --gap: 20px; } } @media (max-width: 767.98px){ /* En mobile, on laisse l’image fluide sans crop violent */ .fe-hero-media{ margin-left: 0; --media-w: 100%; --media-h: auto; } .fe-hero-media img, .fe-hero-media .elementor-widget-image img{ height: auto; /* pas de crop en mobile */ aspect-ratio: auto; border-radius: 0; /* option : coins droits non arrondis en mobile */ } } /* ===== Option : même hauteur que la carte de gauche ===== */ /* Ajoute la classe `match-left` sur .fe-hero-media et sur la colonne gauche `fe-recipe-hero` */ .fe-hero-media.match-left img{ height: auto; min-height: calc(var(--left-card-h, 0px)); /* set dynamiquement si tu veux via JS, sinon retire */ } /* ========================================================= MODE A — AUTO (recommandé si tu n'utilises pas fe-hero-row) L'image prend sa hauteur naturelle → pas de bande "mi-affichée" ========================================================= */ .fe-hero-media{ /* Tu peux changer juste le rayon si tu veux */ --radius: 10px; } .fe-hero-media img, .fe-hero-media .elementor-widget-image img{ display: block; width: 100%; height: auto !important; /* <<< clé : plus de 100% sans parent */ max-width: 100%; object-fit: cover; /* ok même en auto (ne coupe pas) */ object-position: center; border-radius: var(--radius); margin: 0; border: 0; } /* ========================================================= MODE B — FIXE (si tu veux une haute image type HERO) Donne une hauteur visuelle, on garde le crop propre Active ce bloc à la place du Mode A ========================================================= */ /* .fe-hero-media{ --media-h: 680px; /* change ici: 600/640/720px */ --ratio: 4/5; /* ratio de protection; mets "auto" si tu veux */ --radius: 10px; } .fe-hero-media img, .fe-hero-media .elementor-widget-image img{ display: block; width: 100%; height: var(--media-h) !important; /* <<< hauteur explicite */ aspect-ratio: var(--ratio); object-fit: cover; object-position: center; border-radius: var(--radius); margin: 0; border: 0; } */ /* Astuce: si tu veux que l'image touche le bord droit sans marge: .fe-hero-media{ margin: 0 !important; padding: 0 !important; } *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-07f9b9f *//* ===== PRÉREQUIS MINIMAUX POUR TON SNIPPET ===== */ .fe-hero-row{ /* Variables éditables */ --gutter: 28px; /* espace entre carte & image */ --left-w: 505px; /* largeur carte gauche */ --hero-h: auto; /* ou une valeur ex: 680px si tu veux forcer */ --hero-radius: 12px; /* coins extérieurs */ --card-pad-t: 36px; /* padding interne carte */ --card-pad-r: 28px; --card-pad-b: 30px; --card-pad-l: 28px; --card-border: .75px; /* 0.5–1px hairline */ --media-maxw: 880px; /* largeur visuelle max image */ --media-radius: 12px; /* Flex parent (obligatoire) */ display: flex !important; flex-wrap: nowrap !important; /* Ces 2 lignes étaient déjà dans ton snippet, on les garde ici aussi */ gap: var(--gutter) !important; align-items: flex-start !important; } /* ======= TON SNIPPET (inchangé) ======= */ .fe-hero-row .fe-recipe-hero{ flex:0 0 var(--left-w) !important; max-width:var(--left-w) !important; min-height:var(--hero-h) !important; /* why: match image */ background:#fcfbf6; border: var(--card-border) solid currentColor; border-radius: var(--hero-radius); overflow:hidden; /* why: coins nets */ /* coins côté image aplatis */ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; } .fe-hero-row .fe-recipe-hero > .elementor-widget-wrap, .fe-hero-row .fe-recipe-hero > .e-con{ padding:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l); } /* === Colonne droite (image) === */ .fe-hero-row .fe-hero-media{ flex:1 1 auto !important; margin:0 !important; } .fe-hero-row .fe-hero-media img, .fe-hero-media .elementor-widget-image img{ display:block; width:100%; height:auto; /* auto par défaut; la hauteur globale vient de --hero-h */ max-width:var(--media-maxw); object-fit:cover; object-position:center; border-radius: var(--media-radius); /* coins côté carte aplatis */ border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; margin:0; } /* Anti “fente” 1px si nécessaire */ .fe-hero-row.is-butted .fe-hero-media{ margin-left:-1px !important; } /* Typo (calme & luxe) */ .fe-recipe-hero h1{ font-size:60px; line-height:.96; letter-spacing:-0.005em; margin:0 0 14px; } .fe-recipe-hero .fe-byline{ margin:0 0 6px; font-size:14px; line-height:1.4; opacity:.95; } .fe-recipe-hero .fe-date{ margin:0 0 16px; font-size:14px; line-height:1.4; opacity:.8; } /* Tablette */ @media (max-width: 991.98px){ .fe-hero-row{ --gutter:24px; } .fe-recipe-hero h1{ font-size:48px; line-height:1.02; } .fe-hero-media{ --media-maxw:720px; } } /* Mobile (pile) */ @media (max-width: 767.98px){ .fe-hero-row{ flex-wrap:wrap !important; gap:20px !important; --hero-h:auto; } .fe-hero-row .fe-recipe-hero, .fe-hero-row .fe-hero-media{ flex:1 1 100% !important; max-width:100% !important; } .fe-hero-row .fe-recipe-hero{ border-radius: var(--hero-radius) !important; } .fe-hero-row .fe-hero-media img{ border-radius: var(--hero-radius) !important; max-width:100%; } .fe-recipe-hero h1{ font-size:34px; line-height:1.04; margin-bottom:12px; } } /* ===== Bordure verte arrondie sur l'ensemble du hero (2 colonnes) ===== */ .fe-hero-row{ --fe-green: #45523e; /* vert de ta charte */ --hero-radius: 12px; /* ajuste: 10–16px */ border: 1px solid var(--fe-green) !important; border-radius: var(--hero-radius) !important; overflow: hidden !important; /* clippe image + carte aux coins */ background: transparent; /* laisse voir le fond (option) */ } /* Évite toute bordure interne (pour ne garder que le cadre externe) */ .fe-hero-row .fe-recipe-hero, .fe-hero-row .fe-recipe-hero > .elementor-widget-wrap, .fe-hero-row .fe-recipe-hero > .e-con, .fe-hero-row .fe-hero-media, .fe-hero-row .fe-hero-media > .elementor-widget-wrap, .fe-hero-row .fe-hero-media > .e-con{ border: 0 !important; box-shadow: none !important; background: transparent; } /* L’image doit respecter l’arrondi externe (coins internes plats) */ .fe-hero-row .fe-hero-media img{ display:block; width:100%; height:auto; border-radius: 0 !important; /* c’est le parent qui arrondit */ } /* Mobile: empilé, on garde les coins arrondis du cadre global */ @media (max-width: 767.98px){ .fe-hero-row{ border-radius: var(--hero-radius) !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-4a8278b *//* 1) La SEULE bordure : celle de la carte */ .fe-ingredients-card{ --border:#45523e; --radius:12px; border:1px solid var(--border) !important; border-radius:var(--radius) !important; overflow:hidden; /* coins nets */ } /* 2) Tuer toute bordure/outline/ombre interne (wrappers Elementor) */ .fe-ingredients-card > .elementor-widget-wrap, .fe-ingredients-card > .e-con-inner, .fe-ingredients-card .elementor-element-populated, .fe-ingredients-card .elementor-column, .fe-ingredients-card .elementor-container, .fe-ingredients-card .elementor-section, .fe-ingredients-card .elementor-widget, .fe-ingredients-card .elementor-widget-container, .fe-ingredients-card .e-con, .fe-ingredients-card .e-con-inner{ border:0 !important; outline:0 !important; box-shadow:none !important; background: transparent; /* évite l'effet de “panneau” */ } /* 3) Certains thèmes dessinent un cadre via des pseudo-éléments/overlays */ .fe-ingredients-card .elementor-background-overlay{ display:none !important; } .fe-ingredients-card .elementor-element::before, .fe-ingredients-card .elementor-element::after{ content:none !important; border:0 !important; box-shadow:none !important; } /* 4) On conserve les séparateurs des lignes (on les ré-affirme) */ .fe-ingredients-card .fe-ingredients-list p{ border-top:1px solid var(--row-sep, #e6e9e2) !important; } .fe-ingredients-card .fe-ingredients-list p:first-child{ border-top:none !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0dfffac */.elementor-16145 .elementor-element.elementor-element-0dfffac p{margin:0 0 8px;padding-left:1em;position:relative} .elementor-16145 .elementor-element.elementor-element-0dfffac p:before{content:"•";position:absolute;left:0} ) /* =========== Carte INGREDIENTS (exact look FE avec séparateurs) =========== */ /* Elementor: applique la classe `fe-ingredients-card` au conteneur de gauche */ .fe-ingredients-card{ /* variables rapides */ --fe-green: #45523e; --fe-beige: #fcfbf6; --border: #45523e; /* bordure verte */ --radius: 12px; --pad-x: 28px; --pad-y: 28px; --title-size: 28px; --rule: #dfe3da; /* trait sous le titre */ --row-sep: #e6e9e2; /* séparateur entre lignes */ color: var(--fe-green); background: var(--fe-beige); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad-y) var(--pad-x); box-shadow: none; overflow: hidden; } /* Titre "Ingredients" */ .fe-ingredients-card .fe-ingredients-title, .fe-ingredients-card h2.elementor-heading-title{ font-family: var(--heading-font-family, "Ortica Light", serif); font-weight: 400; font-size: var(--title-size); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 18px; position: relative; color: var(--fe-green); } .fe-ingredients-card .fe-ingredients-title::after, .fe-ingredients-card h2.elementor-heading-title::after{ content: ""; display: block; height: 1px; background: var(--rule); margin-top: 12px; } /* ===== Lignes d'ingrédients (un

par ligne ; nom en ) ===== */ .fe-ingredients-card .elementor-widget-text-editor p{ display: grid; grid-template-columns: 1fr auto; /* nom à gauche, quantité à droite */ gap: 16px; padding: 12px 0; margin: 0; border-top: 1px solid var(--row-sep); /* séparateur hairline */ line-height: 1.6; font-size: 16px; color: var(--fe-green); white-space: pre-line; /* respecte les retours ACF */ } .fe-ingredients-card .elementor-widget-text-editor p:first-of-type{ border-top: none; /* pas de séparateur au tout début */ } /* Nom de l'ingrédient (colonne gauche) */ .fe-ingredients-card .elementor-widget-text-editor p > strong{ font-weight: 600; } /* Ligne “sous-section” (ex: FOR CREME FRAICHE) : Ajoute la classe fe-subsection sur le

correspondant */ .fe-ingredients-card .elementor-widget-text-editor p.fe-subsection{ grid-template-columns: 1fr; /* sur toute la largeur */ padding-top: 16px; margin-top: 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; border-top: 1px solid var(--row-sep); } /* Tablette */ @media (max-width: 991.98px){ .fe-ingredients-card{ --pad-x:24px; --pad-y:24px; --title-size:24px; } .fe-ingredients-card .elementor-widget-text-editor p{ font-size:15px; padding:10px 0; } } /* Mobile */ @media (max-width: 767.98px){ .fe-ingredients-card{ --pad-x:20px; --pad-y:20px; --title-size:22px; border-radius:12px; } .fe-ingredients-card .elementor-widget-text-editor p{ font-size:15px; gap:12px; } } /* ===== Carte INGREDIENTS — bordure verte, séparateurs, 2 colonnes ===== */ .fe-ingredients-card{ --fe-green:#45523e; --fe-beige:#fcfbf6; --border:#45523e; --radius:12px; --pad-x:28px; --pad-y:28px; --title-size:28px; --rule:#dfe3da; --row-sep:#e6e9e2; color:var(--fe-green); background:var(--fe-beige); border:1px solid var(--border); border-radius:var(--radius); padding:var(--pad-y) var(--pad-x); overflow:hidden; } /* Titre + trait */ .fe-ingredients-card .fe-ingredients-title{ font-family:var(--heading-font-family,"Ortica Light",serif); font-weight:400; font-size:var(--title-size); line-height:1.12; letter-spacing:-.01em; margin:0 0 18px; position:relative; color:var(--fe-green); } .fe-ingredients-card .fe-ingredients-title::after{ content:""; display:block; height:1px; background:var(--rule); margin-top:12px; } /* Lignes */ .fe-ingredients-card .fe-ingredients-list p{ display:grid; grid-template-columns:1fr auto; gap:16px; margin:0; padding:12px 0; border-top:1px solid var(--row-sep); font-size:16px; line-height:1.6; color:var(--fe-green); } .fe-ingredients-card .fe-ingredients-list p:first-child{ border-top:none; } /* Nom (gauche) / Quantité (droite) */ .fe-ingredients-card .fe-ingredients-list p > strong{ font-weight:600; } .fe-ingredients-card .fe-ingredients-list p > .qty{ white-space:nowrap; opacity:.95; } /* Tablette */ @media (max-width:991.98px){ .fe-ingredients-card{ --pad-x:24px; --pad-y:24px; --title-size:24px; } .fe-ingredients-card .fe-ingredients-list p{ font-size:15px; padding:10px 0; } } /* Mobile */ @media (max-width:767.98px){ .fe-ingredients-card{ --pad-x:20px; --pad-y:20px; --title-size:22px; border-radius:12px; } .fe-ingredients-card .fe-ingredients-list p{ gap:12px; } } /* === INGREDIENTS : garder UNE SEULE bordure (celle de la carte) === */ /* Force la bordure uniquement sur le conteneur .fe-ingredients-card */ .fe-ingredients-card{ --border:#45523e; /* vert */ --radius:12px; border:1px solid var(--border) !important; border-radius:var(--radius) !important; overflow:hidden; /* coins nets */ } /* TUE toutes les bordures/ombres internes posées par Elementor */ .fe-ingredients-card > .elementor-widget-wrap, .fe-ingredients-card > .e-con-inner, .fe-ingredients-card .elementor-element-populated, .fe-ingredients-card .elementor-widget-container, .fe-ingredients-card .elementor-column, .fe-ingredients-card .e-con{ border:none !important; box-shadow:none !important; outline:0 !important; background-clip: padding-box; /* évite un liseré sur arrondis */ } /* 1) La SEULE bordure : celle de la carte */ .fe-ingredients-card{ --border:#45523e; --radius:12px; border:1px solid var(--border) !important; border-radius:var(--radius) !important; overflow:hidden; /* coins nets */ } /* 2) Tuer toute bordure/outline/ombre interne (wrappers Elementor) */ .fe-ingredients-card > .elementor-widget-wrap, .fe-ingredients-card > .e-con-inner, .fe-ingredients-card .elementor-element-populated, .fe-ingredients-card .elementor-column, .fe-ingredients-card .elementor-container, .fe-ingredients-card .elementor-section, .fe-ingredients-card .elementor-widget, .fe-ingredients-card .elementor-widget-container, .fe-ingredients-card .e-con, .fe-ingredients-card .e-con-inner{ border:0 !important; outline:0 !important; box-shadow:none !important; background: transparent; /* évite l'effet de “panneau” */ } /* 3) Certains thèmes dessinent un cadre via des pseudo-éléments/overlays */ .fe-ingredients-card .elementor-background-overlay{ display:none !important; } .fe-ingredients-card .elementor-element::before, .fe-ingredients-card .elementor-element::after{ content:none !important; border:0 !important; box-shadow:none !important; } /* 4) On conserve les séparateurs des lignes (on les ré-affirme) */ .fe-ingredients-card .fe-ingredients-list p{ border-top:1px solid var(--row-sep, #e6e9e2) !important; } .fe-ingredients-card .fe-ingredients-list p:first-child{ border-top:none !important; } /* Supprime la bordure/arrondi/spacing de la "carte" imbriquée quand une .fe-ingredients-card contient une autre .fe-ingredients-card */ .fe-ingredients-card .fe-ingredients-card{ border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } /* Sécurité : neutralise les éventuels wrappers Elementor à l’intérieur */ .fe-ingredients-card .fe-ingredients-card > .elementor-widget-wrap, .fe-ingredients-card .fe-ingredients-card > .e-con-inner{ border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* === FE – Ingrédients : fond blanc, Ortica, pas de puces, pas de padding gauche === */ /* 1) Fond blanc + Ortica partout dans la carte */ .fe-ingredients-card{ background:#fff !important; color:#45523e; } .fe-ingredients-card, .fe-ingredients-card *{ font-family: var(--heading-font-family, "Ortica Light", serif) !important; } /* 2) Tuer les puces injectées par un style global (ex: .elementor-16145 .elementor-element.elementor-element-0dfffac p:before) */ .fe-ingredients-card .elementor-widget-text-editor p{ padding-left: 0 !important; /* enlève l'indentation faite pour la puce */ position: static !important; } .fe-ingredients-card .elementor-widget-text-editor p::before{ content: none !important; } /* 3) Si une liste