/* AG Tous Travaux — styles spécifiques aux pages de prestation (s'ajoutent à styles.css) */ /* Accent par page : défini via --accent sur */ .svc-page { --accent: var(--red); } /* Fil d'Ariane */ .crumbs { background: var(--sky); padding: 0 40px 6px; font-size: 13.5px; color: var(--muted); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent); } .crumbs b { color: var(--ink); font-weight: 600; } /* Hero de prestation */ .svc-hero { background: var(--sky); padding: 30px 40px 0; } .svc-hero-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 18px 0 44px; } .svc-hero .tag { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .svc-hero .tag .n { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; } .svc-hero h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.0; margin: 0; } .svc-hero p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-soft); margin: 20px 0 28px; } .svc-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; } .svc-hero .ph { aspect-ratio: 4 / 3.4; border-radius: 12px; } /* Bandeau accent fin */ .accent-strip { height: 6px; background: var(--accent); } /* Liste "Ce que nous faisons" */ .do-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; } .do-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #d9d6cf; } .do-item .dia { width: 11px; height: 11px; transform: rotate(45deg); background: var(--accent); margin-top: 5px; flex: none; } .do-item strong { font-size: 16.5px; display: block; margin-bottom: 3px; } .do-item span { font-size: 14px; color: var(--muted); line-height: 1.5; } /* Méthode (étapes) */ .steps { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .step .no { font-size: 46px; font-weight: 800; color: var(--accent); line-height: 1; } .step h3 { font-size: 17px; font-weight: 700; margin: 12px 0 6px; } .step p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; } /* Galerie avant/après */ .gallery { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .gallery .ph { aspect-ratio: 4 / 3.2; border-radius: 8px; } .gallery .tagline { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 10px 2px 0; } /* Autres prestations */ .cross { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cross a { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--cream); border-radius: 8px; padding: 24px 28px; transition: transform .18s ease, box-shadow .18s ease; } .cross a:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(20,20,18,.4); } .cross .t { font-size: 18px; font-weight: 700; } .cross .t small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); margin-top: 4px; } .cross .arr { font-size: 22px; color: var(--accent); } @media (max-width: 1100px) { .svc-hero-grid { grid-template-columns: 1fr; gap: 30px; } .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .crumbs { padding: 0 18px 6px; } .svc-hero { padding: 22px 18px 0; } .do-grid { grid-template-columns: 1fr; gap: 0 0; } .steps { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr; } .cross { grid-template-columns: 1fr; } }