/* * ============================================================ * STYLE.CSS — A'TOUT FER (Le Jardinier à Tout Fer) * Jardinier / paysagiste / maçonnerie / ferronnerie — Saint-Gilles (Gard) * ============================================================ * * 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 : Nature Distilled (chaleur artisanale, matières, * tons terreux) + Editorial Craft (composition asymétrique, * respiration, photographie forte) — adapté avec la palette * EXACTE extraite du logo (aucune couleur de logo modifiée). * * Essence visuelle : un site qui sent la terre retournée et la * ferraille travaillée — chaleureux, familial, jamais froid. * Signature unique : la feuille du logo devient un motif * discret récurrent (puce de nav active, séparateurs, badge * réassurance) qui relie chaque section à l'identité de marque. * Typographies : Anton (display, condensé/impact — dérivé * du lettrage du logo) + Barlow (corps, robuste et très lisible, * registre "travail en extérieur"). * Atmosphère : fond ivoire chaud grainé (jamais blanc pur), * bandes sombres façon "plaque du logo" pour ponctuer le rythme, * ombres douces naturelles, radius modérés (solidité artisanale, * pas de pill startup). * * Palette (voir @theme dans le head de chaque page — dual declaration) : * --color-primary #718B2E (vert feuille foncé, EXACT logo) * --color-primary-dark #5C7524 (enrichissement AA — CTA/liens) * --color-secondary #8DAD38 (vert "TOUT FER", EXACT logo) * --color-accent #B1BF3F (vert clair feuille, EXACT logo) * --color-surface #F7F5EC (ivoire chaud, enrichissement) * --color-surface-alt #ECE6D6 (sable chaud, enrichissement) * --color-ink #20261C (charbon-vert, écho plaque logo) * * ⚠️ Les tokens 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 ============================================================ */ *, *::before, *::after { box-sizing: border-box; } 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; scroll-behavior: auto !important; } } body { background-color: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } ::selection { background-color: var(--color-accent); color: var(--color-ink); } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-primary-dark); color: #fff; 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 ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); letter-spacing: 0.01em; line-height: 1.05; } .surtitre { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--color-primary-dark); display: inline-flex; align-items: center; gap: 0.5em; } .surtitre::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); display: inline-block; border-radius: 2px; } .surtitre--light { color: var(--color-accent); } /* ============================================================ 3. ATMOSPHÈRE DE FOND ============================================================ */ .grain-surface { position: relative; isolation: isolate; } .grain-surface::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .grain-surface > * { position: relative; z-index: 1; } .section-dark { background: var(--color-ink); color: var(--color-surface); } .section-dark .surtitre { color: var(--color-accent); } .section-dark h2, .section-dark h3 { color: var(--color-surface); } /* ============================================================ 4. COMPOSANTS RÉCURRENTS ============================================================ */ /* --- Navigation --- */ .site-header { border-bottom: 1px solid rgba(32, 38, 28, 0.08); } .nav-logo__img { height: 52px; width: auto; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(32, 38, 28, 0.18)); 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 (H2.4) Spécificité renforcée (nav .nav-cta-desktop) : .nav-cta-desktop porte aussi la classe .btn-primary, dont la règle display:inline-flex est déclarée plus bas dans ce fichier. À spécificité égale (classe seule), l'ordre de cascade aurait fait gagner .btn-primary et affiché le CTA même sur mobile — bug de double affichage nav mobile + CTA desktop. */ .nav-links-desktop { display: none; } nav .nav-cta-desktop { display: none; } .burger { display: inline-flex; } @media (min-width: 1024px) { .nav-links-desktop { display: flex; } nav .nav-cta-desktop { display: inline-flex; } .burger { display: none; } } .nav-links-desktop { list-style: none; padding: 0; margin: 0; } /* Style artisan / chaleureux : typographie + italique au hover + ornement "feuille" ponctuel uniquement sur l'actif — jamais de soulignement uniforme (H2.5) */ .nav-link { text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink); position: relative; padding: 0.25rem 0; transition: color 0.2s ease, font-style 0.2s ease; } .nav-link:hover { color: var(--color-primary-dark); font-style: italic; } .nav-link.active { color: var(--color-primary-dark); } .nav-link.active::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); margin-right: 0.45em; vertical-align: middle; } .burger-lines { display: flex; flex-direction: column; gap: 5px; width: 26px; } .burger-lines span { display: block; height: 2px; width: 100%; background: var(--color-ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(7px) 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(-7px) rotate(-45deg); } .mobile-menu { background: var(--color-surface); border-bottom: 1px solid rgba(32, 38, 28, 0.1); } .mobile-menu ul { list-style: none; margin: 0; padding: 1rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; } .mobile-menu a { text-decoration: none; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink); font-size: 1rem; } .mobile-menu a.mobile-cta { display: inline-block; background: var(--color-primary-dark); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius-btn); text-align: center; font-weight: 700; } .mobile-menu[hidden] { display: none; } /* --- Boutons : hiérarchie stricte à 3 niveaux (H3.5) --- */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.02em; padding: 0.95rem 1.85rem; border-radius: var(--radius-btn); transition: all 0.2s ease; text-decoration: none; line-height: 1; cursor: pointer; border: 2px solid transparent; } .btn-primary { background: var(--color-primary-dark); color: #fff; box-shadow: var(--shadow-card); } .btn-primary:hover { background: #4c5f1d; box-shadow: var(--shadow-hover); transform: translateY(-1px); } .btn-secondary { background: var(--color-surface); color: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn-secondary:hover { background: var(--color-primary-dark); color: #fff; } /* Variante pour bouton secondaire posé sur photo (hero) : bordure renforcée + fond semi-transparent + blur obligatoire (H3.5) */ .btn-secondary--on-photo { background: rgba(32, 38, 28, 0.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; border-color: #fff; } .btn-secondary--on-photo:hover { background: rgba(32, 38, 28, 0.55); border-color: var(--color-accent); color: var(--color-accent); } .link-inline { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; transition: color 0.2s ease; } .link-inline:hover { color: var(--color-ink); } /* --- Cards --- */ .card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: box-shadow 0.25s ease, transform 0.25s ease; } .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); } .activite-card { display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: box-shadow 0.25s ease, transform 0.25s ease; text-decoration: none; color: inherit; height: 100%; } .activite-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-5px); } .activite-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .activite-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .activite-card:hover .activite-card__media img { transform: scale(1.06); } .activite-card__body { padding: 1.35rem 1.35rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .activite-card__title { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.01em; color: var(--color-ink); } .activite-card__text { color: var(--color-ink-soft); font-size: 0.94rem; line-height: 1.55; } .activite-card__arrow { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-primary-dark); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .activite-card__arrow svg { width: 16px; height: 16px; transition: transform 0.25s ease; } .activite-card:hover .activite-card__arrow svg { transform: translateX(4px); } /* --- Hero (HERO-03 plein écran overlay) --- */ .hero { position: relative; min-height: calc(100svh - var(--nav-height, 84px)); display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(20, 24, 16, 0.15) 0%, rgba(20, 24, 16, 0.55) 55%, rgba(20, 24, 16, 0.88) 100% ); } .hero__content { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 5rem); } .hero__title { font-family: var(--font-display); font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); max-width: 18ch; } .hero__lede { color: rgba(255, 255, 255, 0.92); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 56ch; line-height: 1.6; } /* --- Bloc 01 : image-texte overlap (BLOC-10) --- */ .overlap-block { position: relative; } .overlap-block__media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); } .overlap-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .overlap-block__card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-hover); padding: clamp(1.75rem, 3vw, 2.75rem); } @media (min-width: 1024px) { .overlap-block__card { margin-left: -4.5rem; margin-top: 3rem; } } /* --- Bloc 03 : carte Leaflet --- */ .map-section { background: var(--color-surface); } .map-wrapper { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid rgba(32, 38, 28, 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: 10px; background: var(--color-surface); color: var(--color-ink); } .leaflet-popup-content { font-family: var(--font-body); margin: 12px 16px; font-size: 0.92rem; } .leaflet-popup-tip { background: var(--color-surface); } .map-zones { list-style: none; padding: 0; margin: 0; color: var(--color-ink-soft); font-size: 0.98rem; display: flex; flex-direction: column; gap: 0.85rem; } .map-zones li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(32, 38, 28, 0.08); } .map-zones li svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-primary-dark); margin-top: 0.15rem; } /* --- Bloc 04 : bande réassurance pleine largeur (BLOC-04) --- */ .reassurance-band { background: var(--color-ink); color: var(--color-surface); position: relative; overflow: hidden; } /* Les titres ont une couleur globale (h1-h4 { color: var(--color-ink) }) qui doit être explicitement écrasée ici, sinon le H2 devient quasi invisible (encre foncée sur fond encre foncée). */ .reassurance-band h1, .reassurance-band h2, .reassurance-band h3, .reassurance-band h4 { color: var(--color-surface); } .reassurance-badge { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(177, 191, 63, 0.14); border: 1px solid rgba(177, 191, 63, 0.4); flex-shrink: 0; } .reassurance-badge svg { width: 36px; height: 36px; color: var(--color-accent); } /* --- Bloc 05 : mosaïque réalisations (BLOC-05) --- */ .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(140px, 1fr)); gap: 0.9rem; } .mosaic__item { position: relative; border-radius: var(--radius-card); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-card); } .mosaic__item--lg { grid-column: span 2; grid-row: span 2; } .mosaic__item--md { grid-column: span 2; grid-row: span 1; } @media (max-width: 768px) { .mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .mosaic__item--lg { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; } .mosaic__item--md { grid-column: span 1; aspect-ratio: 4/3; } } .mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .mosaic__item:hover img { transform: scale(1.05); } .mosaic__caption { position: absolute; inset: auto 0 0 0; padding: 1rem 1.1rem; background: linear-gradient(0deg, rgba(20, 24, 16, 0.82) 0%, rgba(20, 24, 16, 0) 100%); color: #fff; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15, 18, 12, 0.94); display: flex; align-items: center; justify-content: center; padding: 2rem; } .lightbox[hidden] { display: none; } .lightbox img { max-width: min(90vw, 1100px); max-height: 85vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox__close, .lightbox__nav { position: absolute; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; border-radius: 50%; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); } .lightbox__close { top: 1.25rem; right: 1.25rem; } .lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); } /* --- Bloc 06 : CTA final typographique --- */ .cta-final { background: var(--color-surface-alt); position: relative; overflow: hidden; } .cta-final__title { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.6rem); color: var(--color-ink); max-width: 20ch; margin-inline: auto; } .cta-final__phone { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--color-primary-dark); text-decoration: none; letter-spacing: 0.02em; } .cta-final__phone:hover { color: var(--color-ink); } /* --- Footer (scénario B, sombre) --- */ .site-footer { background: var(--color-ink); color: var(--color-surface-alt); } .site-footer a { color: var(--color-surface-alt); transition: color 0.2s ease; } .site-footer a:hover { color: var(--color-accent); } .footer-heading { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; color: var(--color-accent); margin-bottom: 1rem; } .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; } } .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.94rem; } .footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.94rem; } .footer-contact li { display: flex; align-items: flex-start; gap: 0.6rem; } .footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.15rem; color: var(--color-accent); } .footer-bottom { border-top: 1px solid rgba(247, 245, 236, 0.12); } .readyup-credit { font-size: 12px; color: rgba(247, 245, 236, 0.55); text-align: center; } .readyup-credit a { color: rgba(247, 245, 236, 0.75); text-decoration: underline; } .photo-credits { font-size: 11px; color: rgba(247, 245, 236, 0.4); text-align: center; } /* ============================================================ 5. MISE EN VALEUR ============================================================ */ .badge-cert { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(177, 191, 63, 0.12); border: 1px solid rgba(177, 191, 63, 0.35); color: var(--color-accent); padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } /* ============================================================ 6. ANIMATIONS & MICRO-INTERACTIONS ============================================================ */ .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s 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; } } .stagger > * { transition-delay: calc(var(--stagger-index, 0) * 90ms); } /* ============================================================ 7. COMPOSANTS PAGES INTERNES (Phase 2) Composants additionnels nécessaires aux pages internes créées en Phase 2 (aucun sur l'Accueil) — mêmes tokens, même langage visuel que la Phase 1 (grain, radius, ombres, typographies). ============================================================ */ /* --- Page hero (bandeau d'ouverture des pages internes) --- */ .page-hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .page-hero__media { position: absolute; inset: 0; z-index: 0; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .page-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(20, 24, 16, 0.25) 0%, rgba(20, 24, 16, 0.6) 60%, rgba(20, 24, 16, 0.88) 100% ); } .page-hero__content { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 4rem); } .page-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); max-width: 22ch; } .page-hero__lede { color: rgba(255, 255, 255, 0.92); font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 60ch; line-height: 1.6; } /* --- Liste à coche (services, prestations, conseils) --- */ .check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; } .check-list li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--color-ink-soft); line-height: 1.55; } .check-list li svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 0.2rem; color: var(--color-primary-dark); } /* --- Liste numérotée éditoriale (BLOC-03) --- */ .numbered-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; } .numbered-list li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: baseline; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(32, 38, 28, 0.1); } .numbered-list li:last-child { border-bottom: none; padding-bottom: 0; } .numbered-list__index { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--color-accent); line-height: 1; } .numbered-list__text { color: var(--color-ink-soft); line-height: 1.6; } /* --- Accordéon FAQ --- */ .faq-item { border-bottom: 1px solid rgba(32, 38, 28, 0.12); } .faq-item:first-child { border-top: 1px solid rgba(32, 38, 28, 0.12); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: none; text-align: left; padding: 1.35rem 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--color-ink); cursor: pointer; } .faq-question__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-primary-dark); transition: transform 0.25s ease; } .faq-question[aria-expanded="true"] .faq-question__icon { transform: rotate(45deg); } .faq-answer { padding: 0 0 1.5rem; color: var(--color-ink-soft); line-height: 1.65; max-width: 70ch; } /* --- Filtres galerie --- */ .filter-btn { font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55rem 1.15rem; border-radius: 999px; border: 2px solid var(--color-primary-dark); color: var(--color-primary-dark); background: transparent; cursor: pointer; transition: all 0.2s ease; } .filter-btn:hover { background: rgba(113, 139, 46, 0.1); } .filter-btn.is-active { background: var(--color-primary-dark); color: #fff; } /* --- Formulaire de contact --- */ .form-label { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink); margin-bottom: 0.5rem; } .form-input, .form-select, .form-textarea { width: 100%; background: var(--color-surface); border: 2px solid rgba(32, 38, 28, 0.15); border-radius: var(--radius-btn); padding: 0.85rem 1.1rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); transition: border-color 0.2s ease; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary-dark); } .form-textarea { resize: vertical; min-height: 140px; } .form-success, .form-error { border-radius: var(--radius-card); padding: 1rem 1.25rem; font-size: 0.95rem; line-height: 1.5; } .form-success { background: rgba(141, 173, 56, 0.14); border: 1px solid rgba(141, 173, 56, 0.4); color: var(--color-primary-dark); } .form-error { background: rgba(180, 60, 40, 0.1); border: 1px solid rgba(180, 60, 40, 0.35); color: #8a2f1e; } .form-success[hidden], .form-error[hidden] { display: none; } /* --- Bloc zone (liste + photo, variante sans carte) --- */ .zone-media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); } .zone-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ 10. OVERRIDES RESPONSIVE ============================================================ */ .max-70ch-off { max-width: none !important; } @media (max-width: 640px) { .hero { align-items: center; } .mosaic { gap: 0.6rem; } }