/* ============================================================ Nosy Conseils & Assurances — Site vitrine Page styles. Loads AFTER ../styles.css (tokens). Palette / density / headings variants are driven by data-attributes on (set by the Tweaks panel). ============================================================ */ /* ---- Page-level variables (charte by default) -------------- */ :root { --c-brand: var(--navy-700); --c-brand-strong: var(--navy-800); --c-brand-deep: var(--navy-900); --c-brand-soft: var(--navy-50); --c-accent: var(--gold-600); --c-accent-strong: var(--gold-700); --c-accent-soft: var(--gold-100); --c-accent-light: var(--gold-400); --c-paper: var(--ivory-300); --c-paper-alt: var(--ivory-400); --c-card: #ffffff; --c-hairline: var(--ivory-500); --c-ink: var(--ink-900); --c-ink-body: var(--ink-700); --c-ink-muted: var(--ink-500); --g-brand: var(--gradient-brand); --g-gold: var(--gradient-gold); --section-pad: clamp(3.5rem, 7vw, 6.5rem); } /* ---- Palette variant : draft doré (HTML collé) -------------- */ body[data-palette="draft"] { --c-brand: #0B1F3A; --c-brand-strong: #142C4E; --c-brand-deep: #081628; --c-brand-soft: #E8EDF5; --c-accent: #C9A84C; --c-accent-strong: #A88A35; --c-accent-soft: #F5EEDA; --c-accent-light: #D9BC6A; --c-paper: #F8F9FC; --c-paper-alt: #EFF2F7; --c-hairline: #E3E8EF; --c-ink: #14202E; --c-ink-body: #2C3B4C; --c-ink-muted: #5A6A7A; --g-brand: linear-gradient(155deg, #142C4E 0%, #0B1F3A 55%, #081628 100%); --g-gold: linear-gradient(90deg, #A88A35, #C9A84C 55%, #D9BC6A); } /* ---- Density variants --------------------------------------- */ body[data-density="compacte"] { --section-pad: clamp(2.5rem, 5vw, 4.25rem); } body[data-density="aeree"] { --section-pad: clamp(4.5rem, 9vw, 8.75rem); } /* ---- Headings variant : sans -------------------------------- */ body[data-headings="sans"] :is(h1, h2, h3, h4, .t-quote, .step-num, .counter-num, .wm) { font-family: var(--font-sans); letter-spacing: -0.02em; font-weight: 800; } body[data-headings="sans"] .hero-title { font-size: clamp(2.1rem, calc(1.3rem + 2.9vw), 3.4rem); } body[data-headings="sans"] .hero-b .hero-title { font-size: clamp(2.4rem, calc(1.4rem + 3.6vw), 4rem); } body[data-headings="sans"] h2 { font-size: clamp(1.5rem, calc(1.15rem + 1.3vw), 2.1rem); } body[data-headings="sans"] .hero-title em, body[data-headings="sans"] .t-quote { font-style: normal; } /* ============================================================ Base ============================================================ */ html { scroll-behavior: smooth; scroll-padding-top: 92px; } body { background: var(--c-paper); color: var(--c-ink-body); margin: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .container { max-width: var(--container-content); margin-inline: auto; padding-inline: var(--gutter); } ::selection { background: var(--c-accent-soft); color: var(--c-brand-deep); } a { color: inherit; text-decoration: none; } :is(a, button, summary, input, select, textarea):focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* Lucide sizing default */ .i { width: 1em; height: 1em; } /* ---- Eyebrow / kicker --------------------------------------- */ .kicker { display: flex; flex-direction: column; gap: 14px; } .kicker.centered { align-items: center; text-align: center; } .gold-rule { height: 2px; width: 64px; border: 0; margin: 0; background: var(--g-gold); border-radius: var(--radius-pill); } .eyebrow { color: var(--c-accent-strong); } .on-dark .eyebrow { color: var(--c-accent-light); } /* ---- Buttons ------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 0.9375rem; letter-spacing: var(--tracking-button); padding: 14px 26px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-fast) ease; } .btn:active { transform: translateY(1px); } .btn .i { width: 18px; height: 18px; } .btn-gold { background: var(--c-accent); color: var(--c-brand-deep); } .btn-gold:hover { background: var(--c-accent-strong); color: #ffffff; box-shadow: var(--shadow-gold); } .btn-navy { background: var(--c-brand); color: #ffffff; } .btn-navy:hover { background: var(--c-brand-strong); } .btn-ghost-light { border-color: rgba(255, 255, 255, 0.35); color: #ffffff; background: transparent; } .btn-ghost-light:hover { border-color: var(--c-accent); color: var(--c-accent-light); } .btn-sm { padding: 10px 20px; font-size: 0.875rem; } /* ---- Text links with gold underline reveal ------------------ */ .link-more { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-bold); font-size: 0.9375rem; color: var(--c-brand); background-image: var(--g-gold); background-repeat: no-repeat; background-position: left calc(100% - 0px); background-size: 0% 2px; padding-bottom: 3px; transition: background-size var(--duration-base) var(--ease-out), gap var(--duration-base) var(--ease-out); } .link-more:hover { background-size: 100% 2px; gap: 12px; } .link-more .i { width: 16px; height: 16px; } .on-dark .link-more { color: var(--c-accent-light); } /* ============================================================ Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-height); background: color-mix(in srgb, var(--c-paper) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-hairline); transition: box-shadow var(--duration-base) var(--ease-out); } .site-header.scrolled { box-shadow: var(--shadow-md); } .header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo-link { display: inline-flex; align-items: center; } .logo-link img { height: 50px; width: auto; display: block; } .main-nav { display: flex; align-items: center; gap: 34px; } .nav-link, .nav-drop > button { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: var(--weight-semibold); color: var(--c-ink-body); background: none; border: 0; padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background-image: var(--g-gold); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 2px; transition: background-size var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } :is(.nav-link, .nav-drop > button):hover { background-size: 100% 2px; color: var(--c-brand); } .nav-drop { position: relative; } .nav-drop .i { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-out); } .nav-drop:hover .i { transform: rotate(180deg); } .drop-wrap { position: absolute; top: 100%; left: -12px; padding-top: 14px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base); } .nav-drop:hover .drop-wrap, .nav-drop:focus-within .drop-wrap { opacity: 1; visibility: visible; transform: translateY(0); } .drop-card { min-width: 264px; background: var(--c-card); border: 1px solid var(--c-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 10px; display: flex; flex-direction: column; } .drop-card a { padding: 11px 14px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: var(--weight-medium); color: var(--c-ink-body); transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease; } .drop-card a:hover { background: var(--c-brand-soft); color: var(--c-brand); } .header-cta { display: flex; align-items: center; gap: 14px; } .menu-btn { display: none; background: none; border: 0; color: var(--c-brand); padding: 8px; cursor: pointer; } .menu-btn .i { width: 26px; height: 26px; } .mobile-menu { display: none; max-height: 0; overflow: hidden; background: var(--c-card); border-bottom: 1px solid var(--c-hairline); transition: max-height 0.35s var(--ease-out); } .mobile-menu.open { max-height: 480px; } .mobile-menu-in { display: flex; flex-direction: column; gap: 4px; padding-block: 16px 24px; } .mobile-menu a { padding: 12px 4px; font-weight: var(--weight-semibold); color: var(--c-ink-body); border-bottom: 1px solid var(--c-hairline); } .mobile-menu a:last-child { border-bottom: 0; } .mobile-menu .btn { margin-top: 10px; } @media (max-width: 1023px) { .main-nav { display: none; } .menu-btn { display: inline-flex; } .mobile-menu { display: block; position: sticky; top: var(--header-height); z-index: 49; } .header-cta .btn { display: none; } } /* ============================================================ Hero (3 variantes — body[data-hero] choisit laquelle vivre) ============================================================ */ .hero { display: none; background: var(--g-brand); color: rgba(255, 255, 255, 0.84); position: relative; overflow: hidden; } body[data-hero="editorial"] .hero-a { display: block; } body[data-hero="statement"] .hero-b { display: block; } body[data-hero="institutionnel"] .hero-c { display: block; } .hero-title { color: #ffffff; font-size: var(--text-display); line-height: var(--leading-tight); margin: 0; } .hero-title em { font-style: italic; color: var(--c-accent-light); } .hero-sub { font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 54ch; margin: 22px 0 0; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; } /* — A · Éditorial — */ .hero-a .hero-grid { display: grid; grid-template-columns: 55fr 45fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; padding-block: calc(var(--section-pad) * 1.05); } .hero-photo-wrap { position: relative; } .hero-photo-wrap image-slot { width: 100%; aspect-ratio: 720 / 560; display: block; } .hero-badge { position: absolute; left: -22px; bottom: -22px; background: rgba(2, 26, 61, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 18px 24px; } .hero-badge::before { content: ""; display: block; height: 2px; width: 36px; background: var(--g-gold); border-radius: var(--radius-pill); margin-bottom: 10px; } .hero-badge strong { display: block; color: #ffffff; font-size: 0.9375rem; } .hero-badge span { display: block; color: rgba(255, 255, 255, 0.62); font-size: 0.8125rem; margin-top: 3px; } /* — B · Statement — */ .hero-b .hero-center { max-width: 880px; margin-inline: auto; text-align: center; padding-block: calc(var(--section-pad) * 1.35); display: flex; flex-direction: column; align-items: center; } .hero-b .hero-title { font-size: var(--text-hero); } .hero-b .hero-sub { margin-inline: auto; } .hero-b .hero-ctas { justify-content: center; } .wm { position: absolute; font-family: var(--font-display); color: #ffffff; opacity: 0.05; pointer-events: none; user-select: none; line-height: 0.7; } .hero-b .wm { font-size: clamp(20rem, 40vw, 34rem); right: -0.08em; bottom: -0.18em; } /* — C · Institutionnel — */ .hero-c .hero-grid { display: grid; grid-template-columns: 58fr 42fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; padding-block: calc(var(--section-pad) * 1.05); } .fact-panel { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-xl); padding: 10px 30px; position: relative; overflow: hidden; } .fact-panel .wm { font-size: 13rem; right: -0.05em; top: -0.12em; } .fact { padding-block: 22px; } .fact + .fact { border-top: 1px solid rgba(255, 255, 255, 0.12); } .fact strong { display: block; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 1.5rem; color: #ffffff; letter-spacing: 0; } .fact span { display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); margin-top: 4px; } @media (max-width: 1023px) { .hero-a .hero-grid, .hero-c .hero-grid { grid-template-columns: 1fr; padding-block: var(--section-pad); } .hero-badge { left: 14px; bottom: 14px; } } /* ============================================================ Sections communes ============================================================ */ .section { padding-block: var(--section-pad); } .section-alt { background: var(--c-paper-alt); } .section-white { background: var(--gradient-paper); } .band-navy { background: var(--g-brand); color: rgba(255, 255, 255, 0.82); } .band-navy :is(h2, h3) { color: #ffffff; } .section-head { max-width: 720px; } .section-head h2 { font-size: var(--text-h1); margin: 0; } .section-head .lead { margin: 18px 0 0; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--c-ink-muted); } .band-navy .section-head .lead { color: rgba(255, 255, 255, 0.72); } .section-head.centered { margin-inline: auto; text-align: center; } .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } /* ---- Cards --------------------------------------------------- */ .card { background: var(--c-card); border: 1px solid var(--c-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 30px; position: relative; transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .card.lift:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .card-accent { border-top: 0; } .card-accent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--g-gold); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .icon-chip { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--c-brand-soft); color: var(--c-brand); display: grid; place-items: center; } .icon-chip .i { width: 22px; height: 22px; } .icon-chip.gold { background: var(--c-accent-soft); color: var(--c-accent-strong); } .card h3 { font-size: var(--text-h3); margin: 18px 0 0; } .card .body { margin: 10px 0 0; line-height: var(--leading-relaxed); color: var(--c-ink-muted); } .card .link-more { margin-top: 20px; } /* ---- Bénéfices (2 cartes sous le hero) ----------------------- */ .benefits { position: relative; z-index: 5; } .benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: -56px; padding-bottom: var(--section-pad); } .benefits-grid .card { box-shadow: var(--shadow-lg); } @media (max-width: 767px) { .benefits-grid { grid-template-columns: 1fr; margin-top: -36px; } } /* ---- Compteurs ------------------------------------------------ */ .counters { background: var(--c-brand-deep); padding-block: calc(var(--section-pad) * 0.72); } .counters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; text-align: center; } .counter-num { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: clamp(2.75rem, 4.5vw, 3.75rem); line-height: 1; color: var(--c-accent-light); } .counter-label { margin: 12px 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); line-height: var(--leading-snug); } @media (max-width: 767px) { .counters-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } } /* ---- Services -------------------------------------------------- */ .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; } .svc-tall { grid-row: span 2; display: flex; flex-direction: column; padding: 0; overflow: hidden; } .svc-tall image-slot { width: 100%; aspect-ratio: 700 / 400; display: block; } .svc-tall .svc-body { padding: 30px; display: flex; flex-direction: column; flex: 1; } .svc-tall .body { flex: 1; } .svc-wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: center; } .svc-wide image-slot { width: 100%; aspect-ratio: 420 / 280; display: block; } @media (max-width: 1023px) { .services-grid { grid-template-columns: 1fr; } .svc-tall { grid-row: auto; } .svc-wide { grid-column: auto; grid-template-columns: 1fr; } } /* ---- Méthode (5 étapes) ---------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 52px; counter-reset: step; } .step { background: var(--c-card); border: 1px solid var(--c-hairline); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-xs); } .step-num { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 2.4rem; line-height: 1; color: var(--c-accent); } .step p { margin: 14px 0 0; font-weight: var(--weight-semibold); color: var(--c-ink); line-height: var(--leading-snug); font-size: 0.9375rem; } @media (max-width: 1023px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 567px) { .steps { grid-template-columns: 1fr; } } /* ---- Expertise --------------------------------------------------- */ .expertise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } .expertise-grid image-slot { width: 100%; aspect-ratio: 680 / 520; display: block; } .check-list { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } .check-list li { display: flex; align-items: flex-start; gap: 14px; } .check-dot { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--c-accent-soft); color: var(--c-accent-strong); display: grid; place-items: center; margin-top: 1px; } .check-dot .i { width: 15px; height: 15px; } .check-list strong { color: var(--c-ink); } .check-list span { color: var(--c-ink-muted); } @media (max-width: 1023px) { .expertise-grid { grid-template-columns: 1fr; } } /* ---- Engagements (bande marine) ----------------------------------- */ .engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; } .engage-card { display: flex; align-items: flex-start; gap: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-lg); padding: 26px; } .engage-card .i { width: 24px; height: 24px; color: var(--c-accent-light); flex-shrink: 0; margin-top: 2px; } .engage-card p { margin: 0; color: rgba(255, 255, 255, 0.82); line-height: var(--leading-relaxed); font-size: 0.9375rem; } @media (max-width: 1023px) { .engage-grid { grid-template-columns: 1fr; } } /* ---- Témoignages ---------------------------------------------------- */ .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; } .testi { display: flex; flex-direction: column; margin: 0; } .stars { display: flex; gap: 3px; color: var(--c-accent); } .stars .i { width: 16px; height: 16px; fill: currentColor; } .t-quote { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-medium); font-size: 1.3125rem; line-height: 1.45; color: var(--c-ink); margin: 18px 0 0; flex: 1; } .t-who { display: flex; align-items: center; gap: 14px; margin-top: 24px; } .t-avatar { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--c-brand-soft); color: var(--c-brand); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.05rem; display: grid; place-items: center; letter-spacing: 0.02em; } .t-who strong { display: block; font-size: 0.9rem; color: var(--c-ink); } .t-who span { display: block; font-size: 0.8125rem; color: var(--c-ink-muted); margin-top: 2px; } @media (max-width: 1023px) { .testi-grid { grid-template-columns: 1fr; } } /* ---- CTA final -------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; text-align: center; } .cta-band .wm { font-size: clamp(16rem, 30vw, 26rem); right: -0.06em; bottom: -0.22em; } .cta-in { max-width: 760px; margin-inline: auto; position: relative; display: flex; flex-direction: column; align-items: center; } .cta-in h2 { font-size: var(--text-h1); } .cta-in .lead { margin: 18px 0 0; font-size: var(--text-lg); color: rgba(255, 255, 255, 0.75); line-height: var(--leading-relaxed); max-width: 50ch; } .cta-in .btn { margin-top: 36px; } .cta-note { margin: 18px 0 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); } /* ---- FAQ ---------------------------------------------------------------- */ .faq-wrap { max-width: var(--container-md); margin-inline: auto; } .faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 44px; } .faq-item { background: var(--c-card); border: 1px solid var(--c-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; font-weight: var(--weight-bold); color: var(--c-ink); font-size: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .i { width: 20px; height: 20px; color: var(--c-accent-strong); flex-shrink: 0; transition: transform var(--duration-base) var(--ease-out); } .faq-item[open] summary .i { transform: rotate(45deg); } .faq-item .answer { padding: 0 26px 24px; margin: 0; line-height: var(--leading-relaxed); color: var(--c-ink-muted); max-width: 65ch; } /* ---- Footer --------------------------------------------------------------- */ .site-footer { background: var(--c-brand-deep); color: rgba(255, 255, 255, 0.68); padding-block: calc(var(--section-pad) * 0.9) 36px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } .footer-logo img { height: 80px; width: auto; display: block; } .footer-pitch { margin: 20px 0 0; font-size: 0.9rem; line-height: var(--leading-relaxed); max-width: 36ch; } .footer-social { display: flex; gap: 14px; margin-top: 24px; } .footer-social a { width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center; color: rgba(255, 255, 255, 0.75); transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } .footer-social a:hover { border-color: var(--c-accent); color: var(--c-accent-light); } .footer-social .i { width: 17px; height: 17px; } .footer-col h4 { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-accent-light); margin: 0 0 18px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer-col a { font-size: 0.9rem; transition: color var(--duration-fast) ease; } .footer-col a:hover { color: var(--c-accent-light); } .footer-col li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; } .footer-col .i { width: 16px; height: 16px; color: var(--c-accent); flex-shrink: 0; } .footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 52px; padding-top: 26px; } .footer-legal p { margin: 0; font-size: var(--text-2xs); line-height: 1.7; color: rgba(255, 255, 255, 0.45); max-width: 110ch; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; font-size: var(--text-xs); } .footer-bottom a:hover { color: var(--c-accent-light); } .footer-bottom span { color: rgba(255, 255, 255, 0.35); } @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } } /* ---- image-slot empty state → panneau marine premium ----------------------- */ image-slot { border-radius: var(--radius-xl); overflow: hidden; height: auto; } image-slot::part(frame) { background: var(--g-brand); border-radius: var(--radius-xl); } image-slot::part(empty) { color: var(--c-accent-light); } image-slot::part(ring) { border-color: color-mix(in srgb, var(--c-accent) 40%, transparent); } /* ---- Reveal on scroll -------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal[data-d="1"] { transition-delay: 0.08s; } .reveal[data-d="2"] { transition-delay: 0.16s; } .reveal[data-d="3"] { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Hero title font safeguard (variantes hero-b/c en

) */ .hero-title { font-family: var(--font-display); font-weight: var(--weight-display); }