/* * ============================================================ * STYLE.CSS — BEM 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 · Architectural Minimalism · * Enterprise Gateway (pattern de landing) * Essence visuelle : un cabinet de conseil qui respire — grands aplats * bleus, cadres très arrondis, blancs généreux. * Signature unique : le schéma des 4 expertises du client, entièrement * revectorisé en HTML/CSS (bandes alternées pleines / * contour pointillé), animé au scroll et cliquable. * * PALETTE — issue du logo client (pixel-perfect, aucune modification) : * #1F324D navy du logo → --color-ink * #FFFFFF lettrage du logo → texte sur fonds sombres * #1C59AC bleu du schéma Canva → --color-primary (CTA) * #1A2A40 navy du schéma Canva → --color-ink-deep * Couleurs complémentaires ajoutées (justification) : * #14417F primary-dark → état hover des CTA, manquant dans le logo * #7FB3F2 accent → surtitres et ornements sur fonds sombres, * seule nuance claire lisible sur le navy * #F7F9FC surface → fond principal (jamais blanc pur plat) * #E9EFF7 surface-alt → sections alternées * #47576F / #5A6A80 → 2 niveaux de texte doux (WCAG AA vérifié) * Aucun vert dans la palette (contrainte explicite du brief). * * ⚠️ Les tokens (couleurs, polices, radius) vivent dans @theme inline * dans le . Ici on utilise var(--color-primary), etc. * ⚠️ @apply NON disponible (Play CDN) — CSS classique uniquement. * ============================================================ */ /* ============================================================ 1. RESET & BASE CUSTOM ============================================================ */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; } /* Image de fond couvrant une section (bandes full-bleed). ⚠️ Passe par une CLASSE et non par des utilitaires Tailwind : les utilitaires vivent dans @layer utilities, or le CSS hors layer de ce fichier (règle `img` ci-dessus) l'emporterait sur un h-full/w-full. */ .media-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } ::selection { background: var(--color-primary); color: #fff; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } /* Lien d'évitement clavier */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-primary); color: #fff; padding: 12px 24px; z-index: 9999; font-family: var(--font-body); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0; } /* Longueur de ligne de lecture */ main p { max-width: 70ch; } .card p, .hero p, .cta-block p, .no-measure p { max-width: none; } /* ============================================================ 2. TYPOGRAPHIE AVANCÉE ============================================================ */ /* ⚠️ Aucune propriété `color` ici : les titres HÉRITENT de la couleur du body (--color-ink). Poser `color` sur le sélecteur d'élément écraserait les utilitaires Tailwind (text-white sur le hero, etc.) — le CSS hors @layer l'emporte toujours sur les utilitaires layered de Tailwind 4. */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.14; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; } .display-xl { font-size: clamp(2.6rem, 6vw, 4.35rem); font-weight: 700; } .display-lg { font-size: clamp(1.85rem, 3.9vw, 3rem); } .display-md { font-size: clamp(1.5rem, 2.4vw, 2rem); } /* Surtitre — style unique réutilisé partout sur le site */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: 0 0 auto; } .eyebrow--onDark { color: var(--color-accent); } /* Variante « phrase » — pour un libellé repris MOT POUR MOT du client. Les capitales CSS sont réservées aux intitulés rédigés par l'agence ; une phrase écrite par le client s'affiche telle qu'il l'a écrite. */ .eyebrow--sentence { text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; font-weight: 500; } /* Fragment d'emphase INLINE dans un texte (règle H8.1) */ .hl { color: var(--color-primary); font-weight: 600; } .hl--onDark { color: var(--color-accent); font-weight: 600; } /* ============================================================ 3. ATMOSPHÈRE DE FOND ============================================================ */ /* Trame de fines diagonales — rappel du pictogramme triangulaire du logo. Extrêmement discrète : structure la page sans jamais dominer. */ .canvas-weave { position: relative; background-color: var(--color-surface); } .canvas-weave::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 135deg, rgba(31, 50, 77, 0.028) 0px, rgba(31, 50, 77, 0.028) 1px, transparent 1px, transparent 13px ); } .canvas-weave > * { position: relative; } /* Dégradé de marque — navy → bleu vif, utilisé hero / bandes / footer */ .grad-brand { background-image: linear-gradient(135deg, var(--color-ink-deep) 0%, var(--color-ink) 42%, var(--color-primary) 100%); } .grad-brand-soft { background-image: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-deep) 55%, #10314f 100%); } /* Halo lumineux décoratif sur les blocs sombres */ .glow-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.42; pointer-events: none; background: var(--color-primary); } /* ============================================================ 4. NAVIGATION ============================================================ */ /* --- Fallback responsive OBLIGATOIRE : empêche le double menu --- Sélecteurs compound (double classe) : la spécificité doit rester supérieure à celle de .btn-primary (section 5) qui pose lui aussi un display, sinon le CTA de la nav réapparaît sur mobile en doublon du CTA du menu burger. */ .site-header .nav-links-desktop { display: none; } .site-header .nav-cta-desktop { display: none; } .site-header .burger { display: inline-flex; } @media (min-width: 1024px) { .site-header .nav-links-desktop { display: flex; } .site-header .nav-cta-desktop { display: inline-flex; } .site-header .burger { display: none; } } .site-header { background: rgba(247, 249, 252, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(31, 50, 77, 0.07); transition: box-shadow 0.25s ease, background 0.25s ease; } .site-header.is-scrolled { background: rgba(247, 249, 252, 0.95); box-shadow: 0 6px 26px rgba(31, 50, 77, 0.08); } .nav-logo__img { height: 52px; width: auto; object-fit: contain; transition: opacity 0.2s ease; } .nav-logo:hover .nav-logo__img { opacity: 0.85; } @media (max-width: 768px) { .nav-logo__img { height: 40px; } } /* Onglets — style TYPOGRAPHIQUE, aucune décoration uniforme. L'identité vient de la graisse, du tracking et de la couleur. Seul l'onglet ACTIF porte un ornement (chevron plein bleu, rappel du pictogramme triangulaire du logo). */ .nav-links-desktop { list-style: none; padding: 0; margin: 0; } .nav-link { position: relative; display: inline-block; padding: 6px 0; font-family: var(--font-display); font-size: 0.94rem; font-weight: 500; letter-spacing: 0.012em; color: var(--color-ink); text-decoration: none; transition: color 0.2s ease; } .nav-link:hover { color: var(--color-primary); } /* Indicateur d'ÉTAT ACTIF uniquement — jamais sur les autres onglets */ .nav-link.active { color: var(--color-primary); font-weight: 600; } .nav-link.active::before { content: ""; position: absolute; left: -14px; top: 50%; width: 0; height: 0; transform: translateY(-50%); border-left: 6px solid var(--color-primary); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } /* Burger */ .burger { align-items: center; justify-content: center; width: 46px; height: 46px; border: none; background: transparent; cursor: pointer; border-radius: 12px; transition: background 0.2s ease; } .burger:hover { background: rgba(28, 89, 172, 0.09); } .burger-lines { position: relative; display: block; width: 24px; height: 16px; } .burger-lines span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--color-ink); transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease; } .burger-lines span:nth-child(1) { top: 0; } .burger-lines span:nth-child(2) { top: 7px; } .burger-lines span:nth-child(3) { top: 14px; } .burger[aria-expanded="true"] .burger-lines span:nth-child(1) { top: 7px; transform: rotate(45deg); } .burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger-lines span:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* Menu mobile */ .mobile-menu { background: var(--color-surface); border-bottom: 1px solid rgba(31, 50, 77, 0.08); box-shadow: 0 18px 34px rgba(31, 50, 77, 0.1); } .mobile-menu ul { list-style: none; margin: 0; padding: 12px 24px 28px; } .mobile-menu li + li { border-top: 1px solid rgba(31, 50, 77, 0.07); } .mobile-menu a { display: block; padding: 15px 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--color-ink); text-decoration: none; transition: color 0.2s ease; } .mobile-menu a:hover { color: var(--color-primary); } .mobile-menu .mobile-cta { margin-top: 18px; padding: 14px 28px; border-radius: var(--radius-btn); background: var(--color-primary); color: #fff; text-align: center; font-weight: 600; } .mobile-menu .mobile-cta:hover { background: var(--color-primary-dark); color: #fff; } /* ============================================================ 5. BOUTONS — HIÉRARCHIE STRICTE À 3 NIVEAUX (H3.5) ------------------------------------------------------------ Silhouette RIGOUREUSEMENT identique entre primary et secondary : même radius, même padding, même height, même font-size/weight. Seule la « peau » diffère (fond plein vs bordure). ============================================================ */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: 54px; padding: 0 2rem; border-radius: var(--radius-btn); font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; } /* NIVEAU 1 — conversion (Contactez-nous, Échangeons directement) */ .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 8px 22px rgba(28, 89, 172, 0.26); } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: 0 12px 30px rgba(28, 89, 172, 0.34); transform: translateY(-2px); } /* NIVEAU 2 — action secondaire (Découvrir nos expertises) AFFORDANCE AU REPOS OBLIGATOIRE : bordure + fond visibles sans hover. */ .btn-secondary { background: var(--color-surface-alt); color: var(--color-primary); border-color: var(--color-primary); } .btn-secondary:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); transform: translateY(-2px); } /* Variante sur fond photo / bloc sombre : bordure OBLIGATOIRE + renforcement de lisibilité (fond semi-transparent + blur). */ .btn-secondary--onDark { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); } .btn-secondary--onDark:hover { background: #fff; color: var(--color-ink); border-color: #fff; } /* NIVEAU 3 — lien textuel interne */ .link-inline { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: all 0.2s ease; } .link-inline:hover { color: var(--color-primary-dark); gap: 0.6rem; } .link-inline svg { flex: 0 0 auto; } .link-inline--onDark { color: var(--color-accent); } .link-inline--onDark:hover { color: #fff; } /* ============================================================ 6. COMPOSANTS RÉCURRENTS ============================================================ */ /* --- Card générique --- */ .card { position: relative; background: #fff; border: 1px solid rgba(31, 50, 77, 0.09); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(28, 89, 172, 0.3); } /* Pastille d'icône SVG */ .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--color-surface-alt); color: var(--color-primary); flex: 0 0 auto; } /* --- Cadre photo signature : très arrondi, ombre portée douce --- */ .photo-frame { position: relative; overflow: hidden; border-radius: var(--radius-frame); box-shadow: 0 28px 60px rgba(31, 50, 77, 0.22); } .photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- Liste à puces : UN SEUL picto pour tout le site (chevron bleu) --- */ .tick-list { list-style: none; margin: 0; padding: 0; } .tick-list li { position: relative; padding-left: 1.9rem; margin-bottom: 0.85rem; color: var(--color-ink-soft); } .tick-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0; height: 0; border-left: 7px solid var(--color-primary); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tick-list--onDark li { color: rgba(255, 255, 255, 0.9); } .tick-list--onDark li::before { border-left-color: var(--color-accent); } /* --- Liste numérotée éditoriale (BLOC-03) --- */ .numbered-item { position: relative; padding-top: 1.6rem; border-top: 1px solid rgba(31, 50, 77, 0.13); transition: border-color 0.25s ease; } .numbered-item:hover { border-top-color: var(--color-primary); } .numbered-item__num { display: block; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-primary); margin-bottom: 0.7rem; } /* --- Chiffres clés --- */ .stat-value { font-family: var(--font-display); font-size: clamp(2.7rem, 5.4vw, 4rem); font-weight: 700; line-height: 1; color: #fff; letter-spacing: -0.03em; } .stat-prefix { display: block; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.45rem; } .stat-label { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); } /* ============================================================ 7. SIGNATURE — SCHÉMA DES 4 EXPERTISES ------------------------------------------------------------ Reconstruction HTML/CSS fidèle du schéma Canva du client (bandes alternées : plein bleu / contour pointillé bleu / plein navy / contour pointillé navy). Aucune capture d'écran. ============================================================ */ .xp-band { display: grid; grid-template-columns: 1fr; gap: 1.4rem; padding: 2.1rem 1.7rem; border-radius: var(--radius-card); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } /* Desktop : 2 colonnes. Le libellé « Voir le détail » se cale sous le titre dans la colonne de gauche ; la liste occupe toute la hauteur à droite. Sur mobile, l'ordre naturel du DOM suffit (titre → liste → lien). */ @media (min-width: 900px) { .xp-band { grid-template-columns: minmax(280px, 0.9fr) 1.35fr; grid-template-rows: auto auto; gap: 0.9rem 2.8rem; padding: 2.6rem 3rem; align-items: start; } .xp-band__head { grid-column: 1; grid-row: 1; } .xp-band__cue { grid-column: 1; grid-row: 2; margin-top: 0; } .xp-band__list { grid-column: 2; grid-row: 1 / span 2; align-self: center; } } .xp-band:hover { transform: translateX(6px); } /* Variante 1 & 3 — aplats pleins */ .xp-band--solidBlue { background: var(--color-primary); box-shadow: 0 14px 34px rgba(28, 89, 172, 0.22); } .xp-band--solidBlue:hover { box-shadow: 0 20px 44px rgba(28, 89, 172, 0.32); } .xp-band--solidNavy { background: var(--color-ink); box-shadow: 0 14px 34px rgba(31, 50, 77, 0.24); } .xp-band--solidNavy:hover { box-shadow: 0 20px 44px rgba(31, 50, 77, 0.34); } /* Variantes 2 & 4 — contour pointillé (fidèle au schéma client) */ .xp-band--dashedBlue { background: #fff; border: 2px dashed var(--color-primary); } .xp-band--dashedBlue:hover { background: #f2f7fe; } .xp-band--dashedNavy { background: #fff; border: 2px dashed var(--color-ink); } .xp-band--dashedNavy:hover { background: #f3f5f9; } .xp-band__index { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.35rem; } .xp-band__title { font-family: var(--font-display); font-size: clamp(1.28rem, 2.1vw, 1.6rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.018em; margin-bottom: 0.55rem; } .xp-band__tagline { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; line-height: 1.45; } .xp-band__list { list-style: none; margin: 0; padding: 0; } .xp-band__list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; font-size: 0.98rem; line-height: 1.5; } .xp-band__list li:last-child { margin-bottom: 0; } .xp-band__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; } /* Couleurs de texte par variante */ .xp-band--solidBlue .xp-band__index, .xp-band--solidNavy .xp-band__index { color: var(--color-accent); } .xp-band--solidBlue .xp-band__title, .xp-band--solidNavy .xp-band__title { color: #fff; } .xp-band--solidBlue .xp-band__tagline, .xp-band--solidNavy .xp-band__tagline { color: rgba(255, 255, 255, 0.78); } .xp-band--solidBlue .xp-band__list, .xp-band--solidNavy .xp-band__list { color: rgba(255, 255, 255, 0.93); } .xp-band--dashedBlue .xp-band__index { color: var(--color-primary); } .xp-band--dashedNavy .xp-band__index { color: var(--color-ink); } .xp-band--dashedBlue .xp-band__title, .xp-band--dashedNavy .xp-band__title { color: var(--color-ink); } .xp-band--dashedBlue .xp-band__tagline, .xp-band--dashedNavy .xp-band__tagline { color: var(--color-ink-muted); } .xp-band--dashedBlue .xp-band__list, .xp-band--dashedNavy .xp-band__list { color: var(--color-ink-soft); } /* Flèche « voir le détail » révélée au survol de la bande */ .xp-band__cue { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; opacity: 0.82; /* lisible au repos (WCAG AA) — se renforce au survol */ transition: opacity 0.25s ease, gap 0.25s ease; } .xp-band:hover .xp-band__cue { opacity: 1; gap: 0.75rem; } /* ============================================================ 8. FOOTER ============================================================ */ .site-footer { background-image: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-deep) 100%); color: rgba(255, 255, 255, 0.82); } .footer-logo { display: inline-block; } .footer-logo img { display: block; height: 56px; width: auto; object-fit: contain; max-width: 100%; } @media (max-width: 768px) { .footer-logo img { height: 44px; } } .footer-title { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1.15rem; } .footer-link { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color 0.2s ease; } .footer-link:hover { color: var(--color-accent); } .footer-meta { border-top: 1px solid rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; } .readyup-credit { font-size: 12px; color: rgba(255, 255, 255, 0.55); text-align: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .readyup-credit a { color: inherit; text-decoration: underline; } .readyup-credit a:hover { color: var(--color-accent); } .photo-credits { font-size: 12px; color: rgba(255, 255, 255, 0.5); } /* ============================================================ 9. ANIMATIONS & MICRO-INTERACTIONS ============================================================ */ .animate-on-scroll { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .animate-on-scroll.is-visible { opacity: 1; transform: none; } /* Stagger : décalage progressif des éléments d'un même groupe */ .stagger-1 { transition-delay: 0.08s; } .stagger-2 { transition-delay: 0.16s; } .stagger-3 { transition-delay: 0.24s; } .stagger-4 { transition-delay: 0.32s; } .stagger-5 { transition-delay: 0.40s; } .stagger-6 { transition-delay: 0.48s; } /* Entrée du hero au chargement */ @keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .hero-rise { opacity: 0; animation: riseIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-rise--1 { animation-delay: 0.05s; } .hero-rise--2 { animation-delay: 0.18s; } .hero-rise--3 { animation-delay: 0.31s; } .hero-rise--4 { animation-delay: 0.44s; } .hero-rise--5 { animation-delay: 0.57s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .animate-on-scroll { opacity: 1; transform: none; } .hero-rise { opacity: 1; animation: none; } } /* ============================================================ 10. FORMULAIRE (préparé pour la page Contact — Phase 2) ============================================================ */ .field-label { display: block; font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; color: var(--color-ink); margin-bottom: 0.45rem; } .field-input { width: 100%; padding: 0.95rem 1.15rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); background: #fff; border: 1px solid rgba(31, 50, 77, 0.2); border-radius: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(28, 89, 172, 0.14); } .field-input::placeholder { color: var(--color-ink-muted); } .form-success, .form-error { display: none; padding: 0.95rem 1.15rem; border-radius: 14px; font-size: 0.95rem; } .form-success.is-shown, .form-error.is-shown { display: block; } .form-success { background: rgba(28, 89, 172, 0.1); color: var(--color-primary-dark); border: 1px solid rgba(28, 89, 172, 0.3); } .form-error { background: rgba(178, 32, 42, 0.08); color: #96202a; border: 1px solid rgba(178, 32, 42, 0.3); } /* ============================================================ 11. LIGHTBOX GALERIE (préparée pour les pages internes) ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 5vh 5vw; background: rgba(22, 36, 58, 0.94); backdrop-filter: blur(6px); } .lightbox.is-open { display: flex; } .lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-card); } .lightbox__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: all 0.2s ease; } .lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); } .lightbox__close { top: 24px; right: 24px; } .lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); } /* ============================================================ 12. RESPONSIVE — AJUSTEMENTS AU-DELÀ DE TAILWIND ============================================================ */ @media (max-width: 640px) { body { font-size: 1rem; } .btn-primary, .btn-secondary { width: 100%; padding: 0 1.4rem; } .photo-frame { box-shadow: 0 16px 34px rgba(31, 50, 77, 0.18); } } /* ============================================================ 13. PAGE « NOS DOMAINES D'EXPERTISES » — COMPOSANTS D'INTÉGRATION ------------------------------------------------------------ Direction /ui-ux-pro-max : Enterprise Gateway (path selection, trust signals) × Editorial Grid / Magazine (grille asymétrique, numéros en filigrane, images en bleed, pull quotes). ⚠️ Ces composants n'utilisent QUE les tokens de la Phase 1 (couleurs, typos, radius). Aucun token nouveau, aucune surcharge d'une classe existante : la charte de l'Accueil reste intacte. ============================================================ */ /* --- 13.1 Cartes de sélection dans le hero (path selection) --- */ .path-card { display: block; padding: 1.35rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .path-card:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-3px); } .path-card__num { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: var(--color-accent); } .path-card__title { display: block; margin-top: 0.55rem; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.25; color: #fff; } .path-card__sub { display: block; margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); } /* --- 13.2 Rail d'index flottant + scrollspy (desktop ≥ 1280px) --- */ .rail { display: none; position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 40; opacity: 0; pointer-events: none; padding: 1rem 0.85rem; /* Panneau translucide : le rail flotte au-dessus de sections claires ET sombres — sans ce fond, les libellés en --color-ink deviennent illisibles sur la bande sombre du chapitre 03. */ background: rgba(247, 249, 252, 0.93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(31, 50, 77, 0.1); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: opacity 0.35s ease; } .rail.is-active { opacity: 1; pointer-events: auto; } /* Compact : seuls les numéros sont visibles en permanence, le libellé se déploie au survol. Le rail reste ainsi hors de la colonne de contenu (max-w-7xl = 1280px) et ne la chevauche jamais. */ @media (min-width: 1440px) { .rail { display: grid; grid-template-columns: 3px auto; gap: 0.85rem; } } .rail__track { position: relative; border-radius: 2px; background: rgba(31, 50, 77, 0.14); } .rail__progress { position: absolute; top: 0; left: 0; width: 100%; height: 0; border-radius: 2px; background: var(--color-primary); transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; } .rail__item { position: relative; display: block; text-decoration: none; cursor: pointer; opacity: 0.5; transition: opacity 0.25s ease; } .rail__item:hover { opacity: 1; } .rail__item.is-current { opacity: 1; } .rail__index { display: block; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; color: var(--color-primary); } /* Libellé déployé au survol / focus clavier — jamais dans le flux, pour que la largeur du rail reste constante. */ .rail__label { position: absolute; left: calc(100% + 0.9rem); top: 50%; transform: translateY(-50%) translateX(-6px); width: max-content; max-width: 190px; padding: 0.5rem 0.85rem; border-radius: 12px; background: var(--color-ink); color: #fff; font-family: var(--font-display); font-size: 0.76rem; font-weight: 500; line-height: 1.25; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .rail__item:hover .rail__label, .rail__item:focus-visible .rail__label { opacity: 1; transform: translateY(-50%) translateX(0); } /* --- 13.3 Barre d'index horizontale (< 1280px) --- */ .railbar { position: sticky; z-index: 30; top: 62px; border-bottom: 1px solid rgba(31, 50, 77, 0.1); background: rgba(247, 249, 252, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @media (min-width: 768px) { .railbar { top: 84px; } } @media (min-width: 1440px) { .railbar { display: none; } } .railbar__scroll { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding: 0.75rem 1.25rem; } .railbar__scroll::-webkit-scrollbar { display: none; } .railbar__item { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.5rem 1rem; border: 1px solid rgba(31, 50, 77, 0.16); border-radius: var(--radius-btn); font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; color: var(--color-ink-soft); text-decoration: none; white-space: nowrap; cursor: pointer; transition: all 0.2s ease; } .railbar__item span { font-size: 0.68rem; font-weight: 700; color: var(--color-primary); } .railbar__item.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .railbar__item.is-current span { color: rgba(255, 255, 255, 0.75); } /* --- 13.4 Chapitre : numéro en filigrane (drop cap éditorial) --- */ .chapter { position: relative; } .ghost-num { position: absolute; top: -0.32em; left: -0.06em; z-index: 0; font-family: var(--font-display); font-size: clamp(7rem, 15vw, 13rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--color-ink); opacity: 0.055; pointer-events: none; user-select: none; } .ghost-num--onDark { color: #fff; opacity: 0.07; } /* --- 13.5 Liste d'interventions numérotée (lecture verticale) --- Remplace l'ancienne grille en cases (peu lisible) : chaque item est sur sa propre ligne, numéro à gauche, texte à droite, séparés par un filet. Une seule colonne = lecture linéaire naturelle. */ .xp-list { list-style: none; margin: 0; padding: 0; } .xp-list__item { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 1.3rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid rgba(31, 50, 77, 0.12); transition: border-color 0.25s ease; } .xp-list__item:first-child { border-top: 0; } .xp-list__item:last-child { border-bottom: 1px solid rgba(31, 50, 77, 0.12); } /* Trait d'accent qui se révèle à gauche au survol */ .xp-list__item { position: relative; padding-left: 0.9rem; margin-left: -0.9rem; } .xp-list__item::before { content: ""; position: absolute; left: 0; top: 1.05rem; bottom: 1.05rem; width: 2px; background: var(--color-primary); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; } .xp-list__item:hover::before { transform: scaleY(1); } .xp-list__num { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-primary); font-variant-numeric: tabular-nums; } .xp-list__text { font-size: 1.02rem; line-height: 1.5; color: var(--color-ink-soft); } /* Variante sur fond sombre (chapitre 03) */ .xp-list--onDark .xp-list__item { border-color: rgba(255, 255, 255, 0.16); } .xp-list--onDark .xp-list__item:first-child { border-top: 0; } .xp-list--onDark .xp-list__item::before { background: var(--color-accent); } .xp-list--onDark .xp-list__num { color: var(--color-accent); } .xp-list--onDark .xp-list__text { color: rgba(255, 255, 255, 0.9); } /* --- 13.6 Carte « Exemple de mission » flottante (trust signal) --- */ .mission-note { position: relative; z-index: 2; display: block; padding: 1.45rem 1.6rem; border-radius: var(--radius-card); background: #fff; border: 1px solid rgba(31, 50, 77, 0.1); border-left: 4px solid var(--color-primary); box-shadow: var(--shadow-hover); } .mission-note__label { display: block; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary); } .mission-note__text { display: block; margin-top: 0.55rem; font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; line-height: 1.35; color: var(--color-ink); } .mission-note--onDark { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); border-left-color: var(--color-accent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; } .mission-note--onDark .mission-note__label { color: var(--color-accent); } .mission-note--onDark .mission-note__text { color: #fff; } /* La carte devient cliquable (lien vers le détail sur la page Références) */ a.mission-note--link { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } a.mission-note--link:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(31, 50, 77, 0.2); } a.mission-note--link.mission-note--onDark:hover { border-color: var(--color-accent); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3); } .mission-note--link .mission-note__text { display: inline-flex; align-items: baseline; } .mission-note--link .mission-note__text::after { content: "→"; margin-left: 0.5rem; color: var(--color-primary); transition: margin-left 0.2s ease; } .mission-note--link.mission-note--onDark .mission-note__text::after { color: var(--color-accent); } a.mission-note--link:hover .mission-note__text::after { margin-left: 0.8rem; } /* --- 13.7 Média en bleed (jusqu'au bord de l'écran) --- */ .media-bleed { position: relative; overflow: hidden; min-height: 340px; } @media (min-width: 1024px) { .media-bleed { min-height: 620px; } } /* Duo d'images décalées (chapitre 02) */ .media-duo { position: relative; } .media-duo__back { position: relative; overflow: hidden; border-radius: var(--radius-frame); box-shadow: 0 28px 60px rgba(31, 50, 77, 0.22); } .media-duo__front { position: absolute; right: -8%; bottom: -12%; width: 46%; overflow: hidden; border: 6px solid var(--color-surface); border-radius: var(--radius-card); box-shadow: 0 18px 40px rgba(31, 50, 77, 0.24); } .media-duo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Sous 1024px le duo occupe toute la largeur de la colonne : le débordement de la vignette doit rester inférieur au padding du conteneur (32px), sinon la page défile horizontalement. */ @media (max-width: 1023px) { .media-duo__front { right: -4%; bottom: -8%; width: 48%; } } @media (max-width: 640px) { .media-duo__front { right: -3%; bottom: -7%; width: 52%; border-width: 4px; } } /* --- 13.8 Pull quote éditoriale --- */ .pullquote { position: relative; padding-left: 1.6rem; border-left: 3px solid var(--color-accent); font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.015em; color: #fff; } /* Le