/* ============================================================ 02 — LAYOUT Structure commune à toutes les pages : en-tête/navigation, pied de page, gabarit générique de section. Ce fichier ne contient aucun style propre à une page en particulier. ============================================================ */ /* ---------- NAV ---------- Invisible et inerte au chargement — n'apparaît qu'au scroll, pour laisser le hero plein écran respirer sans rien au-dessus. La classe .scrolled (ajoutée par js/main.js) la fait apparaître avec un fond opaque. Sur une page sans bandeau sombre (ex. 404), .scrolled est appliquée dès le chargement — la nav y est visible immédiatement. */ header.site{ position:fixed; top:-100px; left:0; right:0; z-index:100; background:rgba(0,15,159,0.94); /* var(--ink) — pas de rgba() sur une custom property */ backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--ink-line); box-shadow:0 12px 32px -16px rgba(0,0,0,0.4); opacity:0; /* On anime `top` plutôt qu'un transform:translateY() : un transform sur cet ancêtre créerait un nouveau bloc englobant pour son descendant position:fixed (le panneau nav.links plein écran côté mobile), qui se retrouverait alors confiné à la petite boîte du header (~76px) au lieu de couvrir tout le viewport. `top` produit le même glissement sans cet effet de bord. Courbe cubic-bezier "decel" (même famille que la révélation de l'empreinte) pour une arrivée franche puis un ralenti en douceur — plus premium qu'un ease générique. */ transition:top .6s cubic-bezier(.16,.7,.2,1), opacity .5s ease; will-change:top; } header.site.scrolled{ top:0; opacity:1; } .nav{ display:flex; align-items:center; justify-content:space-between; height:76px; } .wordmark{ display:flex; align-items:center; } /* Lockup officiel (icône + mot-symbole + "Print your ID"), fichier unique de la charte plutôt qu'une composition manuelle en CSS — proportions et espacement garantis fidèles à assets/logo/. */ .wordmark-logo{ height:60px; width:auto; display:block; } nav.links{ display:flex; align-items:center; gap:38px; } /* :not(.btn) — le bouton "Discuter du projet" est aussi un dans ce menu, mais c'est un bouton plein (.btn-brass), pas un lien de nav : il ne doit ni hériter de cette couleur claire (qui écrasait son texte indigo par du blanc sur blanc), ni du soulignement. */ nav.links a:not(.btn){ font-size:13.5px; color:var(--text-light-dim); letter-spacing:0.02em; position:relative; padding:6px 0; transition:color .25s ease; } nav.links a:not(.btn):hover, nav.links a:not(.btn)[aria-current="page"]{ color:var(--text-light); } nav.links a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--indigo-lt); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } nav.links a:not(.btn):hover::after, nav.links a:not(.btn)[aria-current="page"]::after{ transform:scaleX(1); } .menu-toggle{ display:none; background:none; border:none; cursor:pointer; width:32px; height:24px; position:relative; } .menu-toggle span{ position:absolute; left:0; right:0; height:1.5px; background:var(--text-light); transition:transform .3s ease, opacity .3s ease; } .menu-toggle span:nth-child(1){ top:2px; } .menu-toggle span:nth-child(2){ top:11px; } .menu-toggle span:nth-child(3){ top:20px; } .menu-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); } .menu-toggle.open span:nth-child(2){ opacity:0; } .menu-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); } /* ---------- GABARIT DE SECTION ---------- */ section{ position:relative; } .section-pad{ padding:120px 0; } .section-pad-sm{ padding:80px 0; } .section-head{ max-width:640px; margin-bottom:64px; } .section-head .eyebrow{ color:var(--indigo); margin-bottom:20px; } .section-head h2{ font-size:clamp(28px, 3.4vw, 42px); color:var(--text-dark); line-height:1.16; } .section-head p{ margin-top:20px; color:var(--text-dim); font-size:16px; max-width:52ch; } /* Variante sur fond indigo (ex. section Services) */ .section-head.on-dark h2{ color:var(--text-light); } .section-head.on-dark .eyebrow{ color:var(--indigo-lt); } .section-head.on-dark p{ color:var(--text-light-dim); } /* Pied de section — renvoie vers la page/section suivante du parcours */ .section-foot{ margin-top:56px; } /* ---------- FOOTER ---------- Bloc de clôture complet (logo, nav, contact) au-dessus d'une barre fine (copyright, légal) — avant, le footer entier tenait dans cette seule barre, en net retrait par rapport au reste du site. */ footer{ background:var(--ink); border-top:1px solid var(--ink-line); position:relative; overflow:hidden; } /* Même correctif que .hero .hero-content, .pillars > .container etc. : ignore le plafond de 1180px du .container partagé. */ footer > .container{ max-width:none; width:100%; margin-left:0; margin-right:0; padding-left:var(--edge); padding-right:var(--edge); box-sizing:border-box; } /* Repositionnée en haut à droite, derrière la bande CTA : le grand wordmark (.footer-wordmark-wrap) devient la signature du bas, la petite empreinte ne doit plus lui disputer ce rôle. */ footer .fp-watermark{ width:460px; height:460px; top:-140px; right:-120px; bottom:auto; animation:footer-fingerprint-breathe 8.5s cubic-bezier(.45,0,.55,1) infinite; } /* Défini ici (fichier chargé sur les 8 pages) plutôt que de réutiliser le keyframe du hero, propre à 06-home.css et absent ailleurs. */ @keyframes footer-fingerprint-breathe{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } /* ---------- BANDE CTA ---------- Premier bloc du footer : accroche + double appel à l'action (WhatsApp, email). Fait le pont entre le contenu de page et le bloc coordonnées. */ .footer-cta{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:48px; flex-wrap:wrap; padding:88px 0 48px; } .footer-cta-text{ width:100%; max-width:560px; } .footer-cta-text .eyebrow{ margin-bottom:20px; } .footer-cta-text h2{ font-size:clamp(30px, 3.6vw, 48px); line-height:1.14; color:var(--text-light); } .footer-cta-text h2 em{ font-style:italic; color:var(--indigo-lt); font-weight:500; } .footer-cta-text p{ margin-top:18px; color:var(--text-light-dim); font-size:15px; max-width:44ch; } .footer-cta-action{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; text-align:right; } .footer-cta-action .btn{ white-space:nowrap; } .footer-cta-email{ font-size:14px; color:var(--text-light-dim); transition:color .25s ease; } .footer-cta-email:hover{ color:var(--text-light); } .footer-divider{ position:relative; z-index:1; height:1px; background:var(--ink-line); padding:0 !important; /* .container en hérite, mais c'est une ligne, pas une boîte */ } .footer-main{ position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px; padding:56px 0 48px; } /* Révélation en cascade (voir js/main.js : la classe .in est posée sur