/* ========================================================================== fn-core.css — feuille de style consolidée, flashnumerique.com Généré le 2026-08-24 (phase 2 de consolidation) à partir de deux sources, concaténées DANS CET ORDRE PRÉCIS parce qu'il compte pour la cascade : 1) Le bloc boutique auparavant injecté en PHP par fn-refonte.php (uniquement sur les pages WooCommerce, priorité wp_head 100 — donc rendu AVANT le CSS additionnel natif de WordPress, priorité 101). 2) Le CSS additionnel (Personnaliser > CSS additionnel), qui contient des surcharges volontaires de (1) sans toujours utiliser !important (ex. .fn-btn-primary) — leur ordre APRÈS (1) est ce qui les fait gagner en cas d'égalité de spécificité, exactement comme en prod avant cette consolidation. Changement de comportement assumé : le bloc (1) était avant conditionné à is_woocommerce()/is_shop()/is_product()/is_product_category() ; il est maintenant chargé sur toutes les pages comme le reste de ce fichier — sans effet ailleurs, ses sélecteurs ne matchent que du balisage WooCommerce/boutique. ========================================================================== */ /* ────────────────────────────────────────────────────────────────────── 1) Styles boutique — origine mu-plugin fn-refonte.php ────────────────────────────────────────────────────────────────────── */ :root { --fn-ink: #0F1115; --fn-magenta: #E6007E; } .fn-wc-devis { color: var(--fn-magenta) !important; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; } .fn-btn-sm { padding: 9px 18px !important; font-size: 13px !important; } /* Base .fn-btn — les couleurs/formes définitives (rose, pilule 30px) sont redéfinies plus bas dans ce fichier (section CSS additionnel du 2026-08-22), qui l'emporte volontairement sur ces valeurs d'origine (gris foncé, coins 8px). Voir fn-core/includes/woocommerce-devis.php. */ .fn-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:8px; font-weight:700; font-family:'Saira Condensed',sans-serif; font-size:16px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:transform .15s, box-shadow .15s; } .fn-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,17,21,.12); } .fn-btn-primary { background: var(--fn-ink); color: #fff !important; } .fn-btn-outline { background: transparent; color: var(--fn-ink) !important; border: 2px solid var(--fn-ink); } .fn-btn-magenta { background: var(--fn-magenta); color:#fff !important; } .fn-btn-wa { background: #25d366; color:#fff !important; } .woocommerce ul.products li.product .price { display:block; margin: 8px 0 12px; } .woocommerce ul.products li.product .button { background: var(--fn-ink) !important; color: #fff !important; border-radius: 8px !important; font-family: 'Saira Condensed', sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; padding: 12px 20px !important; } .woocommerce ul.products li.product .button:hover { background: var(--fn-magenta) !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Saira Condensed', sans-serif !important; font-weight: 700 !important; font-size: 17px !important; color: var(--fn-ink) !important; } .woocommerce-products-header__title { font-family: 'Saira Condensed', sans-serif !important; font-weight: 900 !important; font-size: clamp(28px, 4vw, 44px) !important; } .woocommerce span.onsale { background: var(--fn-magenta) !important; font-family: 'Saira Condensed', sans-serif !important; } .product_meta, .product_meta a { font-family: 'Inter', sans-serif !important; } .woocommerce div.product .product_title { font-family: 'Saira Condensed', sans-serif !important; font-weight: 900 !important; } /* ────────────────────────────────────────────────────────────────────── 2) CSS additionnel — origine Personnaliser > CSS additionnel (contenu inchangé, tel que rapatrié le 2026-08-24 depuis le site live — voir site-source/additional-css.css pour la version brute non fusionnée) ────────────────────────────────────────────────────────────────────── */ /* ========================================================================== Bouton CTA "Obtenez un devis" — menu principal Site : flashnumerique.com (WordPress / Astra / Max Mega Menu) Créé le 2026-08-11 Couleurs reprises de la charte existante du site (accent des liens Astra) : #E91E8C (normal) / #c0176f (hover), pour rester cohérent visuellement. ========================================================================== */ .menu_devis > a { background-color: #E91E8C !important; color: #ffffff !important; padding: 1px 15px !important; margin: 0 10px !important; border-radius: 30px; font-weight: 600; text-align: center !important; transition: background-color 0.2s ease, transform 0.15s ease; display: inline-block; line-height: 1.2; } .menu_devis > a:hover, .menu_devis > a:focus { background-color: #c0176f !important; color: #ffffff !important; transform: translateY(-1px); } /* Ajustement mobile : le bouton reste lisible dans le menu déroulant */ @media (max-width: 921px) { .menu_devis > a { display: inline-block; margin: 6px 0 !important; } } /* Repli si le lien réel généré par Max Mega Menu porte la classe .mega-menu-link plutôt qu'un simple — décommenter/adapter si le sélecteur ci-dessus ne s'applique pas après inspection de l'élément. */ /* .menu_devis > a.mega-menu-link { background-color: #E91E8C; color: #ffffff !important; } */ /* ========================================================================== Logo mobile placé en premier (à gauche) via CSS order Site : flashnumerique.com — Créé le 2026-08-13 Cause réelle : la ligne mobile est une grille à 3 colonnes fixes (hamburger | logo | recherche+panier), le logo est structurellement au milieu — justify-content ne change pas la position de la colonne dans la grille. On utilise `order` pour le faire apparaître visuellement en premier, sans toucher à la structure du header builder. Scopé Personnaliser > CSS additionnel (même méthode que menu-devis-button.css sur ce projet — pas Elementor Custom CSS). Mis à jour le 14/08/2026 avec le vrai formulaire créé (ID 528, "Formulaire de contact") : conteneur .empathct-form / titre .subtite-form, mise en page en grille Bootstrap (.row/.col-lg-6/ .col-12 — déjà chargé par le thème, pas besoin de la réimplémenter), champs Prénom/Nom/Email/Téléphone/Besoin (select)/Message. ⚠️ Bug HTML repéré dans le formulaire (à corriger dans l'éditeur CF7, pas un problème de CSS) : deux attributs class non fermés —
→
→
Tant que ce n'est pas corrigé, le rendu peut être imprévisible (le guillemet manquant fait absorber le reste du balisage dans l'attribut). Générique par ailleurs : couvre aussi le balisage standard CF7 pour d'éventuels futurs formulaires sur ce site (texte, email, tél, textarea, select, checkbox/radio, fichier, bouton, messages de validation/réponse). Charte reprise du reste du site : rose #E91E8C (accent principal), police Inter, coins arrondis ~8-10px, ombres douces — cohérent avec hero-slide-accueil.html et familles-carrousel-accueil.html. ════════════════════════════════════════════════════════════════ */ /* ── Conteneur custom du formulaire (.empathct-form) ── Plus de largeur max/ombre — le formulaire épouse maintenant toute la largeur du conteneur Elementor parent, sans se démarquer visuellement en carte flottante (retiré sur demande explicite). */ .empathct-form { width: 100%; padding: 32px; background: rgba(0, 0, 0, 0); border-radius: 14px; } .empathct-form .subtite-form { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; color: #17171f; margin: 0 0 24px; } /* Bootstrap .row applique déjà un gutter négatif standard (-15px) — on ajoute juste un espacement vertical propre entre les lignes, Bootstrap gère la largeur des colonnes nativement. */ .empathct-form .row { row-gap: 20px; } .empathct-form [class^="col-"] { margin-bottom: 0 !important; /* évite le double espacement avec .wpcf7-form p */ } /* ── Conteneur du formulaire ── */ .wpcf7-form { font-family: 'Inter', -apple-system, sans-serif !important; width: 100%; } .wpcf7-form p { margin: 0 0 20px !important; } /* ── Labels ── */ .wpcf7-form label { display: block; font-size: 13.5px; font-weight: 700; color: #17171f; margin-bottom: 6px; } /* ── Champs texte, email, tél, url, nombre, date ── */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="url"], .wpcf7-form input[type="number"], .wpcf7-form input[type="date"], .wpcf7-form select, .wpcf7-form textarea { width: 100% !important; box-sizing: border-box !important; padding: 12px 16px !important; border: 1.5px solid rgba(23,23,31,.14) !important; border-radius: 8px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: #17171f !important; background: #fff !important; transition: border-color .2s ease, box-shadow .2s ease; } .wpcf7-form textarea { min-height: 140px; resize: vertical; } /* ── État focus ── */ .wpcf7-form input[type="text"]:focus, .wpcf7-form input[type="email"]:focus, .wpcf7-form input[type="tel"]:focus, .wpcf7-form input[type="url"]:focus, .wpcf7-form input[type="number"]:focus, .wpcf7-form input[type="date"]:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none !important; border-color: #E91E8C !important; box-shadow: 0 0 0 3px rgba(233,30,140,.12) !important; } /* ── Placeholder ── */ .wpcf7-form ::placeholder { color: #62626f !important; /* assombri (était #9a9aa5, trop discret) pour rester lisible */ opacity: 1 !important; } /* ── Checkbox & radio (liste d'options CF7 : ) ── */ .wpcf7-form .wpcf7-checkbox, .wpcf7-form .wpcf7-radio { display: flex; flex-direction: column; gap: 10px; } .wpcf7-form .wpcf7-list-item { margin: 0 !important; display: flex; align-items: center; gap: 8px; } .wpcf7-form .wpcf7-list-item input[type="checkbox"], .wpcf7-form .wpcf7-list-item input[type="radio"] { width: 18px; height: 18px; accent-color: #E91E8C; cursor: pointer; flex-shrink: 0; } .wpcf7-form .wpcf7-list-item-label { font-size: 14px; color: #17171f; cursor: pointer; } /* ── Upload fichier ── */ .wpcf7-form input[type="file"] { font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; } /* ── Bouton d'envoi — même style que les CTA du reste du site ── */ .wpcf7-form input[type="submit"], .wpcf7-form button[type="submit"] { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 13px 32px !important; background: #E91E8C !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .2px; cursor: pointer; transition: background .2s ease, transform .15s ease; } .wpcf7-form input[type="submit"]:hover, .wpcf7-form button[type="submit"]:hover { background: #c0176f !important; } .wpcf7-form input[type="submit"]:active, .wpcf7-form button[type="submit"]:active { transform: translateY(1px); } .wpcf7-form input[type="submit"]:disabled { opacity: .6; cursor: not-allowed; } /* ── Spinner de chargement (ajouté par CF7 pendant l'envoi) ── */ .wpcf7-form .wpcf7-spinner { margin: 0 0 0 10px; } /* ── Champs en erreur de validation ── */ .wpcf7-form .wpcf7-not-valid { border-color: #dc2626 !important; } .wpcf7-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 12.5px; color: #dc2626; font-weight: 600; } /* ── Message de réponse global (succès / erreur / envoi) ── CF7 ajoute .sent / .failed / .invalid / .spam sur le wrapper .wpcf7-form selon l'issue — on cible via ces classes composées avec .wpcf7-response-output */ .wpcf7-form .wpcf7-response-output { margin: 18px 0 0 !important; padding: 14px 18px !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 600 !important; border: none !important; } .wpcf7-form.sent .wpcf7-response-output { background: #ecfdf5 !important; color: #047857 !important; } .wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.aborted .wpcf7-response-output, .wpcf7-form.spam .wpcf7-response-output { background: #fef2f2 !important; color: #dc2626 !important; } .wpcf7-form.unaccepted .wpcf7-response-output, .wpcf7-form.invalid .wpcf7-response-output { background: #fffbeb !important; color: #b45309 !important; } /* ── Champ requis — petit astérisque discret déjà ajouté par CF7 (span.wpcf7-form-control-wrap peut porter [required]) ── */ .wpcf7-form label .wpcf7-form-control[aria-required="true"] { border-left: 2px solid #E91E8C !important; } /* (mise en page 2 colonnes finalement gérée par la grille Bootstrap .row/.col-lg-6 déjà utilisée dans le formulaire réel — voir plus haut, pas besoin d'une classe utilitaire custom) */ /* ── Responsive mobile ── */ @media (max-width: 480px) { .wpcf7-form input[type="submit"], .wpcf7-form button[type="submit"] { width: 100% !important; justify-content: center !important; } } /* fnMenuWidth fix 17/08 - donner plus de place a la colonne menu qu'au logo dans le header (colonnes 50/50 par defaut, logo n'a besoin que d'une fraction) */ .shfb-main_header_row .shfb-row.shfb-cols-2 { grid-template-columns: max-content 1fr !important; } /* icône de recherche retirée du menu principal (demande client 18/08) */ .shfb-component-search { display: none !important; } /* fnLogoMobileOrderFix 18/08 - re-application de la règle du 13/08, perdue lors d'un ajout précédent (le commentaire d'origine était resté seul, sans la règle CSS qui le suivait). Fait apparaître column-2 (menu/recherche/compte/panier) avant column-1 (logo) sur mobile, pour que le logo se retrouve à gauche. */ @media (max-width: 767px) { .shfb-main_header_row .shfb-column-2 { order: -1 !important; } } /* fnWooIconsShiftLeft 18/08 - depuis que le bouton hamburger est repositionné correctement dans l'entête (fix précédent du même jour), il chevauche les icônes compte/panier natives (hamburger x:330-374, panier x:359-375 quasi totalement caché, compte x:318-334 partiellement). Décale le groupe compte+panier vers la gauche pour libérer la place. */ @media (max-width: 767px) { .shfb-component-woo_icons { margin-right: 58px !important; } } /* fnCatHeroContainerPaddingFix 18/08 - depuis le passage des 4 pages famille au template page_fullwidth.php (fix éditeur Elementor du 18/08), les conteneurs Elementor 'e-con' par défaut du thème ajoutent chacun 10px de padding (2 niveaux imbriqués = 20px cumulés) AUTOUR du widget hero, qui a lui-même déjà 8-10px de padding interne prévu en mobile -> marge totale ~43px au lieu de ~8-10px. On neutralise le padding des conteneurs Elementor sur mobile pour ces 4 pages seulement (le padding interne du widget hero reste inchangé, c'est lui qui gère l'espacement visuel prévu). */ @media (max-width: 767px) { body.page-id-268 .entry-content .e-con, body.page-id-270 .entry-content .e-con, body.page-id-272 .entry-content .e-con, body.page-id-274 .entry-content .e-con { padding-left: 0 !important; padding-right: 0 !important; } } /* ========================================================================== Bouton "Envoyer ma demande" — formulaire de devis (CF7 #529, page Obtenez un Devis) Site : flashnumerique.com — Créé le 2026-08-21 Centrage du texte sur mobile : input[type=submit] de CF7 n'avait aucun text-align explicite posé ailleurs dans les styles du site. ========================================================================== */ @media (max-width: 767px) { .wpcf7-form input.wpcf7-submit, .wpcf7-submit[type="submit"] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; display: block !important; text-align: center !important; text-indent: 0 !important; justify-content: center !important; } } /* ========================================================================== Reduction de l'espace vide sous le header (toutes pages) Site : flashnumerique.com - Cree le 2026-08-22 Cause : .page-wrap avait un padding-top:83px cense compenser un header sticky, mais le header reel reste en position relative (in-flow) au repos - un CLONE separe (.shfb-sticky-header) passe en position:fixed uniquement pendant le scroll, independant de ce padding. Ce padding etait donc un vide pur, plus visible sur mobile (header compacte a 61px le 13/08, jamais reajuste) mais present aussi sur desktop (header 101px). Reduit uniformement, pas de risque de chevauchement avec le clone sticky (qui recouvre toujours le contenu scrolle, comportement voulu, independant de ce padding initial). ========================================================================== */ .page-wrap { padding-top: 24px !important; } /* ========================================================================== Bouton WhatsApp a cote de "Ajouter au panier" - ajustement mobile Site : flashnumerique.com - Cree le 2026-08-22 Sur desktop le bouton WhatsApp (.fn-btn-wa) tient bien a cote du bouton natif WooCommerce. Sur mobile etroit, form.cart est en display:block (pas flex) donc les elements inline se tassent et le texte du bouton panier passe sur plusieurs lignes. Fix : le bouton WhatsApp repasse en pleine largeur sous le bouton panier au lieu de se tasser a cote. ========================================================================== */ @media (max-width: 480px) { .sydney-single-addtocart-wrapper { flex-wrap: wrap !important; } form.cart .fn-btn-wa { flex: 1 0 100% !important; margin-left: 0 !important; margin-top: 10px; text-align: center; box-sizing: border-box; } } /* ========================================================================== Boutons "fn-btn" (Demander un devis / WhatsApp) - personnalisation Site : flashnumerique.com - Cree le 2026-08-22, mis a jour le meme jour apres restauration de la base .fn-btn/.fn-btn-primary/.fn-btn-wa dans wp-content/mu-plugins/fn-refonte.php (voir memoire projet - ces classes avaient perdu tout style suite a un nettoyage plus tot dans la journee). Les regles ci-dessous sont maintenant des SURCHARGES volontaires de cette base restauree (rose #E91E8C + pilule 30px au lieu du gris fonce/8px d'origine), pas une reconstruction complete. ========================================================================== */ .fn-btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 14px 26px !important; border-radius: 30px !important; font-weight: 700 !important; text-decoration: none !important; transition: background .2s ease, transform .15s ease; } .fn-btn:hover { transform: translateY(-1px); } .fn-btn-primary { background: #E91E8C !important; color: #fff !important; } .fn-btn-primary:hover { background: #c0176f !important; color: #fff !important; } .fn-btn-wa { background: #25d366 !important; color: #fff !important; } .fn-btn-wa:hover { background: #1ebe5a !important; color: #fff !important; } /* ── Bouton "Ajouter au panier" natif WooCommerce ── Reduit de la largeur pleine (flex-grow:1 herite du theme) a une largeur au contenu, couleur passee du noir par defaut du theme a l'accent rose de la marque. Meme aspect que le bouton WhatsApp (pilule + ombre plutot que bordure) pour une paire coherente. */ .single_add_to_cart_button { flex-grow: 0 !important; width: auto !important; background-color: #E91E8C !important; border: none !important; border-radius: 30px !important; box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; } .single_add_to_cart_button:hover { background-color: #c0176f !important; } .fn-btn-wa { box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; } /* ========================================================================== Produits similaires - correction largeur pour 4 colonnes Site : flashnumerique.com - Cree le 2026-08-23 Cause : le theme Sydney force ".related.products ul.products li.product" a 30.8% de large avec !important, une valeur pensee pour 3 produits par ligne (defaut WooCommerce d'origine sur ce theme). Depuis le snippet "Produits similaires - forcer 4 colonnes" (id 210) qui affiche desormais 4 produits, cette largeur fixe ne laisse tenir que 2 cartes par ligne (30.8% x 3 + marges > 100%), d'ou l'affichage en 2x2 au lieu d'une seule rangee de 4. Correctif desktop : largeur adaptee a 4 colonnes, ciblee uniquement sur .columns-4 pour ne pas affecter d'autres contextes (panier "produits associes" en columns-3 par exemple). Bug corrige le meme jour : la premiere version de ce correctif n'avait pas de garde @media, donc s'appliquait aussi sur mobile - la ou woocommerce-smallscreen.css impose normalement 2 colonnes (48%) via ".products[class*=columns-] li.product". Notre selecteur etant plus specifique + !important, il ecrasait cette largeur (poussant a 22%) SANS reprendre le float/clear alterne (float:left/right, clear:both sur les impairs) qui fait tenir 2 cartes par ligne - resultat : 1 carte isolee par ligne sur mobile. Fix : desktop scope explicitement a partir de 769px, et regles mobile reconstruites explicitement (largeur + float + clear) plutot que de compter sur l'interaction avec les regles du theme. ========================================================================== */ @media (min-width: 769px) { .related.products ul.products.columns-4 li.product { width: 22.05% !important; } } @media (max-width: 768px) { .related.products ul.products.columns-4 li.product { width: 48% !important; float: left !important; clear: none !important; margin-right: 4% !important; } .related.products ul.products.columns-4 li.product:nth-child(odd) { clear: both !important; } .related.products ul.products.columns-4 li.product:nth-child(even) { float: right !important; margin-right: 0 !important; } }