/* * ============================================================ * STYLE.CSS — EMEÏS CONSEIL * ============================================================ * * RÔLE : CSS custom uniquement — tout ce qui dépasse Tailwind. * Complémente (ne remplace pas) les utilitaires Tailwind du HTML. * * DIRECTION ESTHÉTIQUE — /ui-ux-pro-max : * Styles retenus : Trust & Authority · Exaggerated Minimalism (tempéré) · Editorial premium * Essence visuelle : l'écrin noir et or d'une banque privée indépendante, * clair sur qui/où/quoi dès la première seconde. * Signature unique : le cadre filaire du logo EMEÏS devient le motif * graphique du site (photos à filet or décalé, * surtitres à trait or, lettrage capital espacé). * * CHARTE CLIENTE (autorité — mail Bianka Koch) : * Noir · Blanc · Bleu #384266 · Or #C3B274 · Gris #D9D9D9 * (enrichissements : night #101218, navy-deep #232A40, surfaces chaudes) * * TYPOGRAPHIES : * --font-title : Prata (serif Didone — TITRES en capitales, fournie par le client) * --font-display : Jost (surtitres, intertitres, boutons, nav — équivalent Futura) * --font-body : Jost (textes courants + accents — même typo que les surtitres) * * ⚠️ Les tokens vivent dans @theme + :root inline dans le . * Ici : var(--color-night), var(--font-display), etc. * ⚠️ @apply NON disponible (Play CDN) — CSS classique uniquement. * ============================================================ */ /* @font-face — Prata (serif Didone) fournie par le client · titres */ @font-face { font-family: 'Prata'; src: url('../fonts/Prata-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================ 1. RESET & BASE CUSTOM ============================================================ */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--color-surface); color: var(--color-ink); -webkit-font-smoothing: antialiased; } ::selection { background: var(--color-gold); color: var(--color-night); } :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; } /* Lien d'évitement clavier */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-navy); color: #fff; padding: 12px 24px; z-index: 9999; font-family: var(--font-display); font-weight: 500; text-decoration: none; } .skip-link:focus { top: 0; } main p { max-width: 70ch; } .card p, .hero p, .cta-band p, .domaine-card p { max-width: none; } /* ============================================================ 2. TYPOGRAPHIE AVANCÉE ============================================================ */ /* Surtitre signature : trait or + petites capitales espacées */ .surtitre { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold-deep); } .surtitre::before { content: ""; width: 36px; height: 1px; background: var(--color-gold); flex: none; } /* Surtitre centré : tiret symétrique pour un vrai centrage sous le titre */ .surtitre.justify-center::after { content: ""; width: 36px; height: 1px; background: var(--color-gold); flex: none; } .section-dark .surtitre { color: var(--color-gold); } /* Titres de section : capitales géométriques fidèles au logo */ .titre-section { font-family: var(--font-title); font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--color-ink); } .section-dark .titre-section { color: var(--color-paper); } /* Grand titre hero — affiché plus grand que le H1 SEO (volontaire) */ /* Hero — composition typographique éditoriale (Prata) */ .hero-kicker { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold); } .hero-kicker__rule { width: 46px; height: 1px; background: var(--color-gold); flex: none; } /* HERO « Studio » — mots monumentaux en surimpression sur la photo plein cadre. L'EXPERTISE (attaque, à gauche) · CONSTRUIT (point d'orgue, à droite) */ .hero-lead { display: block; font-family: var(--font-title); text-transform: uppercase; font-size: clamp(2.9rem, 11.5vw, 9.4rem); letter-spacing: 0.004em; line-height: 0.9; color: var(--color-paper); } /* Ligne de liaison — fine, espacée, sous le mot d'attaque */ .hero-mid { display: block; font-family: var(--font-display); font-weight: 300; text-transform: uppercase; font-size: clamp(0.78rem, 1.2vw, 1.05rem); letter-spacing: 0.3em; line-height: 1.5; color: #E7E2D6; } /* Mot monumental — aligné à droite, décalé en diagonale */ .hero-mono { display: block; font-family: var(--font-title); text-transform: uppercase; font-size: clamp(2.7rem, 10.6vw, 8.8rem); letter-spacing: 0.006em; line-height: 0.9; color: var(--color-paper); } .reveal-line.l-1 { padding-bottom: 0.06em; } .reveal-line.l-2 { margin-top: 1.1em; text-align: center; } .reveal-line.l-3 { margin-top: 0.6em; text-align: right; padding-bottom: 0.12em; } /* H1 SEO volontairement discret (mot-clé + Paris pour Google) */ .hero-h1 { font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-gold); } /* Citation éditoriale — pull-quote de la proposition de valeur */ .value-quote { margin: 0 auto; max-width: 52rem; text-align: center; position: relative; } .value-quote__mark { display: block; font-family: var(--font-title); font-size: clamp(3.6rem, 7vw, 6.2rem); line-height: 0.5; color: var(--color-gold); margin-bottom: 0.22em; } .value-quote__text { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.3; letter-spacing: 0.01em; color: var(--color-ink); } .value-quote__accent { color: var(--color-gold-deep); } /* Bande citation — deux phrases ancrées en bas (gauche / droite) */ .quote-band { display: flex; min-height: 64vh; padding: clamp(56px, 9vh, 110px) 0 clamp(48px, 7vh, 80px); } /* Dégradé profond du haut-gauche lumineux vers le bas-droite profond. Sélecteur composé pour surcharger le fond uni de .section-clair. */ .quote-band.section-clair { background: radial-gradient(105% 105% at 0% 0%, rgba(195, 178, 116, 0.16) 0%, rgba(195, 178, 116, 0) 48%), linear-gradient(135deg, #EEE7D2 0%, #F3EFE4 28%, #F9F8F2 62%, #FFFFFF 100%); } .quote-band__inner { width: 100%; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; padding: 0 clamp(18px, 3vw, 40px); } /* Diagonale : phrase de gauche en haut, phrase de droite en bas */ .quote-band__phrase { align-self: flex-start; } .quote-band__phrase--right { align-self: flex-end; } .quote-band__phrase { margin: 0; max-width: none; white-space: nowrap; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.3rem, 3vw, 2.8rem); line-height: 1.2; letter-spacing: 0.01em; color: var(--color-ink); } .quote-band__phrase--right { text-align: right; color: var(--color-gold-deep); } @media (max-width: 639px) { .quote-band { min-height: 44vh; } .quote-band__inner { flex-direction: column; align-items: stretch; gap: 14px; } .quote-band__phrase { white-space: normal; } } .value-quote::after { content: ""; display: block; width: 64px; height: 1px; background: var(--color-gold); margin: 1.9rem auto 0; } /* ============================================================ 3. ATMOSPHÈRE DE FOND ============================================================ */ /* Grain très léger sur les sections sombres (jamais de fond plat) */ .section-dark { background-color: var(--color-night); background-image: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(56, 66, 102, 0.35), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); color: var(--color-paper-soft); } /* Sections claires : blanc cassé chaud, jamais #fff plat */ .section-clair { background: var(--color-surface); } .section-clair-alt { background: var(--color-surface-alt); } /* Bande bleu charte */ .section-navy { background-color: var(--color-navy); background-image: radial-gradient(ellipse 70% 90% at 85% 10%, rgba(195, 178, 116, 0.12), transparent 55%); color: var(--color-paper); } /* Filet horizontal gris charte */ .filet { border-top: 1px solid var(--color-grisline); } /* ============================================================ 4. NAVIGATION (structure imposée H2.4 + style projet) ============================================================ */ /* Fallback responsive — empêche le double menu. !important nécessaire : .btn-primary (display:inline-flex) est déclaré plus bas dans la cascade et écraserait le masquage mobile du CTA nav. */ .nav-links-desktop { display: none !important; } .nav-cta-desktop { display: none !important; } .burger { display: inline-flex; } @media (min-width: 1024px) { .nav-links-desktop { display: flex !important; } .nav-cta-desktop { display: inline-flex !important; } .burger { display: none; } } .site-header { background: transparent; border-bottom: 1px solid transparent; transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease; } .site-header.is-scrolled { background: rgba(16, 18, 24, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(217, 217, 217, 0.12); } .nav-logo__img { height: 46px; width: auto; object-fit: contain; transition: opacity 0.2s ease; } .nav-logo__img:hover { opacity: 0.85; } @media (max-width: 768px) { .nav-logo__img { height: 38px; } } /* Onglets : capitales Jost espacées — différenciation par la typo, hover = passage à l'or, AUCUNE décoration uniforme (règle H2.5) */ .nav-links-desktop { list-style: none; padding: 0; margin: 0; } .nav-link { font-family: var(--font-display); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--color-paper-soft); transition: color 0.2s ease; } .nav-link:hover { color: var(--color-gold); } /* Indicateur d'actif : couleur or + graisse, sur l'onglet courant uniquement */ .nav-link.active { color: var(--color-gold); font-weight: 500; } /* Burger */ .burger { flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; align-items: center; background: none; border: none; cursor: pointer; } .burger-lines { display: flex; flex-direction: column; gap: 5px; } .burger-lines span { display: block; width: 24px; height: 1.5px; background: var(--color-paper); transition: transform 0.3s ease, opacity 0.3s ease; } .burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger-lines span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Menu mobile */ .mobile-menu { position: fixed; inset: 0; top: 70px; background: var(--color-night); z-index: 40; padding: 48px 28px; overflow-y: auto; } .mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 26px; } .mobile-menu a { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--color-paper); transition: color 0.2s ease; } .mobile-menu a:hover { color: var(--color-gold); } /* ============================================================ 5. HIÉRARCHIE DES BOUTONS — 3 NIVEAUX (H3.5) ============================================================ */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.95rem 2.1rem; border-radius: var(--radius-btn); font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer; transition: all 0.2s ease; } /* NIVEAU 1 — conversion : fond or plein, texte nuit */ .btn-primary { background: var(--color-gold); color: var(--color-night); border: 1px solid var(--color-gold); } .btn-primary:hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); transform: translateY(-1px); } /* NIVEAU 2 — action secondaire : bordure visible AU REPOS, même silhouette exacte que le primaire */ .btn-secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); } .btn-secondary:hover { background: var(--color-ink); color: var(--color-surface); transform: translateY(-1px); } /* Variante contextuelle sur fond sombre / photo : bordure claire + renforcement de lisibilité (blur) — même empreinte géométrique */ .section-dark .btn-secondary, .section-navy .btn-secondary { color: var(--color-paper); border-color: rgba(245, 244, 240, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(16, 18, 24, 0.25); } .section-dark .btn-secondary:hover, .section-navy .btn-secondary:hover { background: var(--color-paper); color: var(--color-night); border-color: var(--color-paper); } /* ============================================================ BOUTON « CADRE » — empreinte du logo EMEÏS Cadre fin à angles vifs, trait supérieur interrompu par les trois points du tréma. Capitales Jost très espacées. ============================================================ */ .btn-cadre { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.6rem; border: 1px solid currentColor; border-top: 0; border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease, letter-spacing 0.5s ease, border-color 0.5s ease; } /* Trait supérieur avec brèche centrale (comme le cadre du logo) */ .btn-cadre::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, currentColor 0, currentColor calc(50% - 10px), transparent calc(50% - 8px), transparent calc(50% + 8px), currentColor calc(50% + 8px), currentColor 100%); } /* Deux petits carrés posés dans la brèche du trait supérieur */ .btn-cadre::after { content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 9px; height: 3px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 3px 3px; background-repeat: no-repeat; background-position: left center, right center; } /* Survol — voile très léger, le cadre et les carrés restent visibles, l'interlettrage s'ouvre légèrement (pas de bloc plein) */ .btn-cadre:hover { background: rgba(21, 22, 26, 0.06); letter-spacing: 0.3em; } /* Variante or — accent doré */ .btn-cadre--or { color: var(--color-gold-deep); } .btn-cadre--or:hover { background: rgba(195, 178, 116, 0.14); color: var(--color-gold-deep); } /* Sur fond sombre / photo : trait & texte clairs */ .section-dark .btn-cadre, .section-navy .btn-cadre, .hero .btn-cadre { color: var(--color-paper); } .section-dark .btn-cadre:hover, .section-navy .btn-cadre:hover, .hero .btn-cadre:hover { background: rgba(245, 244, 240, 0.10); color: var(--color-paper); } .section-dark .btn-cadre--or, .section-navy .btn-cadre--or, .hero .btn-cadre--or { color: var(--color-gold); } .section-dark .btn-cadre--or:hover, .section-navy .btn-cadre--or:hover, .hero .btn-cadre--or:hover { background: rgba(195, 178, 116, 0.16); color: var(--color-gold); } /* CTA de la nav — toujours sur fond sombre (photo ou barre foncée) */ .site-header .btn-cadre--or { color: var(--color-gold); } .site-header .btn-cadre--or:hover { background: rgba(195, 178, 116, 0.16); color: var(--color-gold); } /* NIVEAU 3 — lien textuel interne */ .link-inline { color: var(--color-gold-deep); text-decoration: underline; text-underline-offset: 4px; transition: all 0.2s ease; } .link-inline:hover { color: var(--color-navy); } .section-dark .link-inline { color: var(--color-gold); } .section-dark .link-inline:hover { color: var(--color-paper); } /* ============================================================ 6. COMPOSANTS SIGNATURE ============================================================ */ /* ============================================================ CADRE PHOTO « EMEÏS » — empreinte du logo appliquée à l'image Filet fin + passe-partout (marge dorée intérieure), trait du haut interrompu par deux petits carrés. Réutilisable sur les blocs texte + photo classiques. ============================================================ */ .cadre-photo { position: relative; display: block; padding: clamp(12px, 1.5vw, 18px); border: 1px solid var(--color-gold); border-bottom-color: transparent; } /* Trait inférieur avec une ouverture vide au centre (haut refermé) */ .cadre-photo::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, var(--color-gold) 0, var(--color-gold) calc(50% - 22px), transparent calc(50% - 22px), transparent calc(50% + 22px), var(--color-gold) calc(50% + 22px), var(--color-gold) 100%); } .cadre-photo img, .cadre-photo picture { display: block; width: 100%; } /* Format carré respecté (image source 1:1, sans recadrage) */ .cadre-photo img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } /* Phrase de conclusion dorée, intégrée DANS le cadre, sous l'image */ .cadre-photo__quote { margin: clamp(14px, 1.6vw, 22px) 0 clamp(2px, 0.6vw, 8px); max-width: none; text-align: center; font-family: var(--font-title); color: var(--color-gold-deep); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.5; letter-spacing: 0.004em; } /* Compat. ascendante : ancien nom de classe */ .cadre-or { display: block; } /* ============================================================ HERO — arrivée éditoriale parisienne (fond navy → noir) ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero-text { max-width: none; } /* Image d'arrivée — façade parisienne en plein cadre */ .hero-visual { position: absolute; inset: 0; width: 100%; z-index: 0; overflow: hidden; pointer-events: none; } .hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; filter: grayscale(0.24) contrast(1.03) brightness(0.92); animation: heroVisual 1.6s ease 0.25s forwards, heroKen 18s ease-out 0.25s forwards; } /* Voile dégradé — lisibilité des mots monumentaux sur la photo */ .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 18, 24, 0.5) 0%, rgba(16, 18, 24, 0.22) 38%, rgba(16, 18, 24, 0.82) 100%); } /* Légende verticale éditoriale */ .hero-vcaption { position: absolute; left: 24px; bottom: 40px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--color-gold); opacity: 0; z-index: 3; animation: heroRise 0.9s ease 1.4s forwards; } /* Révélation ligne par ligne du titre */ .reveal-line { display: block; overflow: hidden; padding-bottom: 0.08em; } .reveal-line > span { display: inline-block; transform: translateY(118%); will-change: transform; animation: heroLineUp 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .reveal-line.l-1 > span { animation-delay: 0.34s; } .reveal-line.l-2 > span { animation-delay: 0.48s; } .reveal-line.l-3 > span { animation-delay: 0.62s; } /* Apparition douce (kicker SEO + piliers) */ .hero-rise { opacity: 0; transform: translateY(16px); animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-rise.d-0 { animation-delay: 0.12s; } .hero-rise.d-1 { animation-delay: 1.10s; } .hero-rise.d-2 { animation-delay: 1.23s; } .hero-rise.d-3 { animation-delay: 1.36s; } /* Piliers du hero — ancrés en bas à droite, sur le voile de la photo */ .hero-points { position: absolute; right: 64px; bottom: 38px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 0; align-items: center; font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-paper-soft); } .hero-points li { display: inline-flex; align-items: center; } .hero-points li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--color-gold); margin: 0 20px; } /* Indice de scroll */ .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); background: none; border: none; cursor: pointer; color: var(--color-gold); opacity: 0; z-index: 3; animation: heroRise 0.9s ease 1.6s forwards; } .scroll-cue:hover { opacity: 1; } .scroll-cue svg { animation: cue-bounce 2.2s ease-in-out infinite; } @keyframes heroLineUp { to { transform: translateY(0); } } @keyframes heroRise { to { opacity: 1; transform: translateY(0); } } @keyframes heroVisual { to { opacity: 1; } } @keyframes heroKen { from { transform: scale(1.12); } to { transform: scale(1); } } @keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* Hero responsive : photo plein cadre conservée en fond du texte */ @media (max-width: 1023px) { .hero { align-items: center; min-height: 100vh; } .hero-text { max-width: none; } .reveal-line.l-2 { margin-top: 0.8em; } .reveal-line.l-3 { text-align: left; margin-top: 0.4em; } .hero-points { right: 24px; bottom: 26px; left: 24px; font-size: 0.72rem; letter-spacing: 0.2em; } .hero-vcaption { display: none; } .scroll-cue { display: none; } } /* ============================================================ NOS EXPERTISES — split immersif plein écran ============================================================ */ .exp-split { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } /* Bande titre — esprit hero, sur le fond profond, avant le split */ .exp-intro { padding: clamp(96px, 17vh, 190px) 0 clamp(72px, 12vh, 140px); text-align: left; } /* Bande titre en pleine largeur — bord à bord, alignée sur le hero/nav */ .exp-intro > div { max-width: none; margin-left: 0; margin-right: 0; padding-left: clamp(24px, 5vw, 64px); padding-right: clamp(24px, 5vw, 64px); } .exp-intro__title { margin-top: 22px; } /* Ligne 1 — capitales, grand */ .exp-intro__lead { display: block; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 6.4vw, 5.8rem); letter-spacing: 0.02em; line-height: 1.02; color: var(--color-paper); } /* Mot mis en avant — typo des titres (Prata) + légère coupe du haut */ .word-crop { display: inline-block; font-family: var(--font-title); font-style: normal; overflow: hidden; line-height: 0.84; padding-bottom: 0.1em; vertical-align: bottom; } /* Ligne 2 — italique serif doré, plus petit (autre traitement) */ .exp-intro__sub { display: block; font-family: var(--font-body); font-style: normal; font-size: clamp(1.3rem, 2.7vw, 2.5rem); letter-spacing: 0.01em; color: var(--color-gold); margin-top: 0.45em; } /* ---- Animations d'entrée au scroll (section expertises) ---- */ /* Révélation par masque (ligne de titre) */ .reveal-mask { overflow: hidden; padding-bottom: 0.06em; } .reveal-mask > span { display: inline-block; transform: translateY(116%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .reveal-mask.is-visible > span { transform: translateY(0); } .reveal-mask.av-1 > span { transition-delay: 0.14s; } .reveal-mask.av-2 > span { transition-delay: 0.32s; } /* Grand titre de section — esprit hero (Prata monumental) mais calibré pour s'insérer dans le déroulé de la page. Deux lignes de même échelle, accent doré sur la seconde. Unifie les trois titres : « Deux expertises / une vision globale », « Nos domaines / d'accompagnement », « Notre / Équipe ». */ .gtitle__l1, .gtitle__l2 { display: block; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 7rem); letter-spacing: 0.008em; line-height: 1; color: var(--color-paper); } /* Deuxième ligne serrée sous la première (empilement éditorial) */ .gtitle__l2 { margin-top: -0.08em; } /* Délais d'apparition (fade-up) */ .animate-on-scroll.av-1 { transition-delay: 0.12s; } .animate-on-scroll.av-2 { transition-delay: 0.26s; } .animate-on-scroll.av-3 { transition-delay: 0.40s; } /* Révélation des images de panneau (clip + ken-burns) */ .exp-panel__img.animate-on-scroll { opacity: 1; transform: none; clip-path: inset(16% 0 0 0); transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .exp-panel__img.animate-on-scroll img { transform: scale(1.14); transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1); } .exp-panel__img.animate-on-scroll.is-visible { clip-path: inset(0 0 0 0); } .exp-panel__img.animate-on-scroll.is-visible img { transform: scale(1); } /* Filet d'or vertical séparateur */ .exp-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 3; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(195, 178, 116, 0.5) 35%, rgba(195, 178, 116, 0.5) 65%, transparent); } /* Panneau */ .exp-panel { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(32px, 4.5vw, 66px); overflow: hidden; isolation: isolate; } .exp-panel__img { position: absolute; inset: 0; z-index: -2; } .exp-panel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .exp-panel:hover .exp-panel__img img { transform: scale(1.05); } .exp-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 18, 24, 0.74) 0%, rgba(16, 18, 24, 0.30) 26%, rgba(16, 18, 24, 0.52) 62%, rgba(16, 18, 24, 0.94) 100%); transition: opacity 0.5s ease; opacity: 1; } .exp-panel:hover::after { opacity: 0.86; } .exp-panel__content { position: relative; z-index: 1; max-width: 33rem; } /* Titre d'expertise — « Ingénierie » (normal) + spécialité (capitales) */ .exp-panel__title { margin: 0; } .exp-panel__title-lead { display: block; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.6rem); letter-spacing: 0.01em; color: var(--color-gold); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); } .exp-panel__title-main { display: block; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 4.2vw, 4.1rem); letter-spacing: 0.04em; line-height: 1.05; color: var(--color-paper); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); margin-top: 6px; } .exp-panel__desc { margin-top: 14px; color: var(--color-paper); opacity: 0.88; line-height: 1.6; font-size: 0.96rem; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); } /* Liste de prestations — lignes à filets */ .exp-list { list-style: none; margin: 22px 0 0; padding: 0; } .exp-list.is-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; } .exp-list li { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-top: 1px solid rgba(245, 244, 240, 0.18); font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.03em; color: rgba(245, 244, 240, 0.86); transition: color 0.3s ease; } .exp-panel:hover .exp-list li { color: var(--color-paper); } .exp-list li::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--color-gold); transform: rotate(45deg); } /* Lien Découvrir — flèche filaire animée */ .exp-link { margin-top: 30px; align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-paper); text-decoration: none; transition: color 0.3s ease; } .exp-link__arrow { position: relative; display: inline-block; width: 34px; height: 1px; background: var(--color-gold); transition: width 0.3s ease; } .exp-link__arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: 1px solid var(--color-gold); border-right: 1px solid var(--color-gold); transform: translateY(-50%) rotate(45deg); } .exp-link:hover { color: var(--color-gold); } .exp-link:hover .exp-link__arrow { width: 50px; } /* Description + liste révélées au survol (masquées à l'arrivée), animation douce façon titres : glissement + fondu, easing expo. Uniquement sur appareils avec survol — toujours visibles au tactile. */ @media (hover: hover) and (min-width: 1024px) { .exp-panel .exp-panel__desc, .exp-panel .exp-list { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transform: translateY(16px); pointer-events: none; transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .exp-panel:hover .exp-panel__desc, .exp-panel:focus-within .exp-panel__desc { max-height: 9em; margin-top: 14px; opacity: 1; transform: translateY(0); pointer-events: auto; } .exp-panel:hover .exp-list, .exp-panel:focus-within .exp-list { max-height: 28em; margin-top: 22px; opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0.08s; } /* Légère cascade des prestations */ .exp-panel .exp-list li { opacity: 0; transform: translateY(10px); transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .exp-panel:hover .exp-list li, .exp-panel:focus-within .exp-list li { opacity: 1; transform: translateY(0); } .exp-panel:hover .exp-list li:nth-child(2), .exp-panel:focus-within .exp-list li:nth-child(2) { transition-delay: 0.12s; } .exp-panel:hover .exp-list li:nth-child(3), .exp-panel:focus-within .exp-list li:nth-child(3) { transition-delay: 0.18s; } .exp-panel:hover .exp-list li:nth-child(4), .exp-panel:focus-within .exp-list li:nth-child(4) { transition-delay: 0.24s; } .exp-panel:hover .exp-list li:nth-child(5), .exp-panel:focus-within .exp-list li:nth-child(5) { transition-delay: 0.30s; } .exp-panel:hover .exp-list li:nth-child(6), .exp-panel:focus-within .exp-list li:nth-child(6) { transition-delay: 0.36s; } .exp-panel:hover .exp-list li:nth-child(7), .exp-panel:focus-within .exp-list li:nth-child(7) { transition-delay: 0.42s; } .exp-panel:hover .exp-list li:nth-child(8), .exp-panel:focus-within .exp-list li:nth-child(8) { transition-delay: 0.48s; } } @media (max-width: 1023px) { .exp-split { grid-template-columns: 1fr; } .exp-split::before { display: none; } .exp-panel { min-height: 86vh; } } @media (max-width: 479px) { .exp-list.is-grid { grid-template-columns: 1fr; } } /* Domaines — mosaïque immersive plein écran */ .dom-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(195, 178, 116, 0.18); } @media (min-width: 640px) { .dom-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .dom-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50vh; min-height: 100vh; } .dom-grid .dom-card { min-height: 0; height: 100%; } } /* Tuile domaine */ .dom-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 42vh; padding: 30px 28px; overflow: hidden; isolation: isolate; } .dom-card__img { position: absolute; inset: 0; z-index: -2; } .dom-card__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.8); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease; } .dom-card:hover .dom-card__img img, .dom-card:focus-within .dom-card__img img { transform: scale(1.06); filter: grayscale(0) brightness(1.05); } /* Voile : transparent en haut, sombre uniquement en bas (lisibilité du texte) */ .dom-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 18, 24, 0) 30%, rgba(16, 18, 24, 0.42) 62%, rgba(16, 18, 24, 0.92) 100%); } /* Filet d'or qui se trace en haut au survol */ .dom-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1; background: var(--color-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .dom-card:hover::before, .dom-card:focus-within::before { transform: scaleX(1); } .dom-card__num { font-family: var(--font-display); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.24em; color: var(--color-gold); } .dom-card__title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: 1.08rem; letter-spacing: 0.06em; line-height: 1.32; color: var(--color-paper); margin-top: 12px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55); } .dom-card__detail { font-size: 0.9rem; line-height: 1.55; color: var(--color-paper-soft); margin-top: 12px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); } /* Bloc vidéo — emplacement prêt pour l'embed (format 16:9) */ .video-frame { position: relative; overflow: hidden; border: 1px solid rgba(217, 217, 217, 0.18); aspect-ratio: 16 / 9; } .video-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; } /* Lecteur réel : pas de voile ni de bouton factice par-dessus */ .video-frame--player::after { display: none; } /* Vidéo pleine largeur (full screen) */ .cab-video-full { width: 100%; margin: 0; } .video-frame--full { border: 0; } .video-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,24,0.15), rgba(16,18,24,0.55)); } .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 999px; border: 1px solid var(--color-gold); background: rgba(16, 18, 24, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 2; color: var(--color-gold); } .video-play:hover { background: rgba(16, 18, 24, 0.7); } .video-play { cursor: pointer; transition: opacity 0.35s ease, visibility 0.35s ease, background 0.3s ease; } .video-frame.is-playing .video-play { opacity: 0; visibility: hidden; } /* Label éditorial posé sur la vidéo */ .video-label { position: absolute; left: clamp(18px, 2.5vw, 30px); bottom: clamp(16px, 2.5vw, 26px); z-index: 3; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-paper); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7); } /* ============================================================ LE CABINET & L'ÉQUIPE — split immersif plein écran ============================================================ */ /* Les deux associés en panneaux verticaux côte à côte (portraits entiers) */ .cab-split { display: grid; grid-template-columns: 1fr; } @media (min-width: 1024px) { .cab-split { grid-template-columns: 1fr 1fr; min-height: 100vh; } } .cab-founder { position: relative; overflow: hidden; min-height: 68vh; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(26px, 3vw, 46px); isolation: isolate; text-decoration: none; } @media (min-width: 1024px) { .cab-founder { min-height: 0; } } .cab-founder + .cab-founder { border-top: 1px solid rgba(195, 178, 116, 0.4); } @media (min-width: 1024px) { .cab-founder + .cab-founder { border-top: none; border-left: 1px solid rgba(195, 178, 116, 0.4); } } .cab-founder__img { position: absolute; inset: 0; z-index: -2; } .cab-founder__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) brightness(0.9); transition: filter 0.6s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .cab-founder:hover .cab-founder__img img, .cab-founder:focus-visible .cab-founder__img img { filter: grayscale(0) brightness(1.03); transform: scale(1.05); } .cab-founder::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 18, 24, 0.05) 0%, rgba(16, 18, 24, 0.25) 45%, rgba(16, 18, 24, 0.9) 100%); transition: opacity 0.5s ease; } .cab-founder:hover::after { opacity: 0.82; } .cab-founder__name { position: relative; z-index: 1; display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.7rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-paper); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); } .cab-founder__spec { position: relative; z-index: 1; display: block; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-gold); margin-top: 9px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); } /* Filet d'or qui se trace au survol */ .cab-founder__rule { position: absolute; left: clamp(26px, 3vw, 46px); bottom: calc(clamp(26px, 3vw, 46px) + 4.4em); width: 38px; height: 1px; z-index: 1; background: var(--color-gold); transition: width 0.4s ease; } .cab-founder:hover .cab-founder__rule { width: 70px; } /* Bande vidéo cinématographique (sous le split fondateurs) */ .cab-video-band { padding: 0 0 clamp(56px, 9vh, 120px); } /* Réseau d'experts — liste éditoriale numérotée */ .expert-row { display: grid; grid-template-columns: 70px 1fr; gap: 22px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--color-grisline); } .expert-row:last-child { border-bottom: 1px solid var(--color-grisline); } .expert-num { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; color: var(--color-gold-deep); } .expert-nom { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); } /* Équipe — noir & blanc → couleur au survol (demande cliente) */ .team-card { text-align: center; } .team-photo { position: relative; overflow: hidden; } .team-photo img { display: block; width: 100%; height: auto; filter: grayscale(1); transition: filter 0.5s ease, transform 0.5s ease; } .team-card:hover .team-photo img, .team-card:focus-within .team-photo img { filter: grayscale(0); transform: scale(1.02); } .team-nom { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-paper); } .team-role { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-gold); } /* Grille des partenaires — logos bordés, couleur au survol */ .partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--color-grisline); border-left: 1px solid var(--color-grisline); } @media (min-width: 480px) { .partners-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .partners-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .partners-grid { grid-template-columns: repeat(6, 1fr); } } .partners-grid__cell { border-right: 1px solid var(--color-grisline); border-bottom: 1px solid var(--color-grisline); display: flex; align-items: center; justify-content: center; padding: 26px 22px; min-height: 112px; transition: background 0.3s ease; } .partners-grid__cell:hover { background: #fff; } .partners-grid__cell img { max-height: 46px; max-width: 134px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter 0.35s ease, opacity 0.35s ease; } .partners-grid__cell:hover img { filter: grayscale(0); opacity: 1; } /* Bandeau défilant des logos partenaires (boucle continue) */ .logo-marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logo-marquee__track { display: flex; width: max-content; animation: logoMarquee 55s linear infinite; } .logo-marquee:hover .logo-marquee__track { animation-play-state: paused; } .logo-marquee__set { display: flex; align-items: center; flex: none; gap: clamp(38px, 5vw, 78px); padding-right: clamp(38px, 5vw, 78px); } .logo-marquee__set img { height: clamp(26px, 2.6vw, 38px); width: auto; flex: none; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter 0.35s ease, opacity 0.35s ease; } .logo-marquee__set img:hover { filter: grayscale(0); opacity: 1; } @keyframes logoMarquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logo-marquee__track { animation: none; } } /* ============================================================ BLOC AVIS — intégration façon widget Google / Trustindex (style EMEÏS) ============================================================ */ .avis-stars { display: inline-flex; gap: 4px; color: var(--color-gold); } .avis-wrap { display: flex; flex-direction: column; gap: clamp(26px, 4vw, 48px); } @media (min-width: 1024px) { .avis-wrap { flex-direction: row; align-items: center; } } /* Panneau résumé (gauche) */ .avis-summary { flex: none; text-align: center; } @media (min-width: 1024px) { .avis-summary { width: 220px; } } .avis-excellent { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-paper); } .avis-summary .avis-stars { margin-top: 12px; } .avis-summary .avis-stars svg { width: 26px; height: 26px; } .avis-count { font-family: var(--font-display); font-size: 0.92rem; color: var(--color-paper-soft); margin-top: 12px; } .avis-count strong { color: var(--color-paper); font-weight: 600; } .avis-google { display: inline-block; margin-top: 12px; } .gw { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: 0.01em; } .gw .b { color: #4285F4; } .gw .r { color: #EA4335; } .gw .y { color: #FBBC05; } .gw .g { color: #34A853; } /* Rangée de cartes (droite) — 3 visibles + défilement horizontal, barre masquée */ .avis-grid { flex: 1; min-width: 0; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .avis-grid::-webkit-scrollbar { display: none; } /* Flèches de navigation */ .avis-nav { display: inline-flex; gap: 10px; margin-top: 22px; } .avis-arrow { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(195, 178, 116, 0.5); background: transparent; color: var(--color-gold); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .avis-arrow:hover { background: var(--color-gold); color: var(--color-night); border-color: var(--color-gold); } /* Carte d'avis — verre sombre, intégrée au dégradé */ .avis-card { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; background: rgba(35, 42, 64, 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 24px 24px 20px; display: flex; flex-direction: column; } @media (max-width: 1023px) { .avis-card { flex-basis: calc((100% - 18px) / 2); } } @media (max-width: 639px) { .avis-card { flex-basis: 84%; } } .avis-card__head { display: flex; align-items: center; gap: 12px; } .avis-avatar { flex: none; width: 42px; height: 42px; border-radius: 999px; background: rgba(195, 178, 116, 0.16); border: 1px solid rgba(195, 178, 116, 0.55); color: var(--color-gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .avis-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--color-paper); } .avis-date { font-family: var(--font-display); font-size: 0.78rem; color: var(--color-paper-soft); margin-top: 2px; } .avis-card__g { margin-left: auto; flex: none; } .avis-card .avis-stars { margin-top: 16px; } .avis-text { font-size: 0.92rem; line-height: 1.6; color: var(--color-paper-soft); margin-top: 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .avis-more { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--color-gold); text-decoration: none; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(245, 244, 240, 0.12); transition: color 0.2s ease; } .avis-more:hover { color: var(--color-paper); } /* Badge Trustindex */ .avis-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--color-paper-soft); margin-top: 24px; } .avis-badge svg { color: var(--color-gold); } /* ============================================================ 7. ANIMATIONS & MICRO-INTERACTIONS ============================================================ */ .animate-on-scroll { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .animate-on-scroll { opacity: 1; transform: none; } } /* ============================================================ 8. FOOTER ============================================================ */ .site-footer { background: var(--color-night); color: var(--color-paper-soft); border-top: 1px solid rgba(217, 217, 217, 0.12); } /* Pré-footer (CTA intégré au footer — un seul ensemble) */ .prefooter { position: relative; isolation: isolate; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(64px, 11vh, 120px) 0; border-bottom: 1px solid rgba(195, 178, 116, 0.3); overflow: hidden; } /* Photo de fond plein écran + voile de lisibilité */ .prefooter__bg { position: absolute; inset: 0; z-index: 0; } .prefooter__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(0.15) brightness(0.92); } .prefooter__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 18, 24, 0.6) 0%, rgba(16, 18, 24, 0.38) 50%, rgba(16, 18, 24, 0.68) 100%); } .prefooter > div:not(.prefooter__bg) { position: relative; z-index: 1; } .footer-logo { display: inline-block; } .footer-logo img { display: block; height: 52px; width: auto; object-fit: contain; max-width: 100%; } @media (max-width: 768px) { .footer-logo img { height: 42px; } } .footer-titre { font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-gold); } .site-footer a:not(.btn-primary) { color: var(--color-paper-soft); text-decoration: none; transition: color 0.2s ease; } .site-footer a:not(.btn-primary):hover { color: var(--color-gold); } /* Lien réseau (LinkedIn) */ .footer-social { display: inline-flex; align-items: center; gap: 11px; margin-top: 24px; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-paper-soft); text-decoration: none; transition: color 0.2s ease; } .footer-social__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(195, 178, 116, 0.5); color: var(--color-gold); transition: background 0.25s ease, color 0.25s ease; } .footer-social:hover { color: var(--color-gold); } .footer-social:hover .footer-social__icon { background: var(--color-gold); color: var(--color-night); } /* Barre du bas */ .footer-bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(217, 217, 217, 0.12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; font-size: 0.76rem; color: rgba(245, 244, 240, 0.5); } .footer-bottom__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; } .footer-bottom__sep { color: rgba(245, 244, 240, 0.25); } .footer-bottom .readyup-credit { margin: 0; padding: 0; border: 0; text-align: right; font-size: 0.76rem; } .readyup-credit { font-size: 12px; color: rgba(245, 244, 240, 0.5); } .readyup-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .photo-credits { font-size: 0.72rem; color: rgba(245, 244, 240, 0.38); text-align: center; margin-top: 18px; }