/* ============================================================ components.css — Auréa Gems Investment Tous les composants visuels du site (BC4 "Dossier relié"). Dépend de tokens.css + base.css. ============================================================ */ /* ------------------------------------------------------------ BODY — réglages typographiques globaux (override base.css) ------------------------------------------------------------ */ body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.7; letter-spacing: 0.005em; /* NB: overflow-x: hidden retiré — crée un scroll container implicite qui casse document.scrollingElement.scrollTo(). Seul porte ce garde-fou (voir base.css). */ } /* ============================================================ RAIL LATÉRAL STICKY SCROLL-SPY ============================================================ */ .rail { position: fixed; left: 32px; top: 50%; transform: translateY(-50%); z-index: 50; color: var(--ink); transition: color var(--duration-mid) var(--ease-out-quart); } .rail.is-atelier { color: var(--ivory); } .rail ol { list-style: none; display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; } .rail__item { display: flex; align-items: center; } .rail__item a { display: flex; align-items: center; gap: 14px; padding: 4px 0; color: inherit; } .rail__item a:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 4px; } .rail.is-atelier .rail__item a:focus-visible { outline-color: var(--champagne); } .rail__dash { display: inline-block; width: 16px; height: 1px; background: currentColor; opacity: 0.4; transition: width var(--duration-mid) var(--ease-out-quart), opacity var(--duration-mid) var(--ease-out-quart); } .rail__num { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.55; transition: opacity var(--duration-mid) var(--ease-out-quart); } .rail__label { font-family: var(--font-serif); font-style: italic; font-size: 13px; opacity: 0.55; transition: opacity var(--duration-mid) var(--ease-out-quart); } .rail__item.is-active .rail__dash { width: 28px; opacity: 1; } .rail__item.is-active .rail__num, .rail__item.is-active .rail__label { opacity: 1; } .rail.is-atelier .rail__item.is-active .rail__num, .rail.is-atelier .rail__item.is-active .rail__label { color: var(--champagne); } @media (max-width: 1024px) { .rail { display: none; } } /* ============================================================ NAVIGATION — bascule entre papier (clair) et atelier (sombre) ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(242, 239, 232, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule-soft); transition: background var(--duration-slow) var(--ease-out-quart), color var(--duration-slow) var(--ease-out-quart), border-color var(--duration-slow) var(--ease-out-quart); } .nav.is-atelier { background: rgba(20, 17, 15, 0.92); color: var(--ivory); border-bottom-color: var(--rule-atelier); } .nav-inner { max-width: 1320px; margin: 0 auto; padding: 18px 56px; display: flex; align-items: center; justify-content: space-between; gap: 48px; } .nav-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; } .nav-brand-mark { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); transition: color var(--duration-slow) var(--ease-out-quart); } .nav-brand-mark em { color: var(--gold-deep); font-weight: 500; font-style: italic; transition: color var(--duration-slow) var(--ease-out-quart); } .nav.is-atelier .nav-brand-mark { color: var(--ivory); } .nav.is-atelier .nav-brand-mark em { color: var(--gold-light); } .nav-brand-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; transition: color var(--duration-slow) var(--ease-out-quart); } .nav.is-atelier .nav-brand-sub { color: #998C72; } .nav__menu { display: flex; gap: 38px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; } .nav__menu a { position: relative; padding: 4px 0; opacity: 0.78; color: var(--ink-soft); transition: opacity var(--duration-fast) var(--ease-out-quart), color var(--duration-slow) var(--ease-out-quart); } .nav.is-atelier .nav__menu a { color: var(--ivory); } .nav__menu a:hover { opacity: 1; } .nav__menu a:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 4px; } .nav__menu a::before { content: attr(data-num); color: var(--gold-deep); margin-right: 8px; font-weight: 500; transition: color var(--duration-slow) var(--ease-out-quart); } .nav.is-atelier .nav__menu a::before { color: var(--gold-light); } .nav__cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 11px 20px; border: 1px solid currentColor; color: var(--ink); transition: all var(--duration-fast) var(--ease-out-quart); } .nav.is-atelier .nav__cta { color: var(--ivory); } .nav__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .nav.is-atelier .nav__cta:hover { background: var(--ivory); color: var(--charcoal); border-color: var(--ivory); } /* ============================================================ SECTIONS — alternance papier / atelier ============================================================ */ .section { padding: 128px 64px; position: relative; } .section-paper { background: var(--paper); color: var(--ink); } .section-atelier { background: var(--charcoal); color: var(--ivory); } .container { max-width: var(--container-max); margin: 0 auto; } /* ============================================================ TAGS PLANCHE & EYEBROW § ============================================================ */ .planche-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); display: inline-block; padding: 6px 14px; border: 1px solid var(--gold-deep); margin-bottom: 36px; opacity: 0.95; } .section-atelier .planche-tag { color: var(--gold-light); border-color: var(--gold-light); } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 28px; display: flex; align-items: center; gap: 14px; } .section-atelier .eyebrow { color: var(--gold-light); } .eyebrow::after { content: ''; width: 56px; height: 1px; background: currentColor; opacity: 0.5; } /* ============================================================ §01 HERO — PAPIER + NOTE MARGINALE ============================================================ */ .hero { padding-top: var(--space-11); padding-bottom: var(--space-10); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 96px; align-items: start; } .hero__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(56px, 7.2vw, 100px); line-height: 1.02; letter-spacing: -0.018em; color: var(--ink); margin-bottom: 44px; max-width: 18ch; } .hero__title em { font-style: italic; font-weight: 400; color: var(--gold-deep); } .hero__title .terre { color: var(--terre-brulee); font-style: italic; font-weight: 500; } .hero__title small { display: block; font-size: 0.34em; font-weight: 300; color: #5C5448; margin-top: 26px; letter-spacing: 0.02em; font-style: italic; } .hero__lede { font-family: var(--font-serif); font-size: 21px; font-style: italic; font-weight: 400; line-height: 1.55; letter-spacing: 0.005em; color: #3A3528; max-width: 58ch; margin-bottom: 36px; } /* Drop cap réservé : hero + section atelier */ .drop-cap { float: left; font-family: var(--font-serif); font-size: 86px; line-height: 0.78; font-weight: 500; color: var(--gold-mid); padding-top: 0.04em; padding-right: 14px; margin-right: 0.08em; margin-bottom: -0.05em; font-style: italic; } .hero__body { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); max-width: 60ch; margin-bottom: 56px; } .hero__body em { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--gold-deep); letter-spacing: 0.005em; } /* Boutons strictement encadrés */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all var(--duration-fast) var(--ease-out-quart); } .btn:hover { background: var(--ink); color: var(--paper); } .btn:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 3px; } .btn--primary { border-color: var(--gold-deep); color: var(--gold-deep); } .btn--primary:hover { background: var(--gold-deep); color: var(--paper); } .section-atelier .btn { border-color: var(--ivory); color: var(--ivory); } .section-atelier .btn:hover { background: var(--ivory); color: var(--charcoal); } .section-atelier .btn--primary { border-color: var(--gold-light); color: var(--gold-light); } .section-atelier .btn--primary:hover { background: var(--gold-light); color: var(--charcoal); } .btn__arrow { display: inline-block; width: 14px; height: 1px; background: currentColor; position: relative; transition: transform var(--duration-fast) var(--ease-out-quart); } .btn__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } .btn:hover .btn__arrow { transform: translateX(4px); } .hero__cta-row { display: flex; gap: 14px; align-items: center; margin-bottom: 64px; flex-wrap: wrap; } /* Signature en bas du hero */ .hero__signature { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-top: 32px; border-top: 1px solid var(--rule-soft); } .sig-block { display: flex; flex-direction: column; gap: 6px; } .sig-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase; } .sig-value { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--ink); letter-spacing: 0.04em; line-height: 1.4; } .sig-value .accent { color: var(--gold-deep); } /* ============================================================ NOTE MARGINALE — colonne droite du hero ============================================================ */ .margin-note { padding-top: 36px; position: sticky; top: 120px; align-self: start; } .margin-note-inner { border-left: 1px solid var(--gold-mid); padding-left: 22px; padding-right: 4px; } .margin-note-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; color: var(--gold-deep); text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; } .margin-note-label::before { content: "§"; font-family: var(--font-serif); font-size: 14px; font-style: italic; color: var(--gold-mid); } .margin-note-quote-mark { font-family: var(--font-serif); font-size: 48px; line-height: 0; color: var(--gold-mid); font-style: italic; display: block; margin-bottom: 22px; height: 22px; } .margin-note-quote { font-family: var(--font-serif); font-size: 22px; font-style: italic; font-weight: 400; line-height: 1.42; color: var(--ink); letter-spacing: 0.003em; margin-bottom: 20px; } .margin-note-attr { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; padding-top: 14px; border-top: 1px dotted var(--rule); } .margin-note-attr em { font-family: var(--font-serif); font-style: italic; text-transform: none; font-size: 13px; color: var(--ink-soft); letter-spacing: 0; margin-left: 4px; } /* ============================================================ SEPARATORS — paper ↔ atelier ============================================================ */ .separator { height: 80px; display: flex; align-items: center; justify-content: center; position: relative; } .separator__ornament { color: var(--gold-light); z-index: 2; } .separator--paper-to-atelier { background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 50%, var(--charcoal) 50%, var(--charcoal) 100%); } .separator--paper-to-atelier .separator__ornament { background: var(--paper); padding: 8px 14px; color: var(--gold-deep); } .separator--atelier-to-paper { background: linear-gradient(to bottom, var(--charcoal) 0%, var(--charcoal) 50%, var(--paper) 50%, var(--paper) 100%); } .separator--atelier-to-paper .separator__ornament { background: var(--charcoal); padding: 8px 14px; color: var(--gold-light); } /* ============================================================ §02 PIERRES — ATELIER (velours noir) ============================================================ */ .pierres { /* padding hérité de .section (128px 64px) */ } .pierres__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 96px; } .pierres__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 5.5vw, 78px); line-height: 1; letter-spacing: -0.015em; color: var(--ivory); margin-bottom: 0; } .pierres__title em { font-style: italic; color: var(--gold-light); font-weight: 400; } .pierres__intro p { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.55; color: var(--ivory-soft); font-weight: 400; letter-spacing: 0.005em; } .pierres__intro p + p { margin-top: 18px; } .pierres__intro em, .pierres__intro strong { font-style: italic; color: var(--gold-light); font-weight: 400; } /* Drop cap — sur la section atelier */ .dropcap::first-letter { font-family: var(--font-serif); font-size: 5em; font-weight: 500; float: left; line-height: 0.82; padding: 6px 14px 0 0; color: var(--gold-light); font-style: italic; } .gems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-bottom: 96px; } .gem { border-top: 1px solid rgba(201, 168, 106, 0.35); padding-top: 36px; position: relative; } .gem::before { content: ''; position: absolute; top: -1px; left: 0; width: 50px; height: 2px; background: var(--gold-light); } .gem__svg-wrap { height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; } .gem__svg { width: 140px; height: 140px; filter: drop-shadow(0 10px 28px rgba(201, 168, 106, 0.16)); } /* === PHOTO PIERRE — cartouche fond ivoire type planche catalogue === */ .gem__photo { height: 240px; margin-bottom: 28px; background: var(--ivory); border: 1px solid rgba(201, 168, 106, 0.35); display: flex; align-items: center; justify-content: center; padding: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(201, 168, 106, 0.20); position: relative; } .gem__photo::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(20, 17, 15, 0.06); pointer-events: none; } .gem__photo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 16px rgba(20, 17, 15, 0.18)); } .gem__photo-caption { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: #998C72; text-align: center; margin-top: -18px; margin-bottom: 28px; } .gem__id { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 12px; } .gem__name { font-family: var(--font-serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; color: var(--ivory); margin-bottom: 6px; letter-spacing: -0.01em; line-height: 1.05; } .gem__name em { font-style: italic; color: var(--gold-light); font-weight: 400; } .gem__tagline { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: #B09A72; margin-bottom: 20px; } .gem__desc { font-size: 14px; line-height: 1.65; color: #A89E88; margin-bottom: 24px; font-weight: 400; } .gem__specs { border-top: 1px dashed rgba(201, 168, 106, 0.22); padding-top: 16px; display: grid; gap: 6px; } .gem__specs div { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 11px; } .gem__specs span:first-child { color: #7A6F5A; text-transform: uppercase; letter-spacing: 0.14em; } .gem__specs span:last-child { color: #D4C9B0; letter-spacing: 0.04em; text-align: right; } /* Couleurs signatures des facettes */ .gem--sapphire .facet-a { fill: #1B3A6B; } .gem--sapphire .facet-b { fill: #2D4F8F; } .gem--sapphire .facet-c { fill: #4A6FA8; } .gem--sapphire .facet-d { fill: #0F2348; } .gem--ruby .facet-a { fill: #6E1820; } .gem--ruby .facet-b { fill: #9B2730; } .gem--ruby .facet-c { fill: #BE3A48; } .gem--ruby .facet-d { fill: #4A0E14; } .gem--emerald .facet-a { fill: #1F4A36; } .gem--emerald .facet-b { fill: #2F6D4D; } .gem--emerald .facet-c { fill: #4A8E6C; } .gem--emerald .facet-d { fill: #11321F; } /* Citation atelier */ .quote-atelier { margin-top: 48px; padding: 48px 64px; border-left: 2px solid var(--gold-light); background: rgba(201, 168, 106, 0.04); } .quote-atelier p { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.45; color: var(--ivory); margin-bottom: 22px; max-width: 60ch; } .quote-atelier p em { color: var(--gold-light); font-style: italic; } .quote-atelier cite { font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #998C72; } /* ============================================================ §03 MÉTAUX — PAPIER (court, deux colonnes) ============================================================ */ .metaux { /* padding hérité de .section (128px 64px) */ } .metaux__head { max-width: 780px; margin-bottom: 72px; } .metaux__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(44px, 5vw, 70px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 28px; } .metaux__title em { font-style: italic; color: var(--gold-deep); font-weight: 400; } .metaux__lede { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.55; color: #3A3528; max-width: 64ch; } .metaux__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .metal { border-top: 1px solid var(--rule); padding-top: 32px; position: relative; } .metal::before { content: ''; position: absolute; top: -1px; left: 0; width: 60px; height: 1px; background: var(--gold-deep); } .metal__svg-wrap { height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } .metal__svg { width: 170px; height: 170px; filter: drop-shadow(0 10px 22px rgba(20, 17, 15, 0.18)); } /* Couleurs facettes — OR */ .metal--gold .facet-a { fill: var(--gold-deep); } .metal--gold .facet-b { fill: var(--gold-mid); } .metal--gold .facet-c { fill: var(--gold-light); } .metal--gold .facet-d { fill: #6B4F12; } /* Couleurs facettes — ARGENT */ .metal--silver .facet-a { fill: var(--silver-deep); } .metal--silver .facet-b { fill: var(--silver-mid); } .metal--silver .facet-c { fill: var(--silver-light); } .metal--silver .facet-d { fill: var(--silver-ink); } .metal__id { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 18px; } .metal__name { font-family: var(--font-serif); font-size: clamp(28px, 2.8vw, 36px); font-weight: 400; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.010em; line-height: 1.05; } .metal__name em { font-style: italic; color: var(--gold-deep); font-weight: 400; } .metal__symbol { font-family: var(--font-mono); font-size: 12px; color: #6B5A3A; margin-bottom: 22px; letter-spacing: 0.1em; } .metal__desc { font-size: 15px; line-height: 1.75; color: #2A241B; margin-bottom: 26px; font-weight: 300; } .metal__notes { border-top: 1px dashed var(--rule); padding-top: 18px; } .metal__notes dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 20px; align-items: baseline; } .metal__notes dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); } .metal__notes dd { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: #2A241B; line-height: 1.45; } /* ============================================================ §04 MÉTHODE — ATELIER (court, 3 étapes) ============================================================ */ .methode { /* padding hérité de .section (128px 64px) */ } .methode__head { max-width: 780px; margin-bottom: 72px; } .methode__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(44px, 5vw, 70px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ivory); margin-bottom: 24px; } .methode__title em { font-style: italic; color: var(--gold-light); font-weight: 400; } .methode__lede { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.55; color: var(--ivory-soft); max-width: 62ch; font-weight: 300; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .step { border-top: 1px solid rgba(201, 168, 106, 0.35); padding-top: 32px; position: relative; } .step::before { content: ''; position: absolute; top: -1px; left: 0; width: 50px; height: 2px; background: var(--gold-light); } .step__id { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 16px; } .step__name { font-family: var(--font-serif); font-size: 30px; font-weight: 400; color: var(--ivory); margin-bottom: 14px; letter-spacing: -0.008em; line-height: 1.1; } .step__name em { font-style: italic; color: var(--gold-light); font-weight: 400; } .step__desc { font-size: 14.5px; line-height: 1.65; color: #A89E88; font-weight: 400; } /* ============================================================ §05 CONTACT — PAPIER (court) ============================================================ */ .contact { /* padding hérité de .section (128px 64px) */ } .contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 96px; align-items: start; } .contact__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 28px; } .contact__title em { font-style: italic; color: var(--gold-deep); font-weight: 400; } .contact__lede { font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.55; color: #3A3528; max-width: 56ch; margin-bottom: 40px; font-weight: 400; } .contact__channels { border-top: 1px solid var(--rule); padding-top: 28px; display: grid; grid-template-columns: 130px 1fr; gap: 16px 24px; align-items: baseline; } .contact__channels dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); } .contact__channels dd { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--ink); line-height: 1.4; } .contact__channels dd a { border-bottom: 1px solid var(--rule-soft); padding-bottom: 1px; transition: border-color var(--duration-fast) var(--ease-out-quart); } .contact__channels dd a:hover { border-color: var(--gold-deep); } .contact__channels dd a:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 3px; } .contact__cta-card { border: 1px solid var(--rule); padding: 48px 32px; position: relative; } .contact__cta-card::before { content: ''; position: absolute; top: -1px; left: 0; width: 60px; height: 2px; background: var(--gold-deep); } .contact__cta-id { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 18px; } .contact__cta-title { font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: var(--ink); margin-bottom: 14px; line-height: 1.15; } .contact__cta-title em { font-style: italic; color: var(--gold-deep); } .contact__cta-desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 28px; } /* ============================================================ §05 PORTAIL PRODUITS — accès direct aux produits distribués ============================================================ */ .portail { padding-block: clamp(5rem, 10vh, 8rem); } .portail__head { max-width: 720px; margin-bottom: var(--space-8); } .portail__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink); margin: var(--space-3) 0 var(--space-5); } .portail__title em { font-style: italic; color: var(--gold-deep); font-weight: 400; } .portail__lede { font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--ink-soft); max-width: 66ch; } /* Grille 3 colonnes */ .portail__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-7); } /* Carte produit */ .portail__card { border: 1px solid var(--rule-soft); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); position: relative; transition: border-color var(--duration-fast) var(--ease-out-quart); } .portail__card::before { content: ''; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--gold-deep); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out-quart); } .portail__card:hover { border-color: var(--rule); } .portail__card:hover::before { opacity: 1; } /* ID et intitulé */ .portail__card-id { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--gold-deep); } .portail__card-name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.15; letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0; } .portail__card-name em { font-style: italic; color: var(--gold-deep); font-weight: 400; } .portail__card-sub { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin: 0; } .portail__card-desc { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--ink-soft); flex-grow: 1; margin: 0; } /* Specs */ .portail__specs { display: grid; gap: var(--space-2); border-top: 1px solid var(--rule-soft); padding-top: var(--space-4); margin-top: var(--space-1); list-style: none; } .portail__specs li { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-2); font-size: var(--text-xs); line-height: 1.55; } .portail__specs li span:first-child { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); } .portail__specs li span:last-child { font-family: var(--font-sans); color: var(--ink-soft); } /* Bouton CTA */ .portail__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding: 12px 18px; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart); } .portail__btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); } .portail__btn svg { flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-out-quart); } .portail__btn:hover svg { transform: translateX(3px); } /* Note de distribution */ .portail__note { border-top: 1px solid var(--rule-soft); padding-top: var(--space-5); } .portail__note-inner { display: flex; gap: var(--space-6); max-width: 760px; } .portail__note-label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-mute); white-space: nowrap; padding-top: 2px; flex-shrink: 0; } .portail__note p { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--ink-mute); margin: 0; } @media (max-width: 960px) { .portail__grid { grid-template-columns: 1fr; max-width: 480px; } } @media (max-width: 640px) { .portail__title { font-size: 42px; } .portail__note-inner { flex-direction: column; gap: var(--space-3); } } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--paper-deep); border-top: 1px solid var(--rule); padding: 32px 56px; } .footer__inner { max-width: var(--container-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .footer__links { display: flex; gap: 28px; } .footer__links a { transition: color var(--duration-fast) var(--ease-out-quart); } .footer__links a:hover { color: var(--gold-deep); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .section { padding: 96px 32px; } .hero { padding-top: 140px; padding-bottom: 96px; } .hero__grid { grid-template-columns: 1fr; gap: 56px; } .margin-note { position: static; padding-top: 0; } .pierres__head { grid-template-columns: 1fr; gap: 36px; } .gems { grid-template-columns: 1fr; gap: 48px; } .metaux__grid { grid-template-columns: 1fr; gap: 48px; } .steps { grid-template-columns: 1fr; gap: 40px; } .contact__grid { grid-template-columns: 1fr; gap: 56px; } .nav-inner { padding: 16px 24px; gap: 24px; } .nav__menu { display: none; } } @media (max-width: 640px) { .section { padding: 80px 24px; } .hero__title { font-size: clamp(36px, 9.5vw, 52px); line-height: 1.06; } .pierres__title, .metaux__title, .methode__title, .contact__title { font-size: 42px; } .quote-atelier { padding: 32px 28px; } .quote-atelier p { font-size: 22px; } .hero__signature { grid-template-columns: 1fr; gap: 22px; } .metal__notes dl { grid-template-columns: 1fr; gap: 4px 0; } .metal__notes dt { margin-top: 12px; } .contact__channels { grid-template-columns: 1fr; gap: 4px 0; } .contact__channels dt { margin-top: 16px; } .footer__inner { flex-direction: column; align-items: flex-start; } .nav__cta { display: none; } /* === FIX DEBORDEMENT MOBILE — specs en colonne stack === */ .gem__specs div { flex-direction: column; gap: 2px; } .gem__specs span:last-child { text-align: left; } /* Note marginale : passe en static (déjà fait <1080px) + reset bordure */ .margin-note { border-left: none; padding-left: 0; } /* Footer : liens en colonne aussi pour éviter overflow */ .footer__links { flex-direction: column; gap: 12px; } } /* ============================================================ SCROLL OFFSET — compenser la nav fixe sur les ancres natives scroll-margin-top agit même si le JS smooth scroll échoue. ============================================================ */ section.section { scroll-margin-top: 80px; } /* ============================================================ RAIL OFFSET — laisser de l'air apres le rail lateral sticky Sapplique des que le rail est visible (>= 1024px) ============================================================ */ @media (min-width: 1024px) { .section { padding-left: calc(var(--rail-width) + 64px); } } /* ============================================================ CALENDRIER HUBSPOT MEETINGS ============================================================ */ .contact__meetings { margin-top: 88px; padding-top: 56px; border-top: 1px solid var(--rule); } .contact__meetings-head { margin-bottom: 36px; max-width: 640px; } .contact__meetings-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 3vw, 38px); color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 14px; margin-top: 14px; } .contact__meetings-title em { font-style: italic; color: var(--gold-deep); font-weight: 500; } .contact__meetings-lede { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--ink-soft); line-height: 1.55; } .contact__meetings .meetings-iframe-container { min-height: 520px; max-height: 560px; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 0; overflow: hidden; position: relative; } /* Masque la bande "Powered by HubSpot" en bas de l'iframe. Hauteur ~40px (calibrée sur le widget HubSpot Meetings standard). */ .contact__meetings .meetings-iframe-container::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: var(--paper-deep); border-top: 1px solid var(--rule); pointer-events: none; z-index: 2; } @media (max-width: 640px) { .contact__meetings { margin-top: 56px; padding-top: 36px; } .contact__meetings .meetings-iframe-container { min-height: 580px; max-height: 620px; } } /* ============================================================ HAMBURGER + DRAWER MOBILE — navigation <640px ============================================================ */ .nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; padding: 4px; color: inherit; flex-shrink: 0; } .nav.is-atelier .nav__hamburger { color: var(--ivory); } .nav__hamburger span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform var(--duration-fast) var(--ease-out-quart), opacity var(--duration-fast) var(--ease-out-quart); } .nav__hamburger.is-open span:first-child { transform: translateY(6px) rotate(45deg); } .nav__hamburger.is-open span:last-child { transform: translateY(-6px) rotate(-45deg); } .nav__drawer { position: fixed; inset: 0; background: var(--paper); z-index: 90; display: flex; flex-direction: column; padding: 96px 32px 48px; transform: translateX(100%); transition: transform var(--duration-mid) var(--ease-out-quart); overflow-y: auto; } .nav__drawer.is-open { transform: translateX(0); } .nav__drawer-links { display: flex; flex-direction: column; gap: 28px; flex: 1; padding-top: 16px; } .nav__drawer-link { font-family: var(--font-serif); font-size: 36px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 16px; } .nav__drawer-link:hover { color: var(--gold-deep); } .nav__drawer-num { font-family: var(--font-mono); font-size: 11px; color: var(--gold-deep); letter-spacing: 0.18em; flex-shrink: 0; } .nav__drawer-cta { display: block; text-align: center; border: 1px solid var(--gold-deep); color: var(--gold-deep); padding: 16px 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 48px; transition: all var(--duration-fast) var(--ease-out-quart); } .nav__drawer-cta:hover { background: var(--gold-deep); color: var(--paper); } @media (max-width: 640px) { .nav__hamburger { display: flex; } }