/* * emeis.css — Habillage bespoke EMEÏS CONSEIL (porté depuis la maquette HTML). * Chargé en statique par inc/enqueue.php (après le CSS Tailwind compilé). * Les tokens (couleurs/fonts) sont aussi déclarés en @theme dans app.css pour * générer les utilitaires Tailwind (text-gold, bg-gold, font-title, …). * Ici on redéclare :root pour être auto-suffisant + on importe Jost (Google). * Prata est servie en local via @font-face (voir plus bas), fichier dans * assets/fonts/Prata-Regular.ttf → url(../fonts/…) résolue depuis assets/css/. */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap'); :root { --color-navy : #384266; --color-navy-deep : #232A40; --color-night : #101218; --color-gold : #C3B274; --color-gold-deep : #9A8A50; --color-grisline : #D9D9D9; --color-surface : #F7F6F2; --color-surface-alt : #EFEDE7; --color-ink : #15161A; --color-ink-soft : #43454D; --color-ink-muted : #5F6169; --color-paper : #F5F4F0; --color-paper-soft : #C9CBD3; --font-title : "Prata", serif; --font-display : "Jost", sans-serif; --font-body : "Jost", sans-serif; --font-sans : "Jost", sans-serif; --radius-card : 0px; --radius-btn : 0px; --shadow-card : 0 2px 14px rgba(16, 18, 24, 0.06); --shadow-hover : 0 14px 34px rgba(16, 18, 24, 0.12); --nav-height : 78px; } /* * ============================================================ * 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); } /* Sous-menu déroulant (onglet « Nos expertises ») — sobre, aligné à gauche */ .nav-has-sub { position: relative; } /* Onglet déclencheur « Nos expertises » : non cliquable, ouvre seulement le sous-menu */ .nav-sub-toggle { cursor: default; background: none; border: 0; margin: 0; padding: 0; line-height: inherit; } .nav-sub { position: absolute; top: 100%; left: -16px; margin: 18px 0 0; transform: translateY(8px); min-width: 224px; padding: 14px 0; list-style: none; background: #14161D; box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease; z-index: 60; } /* Pont invisible pour ne pas perdre le survol entre l'onglet et le menu */ .nav-sub::before { content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 20px; } .nav-has-sub:hover .nav-sub, .nav-has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-sub__link { display: block; padding: 9px 20px; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: var(--color-paper-soft); transition: color 0.2s ease; } .nav-sub__link:hover { color: var(--color-gold); } /* Sous-onglet de la page courante : doré */ .nav-sub__link.active { color: var(--color-gold); } /* Ancrage : compense la nav fixe */ .exp-panel { scroll-margin-top: var(--nav-height); } /* 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); } /* Sous-onglets « Nos expertises » dans le menu mobile */ .mobile-menu a.mobile-sub { font-size: 0.82rem; letter-spacing: 0.16em; padding-left: 18px; color: var(--color-paper-soft); } .mobile-menu li:has(> .mobile-sub) { margin-top: -14px; } /* Onglet actif en doré, comme sur desktop */ .mobile-menu a.is-active, .mobile-menu .mobile-label.is-active { color: var(--color-gold); } /* Libellé de catégorie « Nos expertises » (non cliquable) au-dessus des sous-onglets */ .mobile-menu .mobile-label { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-paper); } /* ============================================================ 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% - 8px), 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: 8px; 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; } /* Titre du hero entièrement aligné à gauche sur mobile/tablette */ .reveal-line.l-1, .reveal-line.l-2, .reveal-line.l-3 { text-align: left; } .reveal-line.l-2 { margin-top: 0.8em; } .reveal-line.l-3 { margin-top: 0.4em; } /* Les 3 piliers tiennent sur une seule ligne, centrés, en bas du hero */ .hero-points { right: 16px; bottom: 24px; left: 16px; flex-wrap: nowrap; justify-content: flex-end; font-size: clamp(0.5rem, 2.4vw, 0.72rem); letter-spacing: 0.1em; white-space: nowrap; } .hero-points li + li::before { margin: 0 8px; } .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) */ /* Marge haute dans le masque pour ne pas rogner le sommet des capitales (Prata), annulée par une marge négative équivalente : la position visuelle ne bouge pas. */ .reveal-mask { overflow: hidden; padding-top: 0.16em; padding-bottom: 0.06em; margin-top: -0.16em; } .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). -0.24em = stack d'origine (-0.08) compensant le padding-top 0.16 du masque. */ .gtitle__l2 { margin-top: -0.24em; } /* 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; text-decoration: none; color: inherit; cursor: pointer; } .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:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; } .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-panel:hover .exp-link, .exp-panel:focus-visible .exp-link { color: var(--color-gold); } .exp-panel:hover .exp-link__arrow, .exp-panel:focus-visible .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 { position: relative; 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; } .readyup-credit__link { display: inline-flex; align-items: center; text-decoration: none; vertical-align: middle; color: rgba(245, 244, 240, 0.7); transition: color 0.3s ease; } .readyup-credit__link:hover { color: var(--color-paper-soft); } .readyup-credit__logo { height: 16px; width: auto; display: block; } .photo-credits { font-size: 0.72rem; color: rgba(245, 244, 240, 0.38); text-align: center; margin-top: 18px; } /* ============================================================ PAGE INGÉNIERIE FINANCIÈRE — composants dédiés (esprit accueil) ============================================================ */ /* Liste à puces carrées dorées (section « Optimiser & diversifier ») */ .fin-list-label { font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); } .fin-list { list-style: none; margin: clamp(34px, 4vh, 50px) 0 0; padding: 0; display: grid; gap: 16px; } .fin-list li { position: relative; padding-left: 28px; font-size: 1.02rem; line-height: 1.5; color: var(--color-paper); border-bottom: 1px solid rgba(217, 217, 217, 0.1); padding-bottom: 16px; } .fin-list li:last-child { border-bottom: 0; padding-bottom: 0; } .fin-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; background: var(--color-gold); } /* Grille des solutions — cartes filaires sobres */ .sol-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--color-grisline); border: 1px solid var(--color-grisline); } @media (min-width: 640px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sol-grid { grid-template-columns: repeat(4, 1fr); } } .sol-card { background: var(--color-surface); padding: clamp(24px, 2.3vw, 34px); display: flex; flex-direction: column; gap: 12px; transition: background 0.35s ease; } .sol-card:hover { background: #fff; } .sol-card__num { font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; color: var(--color-gold-deep); } .sol-card__title { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.08rem, 1.4vw, 1.32rem); line-height: 1.25; color: var(--color-ink); } .sol-card__desc { font-size: 0.9rem; line-height: 1.62; color: var(--color-ink-soft); } /* Bande CTA intermédiaire — photo + voile (même esprit que le pré-footer) */ .cta-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(84px, 15vh, 170px) 0; } .cta-band__bg { position: absolute; inset: 0; z-index: 0; } .cta-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(0.22) brightness(0.85); } .cta-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 18, 24, 0.72) 0%, rgba(16, 18, 24, 0.5) 50%, rgba(16, 18, 24, 0.78) 100%); } .cta-band > div { position: relative; z-index: 1; } /* Accordéon FAQ — filets fins, ouverture douce */ .faq { border-top: 1px solid rgba(21, 22, 26, 0.12); } .faq-item { border-bottom: 1px solid rgba(21, 22, 26, 0.12); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.4vw, 30px) 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.02rem, 1.5vw, 1.32rem); line-height: 1.35; color: var(--color-ink); transition: color 0.25s ease; } .faq-q:hover { color: var(--color-gold-deep); } .faq-icon { position: relative; flex: none; width: 20px; height: 20px; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--color-gold-deep); transition: transform 0.35s ease, opacity 0.35s ease; } .faq-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); } .faq-icon::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); } .faq-item.is-open .faq-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); } .faq-item.is-open .faq-q { color: var(--color-gold-deep); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .faq-item.is-open .faq-a { max-height: 420px; } .faq-a__inner { padding: 0 56px clamp(22px, 2.4vw, 30px) 0; max-width: 52rem; font-size: 0.98rem; line-height: 1.7; color: var(--color-ink-soft); } @media (max-width: 560px) { .faq-a__inner { padding-right: 0; } } /* Hero des pages internes — deux lignes monumentales de même échelle, calibrées */ .hero--fin .hero-lead, .hero--pat .hero-lead, .hero--fond .hero-lead, .hero--actu .hero-lead, .hero--contact .hero-lead { font-size: clamp(2.1rem, 6.4vw, 5.6rem); white-space: nowrap; } .hero--fin .hero-mono, .hero--pat .hero-mono, .hero--fond .hero-mono, .hero--actu .hero-mono, .hero--contact .hero-mono { font-size: clamp(2.1rem, 6.4vw, 5.6rem); } @media (max-width: 760px) { .hero--fin .hero-lead, .hero--pat .hero-lead, .hero--fond .hero-lead, .hero--actu .hero-lead, .hero--contact .hero-lead { white-space: normal; } } /* Très petits écrans : réduire les titres hero pour que les mots longs d'un seul tenant (« complémentaires. », « Des investissements ») ne soient pas rognés par le masque (.reveal-line { overflow:hidden }). */ @media (max-width: 440px) { .hero-lead { font-size: clamp(2.2rem, 12vw, 2.9rem); } .hero-mono { font-size: clamp(2rem, 11vw, 2.7rem); } .hero--fin .hero-lead, .hero--pat .hero-lead, .hero--fond .hero-lead, .hero--actu .hero-lead, .hero--contact .hero-lead, .hero--fin .hero-mono, .hero--pat .hero-mono, .hero--fond .hero-mono, .hero--actu .hero-mono, .hero--contact .hero-mono { font-size: clamp(1.65rem, 7vw, 2.3rem); } } /* Ligne d'accroche sous le nom d'un fondateur */ .founder-lead { font-family: var(--font-title); color: var(--color-gold-deep); font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.45; letter-spacing: 0.004em; margin-top: 1.1rem; } .section-dark .founder-lead { color: var(--color-gold); } .founder-bio { scroll-margin-top: var(--nav-height); } /* Bios des fondateurs — colonnes pleine largeur alignées sous chaque photo, filet doré central prolongé (mise en valeur identique au showcase). */ .founders-bios { display: grid; grid-template-columns: 1fr; /* Dégradé bleu nuit profond pour le relief (esprit du fond du titre) */ background: radial-gradient(120% 80% at 50% 0%, rgba(56, 66, 102, 0.45) 0%, rgba(56, 66, 102, 0) 60%), linear-gradient(180deg, #212940 0%, #171C2B 55%, var(--color-night) 100%); } @media (min-width: 1024px) { .founders-bios { grid-template-columns: 1fr 1fr; } } .founders-bios__cell { scroll-margin-top: var(--nav-height); padding: clamp(44px, 5.5vw, 92px) clamp(26px, 3vw, 46px) clamp(48px, 6vw, 96px); } .founders-bios__cell + .founders-bios__cell { border-top: 1px solid rgba(195, 178, 116, 0.4); } @media (min-width: 1024px) { .founders-bios__cell + .founders-bios__cell { border-top: none; border-left: 1px solid rgba(195, 178, 116, 0.4); } } .founders-bios__rule { display: block; width: 42px; height: 1px; background: var(--color-gold); margin-bottom: 26px; } .founders-bios .founder-lead { margin-top: 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.45; } .founders-bios__text { max-width: 50rem; } /* ============================================================ PANNEAUX FONDATEURS — révélation du texte au survol (animation strictement identique au bloc « Nos expertises ») ============================================================ */ .cab-founder--bio { cursor: default; } .cab-founder--bio .cab-founder__content { position: relative; z-index: 1; max-width: none; } .cab-founder--bio .cab-founder__spec { margin: 0 0 9px; } .cab-founder--bio .cab-founder__name { margin: 0; } .cab-founder__reveal p { max-width: none; } .cab-founder__lead { font-family: var(--font-title); font-weight: 400; color: var(--color-gold); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.4; margin: 0 0 14px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55); } .cab-founder__reveal p:not(.cab-founder__lead) { color: var(--color-paper); opacity: 0.92; line-height: 1.6; font-size: 0.95rem; margin-top: 0.85em; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); } /* Voile renforcé pour la lisibilité du texte révélé */ .cab-founder--bio::after { background: linear-gradient(180deg, rgba(16, 18, 24, 0.12) 0%, rgba(16, 18, 24, 0.30) 26%, rgba(16, 18, 24, 0.72) 58%, rgba(16, 18, 24, 0.96) 100%); } .cab-founder--bio:hover::after, .cab-founder--bio:focus-within::after { opacity: 1; } @media (hover: hover) and (min-width: 1024px) { .cab-founder--bio .cab-founder__reveal { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transform: translateY(16px); pointer-events: none; transition: max-height 0.85s 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); } .cab-founder--bio:hover .cab-founder__reveal, .cab-founder--bio:focus-within .cab-founder__reveal { max-height: 46em; margin-top: 22px; opacity: 1; transform: translateY(0); pointer-events: auto; } } /* MOBILE/TABLETTE uniquement : la photo devient un bloc en haut et la bio s'affiche dessous (le texte ne recouvre plus l'image). */ @media (max-width: 1023px) { .cab-founder--bio { display: block; min-height: 0; padding: 0; overflow: visible; } .cab-founder--bio .cab-founder__img { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; } .cab-founder--bio .cab-founder__img img { filter: grayscale(1) brightness(1); } .cab-founder--bio::after { display: none; } .cab-founder--bio .cab-founder__content { padding: clamp(26px, 7vw, 40px); } .cab-founder--bio .cab-founder__reveal { margin-top: 16px; } .cab-founder--bio .cab-founder__name, .cab-founder--bio .cab-founder__spec, .cab-founder--bio .cab-founder__lead, .cab-founder--bio .cab-founder__reveal p { text-shadow: none; } } /* ============================================================ FAQ — bouton flottant « ? » + modale ============================================================ */ .faq-fab { position: fixed; right: clamp(20px, 4vw, 40px); bottom: clamp(20px, 4vh, 40px); z-index: 90; width: 46px; height: 46px; padding: 0; border-radius: 999px; background: rgba(16, 18, 24, 0.92); border: 1px solid var(--color-gold); color: var(--color-gold); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 30px rgba(16, 18, 24, 0.35); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .faq-fab:hover { background: var(--color-gold); color: var(--color-night); transform: translateY(-2px); } .faq-fab span { display: block; font-family: var(--font-title); font-size: 1.2rem; line-height: 1; transform: translateY(1px); } .faq-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4vw, 48px); opacity: 0; visibility: hidden; transition: opacity 0.32s ease, visibility 0.32s ease; } .faq-modal.is-open { opacity: 1; visibility: visible; } .faq-modal__overlay { position: absolute; inset: 0; background: rgba(16, 18, 24, 0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; } .faq-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 62rem; max-height: 86vh; overflow-y: auto; background: var(--color-surface); padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px) clamp(20px, 3vw, 40px); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.5); transform: translateY(18px) scale(0.985); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .faq-modal.is-open .faq-modal__panel { transform: none; } .faq-modal__title { font-family: var(--font-title); font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; font-size: clamp(1.5rem, 2.6vw, 2.3rem); color: var(--color-ink); } .faq-modal__close { position: absolute; top: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid rgba(21, 22, 26, 0.18); color: var(--color-ink); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .faq-modal__close:hover { background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink); } /* ============================================================ PAGE ACTUALITÉ — en-tête + grille d'articles ============================================================ */ .page-head { padding-top: calc(var(--nav-height) + clamp(56px, 9vh, 112px)); padding-bottom: clamp(48px, 8vh, 96px); } .news-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 3vw, 50px); } @media (min-width: 680px) { .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } .news-card { display: flex; flex-direction: column; } /* La vignette est encadrée avec le cadre photo doré du site (.cadre-photo). La fenêtre image garde un format 3:2 ; le zoom au survol reste clippé. */ .news-card__media { display: block; } .news-card__media picture { display: block; overflow: hidden; aspect-ratio: 3 / 2; } .news-card__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .news-card:hover .news-card__media img, .news-card:focus-within .news-card__media img { transform: scale(1.05); } .news-card__meta { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-deep); } .news-card__meta .sep { width: 5px; height: 5px; background: var(--color-gold); flex: none; } .news-card__meta .news-date { color: var(--color-ink-muted); font-weight: 400; } .news-card__title { margin-top: 14px; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.3; color: var(--color-ink); } .news-card__excerpt { margin-top: 12px; font-size: 0.95rem; line-height: 1.65; color: var(--color-ink-soft); } .news-card__link { margin-top: 18px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink); text-decoration: none; transition: color 0.25s ease; } .news-card__link:hover { color: var(--color-gold-deep); } .news-card__link svg { transition: transform 0.25s ease; } .news-card__link:hover svg { transform: translateX(4px); } /* ============================================================ PAGE CONTACT — coordonnées, formulaire, carte ============================================================ */ .contact-info { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 680px) { .contact-info { grid-template-columns: repeat(3, 1fr); } } .contact-info__label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-deep); } .contact-info__value { margin-top: 9px; font-family: var(--font-title); font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; color: var(--color-ink); } .contact-info__value a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .contact-info__value a:hover { color: var(--color-gold-deep); } .contact-grid { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.05fr 0.95fr; } } .contact-form .form-row { margin-bottom: 20px; } .contact-form label { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 9px; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 14px 16px; border: 1px solid rgba(21, 22, 26, 0.18); background: #fff; color: var(--color-ink); font-family: var(--font-body); font-size: 1rem; border-radius: 0; transition: border-color 0.25s ease; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--color-ink-muted); opacity: 0.7; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: none; } .contact-form textarea { min-height: 150px; resize: vertical; } .contact-form .form-actions { margin-top: 6px; } @media (min-width: 560px) { .contact-form .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } } /* Contact Form 7 — le formulaire réel porte la classe .contact-form (via html_class), on aligne les états CF7 (validation, spinner, réponse) sur la charte EMEÏS pour rester fidèle à la maquette. */ .contact-form .wpcf7-not-valid-tip { display: block; margin-top: 7px; font-family: var(--font-body); font-size: 0.82rem; color: #b3261e; } .contact-form .wpcf7-not-valid { border-color: #b3261e; } .contact-form .wpcf7-spinner { margin-left: 12px; } .contact-form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 16px; border-radius: 0; font-family: var(--font-body); font-size: 0.95rem; } .form-success { position: relative; display: none; margin-bottom: 28px; padding: 26px 48px 26px 28px; border: 1px solid var(--color-gold); background: rgba(195, 178, 116, 0.08); } .form-success.is-visible { display: block; } .form-success__title { font-family: var(--font-title); font-size: 1.25rem; color: var(--color-ink); } .form-success__text { margin-top: 10px; color: var(--color-ink-soft); line-height: 1.6; } .form-success__close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: none; background: none; color: var(--color-ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; } .form-success__close:hover { color: var(--color-ink); } .contact-map { width: 100%; min-height: 480px; height: 100%; border: 1px solid var(--color-grisline); } @media (max-width: 1023px) { .contact-map { min-height: 380px; } } .leaflet-container { font-family: var(--font-body); } /* ============================================================ PAGE FINANCIÈRE — bloc « Optimiser & diversifier » plein écran (esprit du bloc « Nos expertises » : photo immersive, intro à gauche, liste en bas à droite, affichée par défaut) ============================================================ */ .fin-feature { position: relative; overflow: hidden; isolation: isolate; } .fin-feature__bg { position: absolute; inset: 0; z-index: -2; } .fin-feature__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(0.18) brightness(0.92); } .fin-feature__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(16, 18, 24, 0.9) 0%, rgba(16, 18, 24, 0.55) 44%, rgba(16, 18, 24, 0.22) 100%), linear-gradient(180deg, rgba(16, 18, 24, 0.22) 0%, rgba(16, 18, 24, 0) 36%, rgba(16, 18, 24, 0.8) 100%); } .fin-feature__inner { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(36px, 4vw, 80px); padding: calc(var(--nav-height) + clamp(48px, 9vh, 110px)) clamp(26px, 5vw, 68px) clamp(48px, 8vh, 96px); } .fin-feature__intro { max-width: 42rem; flex: 1 1 28rem; } .fin-feature__intro p { max-width: none; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55); } .fin-feature__list { max-width: 34rem; flex: 0 1 auto; } .fin-feature__list .exp-list { margin-top: 14px; } .fin-feature__list .exp-list li { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); } @media (max-width: 1023px) { .fin-feature__inner { flex-direction: column; align-items: stretch; min-height: auto; gap: 40px; padding-top: calc(var(--nav-height) + 44px); padding-bottom: 56px; } .fin-feature__intro, .fin-feature__list { max-width: none; flex: none; } } /* ============================================================ MOSAÏQUE « solutions » — reprise de « Nos domaines » en texte seul (plein écran, filets dorés, sans photo ni survol) ============================================================ */ /* Titre de section compact (titres plus longs) */ .exp-intro__title--compact .gtitle__l1, .exp-intro__title--compact .gtitle__l2 { font-size: clamp(2.2rem, 5vw, 4.6rem); } /* Bloc « Nos solutions » : un seul dégradé crème continu sur tout le bloc (repris du bloc « Chaque situation est unique » de l'accueil), titre compris. */ /* Surtitre long de ce bloc : typo resserrée pour tenir sur une seule ligne */ #nos-solutions .surtitre { font-size: 0.7rem; letter-spacing: 0.2em; gap: 12px; max-width: none; } #nos-solutions.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%); } /* Les vignettes deviennent transparentes : le dégradé du bloc les traverse, plus de relief par vignette. Séparations = filets dorés (box-shadow, les filets extérieurs sont rognés par overflow:hidden). */ .dom-grid--text { background: transparent; gap: 0; overflow: hidden; } .dom-card--text { background: transparent; box-shadow: 1px 0 0 rgba(154, 138, 80, 0.42), 0 1px 0 rgba(154, 138, 80, 0.42); } .dom-card--text::after, .dom-card--text::before { display: none; } .dom-card--text .dom-card__num { color: var(--color-gold-deep); } .dom-card--text .dom-card__title { color: var(--color-ink); text-shadow: none; } .dom-card--text .dom-card__detail { color: var(--color-ink-soft); text-shadow: none; } /* Items texte : hauteur calée sur le contenu (plus de cohérence avec la taille du texte) */ .dom-card--text { min-height: 0; padding: 40px 36px 42px; } .dom-card--text .dom-card__title { margin-top: 18px; } .dom-card--text .dom-card__detail { margin-top: 16px; line-height: 1.62; } @media (min-width: 1024px) { /* Deux lignes de même hauteur, calée sur la tuile la plus haute */ .dom-grid--text { grid-auto-rows: 1fr; min-height: 0; } .dom-grid--text .dom-card { height: auto; } } /* Grand titre de la mosaïque sur fond clair : encre */ .section-clair .gtitle__l1, .section-clair .gtitle__l2 { color: var(--color-ink); } /* ============================================================ SINGLE PUBLICATION — hero sombre + corps éditorial ============================================================ */ /* Hero « arrivée de page » : fond noir sous la navbar transparente. */ .pub-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(420px, 62vh, 620px); padding: calc(var(--nav-height) + clamp(48px, 8vh, 90px)) 0 clamp(44px, 7vh, 72px); } .pub-hero__media { position: absolute; inset: 0; z-index: -2; } /* Image assombrie + désaturée comme les heros des autres pages (.hero-visual img) → overlay noir cohérent, texte lisible même sur une photo claire. */ .pub-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.03) brightness(0.7); } /* Voile de lisibilité : sombre en bas (texte), dégagé en haut. */ .pub-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 18, 24, 0.72) 0%, rgba(16, 18, 24, 0.55) 34%, rgba(16, 18, 24, 0.92) 100%), radial-gradient(ellipse 90% 70% at 30% 100%, rgba(16, 18, 24, 0.62), transparent 70%); } .pub-hero__inner { position: relative; width: 100%; } .pub-hero__crumb { margin-bottom: 22px; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 244, 240, 0.55); } .pub-hero__crumb a { color: rgba(245, 244, 240, 0.8); text-decoration: none; } .pub-hero__crumb a:hover { color: var(--color-gold); } .pub-hero__kicker { color: var(--color-gold); } .pub-hero__cat { position: relative; margin-left: 22px; padding-left: 22px; } .pub-hero__cat::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; transform: translateY(-50%); background: rgba(195, 178, 116, 0.5); } .pub-hero__title { margin-top: 22px; max-width: 20ch; font-family: var(--font-title); font-weight: 400; line-height: 1.1; letter-spacing: 0.005em; font-size: clamp(2rem, 4.6vw, 3.6rem); color: var(--color-paper); } .pub-hero__lead { margin-top: 22px; max-width: 60ch; font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.62; color: rgba(245, 244, 240, 0.82); } .pub-hero__meta { margin-top: 28px; display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.03em; color: rgba(245, 244, 240, 0.62); } .pub-hero__meta time { text-transform: capitalize; } .pub-hero__dot { width: 4px; height: 4px; border-radius: 999px; background: var(--color-gold); } /* Corps de l'article : rythme vertical, colonne lisible centrée. */ .pub-body { padding: clamp(40px, 7vh, 80px) 0 clamp(48px, 8vh, 88px); } .pub-body__inner { margin-inline: auto; max-width: 62rem; } /* Les blocs éditoriaux (texte/titre/image…) portent déjà leur propre container : on annule le padding vertical excessif entre eux ici. */ .pub-body__inner > section:first-child { padding-top: 0; } /* Colonne unique cohérente : tous les blocs (texte, titre, citation, image…) remplissent la largeur du contenu (.pub-body__inner). On neutralise leur sous-container, leur max-width interne et le plafond `main p{max-width:70ch}` pour que le texte fasse la même largeur que la citation et les images. */ .pub-body__inner > section > .container-aries { max-width: none; padding-left: 0; padding-right: 0; } .pub-body__inner .max-w-5xl { max-width: none; } .pub-body__inner p { max-width: none; } /* Titres de blocs = typo du site (Prata) — cf. bloc titre + wysiwyg. */ .pub-body__inner .wysiwyg :is(h2, h3, h4) { font-family: var(--font-title); font-weight: 400; letter-spacing: 0.01em; } .titre-section--sub { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .pub-body__wysiwyg { font-size: 1.06rem; line-height: 1.75; } /* Lettrine éditoriale sur le premier paragraphe du corps. */ .pub-body__wysiwyg > p:first-of-type::first-letter { float: left; margin: 0.08em 0.12em 0 0; font-family: var(--font-title); font-size: 3.4em; line-height: 0.82; color: var(--color-gold-deep); } /* Pied d'article : partage + retour archive. */ .pub-share { margin: clamp(40px, 6vh, 68px) auto 0; max-width: 62rem; padding-top: 26px; border-top: 1px solid rgba(21, 22, 26, 0.12); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; font-family: var(--font-display); font-size: 0.82rem; } .pub-share__label { letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-muted); } .pub-share__list { display: inline-flex; gap: 10px; } .pub-share__link { padding: 6px 15px; border: 1px solid rgba(21, 22, 26, 0.16); border-radius: 999px; color: var(--color-ink-soft); transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; } .pub-share__link:hover { border-color: var(--color-gold); color: var(--color-gold-deep); background: rgba(195, 178, 116, 0.08); } .pub-share__back { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; color: var(--color-ink-soft); } .pub-share__back:hover { color: var(--color-gold-deep); } .pub-share__back svg { transition: transform 0.25s ease; } .pub-share__back:hover svg { transform: translateX(-3px); } /* Articles liés. */ .pub-related { padding: clamp(56px, 9vh, 104px) 0; } .pub-related__head { text-align: center; } .pub-related__head .surtitre { justify-content: center; } @media (max-width: 640px) { .pub-share__back { margin-left: 0; } } /* ============================================================ Bloc shortcode en mode éditorial (mentions légales, etc.) ============================================================ */ .sc-head { text-align: left; } .sc-editorial { max-width: 46rem; font-size: 1.04rem; line-height: 1.72; color: var(--color-ink-soft); } .sc-editorial h2, .sc-editorial h3 { margin-top: 2.25rem; color: var(--color-ink); font-family: var(--font-title); font-weight: 400; } .sc-editorial h2 { font-size: 1.5rem; } .sc-editorial h3 { font-size: 1.22rem; } .sc-editorial p + p { margin-top: 1.1em; }