/* Theme Name: ESDI Starter Theme URI: https://esdi.pro Author: ESDI Author URI: https://esdi.pro Description: Block theme starter ESDI — base neutre déclinée par client (palette et typos dans theme.json). Gutenberg/FSE, sans page builder. Requires at least: 6.6 Tested up to: 6.9 Requires PHP: 8.1 Version: 0.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: esdi-starter */ /* Les styles structurants vivent dans theme.json. Ici : uniquement les micro-interactions et détails non exprimables en JSON. */ /* Boutons — transition douce et léger relief au survol */ .wp-block-button__link { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } /* Liens de navigation — soulignement animé discret */ .wp-block-navigation a { text-decoration: none; transition: color 0.15s ease; } .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 0.3em; } /* Images — coins légèrement adoucis par défaut */ .wp-block-image img, .wp-block-gallery .wp-block-image img { border-radius: 6px; } /* Cartes de services (pattern) — survol discret */ .esdi-card { transition: transform 0.15s ease, box-shadow 0.15s ease; } .esdi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } /* ========================================================================== Animations modernes — amélioration progressive. Les états "caché avant révélation" ne s'appliquent que si le JS a posé .esdi-js sur ; sans JS ou avec prefers-reduced-motion, tout est visible et immobile. Voir assets/js/esdi-animations.js. ========================================================================== */ html { scroll-behavior: smooth; } /* --- Révélation au défilement --------------------------------------- */ .esdi-js .esdi-reveal, .esdi-js .esdi-reveal-left, .esdi-js .esdi-reveal-right { opacity: 0; transition: opacity 0.65s ease, transform 0.65s ease; } .esdi-js .esdi-reveal { transform: translateY(28px); } .esdi-js .esdi-reveal-left { transform: translateX(-36px); } .esdi-js .esdi-reveal-right { transform: translateX(36px); } .esdi-js .esdi-reveal.is-visible, .esdi-js .esdi-reveal-left.is-visible, .esdi-js .esdi-reveal-right.is-visible { opacity: 1; transform: none; } /* --- Cascade sur les enfants directs --------------------------------- */ .esdi-js .esdi-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .esdi-js .esdi-stagger.is-visible > * { opacity: 1; transform: none; } .esdi-js .esdi-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; } .esdi-js .esdi-stagger.is-visible > *:nth-child(3) { transition-delay: 0.24s; } .esdi-js .esdi-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; } .esdi-js .esdi-stagger.is-visible > *:nth-child(5) { transition-delay: 0.48s; } .esdi-js .esdi-stagger.is-visible > *:nth-child(6) { transition-delay: 0.6s; } /* --- Hero : entrée du contenu au chargement + Ken Burns --------------- */ .esdi-hero-intro .wp-block-cover__inner-container, .wp-block-group.esdi-hero-intro > * { animation: esdi-fade-up 0.9s ease 0.15s both; } .esdi-kenburns img.wp-block-cover__image-background { animation: esdi-kenburns 22s ease-in-out infinite alternate; } @keyframes esdi-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes esdi-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } } /* --- Zoom doux sur les images (galeries, cartes) ---------------------- */ .esdi-zoom-hover .wp-block-image { overflow: hidden; border-radius: 6px; } .esdi-zoom-hover .wp-block-image img { transition: transform 0.5s ease; } .esdi-zoom-hover .wp-block-image img:hover { transform: scale(1.05); } /* --- En-tête collant avec ombre au défilement -------------------------- */ .esdi-header { position: sticky; top: 0; z-index: 100; transition: box-shadow 0.25s ease; } .esdi-header.is-scrolled { box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1); } /* --- Compteurs animés --------------------------------------------------- */ .esdi-count { font-variant-numeric: tabular-nums; } /* --- Respect strict de prefers-reduced-motion --------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .esdi-hero-intro .wp-block-cover__inner-container, .esdi-kenburns img.wp-block-cover__image-background { animation: none; } .esdi-card, .esdi-zoom-hover .wp-block-image img, .wp-block-button__link { transition: none; } }