/* * ============================================================ * STYLE.CSS — A'TOUT FER — V2 (seconde proposition d'Accueil) * ============================================================ * * 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 (V2, indépendante de la V1) : * Bold Brutalism + Exaggerated Minimalism, registre "atelier métallier / * dossier technique" (découpe laser, plans, fiches numérotées) plutôt que * le registre "jardin/nature" de la V1. Fond sombre dominant, quadrillage * technique fin, bordures épaisses à angle droit, ombres portées dures et * décalées (signature brutaliste, vert foncé au repos / rouille au survol). * Typographie capitales géométriques très espacées (Syncopate) + monospace * (Space Mono) — voir RAPPORT-V2.md pour la justification de la divergence * typographique par rapport au lettrage du logo (protocole V2, axe 2). * * Couleurs de marque (logo, hex pixel-perfect — INCHANGÉES entre V1 et V2, * propriété du client, cf. règle F1 absolue) : * #2F4510 — vert feuille foncé #8EB638 — vert feuille moyen * #DFEA95 — vert feuille clair #FDFDFD — blanc du texte du logo * Couleur complémentaire (déjà introduite en V1, reprise ici — clin d'œil * à "TOUT FER" / ferronnerie) : * #A6541F — rouille/fer oxydé * La divergence d'atmosphère (axe 5 du protocole V2) est obtenue par une * INVERSION du rôle des couleurs (fond sombre dominant au lieu de fond * clair dominant) — pas par un changement de teinte de marque. * * ⚠️ Les tokens (couleurs, polices, radius) vivent dans @theme * inline dans le . Ici on utilise var(--color-primary), 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; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ::selection { background: var(--color-primary); color: var(--color-surface); } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 0; } body { background: var(--color-surface); color: var(--color-ink); } main p, main li { max-width: 68ch; } .card p, .hero p, .cta-band p, .footer p { max-width: none; } /* Skip link (accessibilité) */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-primary); color: var(--color-surface); padding: 12px 24px; z-index: 9999; font-weight: 700; text-decoration: none; border-radius: 0; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; } .skip-link:focus { top: 0; } /* ============================================================ 2. TYPOGRAPHIE AVANCÉE ============================================================ */ .eyebrow { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--color-primary); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: "//"; color: var(--color-accent); font-weight: 700; } .on-light .eyebrow { color: var(--color-primary-dark); } /* Tag "fiche" décoratif — numérotation de dossier technique */ .fiche-tag { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--color-ink-muted); border: 1px solid currentColor; padding: 0.2rem 0.55rem; margin-bottom: 0.9rem; } .on-light .fiche-tag { color: var(--color-inkdark-muted); } .title-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.02; } /* fragment coloré inline (règle H8.1 : jamais isolé en colonne) */ .accent-primary { color: var(--color-primary); } .accent-rust { color: var(--color-accent); } .on-light .accent-primary { color: var(--color-primary-dark); } /* ============================================================ 3. ATMOSPHÈRE DE FOND — quadrillage technique (remplace le grain V1) ============================================================ */ .texture-grid { position: relative; isolation: isolate; } .texture-grid::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.16; background-image: linear-gradient(var(--color-ink-muted) 1px, transparent 1px), linear-gradient(90deg, var(--color-ink-muted) 1px, transparent 1px); background-size: 42px 42px; pointer-events: none; mask-image: linear-gradient(180deg, black, transparent 92%); } .on-light.texture-grid::before { opacity: 0.09; background-image: linear-gradient(var(--color-inkdark-muted) 1px, transparent 1px), linear-gradient(90deg, var(--color-inkdark-muted) 1px, transparent 1px); } .rule-divider { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; color: var(--color-primary); } .rule-divider::after { content: ""; height: 2px; flex: 1; background: currentColor; opacity: 0.35; } /* ============================================================ 4. COMPOSANTS RÉCURRENTS SOPHISTIQUÉS ============================================================ */ /* --- Hero split asymétrique typographique --- */ .hero { position: relative; background: var(--color-surface); padding-top: calc(var(--nav-height) + 3rem); padding-bottom: 4rem; overflow: hidden; } .hero__grid { display: grid; gap: 3rem; } @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 2rem; } } .hero__badge { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--color-surface-panel); border: 1px solid var(--color-primary); color: var(--color-ink); padding: 0.5rem 1rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .hero__badge svg { color: var(--color-primary); } .hero__media { position: relative; } .hero__media-block { position: absolute; inset: 18px -18px -18px 18px; background: var(--color-primary-dark); z-index: 0; } @media (max-width: 767px) { .hero__media-block { inset: 12px -12px -12px 12px; } } .hero__media picture { position: relative; z-index: 1; display: block; border: 3px solid var(--color-ink); } .hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; filter: saturate(1.05) contrast(1.05); } .hero__media-caption { position: relative; z-index: 1; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); margin-top: 0.75rem; border-top: 1px solid var(--color-ink-muted); padding-top: 0.5rem; } /* --- Fiche split (BLOC 01) --- */ .fiche-panel { position: relative; } .fiche-panel__block { position: absolute; inset: -16px -16px 16px 16px; background: var(--color-secondary); z-index: 0; } @media (max-width: 767px) { .fiche-panel__block { inset: -10px -10px 10px 10px; } } .fiche-panel picture { position: relative; z-index: 1; display: block; border: 3px solid var(--color-ink); } .fiche-panel img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Rangées empilées (BLOC 02) --- */ .dossier-row { border-top: 2px solid var(--color-ink-muted); padding: 1.75rem 0; display: grid; gap: 1.25rem; align-items: start; } @media (min-width: 768px) { .dossier-row { grid-template-columns: 90px 96px 1fr; align-items: center; } } .dossier-row:last-of-type { border-bottom: 2px solid var(--color-ink-muted); } .dossier-row__index { font-family: var(--font-body); font-weight: 700; font-size: 1.6rem; color: var(--color-primary); line-height: 1; } .dossier-row__thumb { width: 96px; height: 96px; border: 2px solid var(--color-ink); overflow: hidden; flex-shrink: 0; } .dossier-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .dossier-row:hover .dossier-row__thumb img { transform: scale(1.08); } .dossier-row__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; } /* --- Bande sombre inversée (BLOC 03 — zone d'intervention) --- */ .band-panel { background: var(--color-surface-panel); border-top: 2px solid var(--color-primary-dark); border-bottom: 2px solid var(--color-primary-dark); } .zone-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .zone-list li { display: flex; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--color-ink-muted); color: var(--color-ink-soft); } .zone-list li:last-child { border-bottom: 1px solid var(--color-ink-muted); } .zone-list__index { font-family: var(--font-body); font-weight: 700; color: var(--color-secondary); flex-shrink: 0; } .map-wrapper { border: 3px solid var(--color-ink); overflow: hidden; } .map-container { width: 100%; height: 380px; background: var(--color-surface-alt); filter: grayscale(0.15) contrast(1.05); } @media (max-width: 768px) { .map-container { height: 300px; } } .leaflet-container { font-family: var(--font-body); } .leaflet-popup-content-wrapper { border-radius: 0; background: var(--color-surface-alt); color: var(--color-inkdark); } .leaflet-popup-content { font-family: var(--font-body); margin: 14px 18px; } .leaflet-popup-tip { background: var(--color-surface-alt); } /* --- Grille stricte uniforme (BLOC 04 — réalisations) --- */ .strict-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--color-ink); border: 3px solid var(--color-ink); } @media (max-width: 640px) { .strict-grid { grid-template-columns: repeat(2, 1fr); } } .strict-grid > a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface); } .strict-grid > a picture { display: block; width: 100%; height: 100%; } .strict-grid > a img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.8) contrast(1.1); transition: filter 0.3s ease, transform 0.4s ease; } .strict-grid > a:hover img { filter: grayscale(0); transform: scale(1.05); } .strict-grid > a::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--color-primary); opacity: 0; transition: opacity 0.25s ease; } .strict-grid > a:hover::after { opacity: 1; } /* Badge sur fond clair "papier" (BLOC 04, section .on-light) : bordure et texte foncés — évite un îlot sombre à faible contraste dans une section claire (le badge est un tampon/sceau de dossier, pas une fenêtre sombre). */ .certif-badge { display: inline-flex; align-items: center; gap: 0.85rem; background: var(--color-surface-alt); border: 2px solid var(--color-primary-dark); color: var(--color-inkdark); padding: 0.9rem 1.2rem; } .certif-badge__icon { width: 38px; height: 38px; color: var(--color-primary-dark); flex-shrink: 0; } .certif-badge__title { color: var(--color-inkdark); } .certif-badge__desc { color: var(--color-inkdark-muted); } /* --- Accordéon FAQ (composant prêt pour Phase 2, non utilisé en Accueil) --- */ .faq-item { border-bottom: 2px solid var(--color-ink-muted); } .faq-question { width: 100%; text-align: left; padding: 1.35rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: none; cursor: pointer; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--color-ink); transition: color 0.2s ease; } .faq-question:hover { color: var(--color-primary); } .faq-question__icon { flex-shrink: 0; width: 26px; height: 26px; border: 2px solid var(--color-primary); color: var(--color-primary); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .faq-question[aria-expanded="true"] .faq-question__icon { transform: rotate(45deg); background: var(--color-primary); color: var(--color-surface); } .faq-answer { overflow: hidden; padding-bottom: 1.35rem; color: var(--color-ink-muted); font-family: var(--font-body); } /* --- Bande CTA asymétrique (BLOC 05) --- */ .band-primary { background: var(--color-primary-dark); color: var(--color-ink); border-top: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); } .band-primary .eyebrow { color: var(--color-secondary); } .band-primary .eyebrow::before { color: var(--color-secondary); } .band-primary .link-inline { color: var(--color-secondary); } .band-primary .link-inline:hover { color: var(--color-ink); } .band-primary .zone-list li { border-color: rgba(244, 241, 232, 0.25); } .band-primary .zone-list__index { color: var(--color-secondary); } /* ============================================================ 5. MISE EN VALEUR — badges & repères ============================================================ */ .polyvalence-chip { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-ink-muted); padding: 0.4rem 0.85rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; } .polyvalence-chip svg { width: 15px; height: 15px; color: var(--color-primary); } /* ============================================================ 6. ANIMATIONS & MICRO-INTERACTIONS ============================================================ */ .animate-on-scroll { opacity: 1; transform: none; } .js-animate .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .js-animate .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js-animate .animate-on-scroll { opacity: 1; transform: none; transition: none; } } /* ============================================================ 7. BOUTONS — HIÉRARCHIE 3 NIVEAUX (H3.5) — signature brutaliste ============================================================ */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.9rem 1.75rem; border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; transition: all 0.2s ease; cursor: pointer; text-decoration: none; border: 2px solid var(--color-ink); } .btn-primary { background: var(--color-primary); color: var(--color-inkdark); box-shadow: var(--shadow-card); } .btn-primary:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hover); background: var(--color-secondary); } .btn-secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); } .btn-secondary:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hover); background: var(--color-primary); color: var(--color-inkdark); } /* Variante secondaire sur fond déjà sombre/panel : bordure claire pour rester visible au repos */ .btn-secondary--on-dark { border-color: var(--color-ink-muted); background: transparent; color: var(--color-ink); } .btn-secondary--on-dark:hover { background: var(--color-primary); color: var(--color-inkdark); border-color: var(--color-ink); } /* Variante sur fond clair "papier" (surface-alt) */ .on-light .btn-secondary { background: var(--color-surface-alt); color: var(--color-inkdark); border-color: var(--color-inkdark); } .on-light .btn-secondary:hover { background: var(--color-primary); color: var(--color-inkdark); } .link-inline { color: var(--color-primary); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; font-weight: 700; transition: color 0.2s ease; } .link-inline:hover { color: var(--color-secondary); } .on-light .link-inline { color: var(--color-primary-dark); } .on-light .link-inline:hover { color: var(--color-accent); } /* ============================================================ 8. NAVIGATION — anti double-menu + style signature ============================================================ */ :root { --nav-height: 76px; } .nav-links-desktop { display: none; list-style: none; padding: 0; margin: 0; } .nav-cta-desktop { display: none; } .burger { display: inline-flex; } /* Seuil relevé à 1280px : 8 onglets + logo + CTA, même contrainte que V1. */ @media (min-width: 1280px) { .nav-links-desktop { display: flex; } .nav-cta-desktop { display: inline-flex; } .burger { display: none; } } .site-header { height: var(--nav-height); display: flex; align-items: center; background: var(--color-surface); border-bottom: 2px solid var(--color-primary-dark); } /* Fond nav déjà sombre : le logo (texte blanc + vert) reste lisible tel quel, sans pastille supplémentaire (contrairement à la V1 où la nav était claire) — le fichier logo.png lui-même reste strictement inchangé. */ .nav-logo { display: inline-flex; align-items: center; transition: opacity 0.2s ease; } .nav-logo:hover { opacity: 0.85; } .nav-logo__img { height: 42px; width: auto; object-fit: contain; } @media (max-width: 768px) { .nav-logo__img { height: 34px; } } .nav-link { position: relative; text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-soft); padding: 0.4rem 0.6rem; transition: color 0.2s ease, background 0.2s ease; } .nav-link:hover { color: var(--color-ink); background: var(--color-surface-panel); } /* Phase 1 : tous les onglets pointent vers index.html (H2.2), donc tous reçoivent .active simultanément — un indicateur en bloc plein (comme un bouton) serait illisible répété 8 fois. Un soulignement fin reste sobre même appliqué à toute la nav, et redevient un vrai indicateur de page active en Phase 2 quand chaque onglet aura sa propre URL. */ .nav-link.active { color: var(--color-ink); box-shadow: inset 0 -3px 0 0 var(--color-primary); } /* Onglet Contact valorisé — action prioritaire du client (devis) */ .nav-link.nav-link-accent { color: var(--color-accent); } .nav-link.nav-link-accent.active { box-shadow: inset 0 -3px 0 0 var(--color-accent); } .nav-link.nav-link-accent:hover { color: var(--color-inkdark); background: var(--color-accent); } /* Menu mobile */ .mobile-menu { position: fixed; inset: var(--nav-height) 0 0 0; background: var(--color-surface); z-index: 40; padding: 1.5rem 1.5rem 2rem; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; } .mobile-menu.open { transform: translateX(0); } .mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .mobile-menu a { display: block; padding: 0.9rem 0.25rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-ink-muted); } .mobile-menu a.mobile-cta { margin-top: 0.75rem; background: var(--color-primary); color: var(--color-inkdark); text-align: center; border-bottom: none; border: 2px solid var(--color-ink); } .burger { width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; position: relative; z-index: 50; } .burger-lines { position: relative; width: 22px; height: 16px; display: inline-block; } .burger-lines span { position: absolute; left: 0; right: 0; height: 2px; background: var(--color-ink); transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease; } .burger-lines span:nth-child(1) { top: 0; } .burger-lines span:nth-child(2) { top: 7px; } .burger-lines span:nth-child(3) { top: 14px; } .burger[aria-expanded="true"] .burger-lines span:nth-child(1) { top: 7px; transform: rotate(45deg); } .burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger-lines span:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* ============================================================ 9. FOOTER — cohérence chromatique avec la nav (même famille sombre) ============================================================ */ .site-footer { background: var(--color-surface); color: var(--color-ink-muted); border-top: 2px solid var(--color-primary-dark); } .site-footer a { color: var(--color-ink); } .site-footer a:hover { color: var(--color-primary); } .footer-logo { display: inline-block; } .footer-logo img { display: block; height: 46px; width: auto; object-fit: contain; max-width: 100%; } @media (max-width: 768px) { .footer-logo img { height: 38px; } } .footer-divider { border-top: 1px solid var(--color-ink-muted); } .readyup-credit { font-size: 12px; color: var(--color-ink-muted); text-align: center; font-family: var(--font-body); } .readyup-credit a { color: inherit; text-decoration: underline; } /* ============================================================ 10. RESPONSIVE OVERRIDES DIVERS ============================================================ */ @media (max-width: 640px) { .hero__content { text-align: left; } }