/* Theme Name: Glass ShowDark Theme URI: https://peteratweb.fr Author: PeterAtWeb - Régis Peter Author URI: https://peteratweb.fr Description: Un thème WordPress moderne et épuré avec des effets glassmorphism dark, parfait pour les sites vitrines élégants. Compatible WordPress 7.0. Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 8.4 License: Copyright © 2026 PeterAtWeb. Ce thème est distribué sous licence GNU General Public. License version 2 ou ultérieure (GPL-2.0-or-later). Les prestations de conception, développement, personnalisation, installation, configuration et maintenance sont facturées indépendamment de la licence du logiciel. License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: vitrine-glass Tags: glassmorphism, modern, minimal, business, portfolio, showcase, accessibility-ready, full-site-editing, block-styles, custom-logo, custom-menu, featured-images, theme-options, translation-ready, darkmode */ /* Polices locales Inter (auto-hébergées) */ @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Variables CSS & Reset */ :root { /* Palette Dark Premium */ --color-primary: #6E8CFF; /* Bleu signature */ --color-secondary: #B98CFF; /* Violet accent */ --color-accent: #6E8CFF; /* Accent CTA / hover */ --color-light: #F5F6FA; /* Blanc cassé (texte clair) */ --color-dark: #05060A; /* Fond quasi noir */ --color-text: rgba(245, 246, 250, 0.72); /* Texte gris clair */ /* Glassmorphism sombre — même verre que le header partout (cartes, hero, boutons...) */ --glass-bg: rgba(5, 6, 10, 0.45); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); --glass-backdrop: blur(20px); /* Badges/pastilles (réseaux sociaux header + footer) — verre plus clair que les cartes/le header, pour rester bien identifiables comme éléments cliquables */ --badge-bg: rgba(255, 255, 255, 0.08); --badge-border: rgba(255, 255, 255, 0.22); --badge-bg-hover: rgba(255, 255, 255, 0.18); /* Boutons (CTA, "voir tous les services", envoyer, retour en haut, nav carrousel) — même logique : plus clairs que le fond glass sombre des cartes/du header */ --btn-bg: rgba(255, 255, 255, 0.08); --btn-border: rgba(255, 255, 255, 0.22); --btn-bg-hover: rgba(255, 255, 255, 0.16); /* Espacements */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 4rem; --spacing-xl: 6rem; /* Transitions Premium 2026 */ --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-normal: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-slow: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-spring: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); --header-height: 80px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; /* Corrige un bug iOS Safari : en rubber-band (overscroll élastique en haut/bas de la page), la zone visible sort de et montre le fond par défaut du navigateur (blanc) à travers le header fixe en verre (backdrop-filter), qui semble alors "devenir blanc/transparent" un instant. Une couleur de fond sur , assortie au fond sombre du thème, comble ce vide. */ background-color: #05060A; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--color-text); line-height: 1.7; background: radial-gradient(circle at 20% 15%, rgba(110, 140, 255, 0.10) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(185, 140, 255, 0.08) 0%, transparent 50%), linear-gradient(160deg, #05060A 0%, #0A0C14 45%, #05060A 100%); background-size: 200% 200%; background-attachment: fixed; min-height: 100vh; position: relative; overflow-x: hidden; /* isolation:isolate force à former son propre contexte d'empilement : son fond (ci-dessus) se peint alors TOUJOURS en premier dans ce contexte, et .animated-bg-scene (z-index:-1, voir plus bas) juste après, par-dessus - quel que soit le fond de . Avant cet ajout, la scène animée n'était visible que parce que n'avait aucun fond (le navigateur "propageait" alors le fond de vers le canevas de la page, qui laissait la scène s'afficher par-dessus) ; dès que a reçu une couleur de fond (correctif iOS du rebond élastique, voir plus bas), cette propagation s'est arrêtée et le fond de s'est mis à se peindre par-dessus la scène au lieu d'en dessous, la masquant complètement. isolation:isolate rend ce bon ordre d'empilement explicite, sans dépendre de cet effet de bord. */ isolation: isolate; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 50%; } } .background-logo-watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 800px; z-index: 0; pointer-events: none; opacity: 0.05; will-change: transform; } .background-logo-watermark img { width: 100%; height: auto; filter: blur(8px); object-fit: contain; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: var(--transition-fast); } /* Loader / Preloader */ .site-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.5s ease, visibility 0.5s ease; } .site-loader.loaded { opacity: 0; visibility: hidden; } .loader-content { text-align: center; } .loader-logo { width: 180px; height: auto; animation: rotate 2s linear infinite; filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)); } .loader-spinner { width: 60px; height: 60px; border: 6px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Effets Glassmorphism */ .glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--glass-shadow); transition: var(--transition-normal); position: relative; overflow: hidden; /* Même correctif de composition Chrome que .site-header (voir plus haut) : les cartes en verre utilisent aussi backdrop-filter et peuvent garder des fantômes du contenu défilé derrière elles. */ will-change: transform; } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%); pointer-events: none; border-radius: 18px 18px 0 0; } .glass-card:not(a):not([data-gsap-card]):hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Repli CSS pour le survol des cartes de service : n'agit que quand GSAP n'est pas disponible (classe posée côté PHP, voir front-page.php) — sinon js/animations.js pilote seul le survol pour éviter que les deux mécanismes ne se disputent le même transform. */ .service-card.card-hover-fallback:not(a):hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Header avec effet glass */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border-bottom: 1px solid var(--glass-border); padding: var(--spacing-sm) 0; transition: background var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); /* Corrige un bug de rendu Chrome : sans indice de composition dédié, un élément position:fixed avec backdrop-filter peut garder à l'écran des "fantômes" du contenu qui a défilé en dessous (le flou n'est pas recalculé correctement pendant le scroll). will-change force Chrome à traiter le header comme son propre calque GPU, qui se repeint bien. */ will-change: transform; } .site-header.has-social-bar { /* 44px (hauteur de la barre sociale) + 8px d'espacement visible, au lieu d'un simple trait de séparation collé au header */ top: 52px; } .site-social-bar { /* Pas de fond ni de flou : les icônes flottent directement sur le fond de la page, aucune "barre" visible - seuls les badges ronds de chaque icône (voir .social-badge) sont visibles. */ position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 1001; } .site-social-bar-inner { width: 100%; height: 100%; margin: 0 auto; padding: 0 var(--spacing-md); display: flex; align-items: center; gap: 8px; } .site-social-bar.align-left .site-social-bar-inner { justify-content: flex-start; } .site-social-bar.align-right .site-social-bar-inner { justify-content: flex-end; } .social-badge { min-width: 30px; height: 30px; padding: 0 10px; border-radius: 40%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; /* Contrairement aux badges du footer (posés sur le fond sombre du footer), ceux-ci flottent seuls tout en haut de page : même superposition sombre que sur .services-btn pour ne pas dépendre du fond derrière. */ background: linear-gradient(var(--badge-bg), var(--badge-bg)), rgba(5, 6, 10, 0.7); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border: 1px solid var(--badge-border); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); transition: var(--transition-fast); } .social-badge svg { width: 16px; height: 16px; display: block; } .social-badge:hover { background: linear-gradient(var(--badge-bg-hover), var(--badge-bg-hover)), rgba(5, 6, 10, 0.7); } .header-container { width: 100%; margin: 0 auto; padding: 0 var(--spacing-md); display: flex; justify-content: space-between; align-items: center; } .site-logo { font-size: 1.5rem; font-weight: 700; color: white; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .site-logo-block { display: flex; align-items: center; } .site-logo-block.has-title-below { flex-direction: column; align-items: center; gap: 8px; } .site-logo-title-below { color: #ffffff; font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; padding: 10px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #ffffff; transition: transform var(--transition-normal), opacity var(--transition-normal); } .menu-toggle:hover { background: rgba(255, 255, 255, 0.2); } .menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.is-active span:nth-child(2) { opacity: 0; } .menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu-overlay { display: none; } .site-logo.logo-circle { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); padding: 10px; transition: var(--transition-normal); } .site-logo.logo-circle:hover { transform: scale(1.05); box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.3); } .site-logo.logo-circle a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .site-logo.logo-circle img, .site-logo.logo-circle .custom-logo { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .site-navigation ul { list-style: none; display: flex; gap: var(--spacing-md); } .site-navigation a { color: white; font-weight: 500; padding: var(--spacing-xs) var(--spacing-sm); border-radius: 10px; transition: var(--transition-fast); } .site-navigation a:hover { background: rgba(255, 255, 255, 0.2); } /* Section Hero */ .hero-section { /* Le dégagement sous le header fixe est déjà géré par .site-main (padding-top) ; un margin-top ici doublait l'écart. */ padding: var(--spacing-lg) var(--spacing-md); text-align: center; position: relative; z-index: 1; } .hero-content { max-width: 1200px; margin: 0 auto; padding: var(--spacing-lg); background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); border-radius: 30px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; perspective: 1000px; } .hero-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 100%); pointer-events: none; border-radius: 30px 30px 0 0; } .hero-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: white; margin-bottom: var(--spacing-sm); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); } .hero-subtitle { font-size: clamp(1.2rem, 2vw, 1.5rem); color: rgba(255, 255, 255, 0.9); margin-bottom: 0.5rem; line-height: 1.6; } .hero-description { font-size: clamp(0.95rem, 1.3vw, 1.1rem); color: rgba(255, 255, 255, 0.75); line-height: 1.7; margin-bottom: var(--spacing-md); max-width: 700px; } .hero-text-content { display: flex; flex-direction: column; align-items: center; } .hero-cta { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); background: var(--btn-bg); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border: 1px solid var(--btn-border); color: white; font-weight: 700; font-size: 1.1rem; /* Même arrondi que .form-submit : tous les boutons texte partagent le même style (plus de pill à 50px). */ border-radius: 12px; box-shadow: var(--glass-shadow); transition: var(--transition-normal); cursor: pointer; margin-top: var(--spacing-sm); } .hero-cta:hover { background: var(--btn-bg-hover); transform: translateY(-3px); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3); } /* Section intermédiaire */ .mid-section { padding: var(--spacing-xl) var(--spacing-md); width: 100%; position: relative; z-index: 1; } .mid-container { max-width: 1440px; margin: 0 auto; padding: 0; overflow: hidden; border-radius: 30px; } .mid-container > .section-title { padding: var(--spacing-lg) var(--spacing-lg) 0; margin-bottom: var(--spacing-md); } .mid-content { position: relative; width: 100%; } /* Image plein écran à 75vh */ .mid-media { width: 100%; min-height: 75vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .mid-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Texte superposé sur l'image (1/3 de largeur) */ .mid-text-overlay { position: absolute; top: 50%; transform: translateY(-50%); width: 33.333%; padding: var(--spacing-lg); background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--glass-shadow); color: white; font-family: inherit; line-height: 1.8; font-size: 1.05rem; z-index: 2; } .mid-text-overlay.text_left { left: var(--spacing-lg); } .mid-text-overlay.text_right { right: var(--spacing-lg); } .mid-text-overlay p { color: white; margin-bottom: var(--spacing-sm); } /* Option : désactiver le glassmorphisme sur le texte overlay */ .mid-text-overlay.no-glass { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Vidéo format 16:9 (YouTube) */ .mid-video-wrapper { width: 100%; max-width: 900px; margin: 0 auto; position: relative; padding-bottom: 56.25%; border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .mid-video-wrapper iframe, .mid-video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Cas sans image : texte et vidéo en colonne */ .mid-content.no-image .mid-text-overlay { position: relative; top: auto; transform: none; width: 100%; left: auto; right: auto; margin-bottom: var(--spacing-md); background: var(--glass-bg); } @media (max-width: 768px) { .mid-text-overlay { position: relative; top: auto; transform: none; width: 100%; left: auto !important; right: auto !important; margin: 0; border-radius: 0; } .mid-media { min-height: 40vh; } } /* Tablette : l'overlay à 33% devient illisible/trop serré, on l'élargit et on borne la hauteur de l'image avant de basculer en colonne à 768px */ @media (min-width: 769px) and (max-width: 1024px) { .mid-text-overlay { width: 50%; } .mid-media { min-height: 55vh; } .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Carrousel Premium 2026 — Coverflow + Cinématique */ .carousel-section { padding: var(--spacing-xl) var(--spacing-md); width: 100%; position: relative; z-index: 1; } .carousel-container { position: relative; max-width: 1440px; margin: 0 auto; } .carousel-wrapper { position: relative; padding: 40px 0; perspective: 1200px; overflow: hidden; } .carousel-track { display: flex; align-items: center; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: grab; touch-action: pan-y; will-change: transform; } .carousel-track:active { cursor: grabbing; } .carousel-slide { flex: 0 0 60%; max-width: 60%; padding: 0 10px; transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; transform-style: preserve-3d; cursor: pointer; box-sizing: border-box; } .carousel-slide:not(.is-active) { opacity: 0.4; transform: scale(0.85) rotateY(12deg); filter: brightness(0.7); } .carousel-slide.is-prev { transform: scale(0.85) rotateY(12deg); } .carousel-slide.is-next { transform: scale(0.85) rotateY(-12deg); } .carousel-slide.is-active { opacity: 1; transform: scale(1) rotateY(0deg); filter: brightness(1); z-index: 10; } .carousel-image-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } /* Ken Burns — léger zoom animé */ .carousel-slide.is-active .carousel-image-wrapper img { animation: kenBurns 8s ease-in-out infinite alternate; } .carousel-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; } /* Texte animé */ .carousel-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md); background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); border-radius: 0 0 20px 20px; opacity: 0; transform: translateY(20px); transition: all 0.6s ease 0.3s; } .carousel-slide.is-active .carousel-caption { opacity: 1; transform: translateY(0); } .carousel-caption-title { color: white; font-size: 1.3rem; font-weight: 600; margin-bottom: 0.25rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .carousel-caption-desc { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; line-height: 1.5; } @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } } /* Navigation */ .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--btn-bg); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border: 1px solid var(--btn-border); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-normal); z-index: 20; opacity: 0.8; } .carousel-prev { left: 20px; } .carousel-next { right: 20px; } .carousel-wrapper:hover .carousel-nav { opacity: 1; } .carousel-nav:hover { background: var(--btn-bg-hover); transform: translateY(-50%) scale(1.1); } /* Dots */ .carousel-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: var(--spacing-md); } .carousel-dots button { width: 8px; height: 8px; /* min-width/min-height explicites : la regle globale "button { min-width:44px; min-height:44px }" (cibles tactiles WCAG, cf. plus bas dans ce fichier) s'applique a tous les