/* ============================================================================ FIXES.CSS — Phase 1 + Photos raquettes À déposer dans assets/css/fixes.css (REMPLACE le précédent fixes.css) À charger en dernier dans le , après mobile.css. ========================================================================== */ /* ============================================================================ 1. CLUB CARD — nom en vert (couleur d'accent) ========================================================================== */ .club-card__title { color: var(--accent); } /* ============================================================================ 2. NEWSLETTER BAND — fix contrastes ========================================================================== */ .newsletter-band .section-tag { color: var(--accent); } .newsletter-band__legal { color: var(--color-sand); opacity: 0.7; } /* ============================================================================ 3. AUDIT PRÉVENTIF — autres composants potentiellement invisibles ========================================================================== */ .section-dark .meta, .newsletter-band .meta { color: var(--color-sand); opacity: 0.7; } /* ============================================================================ 4. TECH CARD — redesign éditorial ========================================================================== */ .tech-card { background-color: var(--color-bone); border: 1px solid var(--border); border-left: 3px solid var(--color-night); padding: var(--space-6) var(--space-5); position: relative; overflow: hidden; } .tech-card:hover { border-left-color: var(--accent); box-shadow: var(--shadow-lg); } .tech-card-cat { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent-2); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); } .tech-card-cat::before { content: ''; width: 24px; height: 1px; background: currentColor; } .tech-card h3 { font-family: var(--font-display); font-size: 32px; text-transform: uppercase; letter-spacing: var(--tracking-tight); line-height: 0.95; color: var(--text); margin-bottom: var(--space-2); } .tech-card-spanish { font-family: var(--font-serif); font-style: italic; font-size: var(--text-md); color: var(--accent-2); margin-bottom: var(--space-4); line-height: 1.2; } .tech-card p { font-family: var(--font-serif); font-style: italic; color: var(--text-soft); font-size: var(--text-base); line-height: 1.5; margin-bottom: var(--space-5); flex: 1; } .tech-card-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--space-3); } .tech-card-difficulty { display: flex; gap: 3px; } .tech-card-difficulty span { width: 6px; height: 6px; background-color: var(--border); border-radius: 50%; transition: background var(--duration-fast) var(--ease-out); } .tech-card-difficulty span.filled { background-color: var(--accent-2); } .tech-card:hover .tech-card-difficulty span.filled { background-color: var(--accent); } /* ============================================================================ 5. REGLE CARD — redesign éditorial ========================================================================== */ .regle-card { background-color: var(--color-bone); border: 1px solid var(--border); border-left: 3px solid var(--color-forest); padding: var(--space-6) var(--space-5); position: relative; overflow: hidden; } .regle-card:hover { border-left-color: var(--accent); box-shadow: var(--shadow-lg); } .regle-card-icon { position: absolute; top: var(--space-4); right: var(--space-5); font-size: 28px; line-height: 1; opacity: 0.4; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .regle-card:hover .regle-card-icon { opacity: 1; transform: scale(1.1); } .regle-card-cat { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent-2); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); padding-right: var(--space-7); } .regle-card-cat::before { content: ''; width: 24px; height: 1px; background: currentColor; } .regle-card h3 { font-family: var(--font-display); font-size: 28px; text-transform: uppercase; letter-spacing: var(--tracking-tight); line-height: 0.95; color: var(--text); margin-bottom: var(--space-3); padding-right: var(--space-7); } .regle-card p { font-family: var(--font-serif); font-style: italic; color: var(--text-soft); font-size: var(--text-base); line-height: 1.5; margin-bottom: var(--space-5); flex: 1; } .regle-card-meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--space-3); display: flex; justify-content: space-between; align-items: center; } .regle-card-meta::after { content: '→'; color: var(--text); transition: transform var(--duration-fast) var(--ease-out); } .regle-card:hover .regle-card-meta::after { transform: translateX(4px); color: var(--accent-2); } /* ============================================================================ 6. HOME-MANIFEST — Hero "pourquoi le site" ========================================================================== */ .home-manifest { background: var(--bg-dark); color: var(--bone); padding-block: var(--space-9) var(--space-8); position: relative; overflow: hidden; } .home-manifest::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%, rgba(220, 232, 74, 0.10) 0%, transparent 45%), radial-gradient(circle at 20% 80%, rgba(31, 71, 49, 0.4) 0%, transparent 50%); pointer-events: none; } .home-manifest__inner { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); } @media (min-width: 768px) { .home-manifest__inner { padding: 0 var(--space-7); } } .home-manifest__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); } .home-manifest__tag::before { content: ''; width: 32px; height: 1px; background: currentColor; } .home-manifest__title { font-family: var(--font-display); font-size: clamp(48px, 9vw, 156px); line-height: 0.86; letter-spacing: -0.025em; text-transform: uppercase; color: var(--bone); margin-bottom: var(--space-5); max-width: 16ch; } .home-manifest__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: lowercase; letter-spacing: 0; color: var(--accent); display: inline-block; } .home-manifest__lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2vw, 24px); color: var(--color-sand); max-width: 720px; line-height: 1.4; margin-bottom: var(--space-7); } .home-manifest__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); border-top: 1px solid var(--color-line-dark); padding-top: var(--space-6); } @media (max-width: 768px) { .home-manifest__pillars { grid-template-columns: 1fr; gap: var(--space-4); } } .home-manifest__pillar { display: flex; flex-direction: column; gap: var(--space-2); } .home-manifest__pillar-num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent); } .home-manifest__pillar-title { font-family: var(--font-display); font-size: var(--text-xl); text-transform: uppercase; letter-spacing: var(--tracking-tight); line-height: 1; color: var(--bone); } .home-manifest__pillar-desc { font-family: var(--font-serif); font-style: italic; color: var(--color-sand); opacity: 0.85; font-size: var(--text-base); line-height: 1.4; } .home-manifest__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); margin-bottom: var(--space-7); } /* ============================================================================ 7. RACKET HERO PHOTO — fiche test individuelle ============================================================================ Photo de la raquette à droite du hero, légèrement inclinée façon magazine. S'affiche uniquement si une image existe dans /assets/images/raquettes/{slug}.png ========================================================================== */ .racket-hero-side { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-end; } .racket-hero-photo { width: 100%; max-width: 320px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, rgba(220, 232, 74, 0.08) 0%, transparent 70%); position: relative; } .racket-hero-photo::before { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(245, 241, 232, 0.08); pointer-events: none; } .racket-hero-photo img { width: 90%; height: auto; object-fit: contain; filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4)); transform: rotate(-8deg); transition: transform var(--duration-base) var(--ease-out); } .racket-hero-photo:hover img { transform: rotate(-4deg) scale(1.02); } @media (max-width: 1024px) { .racket-hero-side { align-items: stretch; } .racket-hero-photo { max-width: 240px; margin: 0 auto; } } @media (max-width: 600px) { .racket-hero-photo { max-width: 180px; } }