/* ============================================================================ MINOTERIE GIRARDEAU — FEUILLE DE STYLE GLOBALE CONSOLIDÉE ---------------------------------------------------------------------------- Ce fichier fusionne l'ensemble des sections de la page en un seul CSS, sans duplication de règles. Structure : 1. Tokens (variables CSS) 2. Reset minimal 3. Accessibilité (focus, sr-only, skip-link) 4. Composants partagés (boutons, intro de section) 5. Sections, dans l'ordre de la page ========================================================================== */ /* ============================================================================ 1. TOKENS ========================================================================== */ :root { /* Polices */ --font-serif: "Playfair Display", Georgia, serif; --font-sans: "Poppins", Arial, sans-serif; /* Surfaces claires */ --color-bg: #FBEEE0; --color-bg-alt: #F4E6CE; --color-surface: #FFFFFF; /* Marque */ --color-primary: #D47029; --color-primary-dark: #C1642A; --color-accent: #E0A467; --color-accent-soft: #F5DFC8; /* Texte sur fond clair */ --color-text: #211A14; --color-text-light: #6B6259; --color-title-muted: #8B3E1E; /* Surfaces sombres (chacune a sa propre teinte, pas de collision de nom) */ --color-terracotta: #8B3E1E; /* chiffres clés, comment ça marche */ --color-espresso: #200900; /* footer */ --color-dark-panel: #200900; /* encart "Notre ambition" dans le hero */ /* Texte sur fond sombre */ --color-text-cream: #F6E9D8; --color-text-cream-muted: #E7D2BB; /* Formulaires */ --color-input-bg: #FBEEE0; --color-input-border: #E3CBA8; /* Focus clavier (RGAA 10.7) - surchargé localement sur fonds sombres */ --color-focus: #005FCC; } /* ============================================================================ 2. RESET MINIMAL ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); color: var(--color-text); background-color: var(--color-bg); } img { max-width: 100%; /* display: block; */ } a { color: inherit; } /* ============================================================================ 3. ACCESSIBILITÉ ========================================================================== */ /* Masque visuellement un élément tout en le gardant accessible aux lecteurs d'écran */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus visible (RGAA critère 10.7) sur tous les éléments interactifs */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Sur fond sombre, le bleu par défaut manque de contraste : on surcharge localement le token --color-focus avec un ambre plus visible */ .stats, .how, .expert, .site-footer { --color-focus: #FFD166; } /* Lien d'évitement (skip link) - à placer juste après */ .skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--color-text); padding: 1rem; z-index: 1000; } .skip-link:focus { left: 0; } /* ============================================================================ 4. COMPOSANTS PARTAGÉS ========================================================================== */ /* ---- Boutons (header, hero, cta-team, contact...) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; font-weight: 500; font-size: 1rem; border-radius: 999px; padding: 0.9rem 1.75rem; white-space: nowrap; border: 2px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn--primary { background-color: var(--color-primary); color: #ffffff; } .btn--primary:hover { background-color: var(--color-primary-dark); } .btn--secondary { background-color: transparent; border-color: var(--color-primary); color: var(--color-primary); } .btn--secondary:hover { background-color: rgba(221, 122, 59, 0.08); } .btn--block { width: 100%; } .btn__icon { display: inline-block; transition: transform 0.2s ease; } .btn--primary:hover .btn__icon { transform: translateX(3px); } /* ---- Intro de section : eyebrow + titre + chapô centrés ---- Réutilisé tel quel par "Notre engagement" (sans eyebrow) et "Nos services" (avec eyebrow) : l'eyebrow est un élément optionnel. */ .section-intro { padding: 5rem 2rem; text-align: center; } .section-intro__container { max-width: 760px; margin: 0 auto; } .section-intro__eyebrow { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1rem; } .section-intro__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.2; margin: 0 0 1.25rem; } .home-section-intro__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 3.5vw, 2.75rem); color: #fff; line-height: 1.2; margin: 0 0 1.25rem; } .section-intro__highlight { color: var(--color-primary); font-style: italic; } .section-intro__text { font-size: 1.05rem; line-height: 1.7; color: var(--color-text-light); margin: 0; } .home-section-intro__text { color: #fff; } @media (max-width: 600px) { .section-intro { padding: 3rem 1.25rem; } .section-intro__eyebrow { font-size: 0.75rem; } .section-intro__title { font-size: 1.75rem; } .section-intro__text { font-size: 0.95rem; } } /* ============================================================================ 5. HEADER ========================================================================== */ /* .site-header { background-color: var(--color-bg); border-bottom: 1px solid rgba(0, 0, 0, 0.08); width: 100%; padding: 1rem 2rem; } .site-header__container { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .site-header__logo img { display: block; height: auto; max-height: 60px; width: auto; } .site-header__toggle-input { position: absolute; opacity: 0; width: 44px; height: 44px; top: 0; z-index: 3; cursor: pointer; } .site-header__burger { display: none; cursor: pointer; padding: 0.5rem; width: 44px; height: 44px; position: relative; align-items: center; justify-content: center; } .site-header__burger-icon, .site-header__burger-icon::before, .site-header__burger-icon::after { display: block; background-color: var(--color-text); height: 2px; width: 24px; border-radius: 2px; transition: transform 0.2s ease, background-color 0.2s ease; } .site-header__burger-icon::before, .site-header__burger-icon::after { content: ""; position: absolute; } .site-header__burger-icon::before { transform: translateY(-8px); } .site-header__burger-icon::after { transform: translateY(8px); } .site-header__toggle-input:focus-visible+.site-header__burger { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; } .site-header__toggle-input:checked~.site-header__burger .site-header__burger-icon { background-color: transparent; } .site-header__toggle-input:checked~.site-header__burger .site-header__burger-icon::before { transform: rotate(45deg); } .site-header__toggle-input:checked~.site-header__burger .site-header__burger-icon::after { transform: rotate(-45deg); } .site-header__nav-list { list-style: none; display: flex; align-items: center; gap: 2rem; margin: 0; padding: 0; } .site-header__nav-link { text-decoration: none; color: var(--color-text); font-size: 1rem; font-weight: 500; white-space: nowrap; padding: 0.5rem 0; position: relative; } .site-header__nav-link:hover, .site-header__nav-link:focus-visible { color: var(--color-primary-dark); } .site-header__nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background-color: var(--color-primary); transition: width 0.2s ease; } .site-header__nav-link:hover::after, .site-header__nav-link:focus-visible::after { width: 100%; } @media (max-width: 1024px) { .site-header__nav-list { gap: 1.25rem; } .site-header__nav-link { font-size: 0.9rem; } .site-header .btn { padding: 0.7rem 1.25rem; font-size: 0.9rem; } } @media (max-width: 768px) { .site-header { padding: 1rem 1.25rem; } .site-header__container { flex-wrap: wrap; } .site-header__toggle-input { display: block; order: 2; } .site-header__burger { display: flex; order: 2; } .site-header__logo { order: 1; } .site-header__cta { order: 3; } .site-header__nav { order: 4; flex-basis: 100%; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .site-header__toggle-input:checked~.site-header__nav { max-height: 500px; } .site-header__nav-list { flex-direction: column; align-items: flex-start; gap: 0; padding: 1rem 0; } .site-header__nav-item { width: 100%; } .site-header__nav-link { display: block; width: 100%; padding: 0.85rem 0; } .site-header__cta .btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; } } @media (max-width: 480px) { .site-header__logo img { max-height: 44px; } } */ /* ============================================================================ 6. HERO ========================================================================== */ .hero { padding: 5rem 2rem; } .hero__container { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: start; } .hero__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.25; margin: 0 0 1.75rem; } .hero__highlight { color: var(--color-primary); font-style: italic; } .hero__text p { font-size: 1.05rem; line-height: 1.7; color: var(--color-text-light); margin: 0 0 1.25rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .hero__media { position: relative; } .hero__figure { margin: 0; position: relative; border-radius: 1.25rem; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.35); } .hero__image { width: 100%; height: 100%; object-fit: cover; } .hero__rating { position: absolute; top: 1.5rem; right: -4rem; background-color: var(--color-surface); border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.3); display: grid; grid-template-columns: auto auto; column-gap: 0.4rem; } .hero__stars { color: var(--color-primary); font-size: 1rem; letter-spacing: 0.1em; } .hero__rating-value { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; align-self: center; } .hero__rating-text { grid-column: 1 / -1; font-size: 0.8rem; color: var(--color-text-light); margin-top: 0.35rem; } .hero__ambition { position: relative; margin: -3.5rem 1.5rem 0; background-color: var(--color-dark-panel); color: #ffffff; border-radius: 1rem; padding: 1.5rem 1.75rem; box-shadow: 0 15px 30px -15px rgba(0, 0, 0, 0.45); } .hero__ambition-title { font-family: var(--font-serif); color: var(--color-primary); font-size: 1.4rem; font-weight: 600; margin: 0 0 0.5rem; } .hero__ambition-text { font-size: 0.92rem; line-height: 1.6; margin: 0; color: #f2ece4; } @media (min-width: 1025px) { .hero__ambition { left: -5rem; bottom: 10rem; } } @media (max-width: 1024px) { .hero__container { grid-template-columns: 1fr; } .hero__media { max-width: 560px; margin: 0 auto; } .hero__content { max-width: 640px; margin: 0 auto; text-align: left; } } @media (max-width: 600px) { .hero { padding: 2.5rem 1.25rem; } .hero__container { gap: 2rem; } .hero__title { font-size: 1.6rem; } .hero__actions { flex-direction: column; align-items: stretch; } .hero__actions .btn { justify-content: center; } .hero__rating { position: static; max-width: none; margin-top: 1rem; } .hero__ambition { margin: 1rem 0 0; } } /* ============================================================================ 7. CHIFFRES CLÉS ========================================================================== */ .stats { background-color: var(--color-terracotta); padding: 4.5rem 2rem; } .stats__list { list-style: none; margin: 0; padding: 0; max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; text-align: center; } .stats__item { display: flex; flex-direction: column; align-items: center; } .stats__item:not(:last-child) { border-right: 1px solid rgba(246, 233, 216, 0.25); } .stats__number { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2.25rem, 4vw, 3.25rem); color: var(--color-text-cream); margin: 0 0 0.75rem; line-height: 1; } .stats__number sup { font-size: 0.5em; } .stats__label { font-size: 1rem; line-height: 1.6; color: var(--color-text-cream-muted); margin: 0; max-width: 240px; } @media (max-width: 768px) { .stats__list { grid-template-columns: 1fr; gap: 2.5rem; } .stats__item:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(246, 233, 216, 0.25); padding-bottom: 2rem; } } @media (max-width: 600px) { .stats { padding: 3rem 1.5rem; } } /* ============================================================================ 8. NOS VALEURS ========================================================================== */ .values { padding: 5rem 2rem; max-width: 1320px; margin: 0 auto; } .values__header { max-width: 620px; margin: 0 0 3rem; } .values__eyebrow { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1rem; } .values__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.5rem); line-height: 1.2; margin: 0; } .values__highlight { color: var(--color-primary); font-style: italic; } .values__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .values__item { background-color: var(--color-surface); border-radius: 1rem; padding: 1.75rem; box-shadow: 0 15px 30px -22px rgba(33, 26, 20, 0.4); } .values__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.75rem; background-color: var(--color-accent-soft); color: var(--color-primary); margin-bottom: 1.25rem; } .values__item-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; margin: 0 0 0.6rem; } .values__item-text { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-light); margin: 0; } @media (max-width: 1024px) { .values__list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .values { padding: 3rem 1.25rem; } .values__list { grid-template-columns: 1fr; gap: 1.25rem; } .values__title { font-size: 1.75rem; } } /* ============================================================================ 9. COMMENT ÇA MARCHE ========================================================================== */ .how { position: relative; background-color: var(--color-terracotta); background-image: url("mascotte-filigrane.svg"); background-repeat: no-repeat; background-position: left bottom; background-size: 640px auto; overflow: hidden; } .how__container { max-width: 1320px; margin: 0 auto; padding: 5rem 2rem; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; } .how__intro { position: relative; z-index: 1; } .how__eyebrow { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 1rem; } .how__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.3; color: #ffffff; margin: 0; } .how__highlight { display: block; color: var(--color-accent); font-style: italic; } .how__steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; } .how__step { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding-bottom: 2.5rem; } .how__step::before { display: none; } .how__step:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 3.25rem; bottom: 0.5rem; width: 1px; background-color: rgba(224, 164, 103, 0.4); } .how__number { font-family: var(--font-serif); font-weight: 700; font-size: 2.25rem; color: var(--color-accent); line-height: 1; } .how__step-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: #ffffff; margin: 0 0 0.6rem; } .how__step-text { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-cream-muted); margin: 0; } @media (max-width: 900px) { .how__container { grid-template-columns: 1fr; gap: 2.5rem; } .how { background-size: 480px auto; } .how__step:not(:last-child)::after { left: 1rem; right: 1rem; } } @media (max-width: 560px) { .how__container { padding: 3rem 1.25rem; } .how__step { grid-template-columns: 3.5rem 1fr; gap: 1rem; } .how__step:not(:last-child)::after { left: 1rem; right: 1rem; } .how__number { font-size: 1.75rem; } .how { background-size: 320px auto; background-position: left calc(100% + 40px); } } /* ============================================================================ 10. NOS SERVICES (grille de cartes) ========================================================================== */ .service-cards { list-style: none; margin: 3.5rem 0 0; padding: 0 2rem; max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; text-align: left; } .service-card { display: flex; flex-direction: column; height: 100%; background-color: var(--color-surface); border-radius: 1.25rem; overflow: hidden; box-shadow: 0 20px 40px -25px rgba(33, 26, 20, 0.35); } .service-card .attachment-post-thumbnail { width: 100%; height: 230px; object-fit: cover; } .service-card__body { padding: 1.75rem 1.75rem 2rem; display: flex; flex-direction: column; flex-grow: 1; } .service-card__tag { display: inline-block; align-self: flex-start; background-color: #F6E4D3; color: var(--color-title-muted); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0.9rem; border-radius: 999px; margin: 0 0 1rem; } .service-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.35; margin: 0 0 0.9rem; } .service-card__highlight { color: var(--color-primary); font-style: italic; } .service-card__text { font-size: 0.98rem; line-height: 1.65; color: var(--color-text-light); margin: 0 0 1.5rem; flex-grow: 1; } .service-card__text-more { display: none; } .service-card__text-more.show { display: block; } .service-show-more { margin-bottom: 2rem; text-align: right; color: var(--color-title-muted); background-color: transparent; border: 0 none; cursor: pointer; } .service-card__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-primary); font-weight: 500; font-size: 0.95rem; text-decoration: none; } .service-card__link span { transition: transform 0.2s ease; } .service-card__link:hover span { transform: translateX(3px); } .service-card__link:hover { text-decoration: underline; } @media (max-width: 900px) { .service-cards { grid-template-columns: 1fr; margin-top: 2.5rem; } } @media (max-width: 600px) { .service-cards { padding: 0 1.25rem; gap: 1.5rem; } .service-card__body { padding: 1.5rem; } .service-card__title { font-size: 1.2rem; } } /*HOME*/ .home-service-cards { list-style: none; margin: 3.5rem 0 0; padding: 0 2rem; max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: left; } .home-service-card { display: flex; flex-direction: column; height: 100%; background-color: var(--color-surface); overflow: hidden; box-shadow: 0 20px 40px -25px rgba(33, 26, 20, 0.35); } .home-service-card .attachment-post-thumbnail { width: 100%; height: 230px; object-fit: cover; } .home-service-card__body { padding: 1.75rem 1.75rem 2rem; display: flex; flex-direction: column; flex-grow: 1; } .home-service-card__tag { display: inline-block; align-self: flex-start; background-color: #F6E4D3; color: var(--color-title-muted); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0.9rem; border-radius: 999px; margin: 0 0 1rem; } .home-service-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.35; margin: 0 0 0.9rem; } .home-service-card__highlight { color: #200900; font-style: italic; } .home-service-card__text { font-size: 0.98rem; line-height: 1.65; color: var(--color-text-light); margin: 0 0 1.5rem; flex-grow: 1; } .home-service-card__text-more { display: none; } .home-service-card__text-more.show { display: block; } .home-service-show-more { margin-bottom: 2rem; text-align: right; color: var(--color-title-muted); background-color: transparent; border: 0 none; cursor: pointer; } .home-service-card__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-primary); font-weight: 500; font-size: 0.95rem; text-decoration: none; } .home-service-card__link span { transition: transform 0.2s ease; } .home-service-card__link:hover span { transform: translateX(3px); } .home-service-card__link:hover { text-decoration: underline; } /* ============================================================================ 11. TÉMOIGNAGE EXPERT (photo + citation en overlay) ========================================================================== */ .expert { position: relative; min-height: 32rem; display: flex; align-items: center; overflow: hidden; } .expert__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .expert__overlay { position: relative; z-index: 1; width: 100%; min-height: 32rem; display: flex; align-items: center; background: linear-gradient(90deg, rgba(20, 18, 15, 0.75) 0%, rgba(20, 18, 15, 0.55) 35%, rgba(20, 18, 15, 0.1) 65%, rgba(20, 18, 15, 0) 100%); } .expert__content { max-width: 620px; padding: 3rem 2rem; margin-left: 2rem; } /* Cette section a un fond photo plus clair que les autres surfaces sombres : l'eyebrow y est légèrement plus clair (E2D6C6) pour rester lisible. */ .expert__eyebrow { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #E2D6C6; margin: 0 0 1rem; } .expert__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.25; color: #ffffff; margin: 0 0 1.5rem; } .expert__quote { margin: 0; padding: 0; border: none; } .expert__quote p { font-size: 1.05rem; line-height: 1.7; color: var(--color-text-cream); margin: 0 0 1rem; } .expert__citation { margin: 0; } .expert__citation cite { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: #ffffff; } @media (max-width: 768px) { .expert { min-height: 30rem; } .expert__overlay { min-height: 30rem; background: linear-gradient(180deg, rgba(20, 18, 15, 0.85) 0%, rgba(20, 18, 15, 0.6) 60%, rgba(20, 18, 15, 0.35) 100%); align-items: flex-end; } .expert__content { margin-left: 0; padding: 2rem 1.5rem; } } @media (max-width: 480px) { .expert__title { font-size: 1.5rem; } .expert__quote p { font-size: 0.95rem; } } /* ============================================================================ 12. CTA "UNE ÉQUIPE À VOS CÔTÉS" ========================================================================== */ .cta-team { padding: 3rem 2rem; } .cta-team__card { max-width: 1320px; margin: 0 auto; background-color: var(--color-surface); border-radius: 1.75rem; overflow: hidden; box-shadow: 0 25px 50px -30px rgba(33, 26, 20, 0.35); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .cta-team__media { height: 100%; min-height: 420px; } .cta-team__image { width: 100%; height: 100%; object-fit: cover; } .cta-team__content { padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; } .cta-team__eyebrow { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1rem; } .cta-team__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.25; margin: 0 0 1.25rem; } .cta-team__highlight { display: inline-block; color: var(--color-primary); font-style: italic; } .cta-team__text { font-size: 1.02rem; line-height: 1.7; color: var(--color-text-light); margin: 0 0 2rem; } .cta-team__content .btn { align-self: flex-start; } @media (max-width: 900px) { .cta-team__card { grid-template-columns: 1fr; } .cta-team__media { min-height: 280px; } .cta-team__content { padding: 2.5rem 2rem; } } @media (max-width: 480px) { .cta-team { padding: 2rem 1.25rem; } .cta-team__card { border-radius: 1.25rem; } .cta-team__content { padding: 2rem 1.5rem; } .cta-team__title { font-size: 1.5rem; } .cta-team__content .btn { width: 100%; } } /* ============================================================================ 13. PARTENAIRES ========================================================================== */ .partners { padding: 4rem 2rem; text-align: center; } .partners__title { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-title-muted); margin: 0 0 2.5rem; } .partners__list { list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; } .partners__item { background-color: var(--color-surface); border-radius: 1rem; padding: 1.5rem; display: flex; align-items: center; justify-content: center; min-height: 110px; box-shadow: 0 12px 25px -20px rgba(33, 26, 20, 0.4); } .partners__logo { max-height: 48px; width: auto; } @media (max-width: 1024px) { .partners__list { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .partners { padding: 3rem 1.25rem; } .partners__title { font-size: 0.8rem; margin-bottom: 1.75rem; } .partners__list { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .partners__item { min-height: 90px; padding: 1rem; } .partners__logo { max-height: 36px; } } /* ============================================================================ 14. TÉMOIGNAGES ARTISANS ========================================================================== */ .testimonials { padding: 5rem 2rem; max-width: 1320px; margin: 0 auto; } .testimonials__header { text-align: center; max-width: 620px; margin: 0 auto 3rem; } .testimonials__eyebrow { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1rem; } .testimonials__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.5rem); margin: 0; } .testimonials__highlight { color: var(--color-primary); font-style: italic; } .testimonials__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .testimonial-card { margin: 0; height: 100%; background-color: var(--color-surface); border-radius: 1.25rem; padding: 1.75rem; box-shadow: 0 20px 40px -28px rgba(33, 26, 20, 0.4); display: flex; flex-direction: column; } .testimonial-card__quote-mark { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; color: var(--color-accent-soft); margin-bottom: 0.5rem; } .testimonial-card__quote { margin: 0 0 1.5rem; padding: 0; border: none; flex-grow: 1; } .testimonial-card__quote p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--color-text); margin: 0; } .testimonial-card__author { display: flex; align-items: center; gap: 0.85rem; margin: 0; } .testimonial-card__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .testimonial-card__avatar--initials { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-accent-soft); color: var(--color-primary); font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; } .testimonial-card__author-info { display: flex; flex-direction: column; } .testimonial-card__name { font-style: normal; font-weight: 600; font-size: 0.95rem; color: var(--color-text); } .testimonial-card__place { font-size: 0.85rem; color: var(--color-text-light); } @media (max-width: 900px) { .testimonials__list { grid-template-columns: 1fr; } } @media (max-width: 480px) { .testimonials { padding: 3rem 1.25rem; } .testimonials__title { font-size: 1.75rem; } .testimonial-card { padding: 1.5rem; } } /* ============================================================================ 15. FORMULAIRE DE CONTACT ========================================================================== */ .contact { position: relative; padding: 5rem 2rem; overflow: hidden; background-color: var(--color-bg-alt); } .contact__container { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; } .contact__eyebrow { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1rem; } .contact__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.25; margin: 0 0 1.5rem; } .contact__highlight { color: var(--color-primary-dark); font-style: italic; } .contact__text { font-size: 1rem; line-height: 1.7; color: var(--color-text-light); margin: 0 0 1.25rem; } .contact__details { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; } .contact__detail { display: flex; align-items: center; gap: 1rem; } .contact__detail-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background-color: var(--color-surface); color: var(--color-primary-dark); } .contact__detail-body { display: flex; flex-direction: column; } .contact__detail-label { font-size: 0.85rem; color: var(--color-text-light); } .contact__detail-value { margin-top: 0.35rem; font-size: 1rem; font-weight: 500; color: var(--color-text); text-decoration: none; } a.contact__detail-value:hover { text-decoration: underline; } .contact__form-wrapper { background-color: var(--color-surface); border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 25px 50px -30px rgba(33, 26, 20, 0.4); } .contact-form__fieldset { border: none; margin: 0; padding: 0; } .contact-form__mandatory-note { font-size: 0.85rem; color: var(--color-text-light); margin: 0 0 1.5rem; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .contact-form__field { margin-bottom: 1.5rem; } .contact-form__label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; } .contact-form__label span[aria-hidden="true"] { color: var(--color-primary-dark); } .contact-form__input { width: 100%; font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-text); background-color: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: 0.6rem; padding: 0.85rem 1rem; } .contact-form__input::placeholder { color: #9c8f7d; } .contact-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6259' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .contact-form__textarea { resize: vertical; min-height: 120px; } .contact-form__consent { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0.5rem 0 1.75rem; } .contact-form__checkbox { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--color-primary); } .contact-form__consent-label { font-size: 0.9rem; line-height: 1.55; color: var(--color-text-light); } .contact-form__consent-label a { color: var(--color-primary-dark); } @media (max-width: 1024px) { .contact__container { grid-template-columns: 1fr; } } @media (max-width: 600px) { .contact { padding: 3rem 1.25rem; } .contact__form-wrapper { padding: 1.75rem; border-radius: 1.25rem; } .contact-form__row { grid-template-columns: 1fr; gap: 0; } } /* ============================================================================ 16. FOOTER ========================================================================== */ /* .site-footer { background-color: var(--color-espresso); color: var(--color-text-cream-muted); padding: 4rem 2rem 2rem; --color-text-cream-muted: #C9BBAC; } .site-footer__container { max-width: 1320px; margin: 0 auto; } .site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; } .site-footer__logo img { height: 44px; width: auto; } .site-footer__baseline { font-size: 0.92rem; line-height: 1.65; margin: 1.25rem 0 0; max-width: 280px; } .site-footer__nav-title { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1.25rem; } .site-footer__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; } .site-footer__nav-list a { text-decoration: none; font-size: 0.95rem; } .site-footer__nav-list a:hover, .site-footer__nav-list a:focus-visible { color: var(--color-text-cream); text-decoration: underline; } .site-footer__address { font-style: normal; display: flex; flex-direction: column; gap: 0.9rem; } .site-footer__address-line { text-decoration: none; font-size: 0.95rem; line-height: 1.5; } .site-footer__address-line:hover, .site-footer__address-line:focus-visible { color: var(--color-text-cream); text-decoration: underline; } .site-footer__bottom { border-top: 1px solid rgba(246, 233, 216, 0.12); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .site-footer__copyright { font-size: 0.85rem; margin: 0; } .site-footer__legal-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; } .site-footer__legal-list a { font-size: 0.85rem; text-decoration: none; } .site-footer__legal-list a:hover, .site-footer__legal-list a:focus-visible { color: var(--color-text-cream); text-decoration: underline; } @media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } } @media (max-width: 560px) { .site-footer { padding: 3rem 1.25rem 1.5rem; } .site-footer__top { grid-template-columns: 1fr; gap: 2.25rem; } .site-footer__baseline { max-width: none; } .site-footer__bottom { flex-direction: column; align-items: flex-start; } } */