/* Gabarit des 32 pages de filtre/categorie /realisations/{ville|type|budget|strategie} + la page d'accueil /realisations (33 pages) — CSS quasi-identique sur toutes les pages source (les rares divergences relevees : une couleur de bordure, une expression de taille de police — consolidees ici sur une valeur unique, sans impact visuel). CSS mort confirme non repris (present dans le head source, aucun element correspondant dans le body reel) : ancien .hero-section/.hero-title/.hero-subtitle (remplace par .hero-v2), .gallery-header, .gallery-count, .seo-grid, .seo-block (le body utilise .seo-content en style inline, pas ces cartes en grille). La page d'accueil /realisations a une seule vraie difference structurelle : sa galerie utilise CSS Grid (3 colonnes fixes) au lieu du column-count "masonry" des pages de filtre — voir la regle .is-grid-layout plus bas, ajoutee au uniquement sur cette page par le script de generation. */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: #333; background: #f3ede5; } .container { max-width: 1500px; margin: 0 auto; padding: 0 20px; } /* ========== HERO V2 (avec figure optionnelle a droite) ========== */ .hero-v2{--hv2-accent:#8a6248;--hv2-accent-dark:#3A39DC;--hv2-ink:#1F1B36;--hv2-ink-soft:#4a4c6a;--hv2-ink-mute:#7d7f9c;--hv2-line:#d8daf2;--hv2-card:#fff;background:linear-gradient(135deg,#ebe1d5 0%,#dfd3c7 55%,#d8c6b6 100%);padding:2rem clamp(1.2rem,4vw,3rem) 2.6rem;color:var(--hv2-ink)} .hero-v2 .hero-v2-copy{max-width:1180px;margin:0 auto} .hero-v2 .hero-v2-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--hv2-accent);margin:0 0 .9rem} .hero-v2 .hero-v2-eyebrow::before{content:"";width:2rem;height:2px;background:var(--hv2-accent);border-radius:2px} .hero-v2 h1{font-size:clamp(1.95rem,1.45rem + 1.9vw,2.7rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 .7rem;font-weight:800;color:var(--hv2-ink)} .hero-v2 h1 em{font-style:normal;color:var(--hv2-accent)} .hero-v2 .hero-v2-sub{font-size:1rem;line-height:1.55;color:var(--hv2-ink-soft);margin:0 0 1.3rem;max-width:34rem} .hero-v2 nav.hero-v2-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:0 0 1.5rem;padding:0} .hero-v2 nav.hero-v2-cta a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;border:1.5px solid transparent;transition:.2s;cursor:pointer} .hero-v2 nav.hero-v2-cta a.hv2-primary{background:var(--hv2-accent);color:#fff} .hero-v2 nav.hero-v2-cta a.hv2-primary:hover{background:var(--hv2-accent-dark);transform:translateY(-1px)} .hero-v2 nav.hero-v2-cta a.hv2-ghost{border-color:var(--hv2-line);color:var(--hv2-ink)} .hero-v2 nav.hero-v2-cta a.hv2-ghost:hover{border-color:var(--hv2-accent);color:var(--hv2-accent)} .hero-v2 dl.hero-v2-stats{display:flex;flex-wrap:wrap;gap:1rem clamp(1.4rem,3vw,2.8rem);margin:0;padding:0} .hero-v2 dl.hero-v2-stats dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)} .hero-v2 dl.hero-v2-stats dd{margin:0;font-weight:800;font-size:1.2rem;color:var(--hv2-ink);letter-spacing:-.01em;white-space:nowrap} .hero-v2 dl.hero-v2-stats dd a{color:inherit;text-decoration:none} .hero-v2 dl.hero-v2-stats dd a:hover{color:var(--hv2-accent)} .hero-v2 dl.hero-v2-stats dd::after{content:attr(data-label);display:block;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--hv2-ink-mute);margin-top:.15rem} .hero-v2 .hero-v2-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center} .hero-v2 .hero-v2-grid .hero-v2-copy{max-width:none;margin:0} .hero-v2 figure.hero-v2-visual{margin:0} .hero-v2 figure.hero-v2-visual img{width:100%;height:320px;object-fit:cover;border-radius:18px;display:block;box-shadow:0 14px 34px rgba(31,27,22,.12)} .hero-v2 figure.hero-v2-visual figcaption{font-size:.68rem;color:var(--hv2-ink-mute);margin-top:.5rem;text-align:right} @media (max-width:900px){.hero-v2 .hero-v2-grid{display:block}.hero-v2 figure.hero-v2-visual{display:none}} /* ========== INTRO SEO (bandeau sous le hero) ========== */ .intro-section{background:#fff;padding:1.7rem clamp(1.2rem,4vw,3rem) 1.8rem;border-bottom:1px solid #dfd3c7} .intro-section .container{max-width:1180px;margin:0 auto;padding:0} .intro-section p{font-size:.95rem;line-height:1.75;color:#7b6d62;text-align:left;max-width:72ch;margin:0;padding-left:1.2rem;border-left:3px solid #8a6248} .intro-section p strong{color:#57483e;font-weight:600} /* ========== FILTRES LAYOUT ========== */ .filters-section { background: white; padding: 30px 0; border-bottom: 1px solid #E5E7EB; } .filters-section > .container{max-width:calc(1180px + 2*clamp(1.2rem,4vw,3rem));margin-inline:auto;padding-inline:clamp(1.2rem,4vw,3rem)} .filters-layout { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; } /* SIDEBAR filtres (valeurs desktop finales, apres harmonisation) */ .filters-sidebar { background: #fff; border: 1px solid #dfd3c7; border-radius: 14px; padding: 22px 20px; } .filters-sidebar-title { font-size: .95rem; font-weight: 700; color: #3b2d25; border-bottom: 1px solid #dfd3c7; padding-bottom: 10px; margin-bottom: 14px; } .hub-group { margin-bottom: 24px; } .hub-group:last-child { margin-bottom: 0; } .hub-label { font-weight: 700; color: #8a8fa3; font-size: .68rem; margin-bottom: 8px; display: block; text-transform: uppercase; letter-spacing: .12em; } .hub-links { display: flex; flex-direction: column; gap: 6px; } .hub-link { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border: none; background: transparent; border-radius: 8px; text-decoration: none; font-size: .85rem; font-weight: 500; transition: all 0.3s; color: #3a3d55; } .hub-link:hover { background: #eef0fb; color: #8a6248; } .hub-link.active { background: #8a6248; color: white; } .hub-link-count { background: #ebe1d5; color: #7b6d62; padding: 2px 8px; border-radius: 10px; font-size: .66rem; font-weight: 600; } .hub-link.active .hub-link-count { background: rgba(255,255,255,0.3); color: white; } /* Mobile filters */ .mobile-filters { display: none; padding: 20px; background: white; margin-bottom: 20px; border-radius: 12px; } .mobile-filters-title { font-size: 14px; font-weight: 600; color: #8a6248; margin-bottom: 15px; } .mobile-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .mobile-hub-link { display: block; padding: 12px; background: #fbf8f3; border-radius: 10px; text-decoration: none; text-align: center; font-size: 13px; font-weight: 500; color: #333; transition: all 0.2s; } .mobile-hub-link:hover { background: #8a6248; color: white; } /* GALERIE */ .gallery-content { min-width: 0; } .results-counter { text-align: left; padding: 2px 0 14px; font-size: .9rem; color: #7b6d62; margin: 0; } .results-counter strong { color: #8a6248; font-weight: 600; font-size: .95rem; } .masonry-grid { column-count: 3; column-gap: 18px; } .masonry-grid.is-grid-layout { display: grid; column-count: initial; grid-template-columns: repeat(3, 1fr); } .masonry-item { break-inside: avoid; margin-bottom: 18px; position: relative; overflow: hidden; border-radius: 14px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 6px 18px rgba(23,24,74,.07); } .masonry-item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(23,24,74,.12); } .masonry-item a { text-decoration: none; color: inherit; display: block; } .masonry-item img { width: 100%; display: block; border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; background: #f0f0f0; } .item-badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: #3b2d25; padding: 4px 10px; border-radius: 999px; font-size: .68rem; font-weight: 600; } .item-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding: 20px; color: white; opacity: 0; transition: opacity 0.3s; border-radius: 0 0 14px 14px; } .masonry-item:hover .item-overlay { opacity: 1; } .item-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; } .item-details { font-size: .85rem; opacity: 0.9; color: #c9ceff; } /* ========== SEO / CATEGORIES / ARTICLES ========== */ .seo-section { padding: 60px 20px; background: #fbf8f3; } .seo-container { max-width: 1200px; margin: 0 auto; } .seo-section h2 { font-size: clamp(1.35rem,2.4vw,1.7rem); line-height: 1.25; color: #8a6248; margin-bottom: 15px; } .seo-section h3 { font-size: 1.15rem; line-height: 1.3; color: #333; margin: 25px 0 12px; } .seo-section p { color: #555; line-height: 1.8; margin-bottom: 15px; } .categories-section h3 { font-size: 1.15rem; } .articles-section h2 { font-size: clamp(1.35rem,2.4vw,1.7rem); line-height: 1.25; } /* KEYWORDS */ .keywords-section { padding: 30px 20px; background: white; text-align: center; } .keywords-title { font-size: 14px; font-weight: 600; color: #666; margin-bottom: 15px; } .keyword-tag { display: inline-block; background: #fbf8f3; color: #8a6248; padding: 8px 16px; border-radius: 20px; margin: 5px; font-size: 13px; border: 1px solid #e5e7eb; } /* FAQ */ .faq-section { padding: 50px 20px; background: #fbf8f3; } .faq-title { text-align: center; font-size: clamp(1.35rem,2.4vw,1.7rem); line-height: 1.25; font-weight: 700; color: #8a6248; margin-bottom: 30px; } .faq-grid { max-width: 800px; margin: 0 auto; } .faq-item { background: white; border-radius: 12px; padding: 25px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .faq-item h3 { font-size: 1.15rem; line-height: 1.3; margin-bottom: 10px; color: #333; } .faq-item p { color: #555; line-height: 1.7; } /* CTA FINAL */ .cta-final { background: linear-gradient(135deg, #8a6248 0%, #684735 100%); color: white; padding: 80px 20px; text-align: center; } .cta-final h2 { font-size: clamp(1.5rem,1.2rem + 1vw,1.9rem); font-weight: 700; margin-bottom: 16px; } .cta-final p { font-size: 18px; opacity: 0.95; margin-bottom: 40px; } .cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 212px; height: 48px; background: white; color: #8a6248; border: none; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; padding: 0 24px; } .btn-cta:hover { background: #fbf8f3; transform: translateY(-2px); } .btn-cta-secondary { background: transparent; color: white; border: 2px solid white; } .btn-cta-secondary:hover { background: rgba(255,255,255,0.1); } /* Filtres bas de page (liens decoratifs, pas de JS de filtrage dans la source) */ .filters-bottom { padding: 40px 20px; background: white; text-align: center; } .filters-bottom-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 20px; } .filter-group-bottom { margin-bottom: 20px; } .filter-group-label { font-size: 13px; color: #666; margin-bottom: 10px; display: block; } .filter-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .filter-link { display: inline-block; padding: 8px 16px; background: #fbf8f3; color: #8a6248; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s; } .filter-link:hover { background: #8a6248; color: white; } @media (max-width: 1024px) { .masonry-grid, .masonry-grid.is-grid-layout { column-count: 2; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .hero-v2 .hero-v2-sub { max-width: none; } .filters-layout { grid-template-columns: 1fr; gap: 0; } .filters-sidebar { display: none; } .mobile-filters { display: block; } .masonry-grid, .masonry-grid.is-grid-layout { column-count: 2; grid-template-columns: repeat(2, 1fr); column-gap: 15px; } .masonry-item { margin-bottom: 15px; } .cta-final h2 { font-size: 24px; } .cta-buttons { flex-direction: column; align-items: center; } .btn-cta { width: 100%; max-width: 300px; } } @media (max-width: 480px) { .masonry-grid, .masonry-grid.is-grid-layout { column-count: 1; grid-template-columns: 1fr; } }