/* ============================================= DEBANETIK — Maquettes d'exemple par métier Feuille de base partagée : palette et layout pilotés par variables CSS, une identité par métier définie via [data-trade="..."] sur . ============================================= */ :root { --ex-radius: 14px; --ex-shadow: 0 10px 30px rgba(0,0,0,.12); } /* ---- Palette « pizzeria » ---- */ body[data-trade="pizzeria"] { --ex-primary: #c0392b; --ex-primary-dark: #922b21; --ex-secondary: #2d5016; --ex-bg: #fdf6ec; --ex-bg-alt: #f7ead4; --ex-ink: #2b1d14; --ex-ink-soft: #6b5847; --ex-heading-font: 'Playfair Display', Georgia, serif; } body[data-trade="pizzeria"] .ex-hero { background-image: url('../img/exemples/pizzeria-hero.jpg'); } /* ---- Palette « plombier » ---- */ body[data-trade="plombier"] { --ex-primary: #1a5f7a; --ex-primary-dark: #123f52; --ex-secondary: #52616b; --ex-bg: #f2f7f9; --ex-bg-alt: #e1edf1; --ex-ink: #16232b; --ex-ink-soft: #55696f; } body[data-trade="plombier"] .ex-hero { background-image: url('../img/exemples/plombier-hero.jpg'); } /* ---- Palette « électricien » ---- */ body[data-trade="electricien"] { --ex-primary: #9c6b0a; --ex-primary-dark: #7a530a; --ex-secondary: #1c2541; --ex-bg: #fdf9ef; --ex-bg-alt: #f3e8c8; --ex-ink: #1c2541; --ex-ink-soft: #565f75; } body[data-trade="electricien"] .ex-hero { background-image: url('../img/exemples/electricien-hero.jpg'); } /* ---- Bandeau "ceci est une maquette" ---- */ .ex-banner { background: #17171c; color: #fff; font-size: .85rem; padding: .65rem 1rem; text-align: center; line-height: 1.5; } .ex-banner a { color: #fff; text-decoration: underline; font-weight: 600; } .ex-banner strong { font-weight: 700; } /* ---- Reset local au périmètre de la maquette ---- */ .ex-page { background: var(--ex-bg); color: var(--ex-ink); font-family: 'Inter', sans-serif; } .ex-page h1, .ex-page h2, .ex-page h3 { font-family: var(--ex-heading-font, 'Inter', sans-serif); color: var(--ex-ink); line-height: 1.15; } .ex-container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } /* ---- Header de la maquette ---- */ .ex-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; max-width: 1120px; margin: 0 auto; } .ex-logo { font-family: var(--ex-heading-font, 'Inter', sans-serif); font-size: 1.5rem; font-weight: 700; color: var(--ex-primary); text-decoration: none; display: flex; align-items: center; gap: .5rem; } .ex-nav { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .ex-nav a { color: var(--ex-ink); text-decoration: none; font-weight: 500; font-size: .95rem; } .ex-nav a:hover { color: var(--ex-primary); } /* ---- Hero ---- */ .ex-hero { position: relative; overflow: hidden; padding: 6rem 1.5rem 6.5rem; text-align: center; background: var(--ex-ink) center/cover no-repeat; } .ex-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,10,5,.88) 0%, rgba(20,10,5,.55) 55%, rgba(20,10,5,.8) 100%); } .ex-hero__content { position: relative; z-index: 1; } .ex-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 .75rem; color: #fff; } .ex-hero p { font-size: 1.15rem; color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 2rem; } .ex-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--ex-primary); color: #fff; padding: .85rem 1.75rem; border-radius: 999px; text-decoration: none; font-weight: 600; border: none; cursor: pointer; transition: background .15s ease, transform .15s ease; } .ex-btn:hover { background: var(--ex-primary-dark); transform: translateY(-1px); } .ex-btn--outline { background: transparent; border: 2px solid var(--ex-primary); color: var(--ex-primary); } .ex-btn--outline:hover { background: var(--ex-primary); color: #fff; } /* ---- Sections génériques ---- */ .ex-section { padding: 4.5rem 0; } .ex-section--alt { background: var(--ex-bg-alt); } .ex-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--ex-primary); margin: 0 0 .5rem; } .ex-section h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0 0 .75rem; } .ex-section__intro { color: var(--ex-ink-soft); max-width: 620px; margin: 0 0 2.5rem; font-size: 1.05rem; } /* ---- Grille menu ---- */ .ex-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .ex-menu__item { background: #fff; border-radius: var(--ex-radius); padding: 1.5rem; box-shadow: var(--ex-shadow); display: flex; gap: 1rem; align-items: flex-start; } .ex-menu__icon { flex-shrink: 0; width: 40px; height: 40px; color: var(--ex-primary); } .ex-menu__item h3 { font-size: 1.1rem; margin: 0 0 .35rem; display: flex; justify-content: space-between; gap: .5rem; } .ex-menu__price { color: var(--ex-primary); font-family: 'Inter', sans-serif; white-space: nowrap; } .ex-menu__item p { margin: 0; color: var(--ex-ink-soft); font-size: .92rem; } /* ---- Features ---- */ .ex-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; } .ex-feature { text-align: center; } .ex-feature__icon { width: 52px; height: 52px; margin: 0 auto 1rem; color: var(--ex-secondary); } .ex-feature h3 { font-size: 1.1rem; margin: 0 0 .5rem; } .ex-feature p { color: var(--ex-ink-soft); font-size: .92rem; margin: 0; } /* ---- Réservation / CTA final ---- */ .ex-cta { text-align: center; background: var(--ex-secondary); color: #fff; border-radius: var(--ex-radius); padding: 3rem 2rem; } .ex-cta h2 { color: #fff; } .ex-cta p { color: rgba(255,255,255,.85); max-width: 480px; margin: 0 auto 1.75rem; } .ex-cta .ex-btn { background: #fff; color: var(--ex-secondary); } .ex-cta .ex-btn:hover { background: var(--ex-bg-alt); } .ex-cta__note { margin-top: 1.5rem !important; font-size: .85rem !important; color: rgba(255,255,255,.65) !important; } .ex-cta__note a { color: #fff; } /* ---- Footer de la maquette ---- */ .ex-footer { text-align: center; padding: 2rem 1.5rem; font-size: .85rem; color: var(--ex-ink-soft); } .ex-footer a { color: var(--ex-primary); font-weight: 600; text-decoration: none; } @media (max-width: 720px) { .ex-nav { display: none; } .ex-header { justify-content: center; } }