/* ==================================================== VAFFANGUSTO® BRANDING CSS V1.2 DESIGN SYSTEM GLOBAL SANS WOOCOMMERCE SANS FOOTER ==================================================== */ /* ================================================== 01 - VARIABLES DESIGN SYSTEM ================================================== */ :root { --vaf-red:#C63D2F; --vaf-green:#2F8A46; --vaf-black:#111111; --vaf-cream:#F6EFE4; --vaf-text:#2B2118; --vaf-white:#ffffff; --vaf-light-grey:#f7f7f7; --vaf-border:rgba(43,33,24,.12); --vaf-shadow-sm: 0 5px 15px rgba(17,17,17,.06); --vaf-shadow: 0 10px 30px rgba(17,17,17,.10); --vaf-shadow-hover: 0 18px 45px rgba(17,17,17,.15); --vaf-radius-sm:8px; --vaf-radius:16px; --vaf-radius-lg:24px; --vaf-transition: all .3s ease; --vaf-section-padding: clamp(50px,8vw,100px); } /* ================================================== 02 - RESET GLOBAL ================================================== */ ::selection { background:var(--vaf-red); color:var(--vaf-white); } img { max-width:100%; height:auto; } a { transition:var(--vaf-transition); } button, input, textarea, select { transition:var(--vaf-transition); } /* ================================================== 03 - BODY GLOBAL ================================================== */ body { background:var(--vaf-white); color:var(--vaf-text); line-height:1.6; overflow-x:hidden; } /* ================================================== 04 - TYPOGRAPHIE ================================================== */ body, button, input, textarea, select { font-family:'Inter',Arial,sans-serif; } h1, h2, h3, h4, h5, h6 { color:var(--vaf-black); font-family:'Poppins',Arial,sans-serif; font-weight:700; line-height:1.15; letter-spacing:-.02em; } h1 { font-size:clamp(2.2rem,5vw,4.5rem); } h2 { font-size:clamp(1.8rem,3vw,3rem); } h3 { font-size:clamp(1.3rem,2vw,2rem); } p { color:var(--vaf-text); } /* ================================================== 05 - LIENS ================================================== */ .entry-content a:not(.wp-element-button), .elementor-widget-text-editor a { color:var(--vaf-red); text-decoration:none; } .entry-content a:not(.wp-element-button):hover, .elementor-widget-text-editor a:hover { color:var(--vaf-green); } /* ================================================== 06 - CONTENEURS ================================================== */ .ast-container { max-width:1200px; } .vaf-section { padding-top:var(--vaf-section-padding); padding-bottom:var(--vaf-section-padding); } /* ================================================== 07 - FORMULAIRES GLOBAUX ================================================== */ input, textarea, select { border:1px solid var(--vaf-border); border-radius:var(--vaf-radius-sm); padding:14px 16px; background:var(--vaf-white); color:var(--vaf-text); } input:focus, textarea:focus, select:focus { border-color:var(--vaf-red); outline:none; box-shadow: 0 0 0 3px rgba(198,61,47,.12); } /* ================================================== 08 - ELEMENTS BRANDING ================================================== */ .vaf-badge, .badge-vegan { display:inline-flex; align-items:center; background:var(--vaf-green); color:#ffffff; padding:6px 14px; border-radius:50px; font-size:.85rem; font-weight:600; } .vaf-divider { width:60px; height:3px; background:var(--vaf-red); border-radius:10px; } /* ================================================== 09 - ELEMENTOR GLOBAL ================================================== */ .elementor-section { position:relative; overflow:hidden; } .elementor-container, .e-con { position:relative; } .elementor-widget { transition:var(--vaf-transition); } /* ================================================== 10 - BOUTONS PREMIUM ================================================== */ .elementor-button, .wp-element-button, .vfg-btn { background:var(--vaf-red); color:#ffffff!important; border:none; border-radius:50px; padding:14px 32px; font-family:'Poppins',Arial,sans-serif; font-weight:700; letter-spacing:.02em; transition:var(--vaf-transition); } /* ================================================== BOUTONS VAFFANGUSTO - ALIGNEMENT TEXTE ================================================== */ .vfg-btn { display:inline-flex; align-items:center; justify-content:center; color:#ffffff!important; } .vfg-btn:hover { color:#ffffff!important; } .elementor-button:hover, .wp-element-button:hover, .vfg-btn:hover { background:var(--vaf-green); color:#ffffff!important; transform:translateY(-3px); box-shadow:var(--vaf-shadow); } /* ================================================== BOUTON SECONDAIRE HOME - CORRECTION ================================================== */ .vaf-secondary-button { display:inline-flex!important; align-items:center; justify-content:center; padding:14px 32px!important; border-radius:50px!important; border:2px solid var(--vaf-red)!important; background:transparent!important; color:var(--vaf-red)!important; font-family:'Poppins',Arial,sans-serif; font-weight:700; text-decoration:none!important; transition:var(--vaf-transition); } .vaf-secondary-button:hover { background:var(--vaf-red)!important; color:#ffffff!important; } /* ================================================== BOUTON VOIR LA CARTE ================================================== */ .vfg-btn-outline { background:var(--vaf-red)!important; color:#ffffff!important; border:2px solid var(--vaf-red); } .vfg-btn-outline:hover { background:var(--vaf-green)!important; color:#ffffff!important; } /* ================================================== GROUPE BOUTONS HOME ================================================== */ .vfg-buttons { display:flex; align-items:center; gap:15px; flex-wrap:wrap; } @media(max-width:767px){ .vfg-buttons { flex-direction:column; align-items:stretch; } .vfg-buttons .vfg-btn, .vfg-buttons .vaf-secondary-button { width:100%; } } /* ================================================== 11 - TEXTE ELEMENTOR ================================================== */ .elementor-widget-text-editor p { line-height:1.8; } .elementor-widget-text-editor ul { padding-left:20px; } .elementor-widget-text-editor li { margin-bottom:8px; } /* ================================================== 12 - BLOCS SOMBRES ================================================== */ .vaf-dark, .vaf-card-dark, .vfg-dark { background:var(--vaf-black)!important; color:var(--vaf-cream); } /* Titres */ .vaf-dark h1, .vaf-dark h2, .vaf-dark h3, .vaf-dark h4, .vaf-card-dark h1, .vaf-card-dark h2, .vaf-card-dark h3, .vaf-card-dark h4, .vfg-dark h1, .vfg-dark h2, .vfg-dark h3, .vfg-dark h4 { color:#F6EFE4!important; } /* Textes */ .vaf-dark p, .vaf-card-dark p, .vfg-dark p, .vfg-dark li, .vfg-dark span, .vfg-dark div, .vaf-dark .elementor-widget-text-editor, .vaf-card-dark .elementor-widget-text-editor { color:#F6EFE4!important; } /* Texte important */ .vaf-dark strong, .vaf-card-dark strong, .vfg-dark strong { color:#ffffff!important; } /* Liens */ .vaf-dark a, .vaf-card-dark a, .vfg-dark a { color:#F6EFE4; } .vaf-dark a:hover, .vaf-card-dark a:hover, .vfg-dark a:hover { color:var(--vaf-red); } /* ================================================== 13 - CARTES PREMIUM ================================================== */ .vaf-card { background:#ffffff; border-radius:var(--vaf-radius); padding:25px; box-shadow:var(--vaf-shadow-sm); transition:var(--vaf-transition); } .vaf-card:hover { transform:translateY(-8px); box-shadow:var(--vaf-shadow-hover); } .vaf-card-dark { border-radius:var(--vaf-radius); padding:25px; } /* ================================================== 14 - IMAGES PREMIUM ================================================== */ .elementor-widget-image img { border-radius:var(--vaf-radius); transition:var(--vaf-transition); } .elementor-widget-image:hover img { transform:scale(1.03); box-shadow:var(--vaf-shadow); } .vaf-image-rounded img { border-radius:var(--vaf-radius-lg); } /* ================================================== IMAGES PAGES INTERNES VAF ================================================== */ .vfg-img, .vfg-story-photo img, .vfg-image-frame img { border-radius:var(--vaf-radius-lg); overflow:hidden; transition:var(--vaf-transition); } .vfg-img:hover, .vfg-story-photo img:hover, .vfg-image-frame img:hover { transform:scale(1.03); box-shadow:var(--vaf-shadow); } /* ================================================== 15 - EFFETS ================================================== */ .vaf-hover-up:hover { transform:translateY(-5px); } .vaf-fade { animation:vafFade .6s ease both; } @keyframes vafFade { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } } /* ================================================== 16 - RESPONSIVE ================================================== */ @media(max-width:1024px){ .elementor-button, .wp-element-button { padding:13px 26px; } } @media(max-width:767px){ body { overflow-x:hidden; } .elementor-section { padding-left:20px; padding-right:20px; } h1 { font-size:2.2rem; } h2 { font-size:1.8rem; } h3 { font-size:1.4rem; } .elementor-button, .wp-element-button, .vfg-btn { width:100%; text-align:center; } } /* ================================================== 17 - PAGES INTERNES ================================================== */ /* ================================================== PAGE LA CARTE ================================================== */ .vfg-page-hero { padding-top:70px; padding-bottom:40px; } .vfg-page-intro { max-width:750px; margin:25px auto 0; font-size:1.2rem; line-height:1.8; } .vfg-menu-wrapper { max-width:900px; margin:40px auto; } .vfg-menu-image { width:100%; height:auto; display:block; border-radius:var(--vaf-radius-lg); box-shadow:var(--vaf-shadow); transition:var(--vaf-transition); } .vfg-menu-image:hover { transform:scale(1.02); box-shadow:var(--vaf-shadow-hover); } @media(max-width:767px){ .vfg-page-intro { font-size:1rem; } .vfg-menu-wrapper { margin:30px auto; } } /* ================================================== PAGE OÙ NOUS TROUVER ================================================== */ .vfg-page-location .vfg-intro-text{ flex:0 0 55%; max-width:55%; } .vfg-page-location .vfg-col:last-child{ flex:0 0 45%; max-width:45%; } .vfg-page-location .vfg-image-frame{ position:relative; left:-60px; } /* ================================================== PAGE PIZZA 24/24 ================================================== */ .vfg-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-top:40px; } .vfg-card-dark { text-align:center; } @media(max-width:921px){ .vfg-cards { grid-template-columns:1fr; } } /* ===================================================== PAGE PIZZA 24/24 VERSION STABLE TEXTE + IMAGE ===================================================== */ .vfg-page-pizza-2424 .vfg-grid { display:grid !important; grid-template-columns:65% 35% !important; gap:30px; align-items:center; } .vfg-page-pizza-2424 .vfg-grid .vfg-col { width:auto !important; max-width:none !important; } /* CENTRAGE IMAGE UNIQUEMENT */ .vfg-page-pizza-2424 .vfg-grid .vfg-col:last-child { text-align:center; } .vfg-page-pizza-2424 .vfg-image-frame { display:inline-block; width:380px; max-width:100%; } .vfg-page-pizza-2424 .vfg-image-frame img { width:100%; height:auto; display:block; } /* ===================================================== PAGE PIZZA 24/24 CENTRAGE IMAGE SANS IMPACT TEXTE ===================================================== */ .vfg-page-pizza-2424 .vfg-grid .vfg-col:last-child { display:flex !important; justify-content:center !important; align-items:center !important; } .vfg-page-pizza-2424 .vfg-grid .vfg-col:last-child .vfg-image-frame { width:380px; max-width:100%; margin:0 auto !important; } .vfg-page-pizza-2424 .vfg-grid .vfg-col:last-child .vfg-img { display:block; width:100%; margin:0 auto !important; } /* ================================================== 18 - FINITIONS ================================================== */ html { scroll-behavior:smooth; } .vaf-card, .elementor-widget-image { will-change:transform; } /*================================================== PAGES INTERNES ==================================================*/ .vfg-page-hero{ padding-top:70px; padding-bottom:40px; } .vfg-page-intro{ max-width:700px; margin:20px auto 0; font-size:1.2rem; } .vfg-story-photo img{ min-height:500px; object-fit:cover; } .vfg-story-quote{ max-width:850px; margin:auto; font-size:1.15rem; line-height:2; } .vfg-story-end{ max-width:850px; margin:auto; text-align:center; } .vfg-story-end .vfg-btn{ margin-top:35px; } @media(max-width:920px){ .vfg-story-photo img{ min-height:auto; } .vfg-story-end{ text-align:left; } } /* ================================================== CORRECTION BOUTONS PAGES INTERNES ================================================== */ .entry-content a.vfg-btn, .entry-content a.vfg-btn:visited, .entry-content a.vfg-btn:hover, .vfg-btn, .vfg-btn:visited, .vfg-btn:hover { color:#ffffff!important; text-decoration:none!important; } .entry-content a.vfg-btn:hover, .vfg-btn:hover { background:var(--vaf-green)!important; color:#ffffff!important; } /* ================================================== INTRO BOUTIQUE WOOCOMMERCE ================================================== */ .woocommerce-shop .vfg-shop-intro { width:100%; max-width:1100px; margin:0 auto 25px; padding:0 20px; box-sizing:border-box; text-align:center; } .woocommerce-shop .vfg-shop-tagline { margin:0 0 14px; color:var(--vaf-red)!important; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(1.15rem,2vw,1.5rem); font-weight:700; } .woocommerce-shop .vfg-shop-text { width:100%; max-width:1100px; margin:0 auto 12px; font-size:1rem; line-height:1.6; } .woocommerce-shop .vfg-shop-final { margin:10px auto 0; font-family:'Poppins',Arial,sans-serif; font-size:1rem; font-style:italic; font-weight:600; } @media(max-width:767px){ .woocommerce-shop .vfg-shop-intro { padding:0 15px; margin-bottom:22px; } } /* Correction alignement texte boutons Vaffangusto */ .vfg-btn { line-height:1 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* Modification couleur titre page interne la carte Vaffangusto */ .vfg-page-hero .vfg-title, .vfg-page-hero .vfg-page-intro { color:#F6EFE4 !important; text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.45); } /* ==================================================== FIN VAFFANGUSTO® BRANDING CSS V1.2 ==================================================== */ /* ================================================== VFG — PAGES INTERNES — CHARBON PREMIUM ================================================== */ /* ================================================== PAGE LA CARTE Alternance : noir / charbon / noir ================================================== */ /* LA CARTE — FOND NOIR */ .vfg-page > .vfg-page-hero { background:#111111 !important; color:#ffffff !important; } /* Titre LA CARTE */ .vfg-page > .vfg-page-hero .vfg-title { color:#F6EFE4 !important; -webkit-text-fill-color:#F6EFE4 !important; } /* Introduction LA CARTE */ .vfg-page > .vfg-page-hero .vfg-page-intro { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow:0 2px 4px rgba(0,0,0,.75) !important; } /* ================================================== NOS PIZZAS — FOND CHARBON ================================================== */ .vfg-page > section.vfg-section:not(.vfg-page-hero):not(.vfg-dark) { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.035) 0%, transparent 55%), #242424 !important; color:#ffffff !important; } /* Titre NOS PIZZAS */ .vfg-page > section.vfg-section:not(.vfg-page-hero):not(.vfg-dark) .vfg-title { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow: 0 3px 6px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.90) !important; } /* Paragraphe NOS PIZZAS */ .vfg-page > section.vfg-section:not(.vfg-page-hero):not(.vfg-dark) .vfg-text { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow:0 2px 4px rgba(0,0,0,.75) !important; } /* ================================================== BLOC ENGAGEMENTS — NOIR .vfg-dark existant conservé ================================================== */ .vfg-page > section.vfg-dark { background:#111111 !important; } /* ================================================== FIN PAGES INTERNES ================================================== */ /* ================================================== LA CARTE — VRAI PARAGRAPHE INTRO ================================================== */ .vfg-page > .vfg-page-hero .vfg-center > p:not(.vfg-page-intro) { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow:0 2px 4px rgba(0,0,0,.75) !important; } /* ================================================== PAGES INTERNES — SECTIONS JOINTIVES Même rendu que la page Accueil ================================================== */ .vfg-page > section { margin-top: 0 !important; margin-bottom: 0 !important; } /* PAGES INTERNES — SECTIONS JOINTIVES */ .vfg-page > section { margin-top: 0 !important; margin-bottom: 0 !important; } /* PAGES INTERNES — SECTIONS JOINTIVES */ .vfg-page .vfg-section { margin: 0 !important; } /* PAGES INTERNES — SUPPRESSION ESPACE DU PARAGRAPHE */ .vfg-page p { margin: 0 !important; } /* HISTOIRE — TRAITS SOUS LES 3 DERNIERS TITRES */ .vfg-story > .vfg-section:nth-of-type(3) .vfg-title, .vfg-story > .vfg-section:nth-of-type(4) .vfg-title, .vfg-story > .vfg-section:nth-of-type(5) .vfg-title { margin-bottom: 10px !important; } /* HISTOIRE — SUPPRESSION MARGE DES P DANS LES TITRES */ .vfg-story .vfg-title p { margin: 0 !important; } /* ================================================== PAGES INTERNES — ALTERNANCE NOIR / CHARBON ================================================== */ /* VFG — BOUTIQUE — FOND CHARBON */ body.woocommerce-shop { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.035) 0%, transparent 55%), #242424 !important; } 1. NORMALISATION DES SECTIONS ========================================================= ========================================================= */ /* On force toutes les sections Vaffangusto à ne posséder AUCUNE marge extérieure. */ .vfg-home .vfg-section, .vfg-page .vfg-section, .vfg-story .vfg-section, .vfg-page-pizza-2424 .vfg-section { margin: 0 !important; border: 0 !important; display: flow-root !important; } /* Aucun espace entre deux sections consécutives. */ .vfg-home .vfg-section + .vfg-section, .vfg-page .vfg-section + .vfg-section, .vfg-story .vfg-section + .vfg-section, .vfg-page-pizza-2424 .vfg-section + .vfg-section { margin-top: 0 !important; } /* Les conteneurs eux-mêmes ne doivent pas créer de marge extérieure. */ .vfg-home .vfg-section > .vfg-container, .vfg-page .vfg-section > .vfg-container, .vfg-story .vfg-section > .vfg-container, .vfg-page-pizza-2424 .vfg-section > .vfg-container { margin-top: 0 !important; margin-bottom: 0 !important; } /* Neutralisation des marges parasites du premier et du dernier enfant. Le padding de la section reste intact. */ .vfg-home .vfg-section > .vfg-container > :first-child, .vfg-page .vfg-section > .vfg-container > :first-child, .vfg-story .vfg-section > .vfg-container > :first-child, .vfg-page-pizza-2424 .vfg-section > .vfg-container > :first-child { margin-top: 0 !important; } .vfg-home .vfg-section > .vfg-container > :last-child, .vfg-page .vfg-section > .vfg-container > :last-child, .vfg-story .vfg-section > .vfg-container > :last-child, .vfg-page-pizza-2424 .vfg-section > .vfg-container > :last-child { margin-bottom: 0 !important; } /* Empêche les marges des éléments internes de traverser les limites des sections. */ .vfg-home .vfg-section, .vfg-page .vfg-section, .vfg-story .vfg-section, .vfg-page-pizza-2424 .vfg-section { overflow: hidden; } /* ========================================================= ========================================================= 2. COMMANDER ========================================================= ========================================================= */ /* ========================================================= INTRO ========================================================= */ body.woocommerce-shop .vfg-shop-intro { padding: 30px 20px; color: #ffffff !important; } body.woocommerce-shop .vfg-shop-intro .vfg-shop-tagline, body.woocommerce-shop .vfg-shop-intro .vfg-shop-text { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.95); } /* ========================================================= TITRE ========================================================= */ body.woocommerce-shop .woocommerce-products-header__title, body.woocommerce-shop .page-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.90); } /* ========================================================= TRAIT ITALIEN ========================================================= */ body.woocommerce-shop .woocommerce-products-header__title::after, body.woocommerce-shop .page-title::after { content: ""; display: block; width: 70px; height: 4px; margin: 10px auto 0; background: linear-gradient( to right, #009246 0%, #009246 33.33%, #ffffff 33.33%, #ffffff 66.66%, #CE2B37 66.66%, #CE2B37 100% ); border-radius: 3px; } /* ========================================================= TITRES WORDPRESS INUTILES ========================================================= */ .page .entry-title, .page .page-title { display: none !important; } /* ========================================================= CARTES COMMANDER ========================================================= */ body.woocommerce-shop ul.products li.product.product-category { position: relative; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75), 0 3px 8px rgba(0, 0, 0, 0.50); margin-bottom: 22px; transition: transform 0.20s ease, box-shadow 0.20s ease; } body.woocommerce-shop ul.products li.product.product-category > a { position: relative; display: block; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 8px; overflow: hidden; background: transparent !important; box-shadow: none !important; text-decoration: none; } /* ========================================================= RAYURES ========================================================= */ body.woocommerce-shop ul.products li.product.product-category > a::before { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background: repeating-linear-gradient( to right, #008C45 0, #008C45 18px, #ffffff 18px, #ffffff 36px ); opacity: 0.88; z-index: 1; transition: background 0.20s ease, opacity 0.20s ease; } /* ========================================================= VOILE ========================================================= */ body.woocommerce-shop ul.products li.product.product-category > a::after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 2; transition: background 0.20s ease; } /* ========================================================= IMAGE ========================================================= */ body.woocommerce-shop ul.products li.product.product-category > a img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 !important; padding: 0 !important; opacity: 0 !important; border: 0 !important; } /* ========================================================= TITRE CARTE ========================================================= */ body.woocommerce-shop ul.products li.product.product-category .woocommerce-loop-category__title { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 3; width: 100%; margin: 0 !important; padding: 10px !important; background: transparent !important; color: #ffffff !important; font-size: 1.05rem; font-weight: 800; line-height: 1.25; text-align: center; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.95); } /* ========================================================= NOMBRE ========================================================= */ body.woocommerce-shop ul.products li.product.product-category .woocommerce-loop-category__title mark { display: none !important; } /* ========================================================= TRAIT TRICOLORE ========================================================= */ body.woocommerce-shop ul.products li.product.product-category .woocommerce-loop-category__title::after { content: ""; display: block; width: 55px; height: 4px; margin: 9px auto 0; background: linear-gradient( to right, #009246 0%, #009246 33.33%, #ffffff 33.33%, #ffffff 66.66%, #CE2B37 66.66%, #CE2B37 100% ); border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); } /* ========================================================= HOVER ========================================================= */ body.woocommerce-shop ul.products li.product.product-category:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.80), 0 5px 10px rgba(0, 0, 0, 0.55); } body.woocommerce-shop ul.products li.product.product-category:hover > a::before { background: linear-gradient( to right, #009246 0%, #009246 33.33%, #ffffff 33.33%, #ffffff 66.66%, #CE2B37 66.66%, #CE2B37 100% ); opacity: 0.88; } body.woocommerce-shop ul.products li.product.product-category:hover > a::after { background: rgba(0, 0, 0, 0.38); } /* ========================================================= ========================================================= 3. ACCUEIL 4. LA CARTE ========================================================= ========================================================= */ /* ========================================================= BLOCS CHARBON / NOIR ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-section { margin: 0 !important; background: #242424 !important; color: #ffffff !important; } div.vfg-page:not(.vfg-page-location) .vfg-section.vfg-dark { background: #000000 !important; } /* ========================================================= PARAGRAPHES ========================================================= */ div.vfg-page:not(.vfg-page-location) p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.90); } /* ========================================================= INTRO ========================================================= */ div.vfg-page:not(.vfg-page-location) p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } /* ========================================================= TITRES ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.95); } div.vfg-page:not(.vfg-page-location) .vfg-title::after { content: ""; display: block; width: 58px; height: 3px; margin: 11px auto 0; background: #D4AF37; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); } div.vfg-page:not(.vfg-page-location) .vfg-grid .vfg-col .vfg-title::after { margin-left: 0; margin-right: 0; } /* ========================================================= IMAGES ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-image-frame { border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); } div.vfg-page:not(.vfg-page-location) .vfg-image-frame img { display: block; width: 100%; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65); } /* ========================================================= BOUTONS ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-btn { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= ========================================================= 5. NOTRE HISTOIRE ========================================================= ========================================================= */ /* IMPORTANT : Ici on force le charbon EXACTEMENT à #242424. Aucun rgba() Aucun gradient Aucune transparence. */ div.vfg-story .vfg-section { margin: 0 !important; background: #242424 !important; background-image: none !important; opacity: 1 !important; color: #ffffff !important; display: flow-root !important; } /* ========================================================= BLOCS NOIRS ========================================================= */ div.vfg-story .vfg-section.vfg-dark { background: #000000 !important; background-image: none !important; opacity: 1 !important; } /* ========================================================= HERO ========================================================= */ div.vfg-story .vfg-page-hero { background: #242424 !important; background-image: none !important; opacity: 1 !important; } /* ========================================================= PARAGRAPHES ========================================================= */ div.vfg-story p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.90); } /* ========================================================= INTRO ========================================================= */ div.vfg-story p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } /* ========================================================= TEXTES ========================================================= */ div.vfg-story p.vfg-text, div.vfg-story p.vfg-story-quote { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= TEXTE IMPORTANT ========================================================= */ div.vfg-story p.vfg-story-quote strong { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.90); } /* ========================================================= TITRES ========================================================= */ div.vfg-story .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.95); } /* ========================================================= TRAITS DORÉS ========================================================= */ div.vfg-story .vfg-title::after { content: ""; display: block; width: 58px; height: 3px; margin: 11px auto 0; background: #D4AF37; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); } div.vfg-story .vfg-grid .vfg-col .vfg-title::after { margin-left: 0; margin-right: 0; } /* ========================================================= IMAGES ========================================================= */ div.vfg-story .vfg-story-photo img, div.vfg-story .vfg-image-frame img { display: block; width: 100%; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65); } div.vfg-story .vfg-image-frame { border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); } div.vfg-story .vfg-btn { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= ========================================================= 6. PIZZA 24/24 ========================================================= ========================================================= */ /* ========================================================= BLOCS ========================================================= */ div.vfg-page-pizza-2424 .vfg-section { margin: 0 !important; background: #242424 !important; color: #ffffff !important; display: flow-root !important; } div.vfg-page-pizza-2424 .vfg-section.vfg-dark { background: #000000 !important; } /* ========================================================= HERO ========================================================= */ div.vfg-page-pizza-2424 .vfg-page-hero { background: #242424 !important; } /* ========================================================= PARAGRAPHES ========================================================= */ div.vfg-page-pizza-2424 p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.90); } div.vfg-page-pizza-2424 p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } /* ========================================================= TITRES ========================================================= */ div.vfg-page-pizza-2424 .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.95); } div.vfg-page-pizza-2424 .vfg-title::after { content: ""; display: block; width: 58px; height: 3px; margin: 11px auto 0; background: #D4AF37; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); } /* ========================================================= CARTES ========================================================= */ div.vfg-page-pizza-2424 .vfg-card-dark { color: #ffffff !important; } div.vfg-page-pizza-2424 .vfg-card-dark h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } div.vfg-page-pizza-2424 .vfg-card-dark p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } /* ========================================================= IMAGES ========================================================= */ div.vfg-page-pizza-2424 .vfg-image-frame { border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); } div.vfg-page-pizza-2424 .vfg-image-frame img { display: block; width: 100%; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65); } div.vfg-page-pizza-2424 .vfg-btn { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= ========================================================= 7. ÉVÉNEMENTS ========================================================= ========================================================= */ /* ========================================================= SECTIONS ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-section { margin: 0 !important; display: flow-root !important; background: #242424 !important; color: #ffffff !important; } div.vfg-page:not(.vfg-page-location) .vfg-section.vfg-dark { background: #000000 !important; } /* ========================================================= PARAGRAPHES ========================================================= */ div.vfg-page:not(.vfg-page-location) p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.90); } /* ========================================================= INTRO ========================================================= */ div.vfg-page:not(.vfg-page-location) p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } /* ========================================================= TITRES ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.95); } div.vfg-page:not(.vfg-page-location) .vfg-title::after { content: ""; display: block; width: 58px; height: 3px; margin: 11px auto 0; background: #D4AF37; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); } div.vfg-page:not(.vfg-page-location) .vfg-grid .vfg-col .vfg-title::after { margin-left: 0; margin-right: 0; } /* ========================================================= UN PROJET ? — GAUCHE ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-order-box .vfg-title { text-align: left !important; } div.vfg-page:not(.vfg-page-location) .vfg-order-box .vfg-title::after { margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= CARTES ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-card h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } div.vfg-page:not(.vfg-page-location) .vfg-card p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } /* ========================================================= IMAGES ========================================================= */ div.vfg-page:not(.vfg-page-location) .vfg-image-frame { border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); } div.vfg-page:not(.vfg-page-location) .vfg-image-frame img { display: block; width: 100%; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65); } div.vfg-page:not(.vfg-page-location) .vfg-btn { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= ========================================================= 8. OÙ NOUS TROUVER ========================================================= ========================================================= */ /* ========================================================= SECTIONS ========================================================= */ div.vfg-page-location .vfg-section { margin: 0 !important; background: #242424 !important; color: #ffffff !important; display: flow-root !important; } div.vfg-page-location .vfg-section.vfg-dark { background: #000000 !important; } /* ========================================================= PARAGRAPHES ========================================================= */ div.vfg-page-location p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.90); } /* ========================================================= INTRO ========================================================= */ div.vfg-page-location p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.90); } /* ========================================================= TITRES ========================================================= */ div.vfg-page-location .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.90), 0 1px 2px rgba(0, 0, 0, 0.95); } div.vfg-page-location .vfg-title::after { content: ""; display: block; width: 58px; height: 3px; margin: 11px auto 0; background: #D4AF37; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); } div.vfg-page-location .vfg-grid .vfg-col .vfg-title::after { margin-left: 0; margin-right: 0; } /* ========================================================= ENVIE D'UNE PIZZA ? — GAUCHE ========================================================= */ div.vfg-page-location .vfg-order-box .vfg-title { text-align: left !important; } div.vfg-page-location .vfg-order-box .vfg-title::after { margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= CARTE INFORMATIONS ========================================================= */ div.vfg-page-location .vfg-card { background: #ffffff !important; color: #111111 !important; border: 1px solid rgba(212, 175, 55, 0.55) !important; border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.20); } div.vfg-page-location .vfg-card h3 { color: #111111 !important; -webkit-text-fill-color: #111111 !important; text-shadow: none !important; } div.vfg-page-location .vfg-card p { color: #111111 !important; -webkit-text-fill-color: #111111 !important; text-shadow: none !important; } /* ========================================================= IMAGES ========================================================= */ div.vfg-page-location .vfg-image-frame { border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); } div.vfg-page-location .vfg-image-frame img { display: block; width: 100%; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65); } /* ========================================================= GOOGLE MAPS ========================================================= */ div.vfg-page-location .vfg-map iframe { display: block; max-width: 100%; border: 0 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65); } /* ========================================================= BOUTONS ========================================================= */ div.vfg-page-location .vfg-btn { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= ========================================================= 9. RÈGLES COMMUNES ANTI-ESPACEMENT ========================================================= ========================================================= */ /* RÈGLE FINALE. Elle passe volontairement à la fin pour écraser les éventuelles règles précédentes d'Astra ou du CSS. */ .vfg-home section.vfg-section, .vfg-page section.vfg-section, .vfg-story section.vfg-section, .vfg-page-pizza-2424 section.vfg-section { margin-top: 0 !important; margin-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; } /* Les sections adjacentes sont réellement collées. */ .vfg-home section.vfg-section + section.vfg-section, .vfg-page section.vfg-section + section.vfg-section, .vfg-story section.vfg-section + section.vfg-section, .vfg-page-pizza-2424 section.vfg-section + section.vfg-section { margin-top: 0 !important; } /* Aucun espace provenant du wrapper immédiat. */ .vfg-home section.vfg-section > .vfg-container, .vfg-page section.vfg-section > .vfg-container, .vfg-story section.vfg-section > .vfg-container, .vfg-page-pizza-2424 section.vfg-section > .vfg-container { margin-top: 0 !important; margin-bottom: 0 !important; } /* Les marges verticales des derniers enfants sont neutralisées afin qu'elles ne créent pas de bande entre les deux couleurs. */ .vfg-home section.vfg-section > .vfg-container > :last-child, .vfg-page section.vfg-section > .vfg-container > :last-child, .vfg-story section.vfg-section > .vfg-container > :last-child, .vfg-page-pizza-2424 section.vfg-section > .vfg-container > :last-child { margin-bottom: 0 !important; } /* Même protection pour les structures centrées. */ .vfg-home section.vfg-section .vfg-center:last-child, .vfg-page section.vfg-section .vfg-center:last-child, .vfg-story section.vfg-section .vfg-center:last-child, .vfg-page-pizza-2424 section.vfg-section .vfg-center:last-child { margin-bottom: 0 !important; } /* ========================================================= ========================================================= 10. MOBILE ========================================================= ========================================================= */ @media (max-width: 768px) { /* ===================================================== COMMANDER ===================================================== */ body.home, body.woocommerce-shop { background-attachment: scroll !important; background-position: center center !important; } body.woocommerce-shop .vfg-shop-intro { padding: 25px 15px; } body.woocommerce-shop .vfg-shop-intro .vfg-shop-tagline { font-size: 1.1rem; } body.woocommerce-shop .vfg-shop-intro .vfg-shop-text { font-size: 1rem; line-height: 1.65; } body.woocommerce-shop ul.products li.product.product-category .woocommerce-loop-category__title { font-size: 0.95rem; } body.woocommerce-shop ul.products li.product.product-category { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.70); } /* ===================================================== ACCUEIL ===================================================== */ div.vfg-home p.vfg-text, div.vfg-home .vfg-location-box p, div.vfg-home .vfg-order-box p, div.vfg-home .vfg-seo-content p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-home .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-home .vfg-title::after { width: 50px; height: 3px; margin-top: 9px; } /* VIGNETTES */ div.vfg-home .vfg-engagements .vfg-card { background: repeating-linear-gradient( 90deg, #2F8A46 0, #2F8A46 22px, #FFFFFF 22px, #FFFFFF 44px ) !important; } div.vfg-home .vfg-engagements .vfg-card p { font-size: 0.95rem; line-height: 1.5; } /* ALORS */ div.vfg-home .vfg-order-box .vfg-title { text-align: left !important; } div.vfg-home .vfg-order-box .vfg-title::after { margin-left: 0 !important; margin-right: 0 !important; } /* ===================================================== LA CARTE / ÉVÉNEMENTS ===================================================== */ div.vfg-page p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-page p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } div.vfg-page .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-page .vfg-title::after { width: 50px; height: 3px; margin-top: 9px; } /* UN PROJET */ div.vfg-page:not(.vfg-page-location) .vfg-order-box .vfg-title { text-align: left !important; } div.vfg-page:not(.vfg-page-location) .vfg-order-box .vfg-title::after { margin-left: 0 !important; margin-right: 0 !important; } /* ===================================================== NOTRE HISTOIRE ===================================================== */ div.vfg-story .vfg-section { background: #242424 !important; background-image: none !important; opacity: 1 !important; } div.vfg-story .vfg-section.vfg-dark { background: #000000 !important; background-image: none !important; opacity: 1 !important; } div.vfg-story p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-story p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } div.vfg-story .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-story .vfg-title::after { width: 50px; height: 3px; margin-top: 9px; } /* ===================================================== PIZZA 24/24 ===================================================== */ div.vfg-page-pizza-2424 p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-page-pizza-2424 p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } div.vfg-page-pizza-2424 .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-page-pizza-2424 .vfg-title::after { width: 50px; height: 3px; margin-top: 9px; } /* ===================================================== OÙ NOUS TROUVER ===================================================== */ div.vfg-page-location p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-page-location p.vfg-page-intro { color: #D4AF37 !important; -webkit-text-fill-color: #D4AF37 !important; } div.vfg-page-location .vfg-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } div.vfg-page-location .vfg-title::after { width: 50px; height: 3px; margin-top: 9px; } /* ENVIE D'UNE PIZZA */ div.vfg-page-location .vfg-order-box .vfg-title { text-align: left !important; } div.vfg-page-location .vfg-order-box .vfg-title::after { margin-left: 0 !important; margin-right: 0 !important; } /* CARTE INFORMATIONS */ div.vfg-page-location .vfg-card { background: #ffffff !important; color: #111111 !important; } div.vfg-page-location .vfg-card h3, div.vfg-page-location .vfg-card p { color: #111111 !important; -webkit-text-fill-color: #111111 !important; text-shadow: none !important; } } /* Bouton WooCommerce "Retour à la boutique" */ .woocommerce a.button.wc-backward, .woocommerce a.button.wc-backward:visited { color: #ffffff !important; background-color: #e30613 !important; text-indent: 0 !important; font-size: 16px !important; opacity: 1 !important; visibility: visible !important; } .woocommerce a.button.wc-backward:hover, .woocommerce a.button.wc-backward:focus { color: #ffffff !important; } /* VFG — PAGES INTERNES — FOND IDENTIQUE À L'ACCUEIL */ body:not(.home):not(.woocommerce-shop) { background: linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)), url("https://vafangusto.fr/wp-content/uploads/2026/08/bg-commande.jpg") center center / cover no-repeat fixed !important; } @media (max-width:768px) { body:not(.home):not(.woocommerce-shop) { background-attachment:scroll !important; background-position:center center !important; } } /* VFG — PAGES INTERNES — ALTERNANCE NOIR / CHARBON */ .vfg-page > .vfg-section:nth-of-type(odd) { background:#000000 !important; } .vfg-page > .vfg-section:nth-of-type(even) { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 38%, transparent 65%), linear-gradient( to bottom, #191919 0%, #242424 20%, #242424 80%, #191919 100% ) !important; color:#ffffff !important; } /* VFG — PAGES INTERNES — ALTERNANCE NOIR / CHARBON — PRIORITÉ */ .vfg-page > section.vfg-section:nth-of-type(odd):not(.vfg-dark) { background:#000000 !important; } .vfg-page > section.vfg-section:nth-of-type(even):not(.vfg-dark) { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 38%, transparent 65%), linear-gradient( to bottom, #191919 0%, #242424 20%, #242424 80%, #191919 100% ) !important; color:#ffffff !important; } /* VFG — NOTRE HISTOIRE — ALTERNANCE IDENTIQUE AUX AUTRES PAGES */ div.vfg-story > section.vfg-section:nth-of-type(odd):not(.vfg-dark):not(.vfg-page-hero) { background:#000000 !important; background-image:none !important; } div.vfg-story > section.vfg-section:nth-of-type(even):not(.vfg-dark):not(.vfg-page-hero) { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 38%, transparent 65%), linear-gradient( to bottom, #191919 0%, #242424 20%, #242424 80%, #191919 100% ) !important; color:#ffffff !important; } /* VFG — NOTRE HISTOIRE — PREMIÈRE SECTION NOIRE */ div.vfg-story > section.vfg-page-hero { background:#000000 !important; background-image:none !important; } /* VFG — NOTRE HISTOIRE — PREMIÈRE IMAGE */ div.vfg-story > section.vfg-section:nth-of-type(2) .vfg-image-frame, div.vfg-story > section.vfg-section:nth-of-type(2) .vfg-image-frame img { border-radius:0 !important; } div.vfg-story > section.vfg-section:nth-of-type(2) .vfg-image-frame { border:1px solid rgba(212,175,55,.35) !important; box-shadow:0 10px 28px rgba(0,0,0,.55) !important; } /* VFG — NOTRE HISTOIRE — PHOTO FONDATEURS */ div.vfg-story .vfg-story-photo { border:1px solid rgba(212,175,55,.35) !important; border-radius:0 !important; box-shadow:0 10px 28px rgba(0,0,0,.55) !important; overflow:hidden; } div.vfg-story .vfg-story-photo img { border-radius:0 !important; box-shadow:0 12px 30px rgba(0,0,0,.65) !important; } /* TITRE BOUTIQUE WOOCOMMERCE */ .woocommerce-shop h1.woocommerce-products-header__title.page-title { font-family:'Cormorant Garamond',Georgia,serif !important; } /* CENTRAGE TITRE BOUTIQUE WOOCOMMERCE */ .woocommerce-shop h1.woocommerce-products-header__title.page-title { text-align:center !important; } /* ================================================== INTRO BOUTIQUE — VERSION PREMIUM ================================================== */ .woocommerce-shop .vfg-shop-intro { max-width:1100px; margin:0 auto 35px; padding:8px 20px 0; text-align:center; } .woocommerce-shop .vfg-shop-tagline { margin:0; color:#ffffff!important; font-family:'Cormorant Garamond',Georgia,serif!important; font-size:clamp(2rem,4vw,3.2rem); font-weight:600; line-height:1.05; letter-spacing:.01em; } .woocommerce-shop .vfg-shop-tagline span { color:#D4AF37; } .woocommerce-shop .vfg-shop-divider { width:70px; height:1px; margin:18px auto 20px; background:#D4AF37; opacity:.75; } .woocommerce-shop .vfg-shop-text { max-width:820px; margin:0 auto 22px; color:#ffffff; font-family:'Inter',Arial,sans-serif; font-size:1rem; line-height:1.7; font-weight:400; } .woocommerce-shop .vfg-shop-text strong { color:#ffffff; font-weight:700; } .woocommerce-shop .vfg-shop-final { display:flex; align-items:center; justify-content:center; gap:10px; margin:0; color:#C63D2F!important; font-family:'Cormorant Garamond',Georgia,serif!important; font-size:clamp(1.35rem,2.4vw,1.8rem); font-weight:600; line-height:1.3; } .woocommerce-shop .vfg-shop-picto { position:relative; display:inline-block; width:18px; height:18px; border:1.5px solid #D4AF37; border-radius:50%; flex:0 0 18px; } .woocommerce-shop .vfg-shop-picto::after { content:""; position:absolute; left:3px; right:3px; top:8px; height:1px; background:#D4AF37; transform:rotate(-45deg); } @media (max-width:600px) { .woocommerce-shop .vfg-shop-intro { margin-bottom:25px; padding:5px 15px 0; } .woocommerce-shop .vfg-shop-tagline { font-size:2rem; line-height:1.05; } .woocommerce-shop .vfg-shop-divider { margin:15px auto 17px; } .woocommerce-shop .vfg-shop-text { font-size:.94rem; line-height:1.6; } .woocommerce-shop .vfg-shop-final { font-size:1.4rem; } } /* ================================================== PICTO PIZZA — VERSION PREMIUM ================================================== */ .woocommerce-shop .vfg-shop-picto { position:relative; display:inline-block; width:22px; height:22px; border:none; border-radius:0; background:#D4AF37; clip-path:polygon(0 0, 100% 50%, 0 100%); flex:0 0 22px; transform:rotate(0deg); } .woocommerce-shop .vfg-shop-picto::before { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:#C63D2F; left:6px; top:5px; box-shadow: 5px 7px 0 #C63D2F, 2px 12px 0 #C63D2F; } .woocommerce-shop .vfg-shop-picto::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:#8E6D18; } @media (max-width:600px) { .woocommerce-shop .vfg-shop-picto { width:19px; height:19px; flex-basis:19px; } } /* RETRAIT DU PICTO */ .woocommerce-shop .vfg-shop-picto { display:none !important; } .woocommerce-shop .vfg-shop-final { gap:0; } /* ================================================== CATÉGORIES PIZZAS — FOND CHARBON + IMAGE ================================================== */ body.woocommerce.archive:not(.woocommerce-shop) { background: linear-gradient( to bottom, rgba(17,17,17,.94) 0%, rgba(17,17,17,.97) 45%, rgba(17,17,17,.99) 100% ), url("https://vafangusto.fr/wp-content/uploads/2026/08/bg-commande.jpg") center top / cover fixed no-repeat !important; } body.woocommerce.archive:not(.woocommerce-shop) .ast-woocommerce-container { background:transparent !important; } /* TITRE DES CATÉGORIES */ body.woocommerce.archive:not(.woocommerce-shop) .woocommerce-products-header__title.page-title { font-family:'Cormorant Garamond',Georgia,serif !important; text-align:center !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow: 0 3px 6px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.90); } /* ================================================== DESCRIPTION CATÉGORIES — TEXTE BLANC ================================================== */ body.tax-product_cat .term-description, body.tax-product_cat .term-description p { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* ================================================== BOUTIQUE — MASQUER LE COMPTEUR DE RÉSULTATS ================================================== */ body.woocommerce .woocommerce-result-count { display:none !important; } /* ================================================== VAFFANGUSTO — FOND WOOCOMMERCE FINAL IMAGE + CHARBON + HALO ================================================== */ body.woocommerce, body.woocommerce-shop, body.woocommerce.archive, body.woocommerce.single-product, body.woocommerce-cart, body.woocommerce-checkout { position: relative !important; background: url("https://vafangusto.fr/wp-content/uploads/2026/08/bg-commande.jpg") center top / cover fixed no-repeat !important; background-attachment: fixed !important; } body.woocommerce-cart::before, body.woocommerce-checkout::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( circle at 50% 38%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 38%, transparent 65% ), linear-gradient( to bottom, rgba(17,17,17,.82) 0%, rgba(17,17,17,.90) 50%, rgba(17,17,17,.95) 100% ); } body.woocommerce-cart > *, body.woocommerce-checkout > * { position: relative; z-index: 1; } /* Les conteneurs restent transparents */ body.woocommerce .ast-woocommerce-container, body.woocommerce .site-main, body.woocommerce #primary, body.woocommerce-shop .ast-woocommerce-container, body.woocommerce-shop .site-main, body.woocommerce-shop #primary, body.woocommerce.archive .ast-woocommerce-container, body.woocommerce.archive .site-main, body.woocommerce.archive #primary, body.woocommerce.single-product .ast-woocommerce-container, body.woocommerce.single-product .site-main, body.woocommerce.single-product #primary, body.woocommerce-cart .ast-woocommerce-container, body.woocommerce-cart .site-main, body.woocommerce-cart #primary, body.woocommerce-checkout .ast-woocommerce-container, body.woocommerce-checkout .site-main, body.woocommerce-checkout #primary { background: transparent !important; } /* ================================================== FILTRE CHARBON — AUTRES PAGES WOOCOMMERCE ================================================== */ body.woocommerce, body.woocommerce-shop, body.woocommerce.archive, body.woocommerce.single-product { background: radial-gradient( circle at 50% 38%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 38%, transparent 65% ), linear-gradient( to bottom, rgba(17,17,17,.82) 0%, rgba(17,17,17,.90) 50%, rgba(17,17,17,.95) 100% ), url("https://vafangusto.fr/wp-content/uploads/2026/08/bg-commande.jpg") center top / cover fixed no-repeat !important; background-attachment: fixed !important; } /* ================================================== FIN — FOND WOOCOMMERCE FINAL ================================================== */ /* ================================================== PRODUITS — TEXTES DES PARAGRAPHES EN BLANC ================================================== */ body.single-product .summary.entry-summary p, body.single-product .woocommerce-tabs p, body.single-product .product p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ================================================== FIN — TEXTES PRODUITS ================================================== */ /* ================================================== EXCEPTION — BLOC VERSION VEGAN ================================================== */ body.single-product .summary.entry-summary div[style*="border: 2px solid #4CAF50"] p { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } body.single-product .summary.entry-summary div[style*="border: 2px solid #4CAF50"] h4 { color: #2e7d32 !important; -webkit-text-fill-color: #2e7d32 !important; } /* ================================================== FIN — EXCEPTION VEGAN ================================================== */ /* ================================================== EXCEPTION — BLOC VEGAN Le paragraphe reste noir ================================================== */ body.single-product div[style*="4CAF50"] p { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* ================================================== VAFFANGUSTO — FICHE PRODUIT Titres / images / catégorie / produits associés ================================================== */ /* -------------------------------------------------- NOM DU PRODUIT -------------------------------------------------- */ body.single-product h1.product_title.entry-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600 !important; text-shadow: 0 3px 6px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.90); } /* -------------------------------------------------- TITRES DANS LA DESCRIPTION PRODUIT -------------------------------------------------- */ body.single-product .woocommerce-Tabs-panel h3, body.single-product .woocommerce-Tabs-panel h4 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600 !important; } /* -------------------------------------------------- TITRES PRODUITS ASSOCIÉS -------------------------------------------------- */ body.single-product section.related.products h2, body.single-product section.related.products .woocommerce-loop-product__title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600 !important; } /* -------------------------------------------------- IMAGES — FIN FILET DORÉ Aucun arrondi -------------------------------------------------- */ body.single-product .woocommerce-product-gallery img, body.single-product .related.products img, body.single-product .upsells.products img { border: 1px solid #D4AF37 !important; border-radius: 0 !important; } /* Empêche également les wrappers WooCommerce de réintroduire un arrondi */ body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image, body.single-product .related.products .astra-shop-thumbnail-wrap, body.single-product .upsells.products .astra-shop-thumbnail-wrap { border-radius: 0 !important; } /* -------------------------------------------------- CATÉGORIE PRODUIT -------------------------------------------------- */ body.single-product .product_meta .posted_in, body.single-product .product_meta .posted_in a { color: #C63D2F !important; -webkit-text-fill-color: #C63D2F !important; } body.single-product .product_meta .posted_in a { font-weight: 600 !important; } /* ================================================== FIN — FICHE PRODUIT ================================================== */ /* ================================================== EXCEPTION — TITRE VERSION VEGAN ================================================== */ body.single-product .woocommerce-Tabs-panel h4[style*="color: #2e7d32"], body.single-product .woocommerce-Tabs-panel h4[style*="color:#2e7d32"] { color: #2e7d32 !important; -webkit-text-fill-color: #2e7d32 !important; } /* ================================================== FIN — EXCEPTION TITRE VEGAN ================================================== */ /* ================================================== EXCEPTION — TITRE VERSION VEGAN Police d'origine + vert d'origine ================================================== */ body.single-product .woocommerce-Tabs-panel h4[style*="2e7d32"] { font-family: inherit !important; color: #2e7d32 !important; -webkit-text-fill-color: #2e7d32 !important; } /* ================================================== FIN — EXCEPTION VEGAN ================================================== */ /* ================================================== VAFFANGUSTO — BOUTONS UNIFORMES ================================================== */ a.vfg-btn, a.vfg-btn:visited { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:50px !important; padding:14px 27px !important; background:var(--vaf-red) !important; color:#ffffff !important; border:1px solid var(--vaf-red) !important; border-radius:0 !important; font-family:'Poppins',Arial,sans-serif !important; font-size:14px !important; line-height:1 !important; font-weight:600 !important; letter-spacing:.08em !important; text-decoration:none !important; transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important; } @media (hover:hover) { a.vfg-btn:hover { background:var(--vaf-green) !important; border-color:var(--vaf-green) !important; color:#ffffff !important; transform:translateY(-2px); } } /* ================================================== VAFFANGUSTO — BOUTONS ALIGNÉS ACCUEIL ================================================== */ a.vfg-btn, a.vfg-btn:visited { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:50px !important; padding:14px 27px !important; background:var(--vaf-red) !important; color:#ffffff !important; border:1px solid var(--vaf-red) !important; border-radius:0 !important; font-family:'Poppins', Arial, sans-serif !important; font-size:12px !important; line-height:1 !important; font-weight:600 !important; letter-spacing:.08em !important; text-decoration:none !important; box-shadow:none !important; transition: background .25s ease, color .25s ease, transform .25s ease !important; } @media (hover:hover) { a.vfg-btn:hover { background:var(--vaf-green) !important; border-color:var(--vaf-green) !important; color:#ffffff !important; transform:translateY(-2px) !important; box-shadow:none !important; } } /* ================================================== VAFFANGUSTO — BOUTONS FINAL Même typographie que l'Accueil ================================================== */ a.vfg-btn, a.vfg-btn:visited, a.vfg-btn:hover, a.vfg-btn:focus, a.vfg-btn:active { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:50px !important; padding:14px 27px !important; font-family:'Poppins', Arial, sans-serif !important; font-size:14px !important; line-height:1 !important; font-weight:600 !important; letter-spacing:.08em !important; border-radius:0 !important; box-shadow:none !important; text-shadow:none !important; filter:none !important; outline:none !important; transition: background .25s ease, color .25s ease, transform .25s ease !important; } a.vfg-btn { background:var(--vaf-red) !important; border:1px solid var(--vaf-red) !important; color:#ffffff !important; } a.vfg-btn:hover { background:var(--vaf-green) !important; border-color:var(--vaf-green) !important; color:#ffffff !important; transform:translateY(-2px) !important; box-shadow:none !important; text-shadow:none !important; filter:none !important; } a.vfg-btn:focus, a.vfg-btn:active { box-shadow:none !important; text-shadow:none !important; filter:none !important; outline:none !important; } /* ========================================================= Vaffangusto — Encadré information livraison ========================================================= */ .vfg-delivery-minimum-notice { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 900px; margin: 0 auto 32px; padding: 20px 24px; box-sizing: border-box; background: linear-gradient(135deg, rgba(36,36,36,.98), rgba(18,18,18,.98)); border: 1px solid rgba(212,175,55,.65); border-left: 4px solid #D4AF37; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04); } .vfg-delivery-minimum-icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(212,175,55,.45); border-radius: 50%; font-size: 22px; line-height: 1; background: rgba(212,175,55,.08); } .vfg-delivery-minimum-content { flex: 1; min-width: 0; } .vfg-delivery-minimum-title { margin-bottom: 5px; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #D4AF37; } .vfg-delivery-minimum-text { font-family: Inter, sans-serif; font-size: 15px; line-height: 1.55; color: #fff; } .vfg-delivery-minimum-text strong { color: #D4AF37; font-weight: 700; } .vfg-delivery-minimum-subtext { margin-top: 3px; font-family: Inter, sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.72); } @media (max-width: 600px) { .vfg-delivery-minimum-notice { gap: 14px; margin-bottom: 24px; padding: 17px 18px; border-radius: 10px; } .vfg-delivery-minimum-icon { flex-basis: 42px; width: 42px; height: 42px; font-size: 19px; } .vfg-delivery-minimum-title { font-size: 15px; } .vfg-delivery-minimum-text { font-size: 14px; } .vfg-delivery-minimum-subtext { font-size: 12px; } } /* ========================================================= VFG — PAGES LÉGALES Mentions légales / Politique de confidentialité / CGV ========================================================= */ .vfg-legal-page { max-width: 1180px; margin: 0 auto; padding: 70px 35px 90px; color: #fff; } /* ========================================================= TITRE PRINCIPAL — BLOC NOIR ========================================================= */ .vfg-legal-page .vfg-page-title { position: relative; width: 100%; max-width: 980px; margin: 0 auto; padding: 42px 65px 45px; box-sizing: border-box; text-align: center; background: #000; box-shadow: 0 0 55px rgba(0,0,0,0.30), inset 0 0 35px rgba(255,255,255,0.012); } .vfg-legal-page .vfg-page-title h1 { margin: 0; font-family: "Cormorant Garamond", serif; font-size: clamp(48px, 6vw, 76px); font-weight: 500; line-height: 1.05; letter-spacing: 0.01em; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.18), 0 0 28px rgba(212,175,55,0.16); } /* ========================================================= BLOC CHARBON — EFFET HALO ========================================================= */ .vfg-legal-content { position: relative; width: 100%; max-width: 980px; margin: 0 auto; padding: 55px 65px 65px; box-sizing: border-box; background: radial-gradient( circle at 50% 0%, #303030 0%, #242424 28%, #1d1d1d 58%, #171717 100% ); box-shadow: 0 0 70px rgba(0,0,0,0.28), inset 0 0 45px rgba(255,255,255,0.015); } /* ========================================================= TEXTE ========================================================= */ .vfg-legal-content p, .vfg-legal-content li { font-family: inherit; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.88); } .vfg-legal-content p { margin: 0 0 25px; } .vfg-legal-content strong { color: #fff; font-weight: 600; } /* ========================================================= TITRES DE SECTIONS ========================================================= */ .vfg-legal-content h2 { margin: 52px 0 22px; font-family: "Cormorant Garamond", serif; font-size: clamp(28px, 3vw, 38px); font-weight: 500; line-height: 1.15; color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.12), 0 0 18px rgba(212,175,55,0.10); } .vfg-legal-content h2:first-child { margin-top: 0; } /* ========================================================= LISTES ========================================================= */ .vfg-legal-content ul { margin: 0 0 30px; padding-left: 25px; } .vfg-legal-content li { margin-bottom: 9px; } /* ========================================================= LIENS ========================================================= */ .vfg-legal-content a { color: #D4AF37; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; } .vfg-legal-content a:hover { color: #fff; text-decoration: underline; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .vfg-legal-page { padding: 45px 16px 60px; } .vfg-legal-page .vfg-page-title { width: 100%; max-width: 980px; margin: 0 auto; padding: 32px 24px 35px; box-sizing: border-box; } .vfg-legal-page .vfg-page-title h1 { font-size: clamp(42px, 12vw, 58px); } .vfg-legal-content { width: 100%; max-width: 980px; margin: 0 auto; padding: 35px 24px 45px; box-sizing: border-box; } .vfg-legal-content p, .vfg-legal-content li { font-size: 15px; line-height: 1.75; } .vfg-legal-content h2 { margin-top: 42px; font-size: 30px; } }