/* Theme Name: OceanWP Child Theme URI: https://oceanwp.org/ Template: oceanwp Author: OceanWP Author URI: https://oceanwp.org/about-oceanwp/ Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/ Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready Version: 4.1.2.1757940075 Updated: 2025-09-15 14:41:15 */ /* ========================================================= [000] En-tête du thème enfant (à ajouter uniquement si absent) But : déclarer proprement le thème enfant pour WordPress. ========================================================= */ /* Theme Name: Mona Lisa Child Template: oceanwp Author: Mona Lisa Description: Thème enfant propre – styles consolidés et numérotés Version: 1.0 */ /* --- Fin du bloc [000] --- */ /* ================================ PATCH 1 — TOKENS & POLICES ================================ */ /* 1A — Variables de marque */ :root { --ml-cream: #F8F5ED; /* ivoire (fond) */ --ml-ink: #1C1C1C; /* noir satiné (texte) */ --ml-gold: #CBA75A; /* or raffiné (titres, accents) */ --ml-gold-dark: #B68A2C; /* or plus fermé (hover, boutons) */ --ml-line: 1.55; /* interlignage par défaut */ --ml-letter: 0.3px; } /* 1B — Corps de texte (desktop + mobile) */ html, body { background-color: var(--ml-cream) !important; color: var(--ml-ink); font-family: "Source Sans 3", system-ui, -apple-system, sans-serif; line-height: var(--ml-line); letter-spacing: var(--ml-letter); font-size: 18px; /* desktop par défaut */ } @media (max-width: 767px) { html, body { font-size: 17px; } /* mobile */ } /* 1C — Titres communs */ h1, h2, h3, h4, h5, h6 { font-family: "GFS Didot", serif !important; font-weight: 600; /* base, surchargée au besoin par titre */ margin: .2em 0 .35em; color: var(--ml-gold); } /* H1 — Titre principal (raffiné, sans gras lourd) */ h1 { font-size: 44px; /* desktop */ line-height: 1.18; /* rythme resserré mais lisible */ font-weight: 500; /* plus fin qu’un bold, rendu luxe */ letter-spacing: 0.5px; /* élégance subtile */ color: var(--ml-gold); /* cohérence marque */ } /* H2 — Sous-titre élégant */ h2 { font-weight: 400; font-style: italic; color: var(--ml-gold-dark); font-size: 32px; /* desktop */ } /* P — Paragraphe */ p { font-size: 18px; /* desktop */ line-height: 1.55; } /* Versions mobiles (≤767px) — tailles explicites et lisibles */ @media (max-width: 767px) { h1 { font-size: 32px !important; /* imposant mais tient mieux sur une ligne */ line-height: 1.18 !important; font-weight: 500 !important; /* sans alourdir */ letter-spacing: 0.4px !important; } h2 { font-size: 20px !important; /* plus petit, reste italique via règle H2 */ } p { font-size: 17px !important; line-height: 1.5 !important; } } /* 1E — Exception : Page d'accueil (H1 + H2 collés) */ body.page-id-493 h1 { margin-bottom: 0 !important; /* colle H1 à H2 */ } body.page-id-493 h2 { margin-top: 0 !important; /* colle H2 à H1 */ } /* ================================ FIN PATCH 1 ================================ */ /* ========================================================= [PATCH #2 — DÉBUT] Fusion « Masquages OceanWP + Gouttières & Médias » Objet : - Cacher proprement tous les en-têtes/titres natifs OceanWP (parité Parent) - Fixer les gouttières latérales et la largeur de lecture (desktop/mobile) - Rythme vertical des sections (espaces cohérents) - Centrage/contrôle des images, galeries, colonnes - Exception Accueil : H1 + H2 collés et centrés Note : - La typographie (tailles H1/H2/H3, paragraphes) reste dans PATCH #1. ========================================================= */ /* ======================= 2A — Masquages OceanWP (global, durci) Début 2A ======================= */ #top-bar-wrap, #top-bar, #site-header, .site-header, #site-header-inner, .site-header-inner, #site-logo, .site-branding, #site-navigation-wrap, .oceanwp-mobile-menu-icon, .oceanwp-mobile-menu, .oceanwp-off-canvas-sidebar, .searchform-header-replace, #searchform-header-replace, .before-header-content, .after-header-content, .oceanwp-sticky-header-holder, .oceanwp-sticky-header, .page-header, .page-header-inner, h1.page-header-title, .page-header-title, .page-header-title.clr, .oceanwp-breadcrumbs, .breadcrumb-trail, .trail-items, #breadcrumbs, .breadcrumb, .woocommerce-breadcrumb, .woocommerce-products-header, .woocommerce-products-header__title, .elementor-location-header, header.elementor, .e-site-header { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; } /* Nettoyage des conteneurs de thème (pas d’espace réservé) */ .site, #outer-wrap, #wrap, #content, #main, .site-content, .content-area, .container, .boxed-layout { margin-top: 0 !important; padding-top: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Fin 2A */ /* ======================= 2B — Paramètres rapides (variables) Début 2B ======================= */ :root{ /* Largeur de lecture (desktop) et gouttières */ --content-max-d: 1100px; /* largeur élégante Parent */ --gutter-d: 24px; /* gouttières desktop */ --gutter-t: 18px; /* gouttières tablette (≤1023px) */ --gutter-m: 20px; /* gouttières mobile (≤767px) */ /* Échelle d’espacement vertical (rythme) */ --sp-xxs: 6px; --sp-xs: 10px; --sp-s: 14px; --sp-m: 20px; --sp-l: 28px; --sp-xl: 40px; } /* Fin 2B */ /* ========================================================= [PATCH 2C — DÉBUT] Conteneur, gouttières & typographie (Desktop / Tablette / Mobile) Version: PRÉRÉGLAGE FIN (calibré selon les captures) ========================================================= */ /* 2C-0 — Variables (modifiez ici uniquement si besoin) */ :root{ /* Gouttières */ --gutter-d: 24px; /* Desktop */ --gutter-t: 18px; /* Tablette (≤1023px) */ --gutter-m: 14px; /* Mobile (≤767px) ← réduit pour laisser respirer le titre */ /* ——— Desktop (≥1024px) ——— */ --h1-size-d: 2.00rem; --h1-lh-d: 1.16; --h1-ls-d: 0px; --h1-ws-d: 0px; --h2-size-d: 1.85rem; --h2-lh-d: 1.18; --h2-ls-d: 0px; --h2-ws-d: 0px; --p-size-d: 18px; --p-lh-d: 1.55; --p-ls-d: 0.2px; --p-ws-d: 0px; --p-mb-d: 14px; /* ——— Tablette (768–1023px) ——— */ --h1-size-t: 1.90rem; --h1-lh-t: 1.16; --h1-ls-t: 0px; --h1-ws-t: 0px; --h2-size-t: 1.65rem; --h2-lh-t: 1.18; --h2-ls-t: 0px; --h2-ws-t: 0px; --p-size-t: 17px; --p-lh-t: 1.52; --p-ls-t: 0.2px; --p-ws-t: 0px; --p-mb-t: 12px; /* ——— Mobile (≤767px) ——— (lux compact) */ --h1-size-m: 1.55rem; --h1-lh-m: 1.08; --h1-ls-m: -0.02em; --h1-ws-m: 0px; --h2-size-m: 1.30rem; --h2-lh-m: 1.10; --h2-ls-m: -0.01em; --h2-ws-m: 0px; --p-size-m: 15px; --p-lh-m: 1.45; --p-ls-m: 0.15px; --p-ws-m: 0px; --p-mb-m: 0.9rem; } /* 2C-1 — Conteneur & gouttières (base commune) */ .entry-content{ max-width: var(--content-max-d, 1100px); margin-left: auto; margin-right: auto; padding-left: var(--gutter-d); padding-right: var(--gutter-d); box-sizing: border-box; } /* 2C-2 — Typographie Desktop (≥1024px) */ @media (min-width: 1024px){ .entry-content h1{ font-size: var(--h1-size-d); line-height: var(--h1-lh-d); letter-spacing: var(--h1-ls-d); word-spacing: var(--h1-ws-d); margin: 0 0 .4rem; } .entry-content h2{ font-size: var(--h2-size-d); line-height: var(--h2-lh-d); letter-spacing: var(--h2-ls-d); word-spacing: var(--h2-ws-d); margin: .15rem 0 .55rem; } .entry-content p{ font-size: var(--p-size-d); line-height: var(--p-lh-d); letter-spacing: var(--p-ls-d); word-spacing: var(--p-ws-d); margin: 0 0 var(--p-mb-d); } } /* 2C-3 — Tablette (768–1023px) */ @media (max-width: 1023px) and (min-width: 768px){ .entry-content{ padding-left: var(--gutter-t); padding-right: var(--gutter-t); } .entry-content h1{ font-size: var(--h1-size-t); line-height: var(--h1-lh-t); letter-spacing: var(--h1-ls-t); word-spacing: var(--h1-ws-t); margin: 0 0 .4rem; } .entry-content h2{ font-size: var(--h2-size-t); line-height: var(--h2-lh-t); letter-spacing: var(--h2-ls-t); word-spacing: var(--h2-ws-t); margin: .15rem 0 .55rem; } .entry-content p{ font-size: var(--p-size-t); line-height: var(--p-lh-t); letter-spacing: var(--p-ls-t); word-spacing: var(--p-ws-t); margin: 0 0 var(--p-mb-t); } } /* ===== Fin 2C3 ===== */ /* 2C-5 — Pleine largeur Gutenberg (sécurité) */ .alignwide, .alignfull, .wp-block-group.alignwide, .wp-block-group.alignfull, .wp-block-image.alignwide, .wp-block-image.alignfull, .wp-block-cover.alignwide, .wp-block-cover.alignfull{ width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; overflow-x: hidden; } /* === 2C-6 — Anti débordement horizontal (Mobile, Tablette, Desktop) === */ /* Mobile (jusqu’à 767px) */ @media (max-width: 767px) { html, body{ max-width: 100% !important; overflow-x: hidden !important; } .entry-content, .container, .site-main, .site-content{ max-width: 100% !important; overflow-x: hidden !important; margin-left: 0 !important; margin-right: 0 !important; } img, video{ max-width: 100% !important; height: auto !important; } } /* Desktop (à partir de 1025px) */ @media (min-width: 1025px) { html, body{ max-width: 100% !important; overflow-x: hidden !important; } #outer-wrap, #wrap, .site, .site-content, .container{ max-width: 100% !important; overflow-x: hidden !important; } .alignfull, .wp-block-cover.alignfull, .wp-block-group.alignfull{ width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow-x: hidden !important; } } /* Tablette (768px à 1024px) */ @media (min-width: 768px) and (max-width: 1024px) { html, body{ max-width: 100% !important; overflow-x: hidden !important; } .site, .site-content, .content-area{ max-width: 100% !important; overflow-x: hidden !important; } img, video{ max-width: 100% !important; height: auto !important; } } /* === Fin 2C-6 — Anti débordement horizontal === */ /* ========================================================= [PATCH 2C — FIN] ========================================================= */ /* ======================= 2D — Rythme vertical (sections) Début 2D ======================= */ /* Espace par défaut entre éléments de contenu */ .entry-content > *{ margin-top: var(--sp-s); margin-bottom: var(--sp-s); } /* Titres : on respecte PATCH #1 (tailles), ici seulement le rythme de section */ .entry-content h1{ margin-top: var(--sp-l); } .entry-content h2{ margin-top: var(--sp-m); } .entry-content h3{ margin-top: var(--sp-m); } /* Séparateurs */ .entry-content hr, .wp-block-separator{ margin-top: var(--sp-m); margin-bottom: var(--sp-m); opacity: .6; } /* Groupes Gutenberg : respiration douce */ .wp-block-group{ padding-top: var(--sp-s); padding-bottom: var(--sp-s); } @media (min-width: 1024px){ .wp-block-group{ padding-top: var(--sp-m); padding-bottom: var(--sp-m); } } /* Fin 2D */ /* ======================= 2E — Médias (images, vidéos, iframes) Début 2E ======================= */ /* Images dans le contenu : centrées, sans débordement */ .entry-content img, .wp-block-image img{ display: block !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: var(--sp-m) !important; border-radius: 8px; /* touche élégante */ background-color: var(--ml-cream); /* ivoire brand (défini en PATCH #1) */ } /* Mobile : éviter « bord à bord », aligner avec le texte */ @media (max-width: 767px){ .entry-content img, .wp-block-image img{ width: calc(100% - (var(--gutter-m) * 2)) !important; } } /* Vidéos / iframes responsives */ .entry-content iframe, .entry-content video{ display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; border: 0; } /* Fin 2E */ /* ======================= 2F — Colonnes, galeries, listes & citations Début 2F ======================= */ /* Colonnes Gutenberg */ .wp-block-columns{ gap: var(--sp-m); margin: var(--sp-m) 0; } @media (max-width: 767px){ .wp-block-columns{ gap: var(--sp-s); } } /* Galeries */ .wp-block-gallery{ gap: var(--sp-s); margin-top: var(--sp-m); margin-bottom: var(--sp-m); } /* Listes */ .entry-content ul, .entry-content ol{ padding-left: 1.25em; margin-top: var(--sp-xs); margin-bottom: var(--sp-xs); } .entry-content li{ margin: var(--sp-xxs) 0; } /* Citations */ .entry-content blockquote{ margin: var(--sp-m) auto; padding: var(--sp-s) var(--sp-m); border-left: 3px solid var(--ml-gold-dark); background: rgba(0,0,0,.03); border-radius: 6px; } /* Fin 2F */ /* ======================= 2G — Sécurités anti-débordement Début 2G ======================= */ html, body{ overflow-x: hidden; } #outer-wrap, #wrap, #content, #main, #colophon{ max-width: 100%; } img, svg, video, iframe{ max-width: 100%; height: auto; display: block; } /* Fin 2G */ /* ======================= 2H — Exception Accueil (H1 + H2 collés & centrés) Début 2H ======================= */ body.page-id-493 .entry-content h1{ margin-bottom: 0 !important; text-align: center !important; } body.page-id-493 .entry-content h2{ margin-top: 0 !important; text-align: center !important; } /* Fin 2H */ /* ========================================================= [PATCH #2 — FIN] ========================================================= */ /* ============================ [3aaa] SIGNATURE MONA LISA ============================ Objectif : gérer l’affichage de la signature Mona Lisa (page d’accueil + page bio), version finale élégante ============================ */ /* Réglages globaux pour la signature */ :root{ --signature-opacity: .95; /* transparence (0–1) */ --signature-maxh-desktop: 100px; /* hauteur max desktop */ --signature-maxh-mobile: 72px; /* hauteur max mobile */ } /* Style commun pour toutes les variantes de signature */ .signature-ml, .signature-ml-bio, .signature-ml img, .signature-ml-bio img{ display:block; margin:10px auto; /* centré horizontalement */ max-height:var(--signature-maxh-desktop); width:auto; height:auto; opacity:var(--signature-opacity); background:transparent!important; box-shadow:none!important; border:none!important; outline:none!important; filter:none!important; transition:none!important; transform:none!important; } /* Pas d’effets hover/click */ .signature-ml:hover, .signature-ml-bio:hover, .signature-ml img:hover, .signature-ml-bio img:hover{ box-shadow:none!important; border:none!important; transform:none!important; } /* Désactiver clic si image est enveloppée dans un lien */ .signature-ml a, .signature-ml-bio a{ pointer-events:none; cursor:default; } /* Variante mobile */ @media (max-width:767px){ .signature-ml, .signature-ml-bio, .signature-ml img, .signature-ml-bio img{ max-height:var(--signature-maxh-mobile); width:auto; } } /* ======= Fin du bloc 3 ======= */ /* ============================ [4] PIED DE PAGE – Capsules & icônes ============================ Objectif : dimensionner proprement les capsules dorées et les icônes blanches à l’intérieur, pour un rendu élégant, lisible et cohérent (desktop & mobile). Dépendances : variables de [1] (couleurs) déjà en place. ============================ */ /* Capsule dorée – gabarit par défaut (desktop) */ .mlj-footer-col .mlj-badge{ display:flex; align-items:center; justify-content:center; min-width:40px; /* largeur mini capsule */ height:40px; /* hauteur capsule */ padding:6px 10px; /* donne la forme “capsule”, pas un simple cercle */ border-radius:999px; /* ovale complet */ background:var(--ml-gold); box-shadow:0 1px 3px rgba(0,0,0,.08); transition:background-color .2s ease; } /* Icône blanche à l’intérieur de la capsule (desktop) */ .mlj-footer-col .mlj-badge .icon{ width:22px; height:22px; display:block; fill:#fff !important; stroke:#fff !important; } /* Survol : capsule passe à l’or fermé pour un feedback subtil */ .mlj-footer-col .mlj-btn:hover .mlj-badge{ background:var(--ml-gold-dark); } /* Alignement optique : texte centré verticalement face à l’icône */ .mlj-footer-col .mlj-btn{ display:grid; grid-template-columns:56px 1fr; /* 56px = largeur réservée capsule+espace */ align-items:center; column-gap:10px; } .mlj-footer-col .mlj-btn > .mlj-badge + span{ display:inline-block; transform:translateY(1px); /* micro-ajustement optique */ } /* Mobile : capsules et icônes légèrement plus compactes */ @media (max-width:767px){ .mlj-footer-col .mlj-badge{ min-width:36px; height:36px; padding:4px 8px; } .mlj-footer-col .mlj-badge .icon{ width:20px; height:20px; } .mlj-footer-col .mlj-btn{ grid-template-columns:52px 1fr; /* réduit un peu l’indent à gauche */ column-gap:10px; } } /* ======= Fin du bloc 4 ======= */ /* ======================================================= [BLOC 5 — FINAL] (DÉBUT DU BLOC 5) Pied de page Mona Lisa — capsules ovales or foncé, pictos ivoire (hover blanc), desktop + mobile + mode sombre ======================================================= */ /* 5.0 — Variables */ :root{ --ml-cream:#F8F5ED; /* ivoire (fond global) */ --ml-ink:#1C1C1C; /* noir satiné (texte) */ --ml-gold:#CBA75A; /* or classique (hover) */ --ml-gold-dark:#B68A2C; /* or foncé (capsule idle) */ --badge-h-desktop:40px; --badge-h-mobile:44px; --icon-d:22px; --gap:12px; --row-gap-desktop:8px; --row-gap-mobile:12px; } /* 5.1 — Ligne: capsule + texte (alignement parfait) */ .mlj-footer-col .mlj-btn, .mlj-footer-col .mlj-line{ display:grid !important; grid-template-columns:auto 1fr !important; align-items:center !important; column-gap:var(--gap) !important; margin:var(--row-gap-desktop) 0 !important; min-height:40px; text-decoration:none; color:var(--ml-ink); } /* 5.2 — Capsules OVALES uniforme */ .mlj-footer-col .mlj-badge{ display:inline-flex !important; align-items:center !important; justify-content:center !important; background:var(--ml-gold-dark) !important; /* or foncé */ color:#EFE9D6 !important; /* ivoire picto */ border:none !important; /* fără contur */ border-radius:999px !important; /* OVALE */ height:var(--badge-h-desktop) !important; min-width:calc(var(--badge-h-desktop) * 1.6) !important; padding:0 14px !important; /* pilule */ box-shadow:0 2px 6px rgba(0,0,0,.08); } /* 5.2b — Pictogrammes SVG (héritent la couleur) */ .mlj-footer-col .mlj-badge svg{ width:var(--icon-d); height:var(--icon-d); display:block; fill:currentColor; stroke:currentColor; } .mlj-footer-col .mlj-badge .icon, .mlj-footer-col .mlj-badge .icon *{ fill:currentColor !important; stroke:currentColor !important; } /* 5.2c — Hover/focus: or classique + picto blanc */ .mlj-footer-col a.mlj-btn:hover .mlj-badge, .mlj-footer-col a.mlj-btn:focus .mlj-badge{ background:var(--ml-gold) !important; color:#FFFFFF !important; } /* 5.3 — Texte à côté du badge */ .mlj-footer-col .mlj-btn span:last-child, .mlj-footer-col .mlj-line span:last-child{ color:var(--ml-ink); line-height:1.25; } /* 5.4 — Col. 2 plus large (adresse) + rythmes desktop */ @media (min-width:992px){ #footer-widgets .footer-box:nth-child(2){ flex:1.25 1 0%; } #footer-widgets .footer-box:nth-child(1), #footer-widgets .footer-box:nth-child(3), #footer-widgets .footer-box:nth-child(4){ flex:1 1 0%; } } /* 5.5 — Colonne 4 “Mentions” lisible */ .mlj-footer-col.mlj-mentions .mlj-footer-title{ color:var(--ml-gold-dark); } .mlj-footer-col.mlj-mentions, .mlj-footer-col.mlj-mentions .mlj-links a{ color:var(--ml-ink) !important; text-decoration:none; } .mlj-footer-col.mlj-mentions .mlj-links a:hover{ text-decoration:underline; } /* 5.6 — Mobile: une seule colonne, tap confortables (ajusté) */ @media (max-width:767px){ .mlj-footer-col .mlj-btn, .mlj-footer-col .mlj-line{ margin:var(--row-gap-mobile) 0 !important; min-height:48px; } .mlj-footer-col .mlj-badge{ height:calc(var(--badge-h-mobile) * 0.9) !important; /* capsules plus fines */ min-width:calc(var(--badge-h-mobile) * 1.5) !important; /* capsules moins larges */ padding:0 12px !important; /* marges internes réduites */ } } /* 5.7 — Fond footer ivoire + fără dungă/separateur */ .site-footer{ background:var(--ml-cream) !important; border-top:none !important; } #footer-bottom, .site-info, .footer-bottom, .copyright-text{ background:var(--ml-cream) !important; color:var(--ml-ink) !important; border-top:none !important; box-shadow:none !important; } #footer-bottom a, .site-info a, .copyright-text a{ color:var(--ml-ink) !important; } #footer-bottom a:hover, .site-info a:hover{ color:var(--ml-gold-dark) !important; } #main, .content-area, .site-main{ margin-bottom:0 !important; } #colophon, .site-footer{ box-shadow:none !important; } /* 5.8 — Accessibilité focus */ .mlj-footer-col a.mlj-btn:focus{ outline:none !important; box-shadow:0 0 0 2px rgba(203,167,90,.45); border-radius:12px; } /* 5.9 — Mode sombre (.dark-bg sur ) */ body.dark-bg .site-footer{ background:#1F1F1F !important; color:#EDE8D8 !important; } body.dark-bg .mlj-footer-col .mlj-btn span:last-child, body.dark-bg .mlj-footer-col.mlj-mentions, body.dark-bg .mlj-footer-col.mlj-mentions .mlj-links a{ color:#EDE8D8 !important; } body.dark-bg .mlj-footer-col .mlj-badge{ background:var(--ml-gold-dark) !important; color:#FFF6E0 !important; } body.dark-bg .mlj-footer-col a.mlj-btn:hover .mlj-badge{ background:var(--ml-gold) !important; color:#FFFFFF !important; } body.dark-bg #footer-bottom, body.dark-bg .site-info{ background:#1F1F1F !important; color:#EDE8D8 !important; border-top:none !important; } /* ======================================================= [BLOC 5 — FINAL] (FIN DU BLOC 5) ======================================================= */ /* #5 DÉBUT — Patch B (unification fond, contraste, textes, mentions) */ /* 1) Fond crème-ivoire unifié sur TOUT le pied de page (zéro rupture page/footer) */ .site-footer, #footer, #footer-widgets, .footer-widgets, .site-footer .oceanwp-row, .site-footer .footer-widgets .container, #footer-bottom, .site-info { background: var(--ml-cream) !important; color: var(--ml-ink) !important; border: none !important; box-shadow: none !important; background-image: none !important; } /* 2) Texte de corps à droite des icônes (colonnes 1–3) — encre (noir satiné) */ .site-footer .mlj-footer-col .mlj-btn span:last-child, .site-footer .mlj-footer-col .mlj-line span:last-child, .site-footer .mlj-footer-col .mlj-text { color: var(--ml-ink) !important; opacity: 1 !important; } /* 3) Titres de colonnes (1–4) — or fermé harmonisé */ .site-footer .mlj-footer-col .mlj-footer-title { color: var(--ml-gold-dark) !important; font-weight: 700; } /* 4) Mentions (col.4) — liens empilés, lisibles, couleur de corps */ .site-footer .mlj-footer-col.mlj-mentions .mlj-links a { display: block !important; margin: 6px 0 !important; line-height: 1.4 !important; color: var(--ml-ink) !important; text-decoration: none !important; } .site-footer .mlj-footer-col.mlj-mentions .mlj-links a:hover { text-decoration: underline !important; } /* 5) Contraste pictogrammes dans capsules — BLANC pur (neutralise “or sur SVG”) */ .site-footer .mlj-footer-col .mlj-badge { color: #ffffff !important; /* couleur du picto/texte interne */ } .site-footer .mlj-footer-col .mlj-badge svg, .site-footer .mlj-footer-col .mlj-badge svg * { fill: currentColor !important; stroke: currentColor !important; } /* 6) Cohérence mobile — même fond + confort tactile */ @media (max-width: 767px) { .site-footer, #footer, #footer-widgets, .footer-widgets, #footer-bottom, .site-info { background: var(--ml-cream) !important; color: var(--ml-ink) !important; } .mlj-footer-col .mlj-btn, .mlj-footer-col .mlj-line { min-height: 48px; } } /* 7) Sécurité d’unification – annule bords/ombres parasites hérités du thème */ .site-footer * { border-color: transparent !important; box-shadow: none !important; } /* #5B FIN — Patch B */ /* #5C DÉBUT — Patch ciblé (icônes BLANCHES + mentions en encre) */ /* 1) Icônes dans les capsules = BLANC pur (écrase toute règle “or sur SVG”) */ .site-footer .mlj-footer-col .mlj-badge{ color: #FFFFFF !important; /* couleur du picto/texte interne */ } .site-footer .mlj-footer-col .mlj-badge svg, .site-footer .mlj-footer-col .mlj-badge svg *{ fill: currentColor !important; stroke: currentColor !important; } /* garder le BLANC aussi au survol */ .site-footer .mlj-footer-col a.mlj-btn:hover .mlj-badge{ color: #FFFFFF !important; } /* 2) “Mentions” — couleur 100% encre (annule toute opacité résiduelle) */ .site-footer .mlj-footer-col.mlj-mentions .mlj-links a{ color: var(--ml-ink) !important; opacity: 1 !important; } /* #5C FIN — Patch ciblé */ /* #5E-1 DÉBUT — Ajustements structure + hover (desktop + global léger) */ /* (A) Réduction de l’espace page → footer (~50%) */ #main, .site-main, #content { margin-bottom: 0.5rem !important; /* réduction contrôlée */ } .site-footer { padding-top: 0.5rem !important; /* était plus grand; rendu plus compact */ } /* (B) Colonne 2 (Coordonnées) plus large sur desktop Objectif : l’adresse tient sur une seule ligne, sans impacter le mobile. */ @media (min-width: 1024px) { /* Cas 1 — structure OceanWP en "footer-box" (le plus courant) */ #footer-widgets .oceanwp-row { display: flex; flex-wrap: wrap; } #footer-widgets .footer-box:nth-child(2) { flex: 1.5 1 0% !important; /* colonne 2 élargie */ max-width: 40% !important; } #footer-widgets .footer-box:nth-child(1), #footer-widgets .footer-box:nth-child(3), #footer-widgets .footer-box:nth-child(4) { flex: 1 1 0% !important; max-width: 30% !important; } /* Cas 2 — structure personnalisée "mlj-footer" (si présente) */ .mlj-footer { display: grid !important; grid-template-columns: 1fr 1.4fr 1fr 1fr !important; /* 2e colonne plus large */ gap: 32px !important; } .mlj-footer-col.coords { min-width: 320px !important; } /* Texte d’adresse : éviter la césure si la largeur est disponible */ .mlj-footer-col.coords .mlj-line span:last-child { white-space: nowrap !important; overflow-wrap: normal !important; } } /* (C) "Mentions" — espacement vertical un peu plus généreux (desktop) */ @media (min-width: 1024px) { .mlj-footer-col.mlj-mentions .mlj-links a { margin: 8px 0 !important; } } /* (D) Hover/focus des capsules — effet luxe discret Capsule s’éclaire (or classique), icône/texte internes restent BLANCS */ .mlj-footer-col a.mlj-btn:hover .mlj-badge, .mlj-footer-col a.mlj-btn:focus .mlj-badge { background: var(--ml-gold) !important; /* or plus clair au hover */ color: #FFFFFF !important; /* icône + texte internes : blanc pur */ transform: translateY(-1px); /* feedback subtil (optionnel) */ } /* #5E-1 FIN — Ajustements */ /* ===== [5G-ciblé] Anti-gouttière droite (OceanWP) ===== */ /* 1) Pas de débordement horizontal */ html, body { overflow-x: clip !important; max-width: 100vw !important; } /* 2) Les conteneurs principaux ne dépassent jamais le viewport */ #outer-wrap, #wrap, #content, #main, #colophon { max-width: 100% !important; } /* 3) Boutons flottants – pas de poussée du layout */ #scroll-top, #scroll-top-right, a.scroll-top-right { position: fixed !important; right: 16px !important; inset-inline-end: 16px !important; } /* 4) Neutraliser la « compensation de scrollbar » imposée par le thème/JS */ html.owp-lock-scroll, body.owp-lock-scroll, html.owp-off-canvas-open, body.owp-off-canvas-open, html.modal-opened, body.modal-opened { padding-right: 0 !important; } /* 5) Médias fluides */ img, svg, video, iframe { max-width: 100% !important; height: auto !important; display: block; } /* 6) Ligne du footer – largeur jamais forcée */ #footer-widgets .oceanwp-row { margin: 0 auto !important; max-width: 100% !important; } .footer-widgets .footer-box { min-width: 0 !important; } /* ===== Fin du patch 5G-ciblé – correctif OceanWP ===== */ /* ========================================= SE6 — CORRECTIF OVERFLOW À DROITE (STABLE) But : supprimer toute bande vide à droite ========================================= */ /* 1) Empêche le scroll horizontal global */ html, body { overflow-x: hidden !important; } /* 2) Conteneurs principaux = largeur max 100% */ #outer-wrap, #wrap, .site, .site-content, .content-area, #content, #main, .site-main { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-right: 0 !important; } /* 3) Médias et blocs larges = limités à 100% */ img, video, iframe, table, .wp-block-image, .wp-block-cover, .wp-block-group, .alignfull, .alignwide, .wp-block-cover.alignfull, .wp-block-group.alignfull, .wp-block-image.alignfull { max-width: 100% !important; width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; } /* 4) Container OceanWP — centré, pas plus large que 1200px */ .container, .oceanwp-row, .site-main .container { width: 100% !important; max-width: 1200px !important; /* ajuste cette valeur si ton site utilise une largeur différente */ margin-left: auto !important; margin-right: auto !important; padding-right: 0 !important; } /* ====== Fin du patch SE6 (OVERFLOW FIX STABLE) ====== */ /* Patch #7 - Mise en forme du symbole ® en exposant */ /* Classe spécifique pour le symbole Registered Mark */ sup.regmark { font-size: 70%; /* Réduction de la taille du symbole */ vertical-align: super; /* Position en exposant */ line-height: 0; /* Suppression des espaces indésirables */ } /* Fin Patch #7 */ /* [PATCH #8 START] — Typographie + Marges + Espacement pied de page */ /* 8.1 — Typographie discrète H1/H2/H3 (appliquée sur l’ensemble du site) */ h1 { font-size: 34px; line-height: 1.2; } h2 { font-size: 26px; line-height: 1.25; } h3 { font-size: 20px; line-height: 1.3; } @media (max-width: 767px){ h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; } } /* 8.2 — Largeur de lecture et marges latérales plus présentes */ .site-main .container, #main .container { max-width: 680px; /* largeur de lecture idéale sur desktop */ margin-left: auto; margin-right: auto; } /* Application spécifique aux articles et aux archives de blog */ .blog .site-main .container, .archive .site-main .container, .single-post .site-main .container { max-width: 680px; } /* Tablette : contenu plus fluide mais toujours centré */ @media (max-width: 1023px){ .site-main .container, #main .container { max-width: 92%; } } /* Mobile : marges internes pour un confort de lecture optimal */ @media (max-width: 767px){ .site-main .container, #main .container { max-width: 94%; padding-left: 20px; padding-right: 20px; } } /* 8.3 — Stabilisation de l’espace avant le pied de page */ .site-main { margin-bottom: 24px !important; /* espace constant sous le contenu */ } .site-main > *:last-child { margin-bottom: 0 !important; /* évite une marge doublée à la fin */ } .site-footer { padding-top: 24px !important; /* respiration élégante au-dessus du footer */ } /* [PATCH #8 FIN] */ /* [PATCH #9 START] Objectif : Harmoniser marges latérales, titres, paragraphes et images Date : 20.09.2025 */ /* 9.1 — Variables de base */ :root { --ml-pad-desktop: 40px; /* marge latérale sur desktop */ --ml-pad-tablet: 28px; /* marge latérale sur tablette */ --ml-pad-mobile: 20px; /* marge latérale sur mobile */ --ml-max-text: 760px; /* largeur max. de la colonne de lecture */ } /* 9.2 — Conteneur principal du contenu */ .site-main .entry-content, .page .entry-content { max-width: var(--ml-max-text); margin-left: auto; margin-right: auto; padding-left: var(--ml-pad-desktop); padding-right: var(--ml-pad-desktop); } /* Adaptation tablette */ @media (max-width: 1023px) { .site-main .entry-content, .page .entry-content { padding-left: var(--ml-pad-tablet); padding-right: var(--ml-pad-tablet); } } /* Adaptation mobile */ @media (max-width: 767px) { .site-main .entry-content, .page .entry-content { padding-left: var(--ml-pad-mobile); padding-right: var(--ml-pad-mobile); } } /* 9.3 — Typographie des titres */ h1 { font-size: 2.2rem; /* environ 35px sur desktop */ line-height: 1.25; margin-bottom: 1.2em; text-align: center; } h2 { font-size: 1.8rem; /* environ 29px */ line-height: 1.3; margin-bottom: 1em; text-align: left; } h3 { font-size: 1.4rem; /* environ 22px */ line-height: 1.35; margin-bottom: 0.8em; text-align: left; } /* 9.4 — Paragraphes et listes */ .entry-content p, .entry-content li { font-size: 1.05rem; /* ~16,5px : confort de lecture */ line-height: 1.7; /* interligne généreux */ margin-bottom: 1.2em; max-width: var(--ml-max-text); } /* 9.5 — Images : éviter qu’elles s’étalent artificiellement */ .entry-content img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } /* Limite spécifique pour les images décoratives (ex. signature) */ .entry-content img.aligncenter { max-width: 760px; /* largeur max. ajustable si besoin */ } /* [PATCH #9.5 FIN] */ /* [PATCH #9.6 DÉBUT] — Mobile : titres centrés, marges latérales réelles, images recentrées Portée : pages, articles, catégories, blocs Gutenberg et widgets texte OceanWP/Elementor. */ @media (max-width: 767px){ /* =========================== [PATCH #9.8] — Typo desktop Objectif : agrandir légèrement la taille du paragraphe sur DESKTOP S’applique uniquement au ≥ 1024px. =========================== */ @media (min-width: 1024px) { /* Paragraphe principal dans le contenu des pages/articles */ .entry-content p { font-size: 18px; /* taille de lecture confortable sur grand écran */ line-height: 1.7; /* respiration du texte */ } } /* [PATCH #9.8 FIN] */ /* =========================================== [PATCH #9.9 DÉBUT] — Page d’accueil : H1 + H2 Deux règles distinctes : desktop et mobile =========================================== */ /* --- Version DESKTOP (≥768px) --- */ @media (min-width: 768px) { .home .entry-content h1, .home .entry-content h2 { text-align: center !important; } .home .entry-content h1 { margin-bottom: 0 !important; /* collé au H2 */ } .home .entry-content h1 + h2 { margin-top: 0 !important; /* collé au H1 */ } .home .entry-content h2 { margin-bottom: 0.3rem !important; /* léger espace avant le texte */ } } /* --- Version MOBILE (≤767px) --- */ @media (max-width: 767px) { .home .entry-content h1, .home .entry-content h2 { text-align: center !important; } .home .entry-content h1 { margin-bottom: 0 !important; } .home .entry-content h1 + h2 { margin-top: 0 !important; } .home .entry-content h2 { margin-bottom: 0 !important; /* totalement collé au texte suivant */ } } /* [PATCH #9.9 FIN] */ /* [PATCH #9 FIN] */ /* =========================================== [PATCH #10 — DÉBUT] — Correction asymétrie mobile (Blog/Archive) Objectif : garantir une marge gauche/droite parfaitement symétrique sur les listes d’articles (Blog & Archives). Thème : OceanWP + Gutenberg Date : 20.09.2025 =========================================== */ @media (max-width: 767px){ /* 10.1 — Conteneurs principaux (liste articles) : gouttières égales */ .blog .site-main .container, .archive .site-main .container { padding-left: 16px !important; padding-right: 16px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* 10.2 — Wrappers internes OceanWP : suppression de tout décalage */ .blog .blog-entry-inner, .archive .blog-entry-inner, .blog .entry-header, .archive .entry-header, .blog .entry-summary, .archive .entry-summary { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* 10.3 — Éléments texte : aucun padding/marge latérale parasite */ .blog .entry-title, .archive .entry-title, .blog .entry-summary p, .archive .entry-summary p { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* 10.4 — Bouton "Continuer la lecture" : aligné avec le texte */ .blog .read-more, .archive .read-more { margin-left: 0 !important; margin-right: 0 !important; } } /* =========================================== [PATCH #10 — FIN] =========================================== */ /* =========================================== [PATCH #11 — DÉBUT] — Harmonisation mobile (Accueil & Pages) Objectif : marges gauche/droite parfaitement symétriques sur la page d’accueil et toutes les pages (≤767px). Thème : OceanWP + Gutenberg Date : 20.09.2025 =========================================== */ @media (max-width: 767px){ /* 11.1 — Conteneurs haut-niveau : gutters uniformes */ .home .site-main .container, .page .site-main .container, .home #main .container, .page #main .container, .home .content-area, .page .content-area{ padding-left: 16px !important; padding-right: 16px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* 11.2 — Zone de contenu : aucun décalage interne latéral */ .home .entry-content, .page .entry-content, .home .page-content, .page .page-content{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* 11.3 — Éléments texte : neutralisation des paddings/marges parasites */ .home .entry-content h1, .home .entry-content h2, .home .entry-content h3, .page .entry-content h1, .page .entry-content h2, .page .entry-content h3, .home .entry-content p, .page .entry-content p, .home .entry-content ul, .home .entry-content ol, .page .entry-content ul, .page .entry-content ol{ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* 11.4 — Blocs alignwide/alignfull : largeur 100%, sans recadrage latéral */ .home .entry-content .alignwide, .home .entry-content .alignfull, .page .entry-content .alignwide, .page .entry-content .alignfull, .home .wp-block-group.alignwide, .page .wp-block-group.alignwide{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* 11.5 — Images : centrées et respirantes dans le cadre des 16px */ .home .entry-content img, .page .entry-content img{ display: block !important; margin-left: auto !important; margin-right: auto !important; max-width: calc(100% - 32px) !important; /* 16px + 16px */ height: auto !important; } } /* =========================================== [PATCH #11 — FIN] =========================================== */ /* =========================================== [PATCH #12 — DÉBUT] — Consolidation mobile (gouttières globales) Objectif : une seule source de vérité pour les marges latérales sur mobile, sur TOUTES les vues (Accueil, Pages, Articles, Archives). Thème : OceanWP + Gutenberg Date : 20.09.2025 =========================================== */ @media (max-width: 767px){ /* 12.1 — Conteneurs de haut niveau : gutter unique = 16px */ .home .site-main .container, .page .site-main .container, .single-post .site-main .container, .archive .site-main .container, .blog .site-main .container, .home #main .container, .page #main .container, .single-post #main .container, .archive #main .container, .blog #main .container, .home .content-area, .page .content-area, .single-post .content-area, .archive .content-area, .blog .content-area{ padding-left: 16px !important; padding-right: 16px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* 12.2 — Zone de contenu : aucune marge/padding latéral résiduel */ .home .entry-content, .page .entry-content, .single-post .entry-content, .archive .entry-content, .blog .entry-content{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* 12.3 — Éléments texte (titres, paragraphes, listes) : pas d’offset local */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content p, .entry-content ul, .entry-content ol{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* 12.4 — Wrappers OceanWP dans les listes d’articles (sécurité) */ .blog .blog-entry-inner, .archive .blog-entry-inner, .blog .entry-header, .archive .entry-header, .blog .entry-summary, .archive .entry-summary, .blog .read-more, .archive .read-more{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* 12.5 — Médias : centrés, respirent dans le cadre 16px */ .entry-content img, .page-content img, .wp-block-image img, .wp-block-image figure img{ display: block !important; margin-left: auto !important; margin-right: auto !important; max-width: calc(100% - 32px) !important; /* 16px + 16px */ height: auto !important; } } /* 12.6 — Micro-fix marque ® : espacement optique plus propre dans les titres */ sup.regmark{ font-size:70%; vertical-align:super; line-height:0; } sup.regmark { margin-left: 1px; } /* évite l’espace visuel avant le ® */ sup.regmark + * { margin-left: 0 !important; } /* aucun décalage après */ /* =========================================== [PATCH #12 — FIN] =========================================== */ /* =========================================================== [PATCH #13 — DÉBUT] Silhouette Mona Lisa (page d’accueil) Structuré en sous-chapitres : 13.0 (base Parent), 13.1 (mobile fixe), 13.2 (recentrage fin) =========================================================== */ /* ────────────────────────────────────────────────────────── 13.0 — BASELINE DESKTOP/TABLETTE (référence Parent) ────────────────────────────────────────────────────────── */ /* Support des pseudo-éléments sur le body */ body.page-id-493 { position: relative; } /* Voile crème sous le contenu (plein écran, fixe) */ body.page-id-493::before{ content:""; position: fixed; inset: 0; background: linear-gradient(rgba(248,245,237,0.97), rgba(248,245,237,0.97)); pointer-events: none; z-index: 0; /* derrière le contenu */ } /* Silhouette + film crème (plein écran, fixe) — valeurs Parent */ body.page-id-493::after{ content:""; position: fixed; inset: 0; background-image: linear-gradient(rgba(248,245,237,0.97), rgba(248,245,237,0.97)), url("https://monalisa.paris/wp-content/uploads/2025/08/silhouette_gris_satin.png"); background-repeat: no-repeat, no-repeat; background-position: center top, right -45px top -120px; /* Parent */ background-size: 100% 100%, 80vw auto; /* Parent */ pointer-events: none; z-index: 0; } /* Contenu au-dessus des calques */ #outer-wrap, #wrap, .site, #content, #main, .site-content{ position: relative; z-index: 1; } /* ────────────────────────────────────────────────────────── 13.1 — MOBILE FIXE (≤ 767px) But : conserver la silhouette FIXE aussi sur mobile, en reprenant les valeurs Parent comme point de départ. ────────────────────────────────────────────────────────── */ @media (max-width: 767px){ body.page-id-493::before, body.page-id-493::after{ position: fixed !important; /* fixe au scroll */ } body.page-id-493::after{ background-image: linear-gradient(rgba(248,245,237,0.92), rgba(248,245,237,0.92)), url("https://monalisa.paris/wp-content/uploads/2025/08/silhouette_gris_satin.png"); background-repeat: no-repeat, no-repeat; background-position: center top, calc(50% + 70px) -30px; /* Parent */ background-size: cover, 92vw auto !important; /* Parent */ } } /* ────────────────────────────────────────────────────────── 13.2 — AJUSTEMENTS FINESSE (anti-coupe du haut) But : descendre légèrement la silhouette et la réduire un peu pour éviter la “frange coupée” quand l’espace avant le footer a été compacté. ────────────────────────────────────────────────────────── */ /* Desktop / tablette (≥ 768px) */ @media (min-width: 768px){ body.page-id-493::after{ background-size: 72vw auto !important; /* 80vw → 72vw */ background-position: center top, right -45px top 90px !important; /* -120px → +90px */ } } /* Mobile (≤ 767px) */ @media (max-width: 767px){ body.page-id-493::after{ background-size: cover, 84vw auto !important; /* 92vw → 84vw */ background-position: center top, calc(50% + 60px) 35px !important; /* -30px → +30px */ } } /* =========================================================== [PATCH #13.3 — DÉBUT] Footer transparent (accueil) Objectif : continuité parfaite de la silhouette sous le footer =========================================================== */ body.page-id-493 #footer, body.page-id-493 #footer-widgets, body.page-id-493 #footer-bottom, body.page-id-493 .site-footer, body.page-id-493 .site-info, body.page-id-493 .site-footer .oceanwp-row, body.page-id-493 .site-footer .footer-widgets, body.page-id-493 .site-footer .container { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* Sécurité : le contenu du footer reste au-dessus de la silhouette */ body.page-id-493 #colophon, body.page-id-493 .site-footer { position: relative; z-index: 1; } /* =========================================================== [PATCH #13.3 — FIN] =========================================================== */ /* =========================================================== [PATCH #13 — FIN] =========================================================== */ /* =========================================================== [PATCH #14 — DÉBUT] Galerie 6 fenêtres (Homepage → Catalogue) Objet : Grille de 6 tuiles cliquables (3×2 desktop, 2×3 mobile) Copie intégrale du Parent, adaptée en Child. =========================================================== */ /* 14.1 — Container grille (uniquement sur la home) */ .page-id-493 .catalog-tiles { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 colonnes en desktop */ gap: 16px; max-width: 1100px; margin: 20px auto 26px; padding: 0 20px; } /* 14.2 — Carte/tile */ .page-id-493 .catalog-tiles .tile a { display: block; position: relative; overflow: hidden; border-radius: 14px; background: #FFFDF7; /* ivoire clair – luxe */ border: 1px solid #E6E0D2; /* contour fin */ box-shadow: 0 6px 18px rgba(0,0,0,.05); transition: transform .25s ease, box-shadow .25s ease; } .page-id-493 .catalog-tiles .tile a:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.10); } /* 14.3 — Image (ratio carré) */ .page-id-493 .catalog-tiles .tile img { width: 100%; aspect-ratio: 1/1; /* carré parfait */ object-fit: cover; /* centre et coupe l’excédent */ display: block; } /* 14.4 — Titre superposé (bandeau discret) */ .page-id-493 .catalog-tiles .tile-title { position: absolute; left: 0; right: 0; bottom: 0; padding: .55rem .8rem; background: linear-gradient(transparent, rgba(0,0,0,.28)); color: #fff; font-family: "GFS Didot", serif; font-weight: 600; letter-spacing: .3px; text-align: center; } /* 14.5 — Version mobile (2 colonnes × 3 lignes) */ @media (max-width: 767px) { .page-id-493 .catalog-tiles { grid-template-columns: repeat(2, 1fr); /* 2 colonnes */ gap: 12px; padding: 0 14px; margin: 16px auto 20px; } .page-id-493 .catalog-tiles .tile-title { font-size: .95rem; padding: .45rem .6rem; } } /* =========================================================== [PATCH #14 — FIN] =========================================================== */ /* ======================================================= [PATCH #15 — MENU GLOBAL] Mona Lisa – Menu principal (toutes pages) ======================================================= */ /* [15.1] Container menu centré (desktop) */ .wp-block-navigation{ display:flex; justify-content:center; gap:18px; padding:6px 0 8px; margin:14px auto; } /* [15.2] Liens niveau 1 */ .wp-block-navigation .wp-block-navigation-item__content{ color:var(--ml-ink); text-decoration:none; font-size:16px; line-height:1.35; padding:6px 4px; } .wp-block-navigation .wp-block-navigation-item__content:hover{ color:var(--ml-gold); } /* [15.3] Sous-menu */ .wp-block-navigation__submenu-container{ background:var(--ml-cream); border:1px solid var(--ml-ivory-line); border-radius:10px; padding:8px 8px; box-shadow:0 10px 24px rgba(0,0,0,.08); z-index:1000; min-width:220px; } .wp-block-navigation__submenu-container a{ display:block; color:var(--ml-ink); text-decoration:none; font-size:15px; line-height:1.35; padding:10px 10px; margin:2px 0; border-radius:6px; } .wp-block-navigation__submenu-container a:hover{ color:var(--ml-gold); background:rgba(203,167,90,.08); } /* [15.4] Mobile responsive */ @media (max-width:767px){ .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation__responsive-dialog{ background: var(--ml-cream) !important; position: fixed; inset: 0; z-index: 9999; min-height: 100vh; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; padding-top: 40px; } .wp-block-navigation .wp-block-navigation-item__content{ font-size:18px; padding:12px 8px !important; display:block; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li + li{ margin-top:10px !important; } .wp-block-navigation__submenu-container a{ font-size:17px; padding:10px 12px; margin:6px 0 !important; } } /* =========================================================== [PATCH #15 — FIN] =========================================================== */ /* ======================================================= [CAP 16] MONA LISA — MENU PRINCIPAL (version corrigée) Règle: desktop harmonisé | mobile hamburger | anti-surcharges thème ======================================================= */ /* [0] Variables de marque (fallback si déjà définies ailleurs) */ :root{ --ml-ink: #1C1C1C; /* noir satiné (texte) */ --ml-gold: #CBA75A; /* or raffiné */ --ml-cream: #F8F5ED; /* ivoire (fond) */ --ml-ivory-line:#E6E2D7; /* liseré discret */ } /* ======================================================= [1] BASE GLOBALE (toutes pages) ======================================================= */ /* Conteneur du bloc Navigation — centré, espacement propre */ body .wp-block-navigation{ display:flex; justify-content:center; align-items:center; gap: 2px; padding: 6px 0 8px; margin: 14px auto; box-shadow:none !important; background-image:none !important; } /* Liens de 1er niveau — noir satiné, pas de soulignement */ body .wp-block-navigation .wp-block-navigation-item__content{ color: var(--ml-ink) !important; text-decoration: none !important; font-size: 16px; line-height: 1.35; padding: 6px 4px; border: none; box-shadow: none !important; } body .wp-block-navigation .wp-block-navigation-item__content:hover{ color: var(--ml-gold) !important; text-decoration: none !important; } /* État “page courante” — encadré fin or, discret */ body .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, body .wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content, body .wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content, body .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]{ border: 2px solid var(--ml-gold); border-radius: 10px; padding: 8px 12px; /* met en valeur sans “gonfler” */ background: transparent; color: var(--ml-ink) !important; } /* Sous-menus — fond ivoire, coins doux, ombre légère */ body .wp-block-navigation__submenu-container{ background: var(--ml-cream) !important; border: 1px solid var(--ml-ivory-line); border-radius: 10px; padding: 8px 8px; box-shadow: 0 10px 24px rgba(0,0,0,.08); z-index: 1000; min-width: 220px; max-width: 90vw; } body .wp-block-navigation__submenu-container a{ display:block; color: var(--ml-ink) !important; text-decoration:none !important; font-size:15px; line-height:1.35; padding:10px 10px; margin:2px 0; border-radius:6px; } body .wp-block-navigation__submenu-container a:hover{ color:var(--ml-gold) !important; background: rgba(203,167,90,.08); } /* Nettoyage des soulignements/bordures hérités de thèmes */ body .wp-block-navigation a{ text-decoration: none !important; border: none !important; } /* Boutons du conteneur réactif (hamburger/fermeture) — or */ body button.wp-block-navigation__responsive-container-open, body button.wp-block-navigation__responsive-container-close{ color: var(--ml-gold) !important; background: transparent; border: 0; } body button.wp-block-navigation__responsive-container-close{ font-size:30px !important; padding:14px !important; } /* ======================================================= [2] MOBILE (≤ 767px) — panneau plein écran ======================================================= */ @media (max-width:767px){ /* Panneau ouvert: plein écran ivoire, scrollable, offset top */ body .wp-block-navigation__responsive-container.is-menu-open, body .wp-block-navigation__responsive-dialog{ background: var(--ml-cream) !important; position: fixed; inset: 0; z-index: 9999; min-height: 100vh; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; padding-top: 40px; animation: menuFadeSlide 0.35s ease-in-out; } /* Liste principale — cibles tactiles confortables, alignée */ body .wp-block-navigation .wp-block-navigation-item__content{ font-size: 18px; line-height: 1.35; padding: 12px 8px !important; display:block; color: var(--ml-ink) !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li + li{ margin-top: 10px !important; } /* Sous-menu en mobile — taille/espacement */ body .wp-block-navigation__submenu-container a{ font-size: 17px; padding: 10px 12px; margin: 6px 0 !important; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ margin-top: 4px !important; padding-top: 4px !important; } /* Focus accessible discret doré */ body .wp-block-navigation .wp-block-navigation-item__content:focus, body .wp-block-navigation__submenu-container a:focus{ outline:none !important; box-shadow: 0 0 0 0.8px var(--ml-gold) !important; border-radius: 2px !important; text-decoration:none !important; color: var(--ml-ink) !important; } /* Animations d’apparition */ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ animation: ml-fadeSlideIn .18s ease-out both; } body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ animation: ml-fadeIn .16s ease-out both; } /* Tap highlight iOS neutre */ body a, body button{ -webkit-tap-highlight-color: rgba(0,0,0,0); } } /* Respect du “reduce motion” */ @media (prefers-reduced-motion: reduce){ body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ animation: none !important; } } /* Keyframes */ @keyframes ml-fadeSlideIn{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform: translateY(0); } } @keyframes ml-fadeIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes menuFadeSlide{ from{ opacity:0; transform: translateY(-10px); } to{ opacity:1; transform: translateY(0); } } /* ======================================================= [3] MODE FOND SOMBRE (mobile) — lecture optimisée ======================================================= */ @media (max-width:767px){ body.dark-bg .wp-block-navigation .wp-block-navigation-item__content, body.dark-bg .wp-block-navigation__submenu-container a{ color: var(--ml-gold) !important; } } /* ======================================================= [4] GARDE-FOU TAILLES/ALIGNEMENTS SPÉCIFIQUES - Normalise sur pages où le thème forçait des styles ======================================================= */ body .wp-block-navigation .wp-block-navigation-item__content, body .wp-block-navigation .wp-block-navigation-item__content *{ text-decoration: none !important; border: none !important; } body .wp-block-navigation__container{ align-items: flex-start; /* évite l’étirement vertical */ } /* ======================================================= [CAP 16 — FIN] ======================================================= */ /* ======================================================= [CAP 16 — Complément A] ÉTAT ACTIF DU MENU (GLOBAL) DÉBUT ------------------------------------------------------- Objectif : encadrer finement en or le lien de la page courante, sur toutes les pages. (A coller APRÈS le CAP 16 existant.) ======================================================= */ /* Desktop + Mobile : détecte l’item actif via WP et WPNavi */ .wp-block-navigation li.current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation li.current_page_item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]{ border:1px solid var(--ml-gold); border-radius:10px; background:transparent; box-shadow:none; color:var(--ml-ink); } /* Harmonisation des espacements sur mobile */ @media (max-width:767px){ .wp-block-navigation li.current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation li.current_page_item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]{ padding:10px 12px; } } /* ======================================================= [CAP 16 — Complément A] FIN ======================================================= */ /* [PATCH 17 — début] Séparateur doré (image LIGNE.jpg, style fin) */ .ml-sep17 img { display:block; margin:20px auto; /* centre sur la page */ height:1px !important; /* très fin, comme une barre hamburger */ width:140px; /* largeur proche du bouton CV sur mobile */ object-fit:cover; } /* [PATCH 17 — fin] */ /* ========================================================= PATCH 18 – DÉBUT PAGE CONTACT – MONA LISA JOAILLERIE Structure responsive : desktop en 2 colonnes, mobile en blocs ========================================================= */ /* [18.1] Fond général de la page Contact */ #contact-page { background-color: #F8F5ED; /* ivoire – couleur de fond globale */ color: #1C1C1C; /* noir satiné pour le texte */ font-family: "Libre Baskerville", serif; padding: 60px 20px; } /* [18.2] Titres principaux */ #contact-page h1 { text-align: center; font-size: 2.4rem; font-weight: 600; margin-bottom: 20px; color: #1C1C1C; } #contact-page p.contact-intro { text-align: center; font-size: 1.2rem; max-width: 700px; margin: 0 auto 60px auto; line-height: 1.6; } /* [18.3] Cartes de lieux */ .lieu { background-color: #FFFFFF; /* fond blanc pour les cartes */ border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); margin: 40px auto; padding: 40px; max-width: 1100px; } .lieu h2 { font-size: 1.8rem; margin-bottom: 10px; color: #1C1C1C; } .lieu p em { font-style: italic; color: #CBA75A; /* accent doré */ } /* [18.4] Disposition desktop – deux colonnes */ .desktop-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .desktop-layout .lieu-texte { display: flex; flex-direction: column; justify-content: center; } .desktop-layout .lieu-photos figure { margin-bottom: 20px; } .desktop-layout .lieu-photos img { width: 100%; height: auto; border-radius: 12px; } /* [18.5] Disposition mobile – une seule colonne */ .mobile-layout { display: none; } .mobile-layout figure { margin-bottom: 20px; } .mobile-layout img { width: 100%; height: auto; border-radius: 12px; } /* [18.6] Bloc coordonnées */ .coordonnees { background-color: #FFFFFF; border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); max-width: 700px; margin: 60px auto; padding: 30px; text-align: center; } .coordonnees h2 { font-size: 1.8rem; margin-bottom: 20px; } .coordonnees ul { list-style: none; padding: 0; margin: 0; } .coordonnees li { margin: 10px 0; font-size: 1.2rem; } .coordonnees a { color: #CBA75A; text-decoration: none; font-weight: 600; } /* [18.7] Bloc réseaux sociaux */ .reseaux { text-align: center; margin: 40px auto; } .reseaux h2 { font-size: 1.8rem; margin-bottom: 20px; } .reseaux ul { list-style: none; padding: 0; } .reseaux li { margin: 8px 0; font-size: 1.2rem; } .reseaux a { color: #CBA75A; text-decoration: none; font-weight: 600; } /* [18.8] Bloc rendez-vous commun */ .rdv-options { background-color: #FFFFFF; border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); max-width: 700px; margin: 60px auto; padding: 30px; text-align: center; } .rdv-options h3 { font-size: 1.8rem; margin-bottom: 20px; } .rdv-options ul { list-style: none; padding: 0; } .rdv-options li { margin: 10px 0; } .rdv-options a { display: inline-block; background-color: #CBA75A; color: #FFFFFF; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease; } .rdv-options a:hover { background-color: #B68A2C; } /* [18.9] Bloc d’assurance client */ .contact-assurance { max-width: 800px; margin: 60px auto; text-align: center; font-size: 1.1rem; line-height: 1.6; color: #1C1C1C; } /* [18.10] Responsive – affichage mobile */ @media (max-width: 768px) { .desktop-layout { display: none; } .mobile-layout { display: block; } #contact-page { padding: 40px 15px; } #contact-page h1 { font-size: 2rem; } .lieu { padding: 25px; } .coordonnees, .rdv-options { padding: 20px; } } /* ========================================================= PATCH 18 – FIN ========================================================= */ /* ========================================================= PATCH 19 – DÉBUT PAGE CONTACT — Version DELUXE unifiée ========================================================= */ /* [19.0] Variables de marque principales */ #contact-page { --ivoire: #F8F5ED; --or: #CBA75A; --or2: #B68A2C; --encre: #1C1C1C; --blanc: #FFFFFF; } /* [19.1] Bloc RDV — structure de base */ #contact-page .rdv-options { background: var(--blanc); } #contact-page .rdv-options h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 16px 0; color: var(--or); text-align: center; } #contact-page .rdv-options ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: center; gap: 12px; } #contact-page .rdv-options li { margin: 0; padding: 0; position: relative; } /* Suppression de tout contenu non-lien (ex. emojis) */ #contact-page .rdv-options li > :not(a) { display: none !important; } /* [19.2] Boutons RDV — style “ghost luxe” avec largeur uniforme */ #contact-page .rdv-options { --btnW-d: 320px; /* largeur desktop */ --btnW-m: 260px; /* largeur mobile */ --btnR: 30px; /* rayon arrondi */ --btnFd: 1rem; /* fonte desktop */ --btnFm: 0.9rem; /* fonte mobile */ } #contact-page .rdv-options a { width: var(--btnW-d); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 22px; border: 1.5px solid var(--or); background: var(--blanc); color: var(--or); text-decoration: none; font-weight: 600; font-size: var(--btnFd); border-radius: var(--btnR); transition: all 0.25s ease; } #contact-page .rdv-options a:hover, #contact-page .rdv-options a:focus { background: var(--or); color: #FFF; border-color: var(--or2); } /* [19.3] Icônes dorées intégrées automatiquement (sans modifier le HTML) */ #contact-page .rdv-options a::before { content: ""; display: inline-block; width: 18px; height: 18px; background-size: 18px 18px; background-repeat: no-repeat; } /* WhatsApp */ #contact-page .rdv-options a[href^="https://wa.me"]::before { background-image: url("data:image/svg+xml;utf8,"); } /* Téléphone */ #contact-page .rdv-options a[href^="tel:"]::before { background-image: url("data:image/svg+xml;utf8,"); } /* E-mail */ #contact-page .rdv-options a[href^="mailto:"]::before { background-image: url("data:image/svg+xml;utf8,"); } /* [19.4] Coordonnées — style cohérent, élégant et sobre */ #contact-page .coordonnees h2 { color: var(--or); text-align: center; } #contact-page .coordonnees a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--or); font-weight: 600; } /* ==================== MOBILE ==================== */ @media (max-width: 768px) { /* [19.5] RDV — proportions fines */ #contact-page .rdv-options h3 { font-size: 0.95rem !important; line-height: 1.35 !important; margin-bottom: 12px !important; } #contact-page .rdv-options a { width: var(--btnW-m); font-size: var(--btnFm); padding: 8px 16px; border-radius: var(--btnR); } /* [19.6] Coordonnées — typographies réduites */ #contact-page .coordonnees h2 { font-size: 1.05rem !important; margin-bottom: 10px !important; } #contact-page .coordonnees li, #contact-page .coordonnees a { font-size: 0.9rem !important; line-height: 1.4 !important; } } /* ========================================================= [PATCH 19] — Fin ========================================================= */ /* ========================================================= [PATCH 20] — Bloc fondateur « Mona Lisa » Style signature : ivoire-crème, bords arrondis, accent or profond ➤ Application : uniquement pour le bloc fondateur principal ➤ Classe HTML :
========================================================= */ /* [20.1] — Bloc principal */ blockquote.ml-fondation.ml-fondation-principal { background: #F8F5ED; /* ivoire-crème */ border: 1px solid #E9E1CF; /* bordure claire */ border-radius: 20px; /* coins arrondis */ padding: 28px 30px; /* espace intérieur */ margin: 40px auto; /* centrage */ max-width: 960px; /* largeur optimale */ font-size: 1.15rem; /* taille lisible */ line-height: 1.75; /* interligne confortable */ color: #1C1C1C; /* noir satiné */ box-shadow: 0 6px 22px rgba(0,0,0,0.06);/* ombre subtile */ position: relative; } /* [20.2] — Liseré doré vertical (efface a cause de 23 et 24) */ /* [20.3] — Mise en valeur de la première phrase */ blockquote.ml-fondation.ml-fondation-principal strong { color: #B68A2C; /* or profond */ font-weight: 600; } /* [20.4] — Ligne ornementale discrète */ blockquote.ml-fondation.ml-fondation-principal .ml-fleuron { display: block; width: 120px; height: 2px; margin: 16px auto 0; background: linear-gradient(90deg, rgba(182,138,44,0), rgba(182,138,44,.9), rgba(182,138,44,0)); border-radius: 2px; } /* [20.5] — Version responsive (mobile) */ @media (max-width: 600px) { blockquote.ml-fondation.ml-fondation-principal { font-size: 1.05rem; padding: 22px 20px; border-radius: 16px; } } /* ========================================================= [PATCH 20] — fin ========================================================= */ /* ========================================================= [PATCH 21] — Bloc fondateur « Mona Lisa » — Version Luxe Esthétique : ivoire-crème subtil, coins arrondis doux, liseré doré raffiné, typographie lisible et équilibrée, responsive mobile/desktop. ========================================================= */ /* [21.1] — Bloc principal */ blockquote.ml-fondation.ml-fondation-principal { background: linear-gradient(180deg, #F8F5ED 0%, #F9F6EF 100%); /* ivoire-crème doux */ border: 1px solid #E9E1CF; /* bordure claire */ border-radius: 22px; /* coins arrondis élégants */ padding: 34px 36px; margin: 48px auto; max-width: 960px; font-size: 1.18rem; line-height: 1.8; color: #1C1C1C; /* noir satiné */ box-shadow: 0 8px 28px rgba(0,0,0,0.07); /* ombre luxueuse */ position: relative; font-style: normal; } /* [21.2] — Liseré doré à gauche (signature visuelle) */ blockquote.ml-fondation.ml-fondation-principal::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, rgba(182,138,44,0.9), rgba(182,138,44,0.55)); } /* [21.3] — Mise en valeur de l’introduction (corrigée) */ blockquote.ml-fondation.ml-fondation-principal strong { display: inline; /* reste dans la même phrase */ font-weight: 600; /* accentuation subtile */ font-size: 1.1em; /* taille légèrement supérieure, sans rupture */ line-height: 1.6; /* cohérence typographique */ letter-spacing: 0.1px; /* souffle fin pour un effet luxe */ margin: 0; /* aucun espacement parasite */ vertical-align: baseline; /* alignement parfait dans le flux */ } /* [21.4] — Ligne dorée ornementale */ blockquote.ml-fondation.ml-fondation-principal .ml-fleuron { display: block; width: 130px; height: 2px; margin: 22px auto 0; background: linear-gradient(90deg, rgba(182,138,44,0), rgba(182,138,44,.9), rgba(182,138,44,0)); border-radius: 2px; } /* [21.5] — Responsive design */ @media (max-width: 900px) { blockquote.ml-fondation.ml-fondation-principal { padding: 26px 24px; font-size: 1.1rem; border-radius: 18px; } } @media (max-width: 600px) { blockquote.ml-fondation.ml-fondation-principal { padding: 22px 20px; font-size: 1.05rem; border-radius: 16px; } blockquote.ml-fondation.ml-fondation-principal::before { top: 18px; bottom: 18px; } } /* [21.6] Bloc signature de marque */ .brand-signature { text-align: center; font-family: "Libre Baskerville", serif; font-size: 0.94rem; line-height: 1.7; margin: 40px auto 20px; color: var(--ml-ink); } .brand-signature strong { color: var(--ml-gold); font-weight: 600; } /* ===========================[PATCH 21] — fin ==================================== */ /* ========================================================= [PATCH 22] — Ajustement mobile : espace vertical affiné Objectif : réduire la marge inférieure du bloc fondateur sur mobile pour un rendu plus élégant et moins encombré. ========================================================= */ @media (max-width: 600px){ blockquote.ml-fondation.ml-fondation-principal { margin-bottom: 22px; /* réduit depuis 40px */ padding: 22px 20px; /* léger ajustement d'air intérieur */ } } /* ========================================================= [PATCH 22] — fin ========================================================= */ /* ========================================================= [PATCH 24] — Citations simples (blockquote) But : style sobre, luxueux, sans fond, filet gauche discret. Portée : blockquote SANS la classe .ml-fondation ========================================================= */ /* [24.1] Palette (réutilise celles du PATCH 20 si présentes) */ :root{ --ml-noir: #1C1C1C; --ml-gris: #6E6E6E; --ml-or: #B68A2C; --ml-bord: #E6E2D6; } /* [24.2] Style principal des citations "simples" */ .entry-content blockquote:not(.ml-fondation), .page blockquote:not(.ml-fondation){ position: relative; margin: 22px 0 20px; padding: 0 0 0 18px; /* espace avant le filet */ color: var(--ml-noir); font-style: italic; /* léger souffle */ font-size: 1.02rem; line-height: 1.7; quotes: none; /* jamais de guillemets auto */ } /* [24.3] Filet gauche fin (ton sable/doré très discret) */ .entry-content blockquote:not(.ml-fondation)::before, .page blockquote:not(.ml-fondation)::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; border-radius: 2px; background: linear-gradient(180deg, var(--ml-bord), rgba(182,138,44,0.35)); } /* [24.4] Texte interne (resserre la graisse) */ .entry-content blockquote:not(.ml-fondation) p, .page blockquote:not(.ml-fondation) p{ margin: 0; color: var(--ml-gris); } /* [24.5] Variantes responsives (ajustements fins) */ @media (max-width: 640px){ .entry-content blockquote:not(.ml-fondation), .page blockquote:not(.ml-fondation){ font-size: 1rem; padding-left: 16px; } } /* [24.6] Respect des préférences d’accessibilité */ @media (prefers-reduced-motion: reduce){ .entry-content blockquote:not(.ml-fondation)::before{ background: var(--ml-bord); } } /* ====================== [PATCH 24] — fin ====================== */ /* ========================================================= [PATCH 24] — Détails raffinés de lisière (bloc fondateur) Objectif : liseré 1px fin, légèrement en retrait, extrémités adoucies, fondu subtil en haut et en bas — effet "filigrane haute joaillerie" ========================================================= */ /* [24.1] — Liseré raffiné (desktop) */ blockquote.ml-fondation.ml-fondation-principal::before { width: 1px; /* subțiere élégante */ left: 6px; /* léger retrait vers l’intérieur */ top: 20px; bottom: 20px; border-radius: 6px; /* extrémités adoucies */ background: linear-gradient( 180deg, rgba(182,138,44,0) 0%, /* fondu délicat en haut */ rgba(182,138,44,0.85) 15%, /* intensité dorée au cœur */ rgba(182,138,44,0.85) 85%, /* continuité visuelle */ rgba(182,138,44,0) 100% /* fondu délicat en bas */ ); } /* [24.2] — Ajustements pour mobile (≤600px) */ @media (max-width: 600px) { blockquote.ml-fondation.ml-fondation-principal::before { width: 1px; left: 4px; /* offset réduit pour petits écrans */ top: 16px; /* hauteur active affinée */ bottom: 16px; } } /* ========================================================= [PATCH 24] — fin ========================================================= */ /* ========================================================= [PATCH 25] — Lisière courbe élégante (bloc fondateur) Objectif : barre verticale affinée, extrémités arrondies, fondu subtil haut/bas, offset intérieur délicat et ombre de base ========================================================= */ /* [25.1] — Liseré principal (desktop) */ blockquote.ml-fondation.ml-fondation-principal::before { content: ""; position: absolute; left: 6px; /* léger retrait intérieur */ top: 20px; bottom: 20px; width: 1px; /* finesse joaillière */ border-radius: 6px; /* extrémités arrondies élégantes */ background: linear-gradient( 180deg, rgba(182,138,44,0) 0%, /* fondu délicat en haut */ rgba(182,138,44,0.85) 15%, /* intensité dorée au cœur */ rgba(182,138,44,0.85) 85%, /* continuité visuelle */ rgba(182,138,44,0) 100% /* fondu délicat en bas */ ); } /* [25.2] — Ajustements mobiles (≤600px) */ @media (max-width: 600px) { blockquote.ml-fondation.ml-fondation-principal::before { left: 4px; /* offset ajusté pour petits écrans */ top: 16px; /* hauteur active réduite de ~20% */ bottom: 16px; } } /* [25.3] — Ombre subtile à la base du bloc */ blockquote.ml-fondation.ml-fondation-principal { box-shadow: 0 6px 20px rgba(0,0,0,0.06); /* profondeur raffinée */ } /* [25.4] — Couleur or profond pour l’introduction */ blockquote.ml-fondation.ml-fondation-principal strong { color: #B68A2C !important; /* or profond — RAL 1036 */ font-weight: 600; font-style: normal; } /* ========================================================= [PATCH 25] — fin Ce liseré n’est plus un simple détail graphique : il devient la signature silencieuse d’une Maison de joaillerie, un trait d’or discret qui raconte l’art du temps et de la précision. ========================================================= */ /* ========================================================= [PATCH 26] — Table responsive raffinée (mobile) Objectif : équilibrer les colonnes dans les tableaux d’infos ========================================================= */ @media (max-width: 600px) { .table th { width: 38%; /* colonne gauche affinée */ font-size: 0.95rem; /* taille réduite pour l’équilibre */ line-height: 1.4; padding-right: 8px; /* petit espace à droite */ vertical-align: top; /* alignement haut pour plus d’élégance */ } .table td { width: 62%; /* colonne droite élargie */ font-size: 0.95rem; line-height: 1.5; } } /* ========================================================= [PATCH 26] — Fin Ce réglage assure un équilibre visuel raffiné sur mobile, où chaque colonne trouve sa juste place : la gauche guide la lecture, la droite raconte l’essentiel. ========================================================= */ /* ========================================================= [PATCH 27] — Table 3 mobile : équilibre 30% / 70% Portée : uniquement la section #sec-3 (Statut juridique) But : colonne gauche (intitulés) mai îngustă, dreapta mai largă. ========================================================= */ /* [27.1] — Desktop & tablette : style joaillerie version luxe finalisée */ #sec-3 [role="table"] th { width: 34%; font-weight: 600; font-size: 0.9rem; /* plus raffiné */ letter-spacing: 0.4px; text-transform: uppercase; vertical-align: top; padding-right: 18px; /* plus d’air entre les colonnes */ color: rgba(140, 123, 79, 0.95); /* doré satiné discret */ border-bottom: 1px solid rgba(203, 167, 90, 0.2); /* filet subtil */ } #sec-3 [role="table"] td { width: 66%; vertical-align: top; font-size: 1rem; line-height: 1.55; color: var(--ml-ink); font-weight: 500; border-bottom: 1px solid rgba(203, 167, 90, 0.15); /* symétrie élégante */ } /* Accents premium sur les éléments clés */ #sec-3 [role="table"] td em, #sec-3 [role="table"] td strong { color: var(--ml-gold); font-style: normal; font-weight: 600; } /* [27.2] — Mobile ≤640px : 30% / 70% + lisibilité + style joaillerie */ @media (max-width:640px){ #sec-3 [role="table"]{ table-layout: fixed; border-collapse: collapse; } /* Colonne gauche — 34% (titre raffiné) */ #sec-3 [role="table"] th{ width: 34% !important; font-size: 0.87rem; /* ← ajusté pour l’élégance */ line-height: 1.45; padding-right: 10px; white-space: normal !important; vertical-align: top !important; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(28,28,28,0.7); /* gris satiné */ font-weight: 600; } /* Colonne droite — 66% (données premium) */ #sec-3 [role="table"] td{ width: 66% !important; font-size: 1rem; line-height: 1.55; word-break: break-word !important; color: var(--ml-ink); font-weight: 500; } /* Accent sur les éléments clés */ #sec-3 [role="table"] td em, #sec-3 [role="table"] td strong{ color: var(--ml-gold); /* or raffiné pour noms/éléments majeurs */ font-style: normal; font-weight: 600; } } /* [27.3] — Finission visuelle discrette (opt) */ #sec-3 [role="table"]{ box-shadow: 0 1px 4px rgba(0,0,0,.05); border-radius: 8px; } /* ========================================================= [PATCH 27] — fin « Sur mobile, les intitulés occupent 30 %, le contenu 70 % : l’ensemble gagne en équilibre, lisibilité et élégance. » ========================================================= */ /* ================================ PATCH 28 — page La Marque ================================ */ /* PATCH 28 — Réduction maximale de l’espace entre le titre et le sous-titre */ #la-marque h1 { margin-bottom: 0.15em !important; /* Réduit fortement l’espace sous le titre principal */ } #la-marque .subtitle { margin-top: 0.1em !important; /* Réduit encore l’espace au-dessus du sous-titre */ font-size: 17px; color: #b0892c; font-style: italic; text-align: center; } /* ================================ FIN PATCH 28 ================================ */