/* * ============================================================ * STYLE.CSS — ALLO JEREM * ============================================================ * * 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 : Hero-Centric Design (impact, clarté de l'offre) * + touche Playful Creative maîtrisée (rondeur, chaleur du * lettrage marqueur du logo), tenue par un ton "Professionnel" * conforme au brief (pas de claymorphism/neubrutalism enfantins). * Essence visuelle : un artisan de confiance, chaleureux et clair — * le sérieux d'un pro, la rondeur accueillante du logo "Allo Jerem". * Signature unique : clin d'œil discret aux pointillés du logo * (sous "J'AI UN PROBLÈME !") repris comme indicateur d'onglet actif * dans la nav, et badge "tampon" flottant sur le hero qui évoque la * bulle de dialogue du logo. * Typographies : Fredoka (display, dérivée du lettrage manuscrit/ * marqueur arrondi du logo) + Nunito Sans (corps, lisible, rondeur * cohérente). * Atmosphère : fond crème chaud (jamais blanc pur), grain léger, * alternance crème / crème-alt / bandes navy et turquoise sombre. * * ⚠️ 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) — CSS classique uniquement. * ============================================================ */ /* 1. Reset & base custom ------------------------------------------------ */ ::selection { background: var(--color-secondary); color: var(--color-surface); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-body); background: var(--color-surface); color: var(--color-ink); } img { max-width: 100%; height: auto; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; border-radius: 4px; } main p, main li { max-width: 70ch; } .hero p, .card p, .cta-band p, .map-zones li, .footer p, .footer li { max-width: none; } /* Skip link (a11y) */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-primary); color: white; padding: 12px 24px; z-index: 9999; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; } .skip-link:focus { top: 0; } /* 2. Typographie avancée ------------------------------------------------ */ .surtitre { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--color-secondary-dark); display: inline-flex; align-items: center; gap: 0.5em; } .surtitre::before { content: ""; width: 1.4em; height: 2px; background: var(--color-secondary); display: inline-block; border-radius: 2px; } .surtitre--onlight { color: var(--color-surface); } .surtitre--onlight::before { background: var(--color-surface); } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.01em; } /* 3. Atmosphère de fond -------------------------------------------------- */ .grain-surface { position: relative; isolation: isolate; } .grain-surface::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); } /* 4. Composants récurrents ----------------------------------------------- */ :root { --nav-height: 84px; } /* --- Navigation --- */ .site-header { border-bottom: 1px solid rgba(24, 45, 124, 0.08); } .nav-logo__img { height: 52px; width: auto; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(24, 45, 124, 0.15)); transition: opacity 0.2s ease; } .nav-logo__img:hover { opacity: 0.85; } @media (max-width: 768px) { .nav-logo__img { height: 40px; } } /* Fallback responsive nav — empêche le double menu */ .nav-links-desktop { display: none; } .nav-cta-desktop { display: none; } .burger { display: inline-flex; } @media (min-width: 1024px) { .nav-links-desktop { display: flex; } .nav-cta-desktop { display: inline-flex; } .burger { display: none; } } .nav-links-desktop { list-style: none; padding: 0; margin: 0; } .nav-link { text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--color-ink); position: relative; padding-left: 0; transition: color 0.2s ease, padding-left 0.2s ease; display: inline-flex; align-items: center; gap: 0.5em; } .nav-link::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary); opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.2s ease; } .nav-link:hover { color: var(--color-secondary-dark); } .nav-link.active { color: var(--color-primary); } .nav-link.active::before { opacity: 1; transform: scale(1); } /* Onglet Contact valorisé — décision créative documentée (storyboard) : c'est l'action de conversion prioritaire pour un jeune artisan qui a besoin de générer des prospects. Un seul onglet différencié. */ .nav-link.nav-link-accent { color: var(--color-primary); font-weight: 800; } .nav-link.nav-link-accent::after { content: ""; position: absolute; left: 1.1em; right: 0; bottom: -4px; height: 2px; background: var(--color-secondary); border-radius: 2px; } .burger { align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: none; cursor: pointer; } .burger-lines { display: flex; flex-direction: column; gap: 5px; } .burger-lines span { display: block; width: 24px; height: 2.5px; background: var(--color-primary); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(7.5px) 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(-7.5px) rotate(-45deg); } .mobile-menu { max-height: 0; overflow: hidden; background: var(--color-surface); border-bottom: 1px solid rgba(24, 45, 124, 0.08); transition: max-height 0.3s ease; } .mobile-menu.open { max-height: 480px; } .mobile-menu ul { list-style: none; margin: 0; padding: 8px 24px 20px; display: flex; flex-direction: column; gap: 4px; } .mobile-menu a { display: block; padding: 12px 4px; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid rgba(24, 45, 124, 0.08); } .mobile-menu a.active { color: var(--color-primary); } .mobile-cta { margin-top: 10px; display: inline-flex !important; justify-content: center; background: var(--color-primary); color: white !important; border-radius: var(--radius-btn); padding: 12px 20px !important; border-bottom: none !important; } /* --- Boutons — hiérarchie 3 niveaux (H3.5) --- */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; font-family: var(--font-body); font-weight: 700; font-size: 1rem; padding: 0.9rem 1.85rem; border-radius: var(--radius-btn); line-height: 1.1; transition: all 0.2s ease; text-decoration: none; cursor: pointer; border: 2px solid transparent; } .btn-primary { background: var(--color-primary); color: white; box-shadow: var(--shadow-card); } .btn-primary:hover { background: var(--color-primary-light); box-shadow: var(--shadow-hover); transform: translateY(-2px); } .btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-secondary:hover { background: var(--color-primary); color: white; } /* Variante primary sur fond photo/hero (turquoise soutenu, contraste AA) */ .btn-primary--onhero { background: var(--color-secondary-dark); color: var(--color-surface); } .btn-primary--onhero:hover { background: var(--color-surface); color: var(--color-primary-dark); } /* Variante primary sur bande teal (bloc CTA final) */ .btn-primary--onteal { background: var(--color-surface); color: var(--color-primary); } .btn-primary--onteal:hover { background: var(--color-primary-dark); color: var(--color-surface); } /* Bouton secondaire posé sur photo/hero : bordure renforcée + fond semi-transparent + blur, lisible au repos sans nécessiter le hover */ .btn-secondary--on-photo { background: rgba(24, 45, 124, 0.28); backdrop-filter: blur(8px); border-color: var(--color-surface); color: var(--color-surface); } .btn-secondary--on-photo:hover { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-surface); } .link-inline { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; transition: color 0.2s ease; } .link-inline:hover { color: var(--color-secondary-dark); } /* --- Hero (HERO-07 full-bleed + badge tampon) --- */ .hero { position: relative; min-height: calc(100vh - var(--nav-height)); display: flex; align-items: flex-end; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(15, 30, 87, 0.55) 0%, rgba(15, 30, 87, 0.35) 35%, rgba(15, 30, 87, 0.88) 100% ); } .hero__content { position: relative; z-index: 2; padding-bottom: clamp(48px, 7vw, 96px); padding-top: clamp(120px, 20vw, 220px); } .hero__badge { position: absolute; top: clamp(90px, 14vw, 150px); right: clamp(16px, 5vw, 64px); z-index: 3; background: var(--color-secondary-dark); color: var(--color-surface); font-family: var(--font-display); font-weight: 600; font-size: clamp(0.85rem, 1.4vw, 1.05rem); padding: 1rem 1.3rem; border-radius: 26px 26px 4px 26px; box-shadow: var(--shadow-hover); transform: rotate(4deg); max-width: 190px; text-align: center; line-height: 1.25; border: 3px solid var(--color-surface); } /* --- Cards prestations (BLOC-02) --- */ .prestation-card { background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; height: 100%; } .prestation-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } .prestation-card__media { aspect-ratio: 4 / 3; overflow: hidden; } .prestation-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .prestation-card:hover .prestation-card__media img { transform: scale(1.06); } .prestation-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .prestation-card__title { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-ink); } .prestation-card__text { color: var(--color-ink-soft); font-size: 0.95rem; flex: 1; } /* --- Bloc image-texte overlap (BLOC-10) --- */ .overlap-block { position: relative; } .overlap-block__media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4 / 5; } .overlap-block__media img { width: 100%; height: 100%; object-fit: cover; } .overlap-block__panel { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-hover); padding: 2rem; } @media (min-width: 1024px) { .overlap-block__panel { margin-left: -72px; margin-top: 56px; } } /* --- Bande pleine largeur (BLOC-04) --- */ .full-band { padding: clamp(64px, 9vw, 120px) 0; position: relative; overflow: hidden; } .full-band--navy { background: var(--color-primary-dark); color: var(--color-surface); } .full-band--teal { background: var(--color-secondary-dark); color: var(--color-surface); } .full-band__deco { position: absolute; inset: 0; z-index: 0; opacity: 0.12; background-image: radial-gradient(circle at 15% 20%, currentColor 0, transparent 45%), radial-gradient(circle at 85% 80%, currentColor 0, transparent 45%); pointer-events: none; } .full-band__content { position: relative; z-index: 1; } .full-band p { color: var(--color-surface); } /* --- Carte zone d'intervention (G3) --- */ .map-section { padding: clamp(60px, 8vw, 120px) 0; background: var(--color-surface-alt); } .map-wrapper { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid rgba(24, 45, 124, 0.08); } .map-container { width: 100%; height: 420px; background: var(--color-surface); } @media (max-width: 768px) { .map-container { height: 320px; } } .leaflet-container { font-family: var(--font-body); } .leaflet-popup-content-wrapper { border-radius: 12px; background: var(--color-surface); color: var(--color-ink); } .leaflet-popup-content { font-family: var(--font-body); margin: 14px 18px; } .leaflet-popup-tip { background: var(--color-surface); } .map-zones { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; } .map-zones li { display: flex; align-items: flex-start; gap: 0.7em; color: var(--color-ink-soft); font-size: 0.98rem; } .map-zones svg { flex: none; width: 20px; height: 20px; color: var(--color-secondary-dark); margin-top: 2px; } /* --- Footer --- */ .site-footer { background: var(--color-primary-dark); color: var(--color-surface); } .footer-logo { display: inline-block; } .footer-logo img { display: block; height: 56px; width: auto; object-fit: contain; max-width: 100%; } @media (max-width: 768px) { .footer-logo img { height: 44px; } } .site-footer h3 { font-family: var(--font-display); color: var(--color-surface); font-size: 1rem; letter-spacing: 0.04em; margin-bottom: 1rem; } .site-footer a { color: var(--color-surface); opacity: 0.85; text-decoration: none; transition: opacity 0.2s ease, color 0.2s ease; } .site-footer a:hover { opacity: 1; color: var(--color-secondary); } .footer-contact-item { display: flex; align-items: flex-start; gap: 0.7em; } .footer-contact-item svg { flex: none; width: 20px; height: 20px; color: var(--color-secondary); margin-top: 2px; } .footer-divider { border-top: 1px solid rgba(250, 247, 242, 0.14); } .readyup-credit { font-size: 12px; color: rgba(250, 247, 242, 0.6); text-align: center; } .readyup-credit a { color: inherit; text-decoration: underline; opacity: 1; } .readyup-credit a:hover { color: var(--color-secondary); } /* 5. Éléments de mise en valeur ------------------------------------------ */ /* (aucun bloc chiffres-clés — le brief ne fournit aucune donnée quantifiable vérifiable à ce stade : voir règle H8.2, intégrité des données. Rien n'est inventé pour combler un bloc stats.) */ /* 6. Animations & micro-interactions -------------------------------------- */ .animate-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } .stagger > * { transition-delay: calc(var(--stagger-index, 0) * 80ms); } @media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; transition: none; } } /* 7. Lightbox galerie (prévu pour les pages internes — non utilisé sur l'Accueil, aucune galerie de réalisations en Phase 1) */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(15, 30, 87, 0.92); } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 12px; } .lightbox-close { position: absolute; top: 24px; right: 24px; color: white; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,0.12); border-radius: 50%; } /* 8. Formulaire avancé (prévu pour la page Contact — non présent sur l'Accueil) */ .form-field { display: flex; flex-direction: column; gap: 0.4rem; } .form-field label { font-weight: 700; font-size: 0.9rem; color: var(--color-ink); } .form-field input, .form-field textarea { font-family: var(--font-body); border: 2px solid rgba(24,45,124,0.14); border-radius: 12px; padding: 0.75rem 1rem; background: var(--color-surface); color: var(--color-ink); transition: border-color 0.2s ease; } .form-field input:focus, .form-field textarea:focus { border-color: var(--color-secondary); outline: none; } .form-success, .form-error { border-radius: 12px; padding: 0.9rem 1.1rem; font-weight: 600; } .form-success { background: rgba(0,167,186,0.12); color: var(--color-secondary-dark); } .form-error { background: rgba(190,40,40,0.1); color: #a12a2a; } /* 9. FAQ accordéon (prévu pour les pages internes) */ .faq-item { border-bottom: 1px solid rgba(24,45,124,0.1); } .faq-question { width: 100%; text-align: left; background: none; border: none; padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--color-ink); cursor: pointer; } .faq-question svg { flex: none; transition: transform 0.25s ease; color: var(--color-secondary-dark); } .faq-question[aria-expanded="true"] svg { transform: rotate(45deg); } .faq-answer { padding: 0 0 1.25rem; color: var(--color-ink-soft); } /* 10. Overrides responsive ------------------------------------------------ */ @media (max-width: 640px) { .overlap-block__panel { margin: 0; } } /* --- Correctif header : garder le burger tant que la nav desktop ne tient pas --- */ @media (min-width:1024px) and (max-width:1279.98px){ .nav-links-desktop,.nav-cta-desktop{display:none!important} .burger{display:inline-flex!important} } @media (min-width:1280px){ .nav-links-desktop{gap:1.1rem} .nav-cta-desktop{padding:.5rem .9rem;font-size:.9rem} }