/* * ============================================================ * STYLE.CSS — Toilettage Rex — VERSION 2 (v2/) * ============================================================ * * RÔLE : CSS custom uniquement — tout ce qui dépasse Tailwind. * Complémente (ne remplace pas) les utilitaires Tailwind du HTML. * * DIRECTION ESTHÉTIQUE — /ui-ux-pro-max : * Mix retenu : Chunky Neo-Brutalism (ombres dures offset, bordures * épaisses, angles nets mais adoucis à 12-14px) + Bento Grid * asymétrique pour les prestations et la zone d'intervention. * Essence visuelle : un salon franc et énergique, contrasté et net — * à l'opposé du feutré crème/pêche de la V1. * Signature unique : blocs d'encre (#12131A) récurrents en rupture * de rythme (hero, bande "approche calme", footer), bento mosaïque * asymétrique pour les prestations, étiquette-sticker pivotée sur * la photo du hero, ombres portées dures 5px/8px sans dégradé. * * ⚠️ Les tokens (couleurs, polices, radius) vivent dans @theme * inline dans le . Ici on utilise var(--color-primary), * var(--font-display), etc. * * ⚠️ @apply NON disponible (Play CDN) — écrire du CSS classique. * ============================================================ */ /* ============================================================ 1. RESET & BASE CUSTOM ============================================================ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); } ::selection { background: var(--color-ink); color: var(--color-accent); } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } main p { max-width: 70ch; } .hero-split p, .bento-tile p, .footer-bottom p { max-width: none; } img { max-width: 100%; height: auto; } /* Lien d'évitement */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-accent); color: var(--color-ink); padding: 12px 24px; z-index: 9999; font-weight: 700; text-decoration: none; border: var(--border-w) solid var(--color-ink); border-top: none; border-left: none; border-radius: 0 0 var(--radius-card) 0; } .skip-link:focus { top: 0; } /* ============================================================ 2. TYPOGRAPHIE AVANCÉE ============================================================ */ .eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.85rem; } .eyebrow::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--color-secondary); border: 2px solid var(--color-ink); } .eyebrow--on-dark { color: var(--color-accent); } .eyebrow--on-dark::before { background: var(--color-accent); border-color: var(--color-surface); } .section-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; } /* Mise en exergue inline d'un fragment (H8.1) — reste dans le flux du texte. Couleur primary : seule couleur de la palette qui garantit ≥4.5:1 sur surface/surface-alt pour du texte de corps (secondary/accent échouent en tant que couleur de texte sur fond clair, cf. vérification WCAG). */ .accent-text { color: var(--color-primary); font-weight: 800; } .accent-text--on-dark { color: var(--color-accent); } /* Numérotation des onglets nav — ornement typographique, pas une décoration uniforme (voir H2.5). Chaque onglet porte son numéro. */ .nav-link__num { font-family: var(--font-body); font-weight: 800; font-size: 0.7rem; color: var(--color-ink-muted); margin-right: 0.4rem; transition: color 0.2s ease; } /* Numérotation des questions FAQ */ .faq-question__num { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-ink-muted); flex-shrink: 0; min-width: 2.2ch; } /* ============================================================ 3. ATMOSPHÈRE DE FOND ============================================================ */ /* Texture pointillée — jamais de fond blanc plat. Grille de points discrets sur le fond papier, signature "chunky/print" de la V2 (à l'opposé des dégradés radiaux crème/pêche de la V1). */ .texture-dotgrid { background-image: radial-gradient(var(--color-ink-muted) 1px, transparent 1.6px); background-size: 22px 22px; background-position: -8px -8px; background-color: var(--color-surface); } @supports (background-color: color-mix(in srgb, black, white)) { .texture-dotgrid { background-image: radial-gradient(color-mix(in srgb, var(--color-ink) 14%, transparent) 1px, transparent 1.6px); } } .section-dark { background: var(--color-primary-dark); color: var(--color-surface); position: relative; border-top: var(--border-w) solid var(--color-ink); border-bottom: var(--border-w) solid var(--color-ink); } /* ============================================================ 4. COMPOSANTS RÉCURRENTS ============================================================ */ /* --- Nav responsive : fallback anti double-menu (H2.4) --- */ ul.nav-links-desktop { display: none; list-style: none; padding: 0; margin: 0; } a.nav-cta-desktop { display: none; } button.burger { display: inline-flex; } @media (min-width: 1024px) { ul.nav-links-desktop { display: flex; } a.nav-cta-desktop { display: inline-flex; } button.burger { display: none; } } .site-header { border-bottom: var(--border-w) solid var(--color-ink); } .nav-logo { display: inline-flex; } .nav-logo__img { height: 40px; width: auto; object-fit: contain; display: block; } @media (min-width: 768px) { .nav-logo__img { height: 48px; } } /* Style de nav propre au projet : pas de soulignement uniforme. Chaque onglet porte un numéro (voir section 2) ; seul l'actif reçoit un fond plein jaune-accent chunky avec bordure encre — les autres onglets restent "nus", seulement le texte change de couleur au survol. */ .nav-link { display: inline-flex; align-items: center; text-decoration: none; font-weight: 700; font-size: 0.95rem; color: var(--color-ink); padding: 0.4rem 0.7rem; border: var(--border-w) solid transparent; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .nav-link:hover { color: var(--color-primary); } .nav-link:hover .nav-link__num { color: var(--color-primary); } .nav-link.active { background: var(--color-accent); border-color: var(--color-ink); color: var(--color-ink); } .nav-link.active .nav-link__num { color: var(--color-ink); } .burger { align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--color-surface); border: var(--border-w) solid var(--color-ink); cursor: pointer; } .burger-lines { display: flex; flex-direction: column; justify-content: center; gap: 5px; } .burger-lines span { display: block; width: 22px; height: 3px; background: var(--color-ink); transition: transform 0.25s ease, opacity 0.25s ease; } .burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger-lines span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .mobile-menu { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; background: var(--color-surface); border-bottom: 0 solid var(--color-ink); } .mobile-menu.is-open { max-height: 480px; border-bottom-width: var(--border-w); } .mobile-menu ul { list-style: none; padding: 1rem 1.25rem 1.5rem; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .mobile-menu a { text-decoration: none; font-weight: 700; color: var(--color-ink); font-family: var(--font-body); padding: 0.5rem 0; } .mobile-menu a.active { color: var(--color-primary); } .mobile-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: white !important; border: var(--border-w) solid var(--color-ink); box-shadow: var(--shadow-card); border-radius: var(--radius-btn); padding: 0.75rem 1.5rem; margin-top: 0.5rem; } /* --- Hiérarchie des boutons à 3 niveaux (H3.5) --- Même silhouette stricte pour primary/secondary : même radius, même padding, même taille. Seule la "peau" change. */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 800; font-size: 1rem; padding: 0.9rem 1.85rem; border-radius: var(--radius-btn); border: var(--border-w) solid var(--color-ink); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease; line-height: 1.2; text-decoration: none; cursor: pointer; } .btn-primary { background: var(--color-primary); color: white; box-shadow: var(--shadow-card); } .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hover); background: var(--color-primary-light); } .btn-primary:active { transform: translate(2px, 2px); box-shadow: none; } .btn-secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); } .btn-secondary:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hover); background: var(--color-accent); } .btn-secondary:active { transform: translate(2px, 2px); box-shadow: none; } /* Variante sur bloc sombre (hero, section-dark) : bordure claire obligatoire au repos, fond plein clair pour une affordance immédiate (H3.5 — jamais "rien au repos"). */ .btn-secondary--on-dark { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-surface); box-shadow: 5px 5px 0 0 var(--color-accent); } .btn-secondary--on-dark:hover { background: var(--color-accent); border-color: var(--color-surface); box-shadow: 8px 8px 0 0 var(--color-accent); } .link-inline { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; transition: color 0.2s ease; } .link-inline:hover { color: var(--color-primary-light); } /* --- Hero — HERO-11 split bande colorée pleine hauteur --- */ .hero-split { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .hero-split { grid-template-columns: 1fr 1fr; min-height: calc(100vh - 89px); } } .hero-split__panel { display: flex; flex-direction: column; justify-content: center; } .hero-split__panel--text { background: var(--color-primary-dark); color: var(--color-surface); padding: 3.5rem 1.5rem; border-bottom: var(--border-w) solid var(--color-ink); } @media (min-width: 900px) { .hero-split__panel--text { padding: 4rem 4rem; border-bottom: none; border-right: var(--border-w) solid var(--color-ink); } } .hero-split__panel--photo { position: relative; min-height: 340px; overflow: hidden; } @media (min-width: 900px) { .hero-split__panel--photo { min-height: auto; } } .hero-split__panel--photo picture, .hero-split__panel--photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .stamp-badge { position: absolute; bottom: 20px; right: 20px; background: var(--color-accent); color: var(--color-ink); border: var(--border-w) solid var(--color-ink); box-shadow: var(--shadow-card); border-radius: var(--radius-btn); padding: 0.5rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; transform: rotate(-4deg); } /* --- Bloc overlap image/texte (BLOC-10) --- */ .overlap-accent { position: absolute; top: -22px; left: -22px; width: 120px; height: 120px; background: var(--color-secondary); border: var(--border-w) solid var(--color-ink); border-radius: var(--radius-card); z-index: 0; } .overlap-photo { position: relative; z-index: 1; border: var(--border-w) solid var(--color-ink); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-hover); aspect-ratio: 4 / 5; } .overlap-photo picture, .overlap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Bento grid asymétrique (BLOC-05) — prestations --- */ .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; grid-auto-flow: dense; gap: 1.1rem; } .bento-tile { background: var(--color-surface); border: var(--border-w) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .bento-tile--intro, .bento-tile--photo { grid-column: span 2; grid-row: span 2; } .bento-tile--service { grid-column: span 1; grid-row: span 1; padding: 1.1rem; display: flex; flex-direction: column; justify-content: center; } .bento-tile--photo-small { grid-column: span 1; grid-row: span 2; } .bento-tile--intro { padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; background: var(--color-accent); } .bento-tile--photo, .bento-tile--photo-small { padding: 0; } .bento-tile--photo picture, .bento-tile--photo img, .bento-tile--photo-small picture, .bento-tile--photo-small img { width: 100%; height: 100%; object-fit: cover; display: block; } .bento-tile--service:hover, .bento-tile--info:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hover); } .service-icon { width: 42px; height: 42px; border: 2px solid var(--color-ink); border-radius: 10px; background: var(--color-surface-alt); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; } .service-icon svg { width: 22px; height: 22px; } /* --- Bento zone d'intervention (carte + coordonnées) --- */ .bento-grid--zone { display: grid; grid-template-columns: 1fr; gap: 1.1rem; } @media (min-width: 768px) { .bento-grid--zone { grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2, auto); } .bento-tile--map { grid-column: 1; grid-row: 1 / 3; } .bento-tile--info { grid-column: 2; } } .bento-tile--map { padding: 0; min-height: 320px; } .bento-tile--info { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .bento-tile--info svg { width: 26px; height: 26px; color: var(--color-primary); margin-bottom: 0.4rem; } .map-container { width: 100%; height: 100%; min-height: 320px; background: var(--color-surface-alt); } .leaflet-container { font-family: var(--font-body); } .leaflet-popup-content-wrapper { border-radius: 10px; background: var(--color-surface); color: var(--color-ink); border: 2px solid var(--color-ink); } .leaflet-popup-content { font-family: var(--font-body); margin: 12px 16px; } .leaflet-popup-tip { background: var(--color-surface); } /* --- FAQ accordéon numéroté (BLOC-08) --- */ .faq-item { border: var(--border-w) solid var(--color-ink); border-radius: var(--radius-card); margin-bottom: 1rem; background: var(--color-surface); box-shadow: var(--shadow-card); overflow: hidden; } .faq-question { width: 100%; text-align: left; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-ink); } .faq-question__text { flex: 1; } .faq-question__icon { flex-shrink: 0; width: 30px; height: 30px; border: 2px solid var(--color-ink); border-radius: 8px; background: var(--color-accent); color: var(--color-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; transition: transform 0.25s ease; } .faq-question[aria-expanded="true"] .faq-question__icon { transform: rotate(45deg); } .faq-answer { padding: 0 1.35rem 1.35rem calc(1.35rem + 2.2ch + 1rem); color: var(--color-ink-soft); line-height: 1.7; } @media (max-width: 480px) { .faq-answer { padding-left: 1.35rem; } } /* ============================================================ 5. MISE EN VALEUR — informations clés ============================================================ Les fragments clés du texte (nom du métier, mots-clés SEO en gras dans le .md) sont mis en exergue via .accent-text, en ligne dans le flux du texte (voir section 2 + H8.1). Le badge "Bordeaux · 33" du hero (.stamp-badge, section 4) et la tuile d'intro du bento (.bento-tile--intro, fond accent) jouent le même rôle de repère visuel fort, propre à ce projet. */ /* ============================================================ 6. ANIMATIONS & MICRO-INTERACTIONS ============================================================ */ .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ 7. LIGHTBOX GALERIE (réservé — prêt pour pages internes Phase 2, aucun déclencheur [data-lightbox] sur l'Accueil aujourd'hui) ============================================================ */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(18, 19, 26, 0.92); display: flex; align-items: center; justify-content: center; z-index: 1000; } .lightbox-overlay[hidden] { display: none; } .lightbox-img { max-width: min(90vw, 1100px); max-height: 85vh; border: var(--border-w) solid var(--color-surface); box-shadow: var(--shadow-hover); } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: var(--color-accent); color: var(--color-ink); border: 2px solid var(--color-ink); border-radius: 50%; width: 46px; height: 46px; font-size: 1.4rem; cursor: pointer; transition: transform 0.15s ease; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { transform: scale(1.06); } .lightbox-close { top: 24px; right: 24px; } .lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); } /* ============================================================ 8. FORMULAIRE AVANCÉ — réservé pour contact.html (Phase 2), aucun formulaire sur l'Accueil. ============================================================ */ /* ============================================================ 9. FOOTER ============================================================ */ .site-footer { background: var(--color-primary-dark); color: var(--color-surface-alt); border-top: var(--border-w) solid var(--color-ink); } .footer-logo { display: inline-block; } .footer-logo img { display: block; height: 42px; width: auto; object-fit: contain; max-width: 100%; } .footer-heading { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); margin-bottom: 1rem; } .footer-link { color: var(--color-surface-alt); text-decoration: none; transition: color 0.2s ease; } .footer-link:hover { color: var(--color-accent); } .footer-bottom { border-top: 1px solid rgba(241, 242, 238, 0.18); } .readyup-credit { color: inherit; } .readyup-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ 10. RESPONSIVE OVERRIDES ============================================================ */ @media (max-width: 767px) { .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } .bento-tile--intro, .bento-tile--photo { grid-column: span 2; grid-row: auto; } .bento-tile--photo { aspect-ratio: 4 / 3; } .bento-tile--service { grid-column: span 1; grid-row: auto; min-height: 150px; } .bento-tile--photo-small { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; } } @media (min-width: 768px) and (max-width: 1023px) { .bento-grid { grid-template-columns: repeat(3, 1fr); } .bento-tile--intro, .bento-tile--photo { grid-column: span 3; grid-row: span 1; min-height: 220px; } .bento-tile--photo-small { grid-row: span 1; min-height: 180px; } }