/* ========================================================================== Sections spécifiques : header, hero, bandeaux, footer ========================================================================== */ /* ---------------- Header ---------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: transform var(--dur) var(--ease-out); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); height: var(--header-h); margin-inline: auto; max-width: var(--container-wide); padding-inline: var(--gutter); transition: all var(--dur) var(--ease-out); } /* état "scrolled" : pilule flottante crème */ .site-header.is-scrolled .site-header__inner { margin-top: 0.6rem; max-width: calc(var(--container) + 2rem); height: 60px; background: color-mix(in srgb, var(--cream) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-m); padding-inline: 1.25rem 0.75rem; } .site-header.is-hidden { transform: translateY(-110%); } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; } .brand img { height: 40px; width: auto; transition: height var(--dur) var(--ease-out); } .is-scrolled .brand img { height: 32px; } .brand__text { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--teal-700); letter-spacing: -.01em; transition: color var(--dur) var(--ease-out); } /* Contraste du header AVANT le scroll (barre transparente posée sur le hero) : par défaut on suppose un hero sombre (logo/nav clairs). La classe .hero-cream sur (cf. idc_hero_variant() / inc/setup.php) inverse ces couleurs pour les pages dont le hero est clair — logique globale, jamais un correctif par page. Une fois .is-scrolled ajouté (pilule crème), le contraste redevient uniforme sur toutes les pages (règles existantes plus bas, inchangées). */ .site-header:not(.is-scrolled) .brand__text { color: var(--cream); } body.hero-cream .site-header:not(.is-scrolled) .brand__text { color: var(--teal-700); } /* nav sur fond hero sombre → texte clair par défaut */ .main-nav { display: none; } @media (min-width: 1000px) { .main-nav { display: flex; align-items: center; gap: 1.75rem; } } .main-nav a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--cream); position: relative; padding: .25rem 0; transition: color var(--dur-fast) var(--ease-out); } body.hero-cream .site-header:not(.is-scrolled) .main-nav a { color: var(--ink); } .main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); } .is-scrolled .main-nav a { color: var(--ink); } .header-cta { flex: none; } @media (max-width: 999px) { .header-cta { display: none; } } /* CTA repris dans le menu mobile */ .is-scrolled .main-nav a:hover { color: var(--gold-deep); } /* burger mobile */ .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; } @media (min-width: 1000px) { .nav-toggle { display: none; } } .nav-toggle span { height: 2px; background: var(--cream); border-radius: 2px; transition: all var(--dur) var(--ease-out); } body.hero-cream .site-header:not(.is-scrolled) .nav-toggle span { background: var(--ink); } .is-scrolled .nav-toggle span { background: var(--ink); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* menu mobile plein écran */ .mobile-nav { position: fixed; inset: 0; z-index: 90; background: var(--teal-900); color: var(--cream); display: grid; align-content: center; gap: 0.5rem; padding: 6rem var(--gutter) 3rem; transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-in-out); visibility: hidden; } .mobile-nav.is-open { transform: translateY(0); visibility: visible; } .mobile-nav a { color: var(--cream); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.8rem,7vw,2.6rem); padding: .4rem 0; border-bottom: 1px solid var(--line-dark); } .mobile-nav a:hover { color: var(--gold); } .mobile-nav .btn { margin-top: var(--space-l); justify-self: stretch; --btn-bg: var(--gold); --btn-fg: var(--ink); justify-content: center; } .mobile-nav .btn::before { background: var(--cream); } .mobile-nav .btn:hover { color: var(--ink); } /* ---------------- Hero ---------------- */ .hero { position: relative; background: radial-gradient(120% 80% at 85% 10%, color-mix(in srgb, var(--teal-700) 55%, transparent), transparent 60%), var(--teal-900); color: var(--cream); min-height: min(94vh, 940px); display: flex; align-items: center; padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(3rem, 6vw, 6rem); overflow: hidden; } .hero__grid { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; width: 100%; } @media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } } .hero__eyebrow { color: var(--gold); } .hero h1 { color: var(--cream); font-size: var(--fs-display); font-weight: 400; line-height: 1.07; letter-spacing: -0.015em; margin-top: var(--space-m); text-wrap: balance; } .hero h1 em { font-style: italic; color: var(--gold); } .hero__lead { margin-top: var(--space-m); font-size: var(--fs-lead); color: color-mix(in srgb, var(--cream) 84%, transparent); max-width: 34ch; } .hero__actions { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; } .hero__note { margin-top: var(--space-m); font-size: .9rem; color: color-mix(in srgb, var(--cream) 65%, transparent); display: flex; align-items: center; gap: .5rem; } .hero__media { position: relative; } .hero__media .frame { aspect-ratio: 4/5; box-shadow: var(--shadow-l); } .hero__media .frame img { filter: saturate(1.02); } /* petit cartouche flottant sur l'image */ .hero__badge { position: absolute; left: -1.25rem; bottom: 1.5rem; background: var(--cream); color: var(--ink); border-radius: var(--r-m); padding: .9rem 1.15rem; box-shadow: var(--shadow-l); max-width: 15rem; display: flex; gap: .75rem; align-items: center; } .hero__badge b { color: var(--teal-700); font-family: var(--font-display); } @media (max-width: 520px){ .hero__badge{ left: .5rem; } } /* halo décoratif */ .hero::before { content: ""; position: absolute; z-index: 0; width: 60vmax; height: 60vmax; right: -20vmax; top: -20vmax; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%); pointer-events: none; } .hero > .container { position: relative; z-index: 1; } /* Grain filmique (profondeur) sur les fonds sombres */ .hero::after, .section--teal::after, .site-footer::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: 0.045; mix-blend-mode: overlay; } .section--teal { position: relative; } .section--teal > .container, .site-footer > .container { position: relative; z-index: 1; } .hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); color: color-mix(in srgb,var(--cream) 55%, transparent); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:1; } .hero__scroll::after { content:""; width:1px; height:2.25rem; background:linear-gradient(var(--gold), transparent); animation: scrollcue 2.2s var(--ease-in-out) infinite; } @keyframes scrollcue { 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } } @media (prefers-reduced-motion: reduce){ .hero__scroll::after{ animation:none } } @media (max-width: 600px) { .hero { padding-top: calc(var(--header-h) + 1.25rem); padding-bottom: 3rem; } .hero h1 { font-size: clamp(2.3rem, 8.5vw, 3rem); margin-top: var(--space-s); } .hero__lead { margin-top: var(--space-s); } .hero__scroll { display: none; } .hero__badge { position: static; margin-top: var(--space-m); max-width: none; } } /* ---------------- Manifeste (bande immersive) ---------------- */ .manifesto { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); } .manifesto p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 1.05rem + 3.1vw, 3.15rem); line-height: 1.24; max-width: 20ch; letter-spacing: -0.01em; text-wrap: balance; } .manifesto.section--teal p { color: var(--cream); } .manifesto em, .manifesto b { color: var(--gold); font-style: italic; font-weight: 400; } /* ---------------- Bande CTA ---------------- */ .cta-band { text-align: center; } .cta-band__title { font-size: var(--fs-h1); max-width: 20ch; margin-inline: auto; } .cta-band__text { margin: var(--space-m) auto 0; max-width: 46ch; } .cta-band__actions { margin-top: var(--space-l); display: flex; gap: var(--space-s); justify-content: center; flex-wrap: wrap; } /* ---------------- Footer ---------------- */ .site-footer { background: var(--teal-900); color: color-mix(in srgb, var(--cream) 80%, transparent); } .site-footer a { color: color-mix(in srgb, var(--cream) 80%, transparent); text-decoration: none; } .site-footer a:hover { color: var(--gold); } .footer__grid { display: grid; gap: var(--space-l); padding-block: var(--space-2xl) var(--space-l); } @media (min-width: 760px){ .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer__brand .brand__text { color: var(--cream); } .footer__tagline { margin-top: var(--space-s); max-width: 32ch; color: color-mix(in srgb, var(--cream) 70%, transparent); } .footer__title { font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-small); color: var(--gold); margin-bottom: var(--space-s); } .footer__nav { display: grid; gap: .55rem; } .footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); justify-content: space-between; align-items: center; padding-block: var(--space-m); border-top: 1px solid var(--line-dark); font-size: .85rem; } .footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-m); }