/** * Martine Céfai — Custom CSS overrides * Injecté via wp_head + wp_enqueue_scripts par modules/ux.php * * Stratégie : on garde Thrive Architect intact, on surcharge ciblé. * Couleurs site : vert sauge #a4c25f, bordeaux #900760, rouge accent #ce271b */ /* ============================================================ * 0. ANTI-FOUC MENU MOBILE (chargé en tête de custom.css) * * Symptôme : sur mobile, ~200ms de flash lors d'un click menu → * redirection. Le menu desktop apparait avant que le CSS responsive * Thrive (différé par WP Rocket "Optimize CSS Delivery") ne se * charge et le remplace par le burger. * * Fix : on cache `ul.tve_w_menu` sur viewport <= 940px tant que * n'a pas la classe .mc-css-ready (posée par custom.js sur * window.load). Une fois CSS+JS chargés, on retire le hide et * Thrive applique son comportement burger normal. * * Note : pas inliné en car WP Rocket strip nos inline styles. * En tête de custom.css, ça applique dès que custom.css charge — * bien avant que Thrive transforme le menu en burger. * ============================================================ */ @media (max-width: 940px) { html:not(.mc-css-ready) #thrive-header ul.tve_w_menu, html:not(.mc-css-ready) #thrive-header .thrv-menu-list { visibility: hidden !important; } } /* ============================================================ * 0. SMOOTH SCROLL GLOBAL * ============================================================ */ html { scroll-behavior: smooth; } /* ============================================================ * 1. FIX WIDGET GOOGLE REVIEWS — texte blanc invisible sur fond clair * ============================================================ */ .grw-row, .grw-row *, .grw-header, .grw-header *, .grw-content, .grw-content *, .grw-footer, .grw-footer * { color: #292f21 !important; } .grw-row .grw-stars, .grw-row .grw-stars *, .grw-row [class*="star"] { color: #f5a623 !important; } .grw-row a, .grw-header a, .grw-content a, .grw-footer a { color: #900760 !important; text-decoration: underline; } .grw-footer, .grw-footer * { color: #666 !important; font-size: 0.85em; } /* ============================================================ * 2. PALETTE ADOUCIE * ============================================================ */ body { color: #2a2a2a; } ::selection { background: #c2d68f; color: #2a2a2a; } /* ============================================================ * 3. CTA "PRENDRE RENDEZ-VOUS" STICKY — plus visible * Rouge orangé chaleureux + ombre marquée + pulse subtil + scale au hover * ============================================================ */ @keyframes mc-cta-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(206, 39, 27, 0.45), 0 0 0 0 rgba(206, 39, 27, 0.6); } 50% { box-shadow: 0 8px 24px rgba(206, 39, 27, 0.45), 0 0 0 14px rgba(206, 39, 27, 0); } } #mc-sticky-cta { position: fixed; bottom: 28px; right: 28px; z-index: 99999; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #ce271b 0%, #a01913 100%); color: #fff !important; font-family: inherit; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; padding: 16px 26px; border-radius: 50px; text-decoration: none !important; box-shadow: 0 8px 24px rgba(206, 39, 27, 0.45); animation: mc-cta-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease, box-shadow 200ms ease; will-change: transform; } #mc-sticky-cta:hover, #mc-sticky-cta:focus-visible { background: linear-gradient(135deg, #e63a2d 0%, #b51e16 100%); color: #fff !important; transform: translateY(-3px) scale(1.04); animation-play-state: paused; box-shadow: 0 14px 32px rgba(206, 39, 27, 0.55); } #mc-sticky-cta::before { content: ""; display: inline-block; width: 22px; height: 22px; /* Icône bulle de chat (SMS) */ background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } @media (max-width: 600px) { #mc-sticky-cta { bottom: 18px; right: 18px; padding: 14px 20px; font-size: 14px; } } /* ============================================================ * 4. SKIP LINK WCAG 2.4.1 * ============================================================ */ .mc-skip-link { position: absolute; top: -100px; left: 8px; background: #900760; color: #fff !important; padding: 12px 18px; border-radius: 4px; z-index: 100000; text-decoration: none !important; font-weight: 600; transition: top 200ms ease; } .mc-skip-link:focus, .mc-skip-link:focus-visible { top: 8px; outline: 3px solid #f5a623; } /* ============================================================ * 5a. HEADER — allègement de hauteur (≈ -30% desktop, -25% mobile) * * Avant : 276 px desktop / ~220 px mobile (Nedjim flag : « header * trop imposant, retarde l'accès au contenu »). * Après : ~190 px desktop / ~165 px mobile. * * On compacte uniquement les marges/paddings + on réduit la hauteur * du logo. PAS de changement de typo / palette / structure Thrive. * Selectors targetés directement (#thrive-header + .thrv_symbol_37) * pour gagner la guerre de spécificité face aux inline styles Thrive. * ============================================================ */ #thrive-header .symbol-section-in, .thrv_symbol_37 .symbol-section-in { padding-top: 14px !important; padding-bottom: 14px !important; } #thrive-header .tcb-logo, .thrv_symbol_37 .tcb-logo { margin-top: 12px !important; margin-bottom: 12px !important; } #thrive-header .tcb-logo img, .thrv_symbol_37 .tcb-logo img { max-height: 80px !important; width: auto !important; height: auto !important; } #thrive-header .thrv_widget_menu, .thrv_symbol_37 .thrv_widget_menu { margin-top: 18px !important; margin-bottom: 12px !important; } @media (max-width: 768px) { #thrive-header .symbol-section-in, .thrv_symbol_37 .symbol-section-in { padding-top: 10px !important; padding-bottom: 10px !important; } #thrive-header .tcb-logo, .thrv_symbol_37 .tcb-logo { margin-top: 8px !important; margin-bottom: 8px !important; } #thrive-header .tcb-logo img, .thrv_symbol_37 .tcb-logo img { max-height: 60px !important; } #thrive-header .thrv_widget_menu, .thrv_symbol_37 .thrv_widget_menu { margin-top: 10px !important; margin-bottom: 8px !important; } } /* ============================================================ * 5b. HEADER — comportement Thrive d'origine conservé (revert 15/05/2026) * * On a tenté 2 fixes pour fluidifier le scroll du header : * 1) CSS `position: relative !important` + `transform: none !important` * 2) JS classList.remove de tve-scroll-appear + opacity fade-out * Aucun n'a tenu : Thrive ré-applique son comportement scroll-appear * via son JS interne, créant des effets visuels pires (header au * milieu du contenu, double fade, etc.). On accepte le comportement * d'origine pour ne pas dégrader l'UX. * * Conservés ailleurs : skip-link WCAG, CTA SMS sticky bottom-right. * ============================================================ */ /* Note: pas d'underline sur les items du menu — on garde le look Thrive * d'origine (highlight pâle au hover/current, c'est suffisant). */ /* ============================================================ * 6. ANIMATIONS — fade-in au scroll * Les éléments avec [data-mc-fade] commencent invisibles + translateY, * deviennent visibles quand ils entrent dans le viewport (via JS). * ============================================================ */ [data-mc-fade] { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } [data-mc-fade].mc-visible { opacity: 1; transform: translateY(0); } /* ============================================================ * 8. IMAGES — petit zoom au hover (cards, photos) * ============================================================ */ .thrv-image img, .tve-image img { transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease; will-change: transform; } .thrv-image:hover img, .tve-image:hover img { transform: scale(1.03); } /* ============================================================ * 9. BOUTONS — micro-interaction sur tous les boutons Thrive * ============================================================ */ .thrv-button, .tcb-button, button[type="submit"], input[type="submit"] { transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease, filter 180ms ease !important; } .thrv-button:hover, .tcb-button:hover, button[type="submit"]:hover, input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.08); } /* ============================================================ * 10. LIENS DU CONTENU — soulignement smooth * ============================================================ */ .thrv-page-section a:not(.thrv-button):not(.tcb-button) { text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 200ms ease; } /* ============================================================ * 11. TWITTER (X) — masquer toute mention résiduelle * ============================================================ */ .thrv-icon-twitter, [class*="twitter-share"], [class*="tweet-button"], a[href*="twitter.com/intent"], a[href*="x.com/intent"] { display: none !important; } /* ============================================================ * 12. FOCUS A11Y * ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; } /* ============================================================ * 13. TYPOGRAPHIE — espacement & lisibilité * ============================================================ */ .thrv_text_element p, .thrv_text_element li { line-height: 1.7 !important; } /* ============================================================ * 14. SCROLL-TO-TOP — chevron upward, palette site * Apparait quand body a la classe .mc-scrolled (ajoutée après 80 px). * Couleur bordeaux Martine (palette --tcb-skin-color-23), fond opaque, * chevron blanc épais 2.5 px → bien visible aux petites tailles. * ============================================================ */ #mc-scroll-top { position: fixed; bottom: 28px; left: 28px; z-index: 99998; width: 46px; height: 46px; border-radius: 50%; background: #900760; /* bordeaux Martine, opaque */ color: #ffffff; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 240ms ease, transform 240ms ease, background 200ms ease; } #mc-scroll-top svg { display: block; width: 22px; height: 22px; color: #ffffff; } #mc-scroll-top.mc-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #mc-scroll-top:hover, #mc-scroll-top:focus-visible { background: #b00873; outline: none; } #mc-scroll-top:focus-visible { box-shadow: 0 0 0 3px rgba(144, 7, 96, 0.35); } @media (max-width: 600px) { #mc-scroll-top { bottom: 20px; left: 20px; width: 44px; height: 44px; } #mc-scroll-top svg { width: 20px; height: 20px; } } /* ============================================================ * 15. WIDGET GOOGLE REVIEWS — custom rendering * Remplace le widget GRW d'origine par un layout propre. * Couleurs alignées au site : crème, sauge, bordeaux, or pour étoiles. * Animations : stagger fade-in, hover lift, scale on press. * ============================================================ */ .mc-google-reviews { --mc-gr-card-bg: #ffffff; --mc-gr-card-border: rgba(164, 194, 95, 0.20); --mc-gr-card-shadow: 0 2px 8px rgba(89, 51, 31, 0.06); --mc-gr-card-shadow-hover: 0 12px 32px rgba(89, 51, 31, 0.12); --mc-gr-text: #2a2a2a; --mc-gr-text-soft: #6b6b6b; --mc-gr-gold: #f5a623; --mc-gr-gray: #e1e1e1; --mc-gr-accent: #900760; --mc-gr-ease: cubic-bezier(0.23, 1, 0.32, 1); max-width: 1140px; margin: 2.5rem auto; padding: 0 1rem; font-family: inherit; color: var(--mc-gr-text); } /* === Header : note globale + logo Google === */ .mc-gr-header { display: flex; align-items: center; gap: 18px; padding: 18px 24px; background: var(--mc-gr-card-bg); border-radius: 16px; box-shadow: var(--mc-gr-card-shadow); border: 1px solid var(--mc-gr-card-border); margin-bottom: 1.5rem; } .mc-gr-logo { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } .mc-gr-summary { flex-grow: 1; } .mc-gr-rating-line { display: flex; align-items: center; gap: 12px; } .mc-gr-score { font-size: 1.75rem; font-weight: 700; color: var(--mc-gr-accent); line-height: 1; font-family: Georgia, "Times New Roman", serif; } .mc-gr-stars { display: inline-flex; gap: 2px; font-size: 1.2rem; letter-spacing: 1px; line-height: 1; } .mc-gr-star { color: var(--mc-gr-gray); } .mc-gr-star.filled { color: var(--mc-gr-gold); } .mc-gr-meta-line { font-size: 0.85rem; color: var(--mc-gr-text-soft); margin-top: 4px; letter-spacing: 0.01em; } /* === Grid des cards === */ .mc-gr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 2rem; } @keyframes mc-gr-card-in { to { opacity: 1; transform: translateY(0) scale(1); } } .mc-gr-card { background: var(--mc-gr-card-bg); border-radius: 16px; padding: 22px; border: 1px solid var(--mc-gr-card-border); box-shadow: var(--mc-gr-card-shadow); transition: transform 240ms var(--mc-gr-ease), box-shadow 240ms var(--mc-gr-ease); opacity: 0; transform: translateY(12px) scale(0.98); animation: mc-gr-card-in 480ms var(--mc-gr-ease) forwards; animation-delay: var(--mc-gr-delay, 0ms); display: flex; flex-direction: column; min-width: 0; /* prevent overflow on long names */ } @media (hover: hover) and (pointer: fine) { .mc-gr-card:hover { transform: translateY(-3px); box-shadow: var(--mc-gr-card-shadow-hover); } } .mc-gr-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .mc-gr-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f0f0f0; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .mc-gr-avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #c2d68f, #a4c25f); color: #fff; font-weight: 700; font-size: 0.95rem; } .mc-gr-card-meta { flex-grow: 1; min-width: 0; } .mc-gr-author { display: block; font-weight: 600; color: var(--mc-gr-text); font-size: 0.96rem; line-height: 1.3; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 180ms ease; } .mc-gr-author:hover { color: var(--mc-gr-accent); } .mc-gr-card-rating { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .mc-gr-stars-sm { display: inline-flex; gap: 1px; font-size: 0.95rem; letter-spacing: 0.5px; line-height: 1; } .mc-gr-stars-sm .mc-gr-star { color: var(--mc-gr-gray); } .mc-gr-stars-sm .mc-gr-star.filled { color: var(--mc-gr-gold); } .mc-gr-date { font-size: 0.78rem; color: var(--mc-gr-text-soft); } /* Wrap autour du texte + bouton (pour positionner le bouton sous le clamp) */ .mc-gr-text-wrap { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; } .mc-gr-text { font-size: 0.95rem; line-height: 1.65; color: var(--mc-gr-text); margin: 0; white-space: normal; /* Clamp à 6 lignes — collapsed par défaut. max-height + petit padding-bottom évite le clip des descenders (p, g, y). */ display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(6 * 1.65em + 0.25em); padding-bottom: 0.1em; } /* État déployé — ajouté par JS au click sur le bouton. Pas de transition sur max-height : le delta clamp→full est trop grand pour un rendu fluide. Snap instantané, plus prévisible UX. */ .mc-gr-text-wrap.is-expanded .mc-gr-text { -webkit-line-clamp: unset; max-height: none; overflow: visible; display: block; } /* Bouton "Voir l'avis complet" / "Réduire" */ .mc-gr-toggle { margin-top: 10px; align-self: flex-start; background: transparent; border: none; padding: 4px 0; color: var(--mc-gr-accent); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 180ms ease; } .mc-gr-toggle:hover, .mc-gr-toggle:focus-visible { color: var(--mc-gr-text); outline: none; } .mc-gr-toggle:focus-visible { text-decoration-thickness: 2px; } /* === CTA Voir tous les avis Google === */ .mc-gr-cta-wrap { text-align: center; } .mc-gr-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--mc-gr-accent); color: #fff !important; border-radius: 50px; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; box-shadow: 0 4px 12px rgba(144, 7, 96, 0.25); transition: transform 200ms var(--mc-gr-ease), box-shadow 200ms var(--mc-gr-ease), background 200ms ease; border: none; cursor: pointer; } .mc-gr-cta-arrow { transition: transform 200ms var(--mc-gr-ease); } .mc-gr-cta:hover { background: #a8086e; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(144, 7, 96, 0.32); color: #fff !important; } .mc-gr-cta:hover .mc-gr-cta-arrow { transform: translateX(3px); } .mc-gr-cta:active { transform: scale(0.97); } .mc-gr-empty { text-align: center; color: var(--mc-gr-text-soft); font-style: italic; padding: 1rem; } /* Honor reduced motion */ @media (prefers-reduced-motion: reduce) { .mc-gr-card { animation: none; opacity: 1; transform: none; } .mc-gr-cta, .mc-gr-cta-arrow { transition: none; } } /* Petit responsive */ @media (max-width: 600px) { .mc-gr-header { flex-direction: column; text-align: center; gap: 12px; padding: 18px; } .mc-gr-rating-line { justify-content: center; } } /* === MC X SWAP — neutralise le bleu Twitter sur les boutons « Je partage » pour que le logo X (palette site) apparaisse propre. Le bleu Twitter historique vient des variables Thrive --tcb-social-color-style-*. On force le X en noir / palette neutre, et le hover en --tcb-skin-color-0. */ .tve_s_t_share .tve_s_link, .tve_s_t_share .tve_s_icon, .tve_s_t_share svg { color: #0c1115 !important; fill: currentColor !important; } .tve_s_t_share:hover .tve_s_link, .tve_s_t_share:hover svg { color: var(--tcb-skin-color-3, #0c1115) !important; }