/** * navbar.css — Navigation principale * Fidèle au design file site-ilios.css * * Structure : grid 3 colonnes [logo] [liens centrés] [bouton] * Padding : 32px 56px (desktop) * Fixe : oui (WordPress) → fond vert opaque au scroll */ /* ── Wrapper fixe ─────────────────────────────────── */ .site-header { position: fixed; top: 20px; left: 0; right: 0; z-index: 100; transition: background-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), top var(--duration-base) var(--ease), padding var(--duration-base) var(--ease); } /* Au scroll : remonte tout en haut */ .site-header.scrolled { top: 0; } /* ── Barre admin WordPress (quand connecté) ───────── */ /* WordPress ajoute class="admin-bar" sur et une barre noire fixe de 32px (desktop) / 46px (mobile < 782px). On décale la navbar pour ne pas la chevaucher. */ .admin-bar .site-header { top: calc(20px + 32px); } .admin-bar .site-header.scrolled { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: calc(20px + 46px); } .admin-bar .site-header.scrolled { top: 46px; } } /* ── Homepage : transparent flottant → vert au scroll ── */ .site-header.is-homepage { background: transparent; } .site-header.is-homepage.scrolled { background: var(--c-hero); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); } /* ── Pages intérieures : fond crème, sticky ── */ .site-header.is-inner { position: sticky; top: 0; background: var(--c-cream); } /* Ombre légère quand la nav est collée au bord */ .site-header.is-inner.scrolled { box-shadow: 0 1px 0 var(--c-line); } /* Décalage barre admin WordPress */ .admin-bar .site-header.is-inner { top: 32px; } .admin-bar .site-header.is-inner.scrolled { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header.is-inner { top: 46px; } /* Menu ouvert : décaler sous la barre admin mobile (46px) */ .admin-bar .site-header.menu-open { top: 46px !important; } } /* ── Grille interne ───────────────────────────────── */ .header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 16px var(--nav-pad-x); gap: 64px; max-width: var(--container-max); margin: 0 auto; transition: padding var(--duration-base) var(--ease); } /* Shrink au scroll */ .site-header.scrolled .header-inner { padding-top: 12px; padding-bottom: 12px; } /* ── Logo ─────────────────────────────────────────── */ .site-logo { text-decoration: none; display: inline-flex; align-items: center; transition: opacity var(--duration-fast) var(--ease); flex-shrink: 0; } .site-logo:hover { opacity: 0.75; } /* SVG logo — taille naturelle du fichier Figma (viewBox 134×24) */ .site-logo__svg { height: 24px; width: auto; display: block; } /* Homepage (fond vert) : "i" vert accent, texte crème */ .site-logo__svg .logo-i { fill: var(--c-accent); } .site-logo__svg .logo-text { fill: #F0E6CF; } /* Pages intérieures (fond crème) : "i" vert primaire, texte foncé */ .is-inner .site-logo__svg .logo-i { fill: var(--c-primary); } .is-inner .site-logo__svg .logo-text { fill: var(--c-hero-deep); } /* ── Liens nav ────────────────────────────────────── */ .site-nav { display: flex; gap: 42px; justify-self: center; align-items: center; } .nav-links { display: flex; gap: 42px; align-items: center; } .nav-links a { font-family: var(--f-sans); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.78); text-decoration: none; letter-spacing: 0.01em; position: relative; padding: 8px 0; transition: color var(--duration-fast) var(--ease); } /* Soulignement animé */ .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .nav-links a:hover { color: #fff; } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a[aria-current="page"] { color: #fff; } .nav-links a[aria-current="page"]::after { transform: scaleX(1); } /* Mode pages intérieures */ .is-inner .nav-links a { color: var(--c-mute); } .is-inner .nav-links a::after { background: var(--c-primary); } .is-inner .nav-links a:hover, .is-inner .nav-links a[aria-current="page"] { color: var(--c-hero-deep); } /* ── Bouton "Me contacter" ────────────────────────── */ .nav-cta { font-family: var(--f-sans); font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; padding: 11px 22px; border: 0.5px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-btn); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); } .nav-cta:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.65); } /* Mode pages intérieures */ .is-inner .nav-cta { color: var(--c-hero-deep); border-color: rgba(20, 60, 44, 0.28); } .is-inner .nav-cta:hover { background: var(--c-hero-deep); color: #fff; border-color: var(--c-hero-deep); } /* ── Numéros de menu (mobile uniquement) ─────────── */ .nav-num { display: none; /* masqué partout sauf dans le menu mobile ouvert */ } /* ── Footer mobile (CTA + réseaux) ───────────────── */ .nav-mobile-footer { display: none; } /* ── Hamburger (mobile) ───────────────────────────── */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; flex-shrink: 0; } .nav-toggle__bar { display: block; width: 22px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease); } .is-inner .nav-toggle__bar { background: var(--c-ink); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── Responsive ───────────────────────────────────── */ @media (max-width: 1024px) { .header-inner { padding: 8px 32px; gap: 32px; } } @media (max-width: 768px) { /* ── Navbar fixed en haut sur mobile — toutes les pages ── */ .site-header, .site-header.is-inner { position: fixed !important; top: 0 !important; } .admin-bar .site-header, .admin-bar .site-header.is-inner { top: 46px !important; } /* La barre admin WP est en position:absolute sous 782px → elle défile hors écran. Une fois scrollé, on colle la navbar tout en haut pour éviter le vide de 46px laissé par la barre admin disparue. */ .admin-bar .site-header.scrolled, .admin-bar .site-header.is-inner.scrolled { top: 0 !important; } /* Compensation hauteur navbar pour les pages intérieures (.is-inner était sticky = dans le flux ; fixed = hors flux) */ body:not(.home) { padding-top: 56px; } body.admin-bar:not(.home) { padding-top: 102px; /* 56px navbar + 46px admin bar */ } /* ── Header inner : flex au lieu de grid sur mobile ── */ .header-inner { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; gap: 0; } /* ── Éléments desktop cachés ───────────────────── */ .nav-toggle { display: flex; } .nav-links { display: none; } .nav-cta { display: none; } /* Le nav est invisible par défaut sur mobile */ .site-header .site-nav { display: none; } /* ───────────────────────────────────────────────── MENU OUVERT — overlay plein écran ───────────────────────────────────────────────── */ /* Header : devient le conteneur plein écran */ .site-header.menu-open { position: fixed !important; inset: 0 !important; background: var(--c-hero) !important; z-index: 200; overflow: hidden; } /* Texture nervures décorative sur tout l'overlay. z-index négatif : au-dessus du fond vert mais derrière le contenu. (NE PAS rendre .header-inner positionné : le