/* Rom Detailing — feuille de style Palette et typographie : voir DESIGN-PLAN.md à la racine du projet. */ /* ---------- Polices : chargées depuis Google Fonts (voir ) ---------- Chivo (titres) + Karla (texte) — option A retenue, voir DESIGN-PLAN.md. */ /* ---------- Jetons ---------- */ :root { --fond-clair: #F1F2F4; --fond-sombre: #15171B; --encre-sur-clair: #1B1D21; --encre-sur-sombre: #EDEEF0; --accent: #2E63C7; --ligne-sur-clair: rgba(27, 29, 33, .12); --ligne-sur-sombre: rgba(237, 238, 240, .14); --titres: 'Chivo', system-ui, sans-serif; --texte: 'Karla', system-ui, sans-serif; --rayon: 2px; --ease: cubic-bezier(.16, 1, .3, 1); --nav-h: 68px; } /* ---------- Réinitialisation ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } body { margin: 0; font-family: var(--texte); font-size: 16px; line-height: 1.55; color: var(--encre-sur-clair); background: var(--fond-clair); } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, p { margin: 0; } button { font: inherit; } .saut { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 12px 18px; z-index: 200; border-radius: var(--rayon); } .saut:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Typographie ---------- */ h1, h2, .titre { font-family: var(--titres); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; } .mot-accent { font-style: italic; color: var(--accent); } /* ---------- Boutons ---------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: var(--rayon); font-family: var(--texte); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); } .bouton:active { transform: scale(.98); } .bouton--plein { background: var(--accent); color: #fff; border: 1px solid var(--accent); } .bouton--plein:hover { background: #2856AD; } .bouton--ligne { background: transparent; color: var(--encre-sur-clair); border: 1px solid var(--ligne-sur-clair); } .bouton--ligne:hover { border-color: var(--encre-sur-clair); } /* ---------- Navigation ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 48px); background: transparent; transition: background 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease); border-bottom: 1px solid transparent; } .nav.est-poussee { background: rgba(241, 242, 244, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--ligne-sur-clair); } .nav__logo { font-family: var(--titres); font-weight: 600; font-size: 18px; text-decoration: none; color: var(--encre-sur-clair); } .nav__liens { display: flex; gap: clamp(16px, 2.4vw, 32px); } .nav__liens a { font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--encre-sur-clair); opacity: .82; transition: opacity 200ms var(--ease); } .nav__liens a:hover { opacity: 1; } .nav__cta { font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--accent); white-space: nowrap; } @media (max-width: 719.98px) { .nav__liens { display: none; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; background: var(--fond-clair); } .hero__cadre { position: absolute; inset: 0; background: #1B1D21; } .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: contrast(1.15) brightness(.85); } .hero__voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 23, 27, .86) 0%, rgba(21, 23, 27, .42) 34%, rgba(21, 23, 27, 0) 62%); } .hero__contenu { position: relative; width: 100%; padding: 0 clamp(20px, 4vw, 48px) clamp(64px, 11vh, 120px); color: #fff; } .hero__titre { font-size: clamp(30px, 4.6vw, 58px); max-width: 100%; } .hero__titre .ligne { display: block; } @media (min-width: 480px) { .hero__titre .ligne { white-space: nowrap; } } .hero__texte { margin-top: 20px; max-width: 46ch; font-size: clamp(15px, 1.6vw, 17px); color: rgba(255, 255, 255, .88); } .hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; } .hero .bouton--ligne { color: #fff; border-color: rgba(255, 255, 255, .5); } .hero .bouton--ligne:hover { border-color: #fff; } @media (max-width: 719.98px) { .hero__contenu { padding-bottom: 56px; } .hero__actions { flex-direction: column; align-items: stretch; } } /* ---------- Concept ---------- */ .concept { background: var(--fond-sombre); color: var(--encre-sur-sombre); padding: clamp(72px, 15vh, 168px) clamp(20px, 4vw, 48px); } .concept__enveloppe { max-width: 860px; margin: 0 auto; text-align: center; } .concept__phrase { font-family: var(--titres); font-weight: 600; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.28; letter-spacing: -0.01em; } .concept__phrase .ligne { display: block; } .concept__chiffres { margin-top: clamp(48px, 8vh, 88px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(28px, 6vw, 96px); flex-wrap: wrap; } .chiffre { min-width: 96px; } .chiffre__valeur { display: block; font-family: var(--titres); font-weight: 600; font-size: clamp(38px, 6vw, 68px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .chiffre span { display: block; margin-top: 10px; font-size: 14px; color: rgba(237, 238, 240, .58); } /* ---------- Titres de section (partagé) ---------- */ .titre-section { font-size: clamp(28px, 3.6vw, 44px); } .assis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Prestations ---------- */ .prestations { background: var(--fond-clair); color: var(--encre-sur-clair); padding: clamp(72px, 13vh, 140px) clamp(20px, 4vw, 48px); } .prestations__enveloppe { max-width: 1180px; margin: 0 auto; } .mise-en-avant { margin-top: clamp(40px, 6vh, 64px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ligne-sur-clair); border-top: 1px solid var(--ligne-sur-clair); border-bottom: 1px solid var(--ligne-sur-clair); } .presta { background: var(--fond-clair); padding: clamp(28px, 4vw, 48px); } .presta--pleine { grid-column: 1 / -1; } .presta--pleine h3 { font-family: var(--titres); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.01em; } .presta--pleine p { margin-top: 14px; max-width: 56ch; color: rgba(27, 29, 33, .72); } .presta--demi h3 { font-family: var(--titres); font-weight: 600; font-size: clamp(19px, 1.8vw, 22px); } .presta--demi p { margin-top: 12px; max-width: 42ch; color: rgba(27, 29, 33, .72); font-size: 15px; } @media (max-width: 767.98px) { .mise-en-avant { grid-template-columns: 1fr; } } .prestations__soustitre { margin-top: clamp(56px, 9vh, 96px); font-family: var(--titres); font-weight: 600; font-size: 15px; color: rgba(27, 29, 33, .56); } .accordeon { margin-top: 18px; border-top: 1px solid var(--ligne-sur-clair); } .accordeon details { border-bottom: 1px solid var(--ligne-sur-clair); } .accordeon summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; cursor: pointer; font-weight: 500; font-size: 17px; list-style: none; } .accordeon summary::-webkit-details-marker { display: none; } .accordeon__icone { flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--encre-sur-clair); border-bottom: 1.5px solid var(--encre-sur-clair); transform: rotate(45deg); transition: transform 220ms var(--ease); } details[open] .accordeon__icone { transform: rotate(-135deg); } .accordeon p { padding: 0 2px 22px; max-width: 60ch; color: rgba(27, 29, 33, .72); } /* ---------- Avant / après (section pinnée) ---------- */ .avant-apres { background: var(--fond-sombre); color: var(--encre-sur-sombre); padding-top: clamp(72px, 13vh, 140px); } .avant-apres .titre-section { text-align: center; padding: 0 clamp(20px, 4vw, 48px); } .paires { margin-top: clamp(40px, 6vh, 64px); } .paire { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px clamp(20px, 4vw, 48px); } .paire__cadre { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon); } .paire__panneau { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px; } .paire__panneau--avant { background: #1E2126; } .paire__panneau--apres { background: #262A31; clip-path: inset(0 calc(100% - var(--pos, 20) * 1%) 0 0); } .paire__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .paire__etiquette { position: relative; font-family: var(--titres); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--rayon); background: rgba(21, 23, 27, .55); } .paire__note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 13px; color: rgba(237, 238, 240, .4); } .paire__champ { display: block; width: min(1100px, 100%); margin-top: 18px; } .paire__curseur { width: 100%; accent-color: var(--accent); } @media (max-width: 899.98px) { /* Pas de pin GSAP sous 900px (voir motion.js, bureau: min-width:900px) : inutile de réserver 100dvh par paire, ça ne fait que forcer un grand vide noir à faire défiler avant et après chaque comparaison. */ .paire { min-height: 0; padding: 32px clamp(20px, 4vw, 48px); } } /* ---------- Galerie simple (sans comparaison) ---------- */ .galerie-simple { background: var(--fond-sombre); color: var(--encre-sur-sombre); padding: clamp(56px, 10vh, 120px) clamp(20px, 4vw, 48px) clamp(72px, 13vh, 140px); } .galerie-simple .titre-section { text-align: center; margin-bottom: clamp(32px, 5vh, 56px); } .galerie-simple__grille { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } .galerie-simple__figure { margin: 0; } .galerie-simple__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); display: block; } .galerie-simple__figure figcaption { margin-top: 10px; font-size: 13px; color: rgba(237, 238, 240, .58); } @media (max-width: 719.98px) { .galerie-simple__grille { grid-template-columns: 1fr; } } /* ---------- Avis ---------- */ .avis { background: var(--fond-clair); color: var(--encre-sur-clair); padding: clamp(72px, 13vh, 140px) clamp(20px, 4vw, 48px); text-align: center; } .avis__enveloppe { max-width: 760px; margin: 0 auto; } .avis__note { margin-top: 14px; font-size: 14px; color: rgba(27, 29, 33, .6); } .avis__note strong { color: var(--encre-sur-clair); font-variant-numeric: tabular-nums; } .avis__vitrine { position: relative; margin-top: clamp(40px, 7vh, 72px); min-height: clamp(220px, 28vh, 300px); display: flex; align-items: center; justify-content: center; } .avis__citation { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; margin: 0; opacity: 0; transition: opacity 400ms var(--ease); pointer-events: none; } .avis__citation.est-active { opacity: 1; pointer-events: auto; } .avis__citation p { font-family: var(--titres); font-weight: 500; font-size: clamp(19px, 2.6vw, 28px); line-height: 1.4; letter-spacing: -0.005em; } .avis__citation footer { font-family: var(--texte); font-size: 14px; font-weight: 600; color: rgba(27, 29, 33, .6); } .avis__nav { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 22px; } .avis__bouton { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ligne-sur-clair); background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 200ms var(--ease); } .avis__bouton:hover { border-color: var(--encre-sur-clair); } .avis__fleche { width: 8px; height: 8px; border-right: 1.5px solid var(--encre-sur-clair); border-bottom: 1.5px solid var(--encre-sur-clair); } .avis__fleche--gauche { transform: rotate(135deg) translate(1px, 1px); } .avis__fleche--droite { transform: rotate(-45deg); } .avis__compteur { font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(27, 29, 33, .56); min-width: 44px; } .avis__lien { display: inline-block; margin-top: 40px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; } .avis__lien:hover { border-bottom-color: var(--accent); } /* ---------- Devis ---------- */ .devis { background: var(--fond-sombre); color: var(--encre-sur-sombre); padding: clamp(72px, 13vh, 140px) clamp(20px, 4vw, 48px); } .devis__enveloppe { max-width: 480px; margin: 0 auto; text-align: center; } .devis__aide { margin-top: 16px; font-size: 15px; line-height: 1.6; color: rgba(237, 238, 240, .68); } .formulaire { margin-top: 40px; text-align: left; display: flex; flex-direction: column; gap: 22px; } .champ { display: flex; flex-direction: column; gap: 8px; } .champ label { font-size: 14px; font-weight: 600; color: rgba(237, 238, 240, .82); } .champ__facultatif { font-weight: 400; color: rgba(237, 238, 240, .5); } .champ input, .champ select, .champ textarea { font: inherit; font-size: 16px; color: var(--encre-sur-clair); background: #fff; border: 1px solid transparent; border-radius: var(--rayon); padding: 13px 14px; width: 100%; } .champ input::placeholder, .champ textarea::placeholder { color: rgba(27, 29, 33, .42); } .champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .champ textarea { resize: vertical; min-height: 84px; } .champ__erreur { margin: 0; font-size: 13px; color: #FFB4A8; min-height: 1em; } .champ.est-invalide input, .champ.est-invalide select { outline: 2px solid #FFB4A8; outline-offset: 1px; } .bouton--large { width: 100%; height: 54px; margin-top: 6px; } /* ---------- Pied de page ---------- */ .pied { background: var(--fond-clair); color: var(--encre-sur-clair); padding: clamp(56px, 9vh, 96px) clamp(20px, 4vw, 48px) 40px; } .pied__enveloppe { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; } .pied__marque { font-family: var(--titres); font-weight: 600; font-size: 19px; } .pied__adresse { margin-top: 14px; font-style: normal; font-size: 15px; line-height: 1.6; color: rgba(27, 29, 33, .72); } .pied__acces { margin-top: 14px; font-size: 13px; color: rgba(27, 29, 33, .5); max-width: 32ch; } .pied__soustitre { font-family: var(--titres); font-weight: 600; font-size: 15px; } .pied__horaires { margin-top: 14px; border-collapse: collapse; font-size: 14px; } .pied__horaires th, .pied__horaires td { text-align: left; font-weight: 400; padding: 4px 0; color: rgba(27, 29, 33, .72); } .pied__horaires th { padding-right: 22px; color: rgba(27, 29, 33, .5); } .pied__rdv { margin-top: 14px; font-size: 13px; color: rgba(27, 29, 33, .5); } .pied__col:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .pied__col:last-child .bouton { margin-top: 14px; } .pied__lien { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; } .pied__lien:hover { text-decoration: underline; } @media (max-width: 767.98px) { .pied__enveloppe { grid-template-columns: 1fr; gap: 40px; } } /* ---------- Réduction de mouvement ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .avis__citation { transition: none; } }