/* ============================================================================= A.Gaveau – Graphiste & Webdesigner Design system : style.css ============================================================================= */ /* --- Fonts (Google Fonts) --------------------------------------------------- Importées dans le de chaque page : Plus Jakarta Sans (titres) + Inter (texte courant) ----------------------------------------------------------------------------- */ :root { /* Couleurs */ --color-ink: #14192b; /* bleu nuit profond (texte, header) */ --color-ink-soft: #2b3354; /* variante plus claire */ --color-gold: #c9a24b; /* or champagne (accent premium) */ --color-gold-dark: #ab8636; --color-cream: #faf8f4; /* fond clair */ --color-white: #ffffff; --color-gray-100: #f3f1ec; --color-gray-300: #e2dfd6; --color-gray-500: #8b8d9a; --color-gray-700: #4d5266; --color-success: #4c7a5d; /* Typographie */ --font-heading: "Plus Jakarta Sans", "Segoe UI", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; /* Espacements */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Layout */ --container-width: 1180px; --radius: 14px; --radius-sm: 8px; --shadow: 0 10px 40px rgba(20, 25, 43, 0.08); --shadow-strong: 0 20px 60px rgba(20, 25, 43, 0.16); --transition: 0.25s ease; } /* --- Reset -------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-ink); background: var(--color-cream); line-height: 1.65; font-size: 1rem; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } /* --- Layout helpers ------------------------------------------------------ */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-md); } .section { padding: var(--space-2xl) 0; } .section--tight { padding: var(--space-xl) 0; } .section--alt { background: var(--color-white); } .section--ink { background: var(--color-ink); color: var(--color-white); } .grid { display: grid; gap: var(--space-md); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .text-center { text-align: center; } .eyebrow { display: inline-block; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-dark); margin-bottom: var(--space-sm); } .section--ink .eyebrow { color: var(--color-gold); } /* --- Typography ----------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-ink); } .section--ink h1, .section--ink h2, .section--ink h3 { color: var(--color-white); } h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: var(--space-md); } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: var(--space-sm); } h3 { font-size: 1.3rem; margin-bottom: var(--space-xs); } p { margin-bottom: var(--space-sm); color: var(--color-gray-700); } .section--ink p { color: var(--color-gray-300); } .lead { font-size: 1.15rem; color: var(--color-gray-700); max-width: 640px; } .section--ink .lead { color: var(--color-gray-300); } /* --- Buttons / CTA ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; padding: 0.85rem 1.7rem; border-radius: 999px; border: 2px solid transparent; transition: var(--transition); white-space: nowrap; } .btn--primary { background: var(--color-gold); color: var(--color-ink); } .btn--primary:hover { background: var(--color-gold-dark); transform: translateY(-2px); box-shadow: var(--shadow); } .btn--secondary { background: transparent; border-color: var(--color-ink); color: var(--color-ink); } .btn--secondary:hover { background: var(--color-ink); color: var(--color-white); } .section--ink .btn--secondary { border-color: var(--color-white); color: var(--color-white); } .section--ink .btn--secondary:hover { background: var(--color-white); color: var(--color-ink); } .btn--block { width: 100%; justify-content: center; } .cta-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); } /* --- Header / Navigation ----------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 248, 244, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-gray-300); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); max-width: var(--container-width); margin: 0 auto; } .logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--color-ink); letter-spacing: -0.02em; } .logo span { color: var(--color-gold-dark); } .nav { display: flex; align-items: center; gap: var(--space-lg); } .nav__list { display: flex; gap: var(--space-md); align-items: center; } .nav__list > li { position: relative; } .nav__list > li > a { font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; padding: 0.5rem 0; transition: var(--transition); } .nav__list > li > a:hover, .nav__list > li > a.is-active { color: var(--color-gold-dark); } .nav__dropdown { position: absolute; top: 100%; left: 0; background: var(--color-white); border-radius: var(--radius-sm); box-shadow: var(--shadow-strong); padding: 0.6rem; min-width: 240px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--transition); } .nav__list > li:hover .nav__dropdown, .nav__list > li:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__dropdown a { display: block; padding: 0.55rem 0.8rem; border-radius: 6px; font-size: 0.9rem; color: var(--color-gray-700); transition: var(--transition); } .nav__dropdown a:hover { background: var(--color-gray-100); color: var(--color-ink); } .nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--color-ink); } @media (max-width: 900px) { .nav-toggle { display: block; } .nav { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: var(--color-cream); flex-direction: column; align-items: flex-start; padding: var(--space-md); transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; } .nav.is-open { transform: translateX(0); } .nav__list { flex-direction: column; align-items: flex-start; width: 100%; gap: 0; } .nav__list > li { width: 100%; border-bottom: 1px solid var(--color-gray-300); } .nav__list > li > a { display: block; padding: var(--space-sm) 0; } .nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding-left: var(--space-sm); } .nav__list > li.is-open .nav__dropdown { display: block; } .nav .cta-group { margin: var(--space-md) 0; width: 100%; } } /* --- Hero ----------------------------------------------------------------- */ .hero { padding: var(--space-2xl) 0; background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-soft) 100%); color: var(--color-white); } .hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } } .hero h1 { color: var(--color-white); } .hero .lead { color: var(--color-gray-300); } .hero__visual { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); color: var(--color-gray-500); text-align: center; padding: var(--space-md); } /* --- Hero avec vidéo de fond ----------------------------------------------- */ .hero--video { position: relative; overflow: hidden; isolation: isolate; min-height: 640px; display: flex; align-items: center; } .hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(20, 25, 43, 0.92) 0%, rgba(43, 51, 84, 0.78) 100%); z-index: -1; } .hero__inner--video { grid-template-columns: 1fr; } .hero__inner--video > div { max-width: 720px; } @media (prefers-reduced-motion: reduce) { .hero__bg-video { display: none; } } .hero--page { padding: var(--space-xl) 0; } .hero--page .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero--page .lead { max-width: 720px; margin: 0 auto var(--space-md); } .hero--page .cta-group { justify-content: center; } /* --- Breadcrumb ------------------------------------------------------------ */ .breadcrumb { font-size: 0.85rem; color: var(--color-gray-300); margin-bottom: var(--space-sm); } .breadcrumb a { color: var(--color-gray-300); text-decoration: underline; } .breadcrumb a:hover { color: var(--color-gold); } /* --- Cards ------------------------------------------------------------------ */ .card { background: var(--color-white); border-radius: var(--radius); padding: var(--space-md); box-shadow: var(--shadow); transition: var(--transition); height: 100%; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); } .card__icon { font-size: 1.8rem; margin-bottom: var(--space-xs); } .card a.card__link { font-family: var(--font-heading); font-weight: 700; color: var(--color-gold-dark); font-size: 0.9rem; } /* --- Stats / chiffres clés -------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); text-align: center; } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stats__number { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--color-gold-dark); } .section--ink .stats__number { color: var(--color-gold); } .stats__label { font-size: 0.85rem; color: var(--color-gray-700); text-transform: uppercase; letter-spacing: 0.05em; } .section--ink .stats__label { color: var(--color-gray-300); } /* --- Process steps ----------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); counter-reset: step; } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .steps__item { position: relative; padding-top: var(--space-lg); } .steps__item::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--color-gold); color: var(--color-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; } /* --- Testimonials -------------------------------------------------------------- */ .testimonial { background: var(--color-white); border-radius: var(--radius); padding: var(--space-md); box-shadow: var(--shadow); height: 100%; } .testimonial__stars { color: var(--color-gold); margin-bottom: var(--space-xs); letter-spacing: 0.1em; } .testimonial__quote { font-style: italic; margin-bottom: var(--space-sm); } .testimonial__author { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; } .testimonial__role { font-size: 0.8rem; color: var(--color-gray-500); } /* --- FAQ accordion -------------------------------------------------------------- */ .faq { max-width: 800px; margin: 0 auto; } .faq__item { background: var(--color-white); border-radius: var(--radius-sm); margin-bottom: var(--space-xs); box-shadow: var(--shadow); overflow: hidden; } .faq__question { width: 100%; text-align: left; background: none; border: none; padding: var(--space-sm) var(--space-md); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); color: var(--color-ink); } .faq__question::after { content: "+"; font-size: 1.4rem; color: var(--color-gold-dark); flex-shrink: 0; transition: transform var(--transition); } .faq__item.is-open .faq__question::after { transform: rotate(45deg); } .faq__answer { max-height: 0; overflow: hidden; transition: max-height var(--transition); padding: 0 var(--space-md); } .faq__item.is-open .faq__answer { max-height: 600px; padding-bottom: var(--space-sm); } /* --- Forms ------------------------------------------------------------------------ */ .form-group { margin-bottom: var(--space-sm); } .form-group label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); background: var(--color-white); font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--color-gold); border-color: var(--color-gold); } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .form-card { background: var(--color-white); border-radius: var(--radius); padding: var(--space-lg); box-shadow: var(--shadow); } .form-note { font-size: 0.8rem; color: var(--color-gray-500); } #form-success { display: none; background: var(--color-success); color: var(--color-white); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); } #form-success.is-visible { display: block; } /* --- Bandeau CTA final --------------------------------------------------------------- */ .cta-band { background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold)); color: var(--color-ink); border-radius: var(--radius); padding: var(--space-lg); text-align: center; } .cta-band h2 { margin-bottom: var(--space-xs); } .cta-band .cta-group { justify-content: center; } .cta-band .btn--secondary { border-color: var(--color-ink); color: var(--color-ink); } .cta-band .btn--secondary:hover { background: var(--color-ink); color: var(--color-white); } /* --- Tags / filtres (réalisations, blog) ------------------------------------------------ */ .tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--space-md); justify-content: center; } .tag { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 999px; background: var(--color-white); border: 1px solid var(--color-gray-300); color: var(--color-gray-700); } .tag.is-active, .tag:hover { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); } /* --- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--color-ink); color: var(--color-gray-300); padding: var(--space-xl) 0 var(--space-md); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); } @media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } .footer__grid h4 { color: var(--color-white); font-size: 1rem; margin-bottom: var(--space-sm); } .footer__grid ul li { margin-bottom: 0.5rem; } .footer__grid a:hover { color: var(--color-gold); } .footer__logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--color-white); margin-bottom: var(--space-sm); display: block; } .footer__logo span { color: var(--color-gold); } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--space-md); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); font-size: 0.85rem; } .footer__bottom a:hover { color: var(--color-gold); } /* --- Skip link / accessibilité --------------------------------------------------------- */ .skip-link { position: absolute; left: -999px; top: auto; } .skip-link:focus { left: var(--space-sm); top: var(--space-sm); background: var(--color-gold); color: var(--color-ink); padding: 0.5rem 1rem; border-radius: var(--radius-sm); z-index: 200; } /* --- Images de réalisations (placeholders) ---------------------------------------------- */ .media-placeholder { background: var(--color-gray-100); border: 1px dashed var(--color-gray-300); border-radius: var(--radius-sm); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--color-gray-500); font-size: 0.85rem; text-align: center; padding: var(--space-sm); margin-bottom: var(--space-sm); }