/* * Feuille de style globale. * L'essentiel du design (couleurs, espacements, typographies) reste en style * inline dans les templates PHP, a l'identique de l'export Claude Design * d'origine. Ce fichier ne contient que ce qui ne peut pas s'exprimer en * inline : les etats :hover/:focus (remplacant les attributs proprietaires * style-hover/style-focus de l'export), la bascule nav desktop/mobile, et les * animations (apparition au defilement, transitions, menu mobile, en-tete). */ html { scroll-behavior: smooth; } /* --- Navigation mobile (equivalent du isMobile < 980px du runtime d'origine) --- */ .nav-mobile-btn { display: none; } .nav-mobile-panel { display: none; } @media (max-width: 979px) { .nav-desktop { display: none !important; } .nav-mobile-btn { display: inline-flex !important; } .nav-mobile-panel { display: flex !important; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; } .nav-mobile-panel.is-open { max-height: 600px; opacity: 1; } } /* --- En-tete : leg ere ombre une fois la page defilee --- */ .site-header { transition: box-shadow 0.3s ease; } .site-header.is-scrolled { box-shadow: 0 10px 28px -20px rgba(26,77,46,0.45); } /* --- Etats hover / focus (valeurs identiques aux style-hover d'origine), --- */ /* avec une transition douce au lieu d'un changement instantane. */ .nav-link, .nav-link-dark, .btn-cta, .link-arrow, .card-teaser, .btn-fill-dark, .btn-cta-invert, .footer-link, .input-field, .btn-submit, .article-row, .format-pill { transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.3s ease, opacity 0.25s ease, box-shadow 0.3s ease; } .nav-link:hover { color: #c85b3b; } .nav-link-dark:hover { color: #e8a085; } .btn-cta:hover { background: #1a4d2e; } .link-arrow:hover { color: #c85b3b; border-color: #c85b3b; } .card-teaser:hover { border-color: #c85b3b; transform: translateY(-4px); } .btn-fill-dark:hover { background: #c85b3b; } .btn-cta-invert:hover { background: #ffffff; color: #1a4d2e; } .footer-link:hover { color: #ffffff; } .input-field:focus { border-color: #e8a085; } .btn-submit:hover { background: #b34e30; } .article-row:hover { opacity: 0.72; } .format-pill:hover { border-color: #c85b3b; color: #c85b3b; } /* --- Apparition en douceur au defilement ----------------------------------- Active uniquement quand le JavaScript a confirme son execution (classe posee sur avant le premier rendu, voir includes/header.php) : sans JavaScript, le contenu reste visible normalement, sans aucune animation. */ .js-reveal-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .js-reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Decalage progressif pour les elements d'une grille (cartes, tags, articles...) */ .reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.08s; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.16s; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.24s; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.32s; } .reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.4s; } .reveal-stagger > .reveal:nth-child(n+7) { transition-delay: 0.48s; } /* --- Respect de la preference systeme "reduire les animations" ------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-reveal-ready .reveal, .nav-link, .nav-link-dark, .btn-cta, .link-arrow, .card-teaser, .btn-fill-dark, .btn-cta-invert, .footer-link, .input-field, .btn-submit, .article-row, .format-pill, .site-header, .nav-mobile-panel { transition: none !important; animation: none !important; } .js-reveal-ready .reveal { opacity: 1; transform: none; } }