@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Serif+Display&display=swap');

/* ===== CUSTOM PROPERTIES ===== */
:root {
  --navy: #0f2744;
  --navy-light: #1a3a5c;
  --accent: #2563a6;
  --accent-hover: #1d4e85;
  --accent-glow: rgba(37, 99, 166, 0.25);
  --text: #2d3748;
  --text-light: #64748b;
  --bg: #f8fafc;
  --white: #ffffff;
  --card-border: rgba(0, 0, 0, 0.06);
  --header-bg: rgba(255, 255, 255, 0.85);
  --header-border: rgba(0, 0, 0, 0.06);
  --input-bg: rgba(0, 0, 0, 0.04);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1);
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Map elen's tokens to the shared gateka-core connect modal so its
     inputs/card pick up the light theme instead of the dark fallbacks
     baked into connect.css. */
  --gk-bg:          var(--white);
  --gk-bg-surface:  var(--white);
  --gk-text:        var(--text);
  --gk-text-muted:  var(--text-light);
  --gk-border:      var(--card-border);
  --gk-primary:     var(--accent);
  --gk-accent:      var(--accent);
  --gk-radius:      var(--radius-sm);
  --gk-font:        'Inter', -apple-system, system-ui, sans-serif;
}

[data-theme="dark"] {
  --navy: #e2e8f0;
  --navy-light: #94a3b8;
  --text: #e2e8f0;
  --text-light: #94a3b8;
  --bg: #0c1220;
  --white: #141e30;
  --card-border: rgba(255, 255, 255, 0.06);
  --header-bg: rgba(12, 18, 32, 0.88);
  --header-border: rgba(255, 255, 255, 0.06);
  --input-bg: rgba(255, 255, 255, 0.06);
  --shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

ul { list-style: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== LANG SWITCH FADE ===== */
body.lang-switching > *:not(.header) {
  opacity: 0.3 !important;
  filter: blur(3px) !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

body.lang-fadein > *:not(.header) {
  animation: langFadeIn 0.35s ease forwards;
}

@keyframes langFadeIn {
  from { opacity: 0.3; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
  transition: var(--transition);
}

.header.scrolled {
  box-shadow: var(--shadow);
}

.header-inner {
  display: grid;
  /* Three equal zones across the full viewport: logo (centered), nav
     (centered), actions (right-aligned). */
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 16px 32px;
  transition: padding var(--transition);
}
.header-inner > .header-logo { justify-self: center; }
/* Flatten .header-right so its children participate in header-inner's
   grid — nav and actions act as direct grid items. */
.header-inner > .header-right { display: contents; }
.header-inner > .header-right > nav { justify-self: center; }

.header.scrolled .header-inner {
  padding: 10px 32px;
}

.header-logo img {
  height: 38px;
  width: auto;
  transition: var(--transition);
}

.header-logo .logo-dark { display: none; }

[data-theme="dark"] .header-logo .logo-light { display: none; }
[data-theme="dark"] .header-logo .logo-dark { display: block; }

/* Right-aligned cluster: lang / theme / auth pill sit tight together. */
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-list {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-list a {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  transition: var(--transition);
  position: relative;
}

.nav-list a:hover {
  color: var(--accent);
  background: rgba(232, 168, 56, 0.08);
}

.nav-list a.active {
  color: var(--accent);
  background: rgba(232, 168, 56, 0.1);
}

.nav-separator {
  width: 1px;
  height: 20px;
  background: var(--card-border);
  align-self: center;
  margin: 0 4px;
}

.lang-toggle {
  position: relative;
  display: flex;
  align-items: center;
  padding: 3px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 100px;
  cursor: pointer;
  gap: 0;
  font-family: 'Inter', sans-serif;
}

.lang-option {
  position: relative;
  z-index: 1;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-light);
  transition: color var(--transition);
  user-select: none;
}

.lang-option--active {
  color: #fff;
}

.lang-slider {
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--accent);
  border-radius: 100px;
  transition: transform var(--transition);
  pointer-events: none;
}

.lang-toggle[data-lang="en"] .lang-slider {
  transform: translateX(100%);
}

.lang-toggle[data-lang="en"] #langFr {
  color: var(--text-light);
}

.lang-toggle[data-lang="en"] #langEn {
  color: #fff;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;
  transition: var(--transition);
}

.mobile-toggle:hover {
  background: var(--input-bg);
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: url('/static/images/image.jpg') center center / cover no-repeat;
  background-attachment: fixed;
  margin-top: 70px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 39, 68, 0.88) 0%, rgba(15, 39, 68, 0.6) 50%, rgba(232, 168, 56, 0.15) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px;
  width: 100%;
}

/* Home hero */
.hero-home .hero-content {
  display: flex;
  gap: 60px;
  align-items: center;
}

.hero-title-block {
  flex: 1;
}

.hero-title-block h1 {
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
}

.hero-title-block h1 span {
  display: block;
  color: var(--accent);
}

.hero-tagline {
  display: inline-block;
  margin-top: 24px;
  padding: 8px 20px;
  background: rgba(232, 168, 56, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 168, 56, 0.3);
  border-radius: 100px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.hero-desc-block {
  flex: 1;
}

.hero-desc-block p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  line-height: 1.85;
  margin-bottom: 20px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 32px;
  background: var(--accent);
  color: #fff;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(232, 168, 56, 0.35);
}

.hero-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232, 168, 56, 0.45);
}

.hero-cta svg {
  transition: transform var(--transition);
}

.hero-cta:hover svg {
  transform: translateX(4px);
}

/* Page hero (services, expertise, blog) */
.hero-page {
  min-height: 50vh;
  justify-content: center;
  text-align: center;
}

.hero-page .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-page h1 {
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.hero-page .hero-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  margin-top: 16px;
  max-width: 500px;
}

.hero-page h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 20px auto 0;
  border-radius: 3px;
}

/* ===== SECTION HELPERS ===== */
.section {
  padding: 100px 32px;
}

.section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 48px;
  letter-spacing: -0.3px;
}

.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin-top: 12px;
  border-radius: 3px;
}

.section-title.center {
  text-align: center;
}

.section-title.center::after {
  margin-left: auto;
  margin-right: auto;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ===== HOME: MISSION ===== */
.mission {
  display: flex;
  min-height: 500px;
  overflow: hidden;
  border-radius: 0;
}

.mission-text {
  flex: 1;
  background: var(--navy);
  color: #fff;
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mission-text .section-title {
  color: #fff;
}

.mission-text p {
  font-size: 1rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.8);
}

.mission-image {
  flex: 1;
  background: url('/static/images/visite-de-prévention-des-risques.jpg') center center / cover no-repeat;
  min-height: 400px;
  position: relative;
}

.mission-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--navy), transparent 30%);
}

/* ===== HOME: STATS ===== */
.stats {
  padding: 0;
  position: relative;
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1280px;
  margin: -50px auto 0;
  position: relative;
  z-index: 2;
  padding: 0 32px;
}

.stat-item {
  text-align: center;
  padding: 48px 24px;
  background: var(--white);
  border: 1px solid var(--card-border);
  transition: var(--transition);
}

.stat-item:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.stat-item:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.stat-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  z-index: 1;
}

.stat-number {
  font-family: 'DM Serif Display', serif;
  font-size: 3rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
}

/* ===== HOME: EXPERTISE GRID ===== */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.expertise-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.expertise-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.expertise-card:hover img {
  transform: scale(1.08);
}

.expertise-card .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 39, 68, 0.9) 0%, rgba(15, 39, 68, 0.1) 60%, transparent 100%);
  transition: var(--transition);
}

.expertise-card:hover .card-overlay {
  background: linear-gradient(to top, rgba(232, 168, 56, 0.85) 0%, rgba(15, 39, 68, 0.2) 60%, transparent 100%);
}

.expertise-card .card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  padding: 32px 20px 24px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  z-index: 1;
}

.expertise-card .card-arrow {
  position: absolute;
  bottom: 24px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translateX(-10px);
  transition: var(--transition);
  z-index: 1;
}

.expertise-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ===== HOME: EXPERIENCES ===== */
.experiences-carousel {
  display: flex;
  align-items: center;
  gap: 48px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 48px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
}

.carousel-logo {
  flex-shrink: 0;
  width: 180px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.carousel-logo img {
  width: 100%;
}

.carousel-text {
  flex: 1;
}

.carousel-text p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-light);
}

.carousel-text p,
.carousel-logo img {
  transition: opacity 0.2s ease;
}

.carousel-dots {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 39, 68, 0.15);
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
}

.carousel-dot.active {
  background: var(--accent);
  transform: scale(1.2);
}

[data-theme="dark"] .carousel-dot {
  background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .carousel-dot.active {
  background: var(--accent);
}

.carousel-arrows {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.carousel-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(15, 39, 68, 0.15);
  background: transparent;
  color: var(--navy);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.carousel-arrow:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--navy);
  color: #fff;
  padding: 80px 32px 0;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 168, 56, 0.08), transparent 70%);
  pointer-events: none;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
}

.footer-left {
  flex: 1;
}

.footer-left .section-title {
  color: #fff;
}

.footer-left p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 32px;
}

.footer-left p a {
  color: var(--accent);
  font-weight: 500;
  transition: var(--transition);
}

.footer-left p a:hover {
  text-decoration: underline;
}

.footer-logo {
  margin-bottom: 20px;
}

.footer-logo img {
  height: 50px;
  width: auto;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  transition: var(--transition);
}

.footer-social a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.8);
  transition: var(--transition);
}

.footer-social a:hover svg {
  color: #fff;
}

.footer-right {
  flex: 1;
}

/* contact-form and btn-send styles moved to floating label section */

.footer-bottom {
  margin-top: 60px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  gap: 32px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  flex-wrap: wrap;
  text-align: center;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.35);
  transition: var(--transition);
}

.footer-bottom a:hover {
  color: var(--accent);
}

/* ===== SERVICES PAGE ===== */
.services-section {
  padding: 100px 32px;
}

.services-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
}

.services-col {
  flex: 1;
}

.services-col h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: -0.3px;
}

.service-card {
  margin-bottom: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  transition: var(--transition);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.service-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover img {
  transform: scale(1.03);
}

.service-card .service-label {
  padding: 20px 24px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  text-align: center;
}

/* ===== EXPERTISE PAGE ===== */
.expertise-section {
  padding: 100px 32px;
}

.expertise-block {
  max-width: 1280px;
  margin: 0 auto 80px;
  display: flex;
  gap: 64px;
  align-items: stretch;
}

.expertise-block:last-child {
  margin-bottom: 0;
}

.expertise-block.reverse {
  flex-direction: row-reverse;
}

.expertise-block-image {
  flex: 1;
  min-height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.expertise-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.expertise-block:hover .expertise-block-image img {
  transform: scale(1.03);
}

.expertise-block-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}

.expertise-block-text h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}

.expertise-block-text h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin-top: 12px;
  border-radius: 3px;
}

.expertise-block-text p {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--text-light);
  margin-bottom: 12px;
}

.expertise-block-text ul {
  margin: 0 0 12px 20px;
  list-style: disc;
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.9;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 13px 32px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  align-self: flex-start;
  box-shadow: 0 4px 15px rgba(232, 168, 56, 0.3);
}

.btn-contact:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(232, 168, 56, 0.4);
}

/* ===== CHAT / CONVERSATION PAGE ===== */
.chat-page {
  margin-top: 70px;
  height: calc(100vh - 70px);
  background: var(--bg);
}

.chat-container {
  display: flex;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.chat-sidebar {
  width: 280px;
  border-right: 1px solid var(--card-border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--white);
}

.chat-sidebar-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chat-agent-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-agent-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}

.chat-agent-status {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 2px;
}

.chat-new-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.chat-new-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 168, 56, 0.05);
}

.chat-sidebar-docs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.chat-docs-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-docs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.chat-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  transition: var(--transition);
}

.chat-doc-item--uploading {
  opacity: 0.5;
}

.chat-doc-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.chat-doc-info {
  flex: 1;
  min-width: 0;
}

.chat-doc-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-doc-meta {
  font-size: 0.68rem;
  color: var(--text-light);
}

.chat-doc-remove {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.chat-doc-remove:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.chat-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px dashed var(--card-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.chat-upload-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 168, 56, 0.05);
}

.chat-upload-hint {
  font-size: 0.65rem;
  color: var(--text-light);
  opacity: 0.6;
  text-align: center;
}

.chat-input-attach {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text-light);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.chat-input-attach:hover {
  background: var(--input-bg);
  color: var(--accent);
}

.chat-input-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 6px;
}

.chat-input-docs:empty {
  display: none;
}

.chat-input-doc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(232, 168, 56, 0.1);
  color: var(--accent);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
}

.chat-dragover {
  outline: 2px dashed var(--accent) !important;
  outline-offset: -4px;
  background: rgba(232, 168, 56, 0.03) !important;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Encyclopédie pane: chat fills the available width with the RAG
   intake (drop zone + URL) pinned to the viewport right edge on
   wide screens. Mobile stacks them. */
.enc-layout {
  /* Defined on the shared parent so both the intake panel and the chat
     column inherit the SAME duration + easing — otherwise their
     transitions drift and the rail snaps while the padding lags. */
  --enc-ease: cubic-bezier(0.2, 0, 0, 1);
  --enc-dur:  .28s;
  --enc-dur-body: .22s;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.enc-chat { min-width: 0; min-height: 480px; display: flex; flex-direction: column; }
.enc-chat .chat-page,
.enc-chat .chat-container { height: 100%; }

/* Intake aside with an expand/collapse rail. A single easing curve +
   coordinated delays drive the whole motion:
     - on collapse  → body fades & slides out first, THEN the panel shrinks
     - on expand    → panel widens first, THEN the body fades & slides in
   This keeps content from flashing off-panel mid-animation. */
.enc-intake {
  /* --enc-ease / --enc-dur / --enc-dur-body come from .enc-layout so
     the chat padding + the panel width share the same timing. */
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--white);
  transition: width var(--enc-dur) var(--enc-ease),
              background var(--enc-dur) var(--enc-ease),
              box-shadow var(--enc-dur) var(--enc-ease);
}
.enc-intake-body {
  padding: 14px;
  opacity: 1;
  transform: translateX(0);
  /* Expanding: let the panel widen ~70% before the body starts fading in,
     so the two motions overlap subtly instead of feeling sequential. */
  transition: opacity var(--enc-dur-body) var(--enc-ease) calc(var(--enc-dur) * .55),
              transform var(--enc-dur-body) var(--enc-ease) calc(var(--enc-dur) * .55);
}
.enc-intake-toggle {
  position: absolute; top: 8px; left: -14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--card-border);
  color: var(--text-light); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: color .15s ease, border-color .15s ease,
              transform var(--enc-dur) var(--enc-ease);
}
.enc-intake-toggle:hover { color: var(--accent); border-color: var(--accent); }
.enc-intake-toggle i { transition: transform var(--enc-dur) var(--enc-ease); }

.enc-intake.is-collapsed { background: var(--input-bg); }
.enc-intake.is-collapsed .enc-intake-body {
  opacity: 0;
  transform: translateX(14px);
  pointer-events: none;
  /* Collapsing: fade out IMMEDIATELY and a little faster than the width,
     so content clears before the rail shrinks into place. */
  transition: opacity var(--enc-dur-body) var(--enc-ease) 0s,
              transform var(--enc-dur-body) var(--enc-ease) 0s;
}
/* The body still needs to be removed from flow once faded out so it
   doesn't cause horizontal overflow inside the 36 px rail. Browser
   repaint after the fade finishes is fine. */
.enc-intake.is-collapsed .enc-intake-body { visibility: hidden; }
.enc-intake:not(.is-collapsed) .enc-intake-body { visibility: visible; }

@media (min-width: 1024px) {
  /* Pin the intake to the viewport's right edge, independent of the
     admin-shell's centered max-width. Reserve equivalent space in the
     chat column via right-padding so nothing slides under the panel. */
  .enc-intake {
    position: fixed;
    top: 80px;                         /* clear the admin header */
    right: 0;
    width: 340px;
    max-height: calc(100vh - 96px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    box-shadow: -4px 0 12px rgba(0,0,0,.05);
    z-index: 30;
  }
  .enc-intake.is-collapsed { width: 36px; }
  .enc-chat {
    padding-right: 356px;              /* panel width + 16 px gap */
    transition: padding-right var(--enc-dur) var(--enc-ease);
  }
  .enc-layout.is-intake-collapsed .enc-chat { padding-right: 52px; }
}

/* When the conversation pane runs without its left sidebar, the main
   column should claim the full container width. */
.chat-container--no-sidebar .chat-main { width: 100%; }

/* Compact empty state — used when the sidebar is hidden. Drops the big
   round icon; keeps the title, hint and suggestion chips. */
.chat-empty--compact { gap: 10px; padding: 8px 16px; }
.chat-empty--compact .chat-empty-icon { display: none; }
.chat-empty--compact h3 { font-family: inherit; font-size: 16px; font-weight: 700; margin: 0; }
.chat-empty--compact p  { font-size: 12.5px; max-width: 540px; margin: 0; }
.chat-empty--compact .chat-suggestions { margin-top: 6px; }
.chat-empty--compact .chat-suggestion { font-size: 12px; padding: 6px 12px; }

/* Welcome logo — replaces the h3 greeting in the compact empty state. */
.chat-empty-logo {
  max-height: 52px; width: auto;
  margin: 4px 0 2px;
  opacity: .95;
}
.chat-empty--compact .chat-empty-logo { max-height: 44px; }

/* Chat polish inside the Encyclopédie (hide_sidebar) layout: softer
   message bubbles, subtle shadow, accent tint, better spacing. */
.chat-container--no-sidebar .chat-messages { padding: 18px 22px 14px; gap: 14px; }
.chat-container--no-sidebar .chat-bubble {
  padding: 10px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 78%;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.chat-container--no-sidebar .chat-bubble--user {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 95%, #fff),
    var(--accent));
  border-bottom-right-radius: 4px;
}
.chat-container--no-sidebar .chat-bubble--assistant {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  border-bottom-left-radius: 4px;
}
.chat-container--no-sidebar .chat-input-area {
  padding: 10px 16px 14px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent);
}
.chat-container--no-sidebar .chat-input-wrap {
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

/* Intake aside: shrink typography + paddings so the drop zone + URL
   input fit comfortably next to the chat without drawing attention. */
.enc-intake { font-size: 11.5px; }
.enc-intake .feat-ex { padding: 0; background: transparent; border-top: none; }
.enc-intake .feat-ex-inner { max-width: none; }
.enc-intake .feat-ex-head { margin: 0 0 10px; text-align: left; max-width: none; }
.enc-intake .feat-ex-title { font-size: 13px; margin: 0 0 4px; line-height: 1.25; font-family: inherit; font-weight: 700; color: var(--text); }
.enc-intake .feat-ex-intro { font-size: 11px; line-height: 1.4; }
.enc-intake .feat-ex-drop-inner { padding: 14px 10px; gap: 6px; }
.enc-intake .feat-ex-drop-hint { font-size: 10.5px; }
.enc-intake .feat-ex-status { font-size: 10.5px; min-height: 14px; margin-top: 6px; }
.enc-intake .feat-ex-url-input { font-size: 11.5px; }
.enc-intake .feat-ex-url-submit { font-size: 11.5px; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-light);
  gap: 12px;
}

.chat-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.chat-empty h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
}

.chat-empty p {
  font-size: 0.88rem;
  max-width: 400px;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
}

.chat-suggestion {
  padding: 8px 16px;
  border: 1px solid var(--card-border);
  border-radius: 100px;
  background: var(--white);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition);
}

.chat-suggestion:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 168, 56, 0.05);
}

.chat-bubble-wrap {
  display: flex;
  animation: bubbleIn 0.25s ease;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-bubble-wrap--user {
  justify-content: flex-end;
}

.chat-bubble-wrap--assistant {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 70%;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble--user {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-bubble--assistant {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-bottom-left-radius: 4px;
}

.chat-typing {
  display: flex;
  gap: 5px;
  padding: 14px 20px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
}

.chat-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-light);
  opacity: 0.4;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.chat-input-area {
  padding: 16px 32px 20px;
  border-top: 1px solid var(--card-border);
  background: var(--white);
}

.chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 8px 8px 8px 18px;
  transition: var(--transition);
}

.chat-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 150px;
  padding: 6px 0;
}

.chat-input::placeholder {
  color: var(--text-light);
}

.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.chat-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-disclaimer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-light);
  margin-top: 8px;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .chat-sidebar {
    display: none;
  }
  .chat-messages {
    padding: 16px;
  }
  .chat-input-area {
    padding: 12px 16px 16px;
  }
  .chat-bubble {
    max-width: 85%;
  }
}

/* ===== ARTICLE BODY ===== */
.article-body {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 2;
}

.article-body p {
  margin-bottom: 16px;
}

.article-body h2, .article-body h3 {
  font-family: 'DM Serif Display', serif;
  color: var(--text);
  margin: 32px 0 12px;
  font-weight: 400;
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.2rem; }

.article-body ul, .article-body ol {
  margin: 12px 0 16px 24px;
}

.article-body li {
  margin-bottom: 6px;
}

.article-body img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: 16px 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.article-body th, .article-body td {
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  text-align: left;
  font-size: 0.88rem;
}

.article-body th {
  background: var(--input-bg);
  font-weight: 600;
}

/* ===== BLOG PAGE ===== */
.blog-section {
  padding: 100px 32px;
}

.blog-inner {
  max-width: 900px;
  margin: 0 auto;
}

.blog-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  padding: 6px;
  background: var(--white);
  border-radius: 100px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  width: fit-content;
}

.blog-tab {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  padding: 10px 24px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  transition: var(--transition);
}

.blog-tab.active {
  color: #fff;
  background: var(--navy);
}

.blog-tab:hover:not(.active) {
  color: var(--navy);
  background: rgba(15, 39, 68, 0.06);
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-card {
  display: flex;
  gap: 24px;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-card-image {
  flex-shrink: 0;
  width: 220px;
  height: 160px;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: 24px 24px 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-card-content h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.blog-card-content .blog-meta {
  font-size: 0.78rem;
  color: var(--text-light);
}

.blog-card-content .blog-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  background: rgba(232, 168, 56, 0.1);
  color: var(--accent);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
}

.theme-toggle:hover {
  background: var(--input-bg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  transition: var(--transition);
}

.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Dark mode overrides for elements with hardcoded colors */
[data-theme="dark"] .header-login-btn,
[data-theme="dark"] .header-user-btn {
  color: var(--text);
}

[data-theme="dark"] .login-form .form-eye {
  color: var(--text-light);
}

[data-theme="dark"] .btn-login {
  background: var(--accent);
}

[data-theme="dark"] .btn-login:hover {
  background: var(--accent-hover);
}

[data-theme="dark"] .blog-tab.active {
  background: var(--accent);
}

[data-theme="dark"] .carousel-arrow {
  border-color: var(--card-border);
  color: var(--text);
}

[data-theme="dark"] .carousel-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .section-label {
  color: var(--text);
}

[data-theme="dark"] .section-label {
  color: var(--accent);
}

[data-theme="dark"] .mission-text {
  background: #0a1529;
}

[data-theme="dark"] .footer {
  background: #060d18;
}

[data-theme="dark"] .expertise-block-text h2,
[data-theme="dark"] .services-col h2,
[data-theme="dark"] .dash-section-title,
[data-theme="dark"] .dashboard-title,
[data-theme="dark"] .login-panel-title,
[data-theme="dark"] .login-panel-name,
[data-theme="dark"] .dash-card-value,
[data-theme="dark"] .dash-table-name,
[data-theme="dark"] .service-card .service-label,
[data-theme="dark"] .blog-card-content h3 {
  color: var(--text);
}

/* ===== LOGIN PANEL ===== */
.login-wrap {
  position: relative;
}

.header-login-btn,
.header-user-btn,
.header-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.header-login-btn:hover,
.header-user-btn:hover,
.header-logout-btn:hover {
  background: var(--input-bg);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.user-avatar--lg {
  width: 42px;
  height: 42px;
  font-size: 0.82rem;
  border-radius: 10px;
}

.login-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--card-border);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 100;
}

.login-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.login-panel-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 20px;
}

.login-panel-user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.login-panel-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
}

.login-panel-email {
  font-size: 0.78rem;
  color: var(--text-light);
}

.login-panel-divider {
  height: 1px;
  background: var(--card-border);
  margin: 16px 0;
}

.login-panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  transition: var(--transition);
}

.login-panel-link:hover {
  background: var(--input-bg);
}

.login-panel-link--danger {
  color: #dc2626;
}

.login-panel-link--danger:hover {
  background: rgba(220, 38, 38, 0.06);
}

.login-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.login-alert--error {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.15);
}

.login-panel-footer {
  margin-top: 16px;
  text-align: center;
  font-size: 0.78rem;
}

.login-panel-footer a {
  color: var(--text-light);
  transition: var(--transition);
}

.login-panel-footer a:hover {
  color: var(--accent);
}

.btn-login {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-login:hover {
  background: #0a1e36;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(15, 39, 68, 0.3);
}

/* ===== FLOATING LABEL FORM ===== */
.form-group {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 16px 16px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}

.form-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.88rem;
  pointer-events: none;
  transition: var(--transition);
}

.form-textarea ~ .form-label {
  top: 20px;
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
  top: 8px;
  transform: translateY(0);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
  padding-top: 24px;
}

.form-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  transition: var(--transition);
}

.form-eye:hover {
  color: var(--accent);
}

/* Login panel form inputs (on white bg) */
.login-panel .form-group { margin-bottom: 14px; }

.login-form .form-input {
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  color: var(--text);
}

.login-form .form-input:focus {
  border-color: var(--accent);
  background: var(--bg);
}

.login-form .form-label {
  color: var(--text-light);
}

.login-form .form-input:focus ~ .form-label,
.login-form .form-input:not(:placeholder-shown) ~ .form-label {
  color: var(--accent);
}

.login-form .form-eye {
  color: var(--text-light);
}

/* Footer contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form .form-input::placeholder {
  color: transparent;
}

.btn-send {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(232, 168, 56, 0.3);
}

.btn-send:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(232, 168, 56, 0.4);
}

/* ===== DASHBOARD ===== */
.dashboard {
  margin-top: 70px;
  padding: 48px 32px 100px;
  background: var(--bg);
  min-height: calc(100vh - 70px);
}

.dashboard-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
}

.dashboard-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--navy);
  margin: 4px 0 8px;
}

.dashboard-subtitle {
  color: var(--text-light);
  font-size: 0.95rem;
}

.dashboard-date {
  color: var(--text-light);
  font-size: 0.85rem;
  padding: 8px 16px;
  background: var(--white);
  border-radius: 100px;
  border: 1px solid var(--card-border);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.dash-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: var(--transition);
}

.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.dash-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-card-icon--blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.dash-card-icon--amber { background: rgba(232, 168, 56, 0.1); color: var(--accent); }
.dash-card-icon--green { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.dash-card-icon--red { background: rgba(220, 38, 38, 0.1); color: #dc2626; }

.dash-card-value {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}

.dash-card-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
}

.dash-section {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

.dash-section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 24px;
}

.dash-table-header,
.dash-table-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 0.8fr 1fr;
  gap: 16px;
  padding: 14px 16px;
  align-items: center;
}

.dash-table-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
  border-bottom: 1px solid var(--card-border);
}

.dash-table-row {
  border-bottom: 1px solid var(--card-border);
  transition: var(--transition);
}

.dash-table-row:last-child {
  border-bottom: none;
}

.dash-table-row:hover {
  background: var(--input-bg);
  border-radius: 8px;
}

.dash-table-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}

.dash-table-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(232, 168, 56, 0.1);
  color: var(--accent);
  width: fit-content;
}

.dash-table-status {
  font-size: 0.78rem;
  font-weight: 600;
}

.dash-table-status--active { color: #3b82f6; }
.dash-table-status--review { color: var(--accent); }
.dash-table-status--done { color: #22c55e; }

.dash-table-date {
  font-size: 0.82rem;
  color: var(--text-light);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero-home .hero-content {
    flex-direction: column;
    gap: 40px;
  }

  .hero { min-height: 70vh; }

  .hero-title-block h1 {
    font-size: 3rem;
  }

  .mission {
    flex-direction: column;
  }

  .mission-text {
    padding: 60px 40px;
  }

  .mission-image {
    min-height: 300px;
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -30px;
  }

  .stat-item:first-child {
    border-radius: var(--radius) 0 0 0;
  }

  .stat-item:nth-child(2) {
    border-radius: 0 var(--radius) 0 0;
  }

  .stat-item:nth-child(3) {
    border-radius: 0 0 0 var(--radius);
  }

  .stat-item:last-child {
    border-radius: 0 0 var(--radius) 0;
  }

  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-inner {
    flex-direction: column;
    gap: 48px;
  }

  .expertise-block,
  .expertise-block.reverse {
    flex-direction: column;
    gap: 32px;
  }

  .expertise-block-image {
    min-height: 300px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 48px;
  }

  .experiences-carousel {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }

  .carousel-logo { width: 150px; }
  .carousel-arrows { justify-content: center; }
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-table-header,
  .dash-table-row {
    grid-template-columns: 1.5fr 1fr 0.8fr;
  }
  .dash-table-date { display: none; }
}

@media (max-width: 640px) {
  .header-inner {
    /* Grid → flex: logo left, actions right; the nav drawer absolute-
       positions under the header when toggled open. This keeps the auth
       pill + lang + theme visible even when the nav is collapsed. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 12px 16px;
    grid-template-columns: none;
  }
  /* `.header-right` had `display: contents` — put its children back into a
     flex row so they sit together on the right. */
  .header-inner > .header-right {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .header-inner > .header-right > nav { justify-self: auto; }

  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 4px;
    padding: 16px;
    /* Drawer under the fixed header when opened by the hamburger. */
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--header-border);
    z-index: 999;
  }

  .nav-list.open {
    display: flex;
  }

  .nav-list a {
    width: 100%;
    text-align: center;
    padding: 12px;
  }

  .mobile-toggle {
    display: flex;
  }

  /* Compact action pills so everything fits in the right cluster. */
  .lang-toggle { transform: scale(.9); transform-origin: right center; }
  .theme-toggle { width: 34px; height: 34px; }
  .header-auth--in { padding: 4px 10px 4px 4px; }
  .header-auth--out { padding: 7px 12px; }

  .hero {
    min-height: 60vh;
    background-attachment: scroll;
    margin-top: 60px;
  }

  .hero-content {
    padding: 48px 20px;
  }

  .hero-title-block h1 {
    font-size: 2.2rem;
  }

  .hero-page h1 {
    font-size: 2rem;
  }

  .section {
    padding: 60px 20px;
  }

  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .expertise-card {
    aspect-ratio: 4/3;
  }

  .stats-bar {
    grid-template-columns: 1fr 1fr;
    padding: 0 20px;
  }

  .stat-number {
    font-size: 2.2rem;
  }

  .stat-item {
    padding: 32px 16px;
  }

  .blog-card {
    flex-direction: column;
  }

  .blog-card-image {
    width: 100%;
    height: 180px;
  }

  .blog-card-content {
    padding: 20px;
  }

  .blog-tabs {
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
  }

  .mission-text {
    padding: 48px 24px;
  }

  .footer {
    padding: 60px 20px 0;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;
  }

  .services-section,
  .expertise-section,
  .blog-section {
    padding: 60px 20px;
  }

  .login-panel {
    width: 300px;
    right: -20px;
  }

  .dashboard {
    padding: 32px 20px 60px;
  }

  .dashboard-header {
    flex-direction: column;
    gap: 12px;
  }

  .dashboard-title {
    font-size: 1.6rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dash-table-header,
  .dash-table-row {
    grid-template-columns: 1fr 0.7fr;
  }
  .dash-table-tag,
  .dash-table-date { display: none; }
}

/* ── Project page ── */
.project-page {
  margin-top: 70px;
  padding: 48px 32px 100px;
  background: var(--bg);
  min-height: calc(100vh - 70px);
}

.project-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.project-header {
  margin-bottom: 36px;
}

.project-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--navy);
  margin: 4px 0 8px;
}

.project-subtitle {
  color: var(--text-light);
  font-size: 0.95rem;
}

.project-embed {
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.project-embed iframe {
  display: block;
  width: 100%;
  min-height: 600px;
}

@media (max-width: 768px) {
  .project-page {
    padding: 32px 16px 60px;
  }
  .project-title {
    font-size: 1.6rem;
  }
  .project-embed iframe {
    min-height: 400px;
  }
}

/* ── Feature examples drop strip (present on every public page) ────────── */
.feat-ex {
  padding: 72px 32px 48px;
  background: var(--bg);
  border-top: 1px solid var(--card-border);
}
.feat-ex-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.feat-ex-head {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 640px;
}
.feat-ex-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--navy);
  margin: 8px 0 10px;
  line-height: 1.15;
}
.feat-ex-intro {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0;
}
.feat-ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.feat-ex-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius, 14px);
  padding: 18px 18px 16px;
  transition: border-color .2s ease, transform .2s ease;
}
.feat-ex-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.feat-ex-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.feat-ex-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
}
.feat-ex-lifecycle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--text-light);
  background: var(--input-bg);
}
.feat-ex-lifecycle[data-lifecycle="live"] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.feat-ex-lifecycle[data-lifecycle="beta"] { background: rgba(232, 168, 56, 0.18); color: #b8860b; }
.feat-ex-lifecycle[data-lifecycle="in_progress"] { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.feat-ex-lifecycle[data-lifecycle="planned"] { background: rgba(148, 163, 184, 0.2); color: #64748b; }
.feat-ex-card-summary {
  font-size: 12px;
  color: var(--text-light);
  margin: 0 0 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feat-ex-drop {
  display: block;
  margin-top: auto;
  border: 1.5px dashed var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  background: var(--input-bg);
}
.feat-ex-drop:hover,
.feat-ex-drop.is-drag {
  border-color: var(--accent);
  background: rgba(232, 168, 56, 0.08);
}
.feat-ex-drop.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.feat-ex-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  color: var(--text-light);
}
.feat-ex-drop-hint {
  font-size: 11.5px;
  text-align: center;
  line-height: 1.4;
}
.feat-ex-status {
  min-height: 18px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
}
.feat-ex-status.is-ok { color: #16a34a; }
.feat-ex-status.is-err { color: #ef4444; }

@media (max-width: 640px) {
  .feat-ex { padding: 48px 16px 32px; }
  .feat-ex-title { font-size: 1.5rem; }
  .feat-ex-grid { grid-template-columns: 1fr; }
}

/* ── Per-feature drop zone inside a feature pane ──────────────────────── */
.feat-drop-zone {
  max-width: 640px;
  margin: 20px auto 0;
}
.feat-drop-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
}
.feat-drop-zone-head i { color: var(--accent, #e8a838); font-size: 13px; }

/* ── URL row inside a feature drop zone ───────────────────────────────── */
.feat-ex-url-row { margin-top: 12px; }
.feat-ex-url-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.feat-ex-url-wrap:focus-within { border-color: var(--accent); }
.feat-ex-url-wrap > i { color: var(--text-light); font-size: 13px; }
.feat-ex-url-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.feat-ex-url-input::placeholder { color: var(--text-light); }
.feat-ex-url-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.feat-ex-url-submit:hover { opacity: 0.9; }
.feat-ex-url-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Uploaded examples list (files + URLs) ────────────────────────────── */
.feat-ex-list { margin-top: 12px; }
.feat-ex-list-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-light); margin-bottom: 8px;
}
.feat-ex-list-items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow-y: auto;
}
.feat-ex-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 12px;
}
.feat-ex-list-icon { color: var(--text-light); font-size: 13px; flex: none; }
.feat-ex-list-item--url .feat-ex-list-icon { color: var(--accent); }
.feat-ex-list-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.feat-ex-list-name {
  color: var(--text);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
a.feat-ex-list-name:hover { color: var(--accent); text-decoration: underline; }
.feat-ex-list-meta {
  font-size: 10.5px; color: var(--text-light);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.feat-ex-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; color: var(--text-light);
  cursor: pointer; font-size: 11px;
  transition: all 0.12s ease;
}
.feat-ex-del:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #dc2626;
}

/* ── In-header auth pill (stealth-style, elen-themed) ─────────────────── */
.header-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  line-height: 1;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-auth--out {
  background: var(--accent);
  color: #fff;
}
.header-auth--out:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.header-auth--out svg { transition: transform var(--transition); }
.header-auth--out:hover svg { transform: translateX(3px); }

.header-auth--in {
  padding: 4px 6px 4px 4px;
  gap: 4px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  box-shadow: none;
}
.header-auth-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px 2px 2px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: background var(--transition);
}
.header-auth-user:hover { background: var(--card-border); }
.header-auth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  overflow: hidden;
  flex: none;
}
.header-auth-avatar--img { padding: 0; background: var(--input-bg); }
.header-auth-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.header-auth-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.header-auth-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-light);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.header-auth-logout:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

@media (max-width: 768px) {
  .header-auth-name { display: none; }
  .header-auth--out { padding: 7px 12px; }
}

/* ── Header auth dropdown (signed-in) ─────────────────────────────────── */
.header-auth-wrap { position: relative; }
.header-auth-chev {
  color: var(--text-light);
  transition: transform var(--transition);
  margin-left: 2px;
  margin-right: 4px;
}
.header-auth-wrap.is-open .header-auth-chev { transform: rotate(180deg); }
.header-auth--in {
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.header-auth--in:hover { border-color: var(--text-light); }

.header-auth-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 1001;
}
.header-auth-wrap.is-open .header-auth-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header-auth-menu-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 6px;
}
.header-auth-menu-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.header-auth-menu-email {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 2px;
  word-break: break-all;
}
.header-auth-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.header-auth-menu-item:hover {
  background: var(--input-bg);
  color: var(--accent);
}
.header-auth-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* ───────────────────────────────────────────────────────────────────────
   Mon Petit Artisan — foundation public-page layout (added on bootstrap).
   Uses the :root tokens above. STG-era terracing classes left untouched;
   pruning them is a noted follow-up.
   ─────────────────────────────────────────────────────────────────────── */
body { font-family: var(--gk-font, 'Inter', system-ui, sans-serif); color: var(--text); background: var(--bg); margin: 0; }
main { min-height: 60vh; }

.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  gap: 24px; padding: 14px 32px; background: var(--header-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--header-border); }
.site-header .brand { display: inline-flex; align-items: center; }
.site-nav { display: flex; gap: 22px; margin-left: 8px; }
.site-nav a { color: var(--text); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--accent); }
.site-header > *:last-child { margin-left: auto; }

.btn { display: inline-block; padding: 12px 22px; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }

.hero { padding: 96px 32px 72px; background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: #fff; }
.hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: 2.6rem; margin: 0 0 16px; }
.hero-tagline { font-size: 1.2rem; opacity: 0.92; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.7); }

.services, .contact, .page { max-width: 1040px; margin: 0 auto; padding: 64px 32px; }
.services h2, .contact h2, .page h1 { text-align: center; margin-bottom: 32px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.card { background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; color: var(--accent); }

.contact-form { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.contact-form input, .contact-form textarea { padding: 11px 13px; border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); background: var(--white); font: inherit; }
.form-success { max-width: 520px; margin: 0 auto 20px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--accent-glow); color: var(--accent-hover); text-align: center; }

.page.legal { max-width: 760px; }
.page.legal h2 { margin-top: 32px; }

.site-footer { text-align: center; padding: 40px 32px; color: var(--text-light);
  border-top: 1px solid var(--card-border); }
.site-footer a { color: var(--accent); }

/* ───────────────────────────────────────────────────────────────────────
   Mon Petit Artisan — Redone-inspired homepage layout (2026-05-29).
   Reuses the :root tokens; only adds new section styles.
   ─────────────────────────────────────────────────────────────────────── */

/* shared section primitives */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; padding: 0 20px; }
.section-head .eyebrow,
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
  font-weight: 700; color: var(--accent); margin: 0 0 12px; }
.section-head h2 { font-size: 2.2rem; line-height: 1.15; margin: 0 0 14px; color: var(--navy); }
.section-head .lede,
.lede { font-size: 1.08rem; color: var(--text-light); margin: 0; line-height: 1.6; }

.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero-full { position: relative; min-height: 80vh; display: flex; align-items: center;
  padding: 120px 32px 80px;
  background:
    linear-gradient(135deg, rgba(15,39,68,0.85), rgba(37,99,166,0.78)),
    radial-gradient(ellipse at 30% 60%, rgba(255,255,255,0.10), transparent 60%);
  background-color: var(--navy);
  color: #fff; overflow: hidden; }
.hero-full::before { content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0 24px, transparent 25px),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,0.04) 0 18px, transparent 19px);
  background-size: 280px 280px, 200px 200px; pointer-events: none; }
.hero-overlay { position: relative; max-width: 880px; margin: 0 auto; z-index: 1; }
.hero-eyebrow { color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 600; font-size: 0.85rem; margin: 0 0 18px; }
.hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; margin: 0 0 22px;
  font-weight: 700; letter-spacing: -0.01em; }
.hero-title em { font-style: italic; color: #c0d4ec; font-weight: 600; }
.hero-lede { font-size: 1.15rem; line-height: 1.55; color: rgba(255,255,255,0.88);
  max-width: 620px; margin: 0 0 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Audience split — Particuliers / Pros ──────────────────────────── */
.audience { padding: 64px 20px; background: var(--bg); }
.audience-inner { max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .audience-inner { grid-template-columns: 1fr; } }
.audience-card { display: block; padding: 36px 30px; background: var(--white);
  border: 1px solid var(--card-border); border-radius: var(--radius);
  text-decoration: none; color: var(--text); box-shadow: var(--shadow);
  position: relative; transition: var(--transition); }
.audience-card:hover { transform: translateY(-4px); border-color: var(--accent);
  box-shadow: var(--shadow-lg); }
.audience-card-tag { display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-glow); color: var(--accent-hover); font-size: 0.75rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.audience-card h2 { font-size: 1.5rem; margin: 0 0 12px; color: var(--navy); line-height: 1.2; }
.audience-card p { margin: 0; color: var(--text-light); line-height: 1.55; }
.audience-arrow { position: absolute; top: 28px; right: 28px; font-size: 1.6rem;
  color: var(--accent); opacity: 0.6; transition: var(--transition); }
.audience-card:hover .audience-arrow { opacity: 1; transform: translateX(4px); }

/* ── Services grid (4 cards) ──────────────────────────────────────── */
.services-grid { padding: 88px 20px; background: var(--white); }
.services-grid .cards-grid { max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.service-card { padding: 32px 28px; background: var(--bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); transition: var(--transition); }
.service-card:hover { background: var(--white); border-color: var(--accent);
  transform: translateY(-3px); box-shadow: var(--shadow); }
.service-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow); color: var(--accent); border-radius: var(--radius-sm); margin-bottom: 18px; }
.service-icon svg { width: 32px; height: 32px; }
.service-card h3 { margin: 0 0 10px; font-size: 1.2rem; color: var(--navy); }
.service-card p { margin: 0; color: var(--text-light); line-height: 1.55; font-size: 0.96rem; }

/* ── Why us (3 pillars) ──────────────────────────────────────────── */
.why-us { padding: 88px 20px; background: linear-gradient(180deg, var(--bg) 0%, var(--white) 100%); }
.why-inner { max-width: 1100px; margin: 0 auto; }
.why-inner > .eyebrow { text-align: center; }
.why-inner > h2 { text-align: center; font-size: 2rem; margin: 0 0 48px; color: var(--navy);
  max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.2; }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.pillar { background: var(--white); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 32px 28px; position: relative; }
.pillar-num { font-family: ui-monospace, monospace; font-size: 1.6rem; font-weight: 700;
  color: var(--accent); margin-bottom: 14px; letter-spacing: -0.02em; }
.pillar h3 { margin: 0 0 10px; font-size: 1.15rem; color: var(--navy); }
.pillar p { margin: 0; color: var(--text-light); line-height: 1.55; }

/* ── Gallery (placeholder cards) ─────────────────────────────────── */
.gallery { padding: 88px 20px; background: var(--white); }
.gallery-grid { max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.gallery-card { aspect-ratio: 4/3; border-radius: var(--radius); position: relative;
  overflow: hidden; box-shadow: var(--shadow); display: flex; align-items: flex-end;
  padding: 22px; color: #fff; }
.gallery-card::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,39,68,0.85) 100%); }
.gallery-label { position: relative; z-index: 1; font-weight: 600; }
/* placeholder gradients standing in for real photos (TODO: real photos) */
.gc-1 { background: linear-gradient(135deg, #2563a6, #0f2744); }
.gc-2 { background: linear-gradient(135deg, #1a3a5c, #2563a6); }
.gc-3 { background: linear-gradient(135deg, #1d4e85, #3a6fa6); }

/* ── Contact form panel ──────────────────────────────────────────── */
.contact { padding: 88px 20px 96px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color: #fff; }
.contact-inner { max-width: 720px; margin: 0 auto; }
.contact .section-head h2 { color: #fff; }
.contact .section-head .lede,
.contact .section-head .eyebrow { color: rgba(255,255,255,0.78); }
.contact .section-head .eyebrow { color: #c0d4ec; }
.contact .contact-form { background: var(--white); padding: 36px 32px;
  border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow-lg); }
.contact .contact-form label { font-size: 0.92rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .form-row-2 { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────────────────
   Photo slots — wired 2026-05-29. Drop JPEGs at the paths below and they
   appear automatically; brand gradient is layered on top for text contrast.
   Missing photos = the layer below shows (navy / gradient), layout intact.
   Filenames + sizes documented in static/images/portfolio/README.md.
   ─────────────────────────────────────────────────────────────────────── */

/* Hero: brand-tinted overlay over photo, navy if photo missing */
.hero-full {
  background:
    linear-gradient(135deg, rgba(15, 39, 68, 0.78), rgba(37, 99, 166, 0.62)),
    url('/static/images/hero.jpg') center / cover no-repeat,
    var(--navy);
}

/* Gallery cards: photo only (the .gallery-card::before bottom-gradient
   already provides label readability), brand fallback per slot. */
.gc-1 { background:
  url('/static/images/portfolio/realisation-1.jpg') center / cover no-repeat,
  linear-gradient(135deg, #2563a6, #0f2744); }
.gc-2 { background:
  url('/static/images/portfolio/realisation-2.jpg') center / cover no-repeat,
  linear-gradient(135deg, #1a3a5c, #2563a6); }
.gc-3 { background:
  url('/static/images/portfolio/realisation-3.jpg') center / cover no-repeat,
  linear-gradient(135deg, #1d4e85, #3a6fa6); }

/* ───────────────────────────────────────────────────────────────────────
   Redone-inspired pass 2026-06-02 — photo-led, palette restraint.
   Hot-linked placeholders from Redone's Webflow CDN (TEMPORARY: replace
   with own photos by dropping JPEGs at /static/images/{hero, portfolio}.
   Local urls() try first; if missing, the cdn url() shows; navy fallback last.
   ─────────────────────────────────────────────────────────────────────── */

/* Hero: photo dominates, scrim only at the BOTTOM for text contrast
   (Redone-style: full-bleed image, restrained overlay). */
.hero-full {
  background:
    /* gentle bottom scrim so headline stays readable on any photo */
    linear-gradient(180deg, rgba(15,39,68,0.10) 0%, rgba(15,39,68,0.20) 35%, rgba(15,39,68,0.78) 100%),
    /* local file wins when present */
    url('/static/images/hero.jpg') center / cover no-repeat,
    /* hot-linked Redone hero (placeholder; remove once local photo exists) */
    url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/65172be8b574356c9240a567_REDONE%20SCHILDERWERKEN%20post%201%20(4).png') center / cover no-repeat,
    var(--navy);
  min-height: 78vh;
}
.hero-full::before { display: none; }  /* drop the decorative dots — let photo speak */

/* Position hero text bottom-left for Redone-style framing */
.hero-overlay { margin-top: auto; max-width: 920px; }
.hero-full { align-items: flex-end; padding-bottom: 100px; }

/* Gallery cards: clean photo display, soft shadow, scale-on-hover. */
.gallery-card { transition: var(--transition); }
.gallery-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gc-1 { background:
  url('/static/images/portfolio/realisation-1.jpg') center / cover no-repeat,
  url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/6554f76d7a8c7ff2a2cd863c_Landingpage.jpg') center / cover no-repeat,
  #0f2744; }
.gc-2 { background:
  url('/static/images/portfolio/realisation-2.jpg') center / cover no-repeat,
  url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/65bfdd903684ac48c374ca6e_w.jpg') center / cover no-repeat,
  #1a3a5c; }
.gc-3 { background:
  url('/static/images/portfolio/realisation-3.jpg') center / cover no-repeat,
  url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/65bfdc6d59a24803e4467274_e.jpg') center / cover no-repeat,
  #1d4e85; }

/* Audience-split cards become photo-cards (Redone Particulier/Professional pattern) */
.audience-card { min-height: 320px; overflow: hidden; padding: 0; }
.audience-card > * { position: relative; z-index: 1; }
.audience-card::before { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,39,68,0.15) 0%, rgba(15,39,68,0.70) 100%),
    url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/65bff4e572ff902a365b13bd_AdobeStock_510488526.jpeg') center / cover no-repeat,
    var(--navy);
  z-index: 0; transition: var(--transition); }
.audience-card:nth-child(2)::before {
  background:
    linear-gradient(180deg, rgba(15,39,68,0.15) 0%, rgba(15,39,68,0.70) 100%),
    url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/65bff0cd49bc1f2ae8cc2f6d_AdobeStock_681466719.jpeg') center / cover no-repeat,
    var(--navy);
}
.audience-card:hover::before { transform: scale(1.04); }
.audience-card .audience-card-tag,
.audience-card h2,
.audience-card p { color: #fff; padding-left: 32px; padding-right: 32px; }
.audience-card .audience-card-tag { margin-top: 32px; background: rgba(255,255,255,0.18);
  color: #fff; backdrop-filter: blur(6px); }
.audience-card h2 { margin-top: 14px; }
.audience-card p { color: rgba(255,255,255,0.88); padding-bottom: 32px; }
.audience-arrow { color: #fff; opacity: 0.85; }

/* Restraint pass: lighter section backgrounds, more whitespace, softer borders */
.services-grid, .gallery, .why-us { padding-top: 100px; padding-bottom: 100px; }
.service-card { background: var(--white); border: 1px solid var(--card-border); }
.service-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.section-head h2 { font-weight: 700; letter-spacing: -0.015em; }

/* ───────────────────────────────────────────────────────────────────────
   Brand pivot 2026-06-02 — black + beige, no blue.
   Overrides every accent / navy var via the cascade (no edit needed
   above). New tokens:
     ink (near-black) = primary/dark
     bone (warm cream) = backgrounds / cards / pill CTAs
     sand (soft beige) = secondary chips / tags / soft accents
     terra (subtle warm) = the ONE discrete accent — used sparingly
   ─────────────────────────────────────────────────────────────────────── */
:root {
  --navy:           #1a1a1a;            /* was navy blue → near-black ink */
  --navy-light:     #2a2a2a;
  --accent:         #1a1a1a;            /* was painter blue → ink */
  --accent-hover:   #000000;
  --accent-glow:    rgba(26, 26, 26, 0.08);
  --text:           #1a1a1a;
  --text-light:     #6b6760;            /* warm gray, not blue-gray */
  --bg:             #f5f0e8;            /* warm cream */
  --white:          #ffffff;
  --card-border:    rgba(0, 0, 0, 0.08);
  --header-bg:      rgba(255, 255, 255, 0.92);
  --header-border:  rgba(0, 0, 0, 0.06);
  --input-bg:       #f5f0e8;
  /* gk_* tokens cascade through too */
  --gk-bg:          #ffffff;
  --gk-bg-surface:  #ffffff;
  --gk-text:        #1a1a1a;
  --gk-text-muted:  #6b6760;
  --gk-border:      rgba(0, 0, 0, 0.08);
  --gk-primary:     #1a1a1a;
  --gk-accent:      #1a1a1a;
  /* new brand-specific tokens */
  --sand:           #d6c5a8;
  --terra:          #8b5a3c;
}

/* CTAs: Redone-style white pill with charcoal text. Primary becomes the
   pill; ghost becomes a charcoal-bordered tag. */
.btn-primary { background: #ffffff; color: #1a1a1a; border: 1px solid #ffffff;
  border-radius: 999px; font-weight: 600; }
.btn-primary:hover { background: #1a1a1a; color: #ffffff; }
.btn-ghost { background: transparent; color: #1a1a1a; border: 1px solid #1a1a1a;
  border-radius: 999px; }
.btn-ghost:hover { background: #1a1a1a; color: #ffffff; }
.btn-ghost-light { background: transparent; color: #ffffff;
  border: 1px solid rgba(255,255,255,0.8); border-radius: 999px; }
.btn-ghost-light:hover { background: #ffffff; color: #1a1a1a; }

/* Header turns near-black to match the Redone bar. */
.site-header { background: #ffffff; border-bottom-color: var(--header-border); }
.site-nav a { color: #1a1a1a; font-weight: 500; letter-spacing: 0.01em; }
.site-nav a:hover { color: #8b5a3c; }
.brand img { filter: none; }

/* Hero: darker scrim, photo dominates and is allowed to feel moody. */
.hero-full {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.78) 100%),
    url('/static/images/hero.jpg') center / cover no-repeat,
    url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/65172be8b574356c9240a567_REDONE%20SCHILDERWERKEN%20post%201%20(4).png') center / cover no-repeat,
    #1a1a1a;
}
.hero-title em { color: #d6c5a8; font-style: italic; font-weight: 500; }
.hero-eyebrow { color: rgba(255,255,255,0.72); }

/* Audience cards keep photo, charcoal scrim instead of navy. */
.audience-card::before,
.audience-card:nth-child(2)::before {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.75) 100%),
                    var(--photo, url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/65bff4e572ff902a365b13bd_AdobeStock_510488526.jpeg'));
  background-size: cover; background-position: center; background-color: #1a1a1a;
}
.audience-card:nth-child(2)::before {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.75) 100%),
                    url('https://cdn.prod.website-files.com/65172be8b574356c9240a505/65bff0cd49bc1f2ae8cc2f6d_AdobeStock_681466719.jpeg');
}
.audience-card-tag { background: rgba(255,255,255,0.20) !important; color: #ffffff !important; }
.audience-arrow { color: #ffffff; }

/* Section accents become warm: eyebrows in terra, pillar numbers in ink. */
.eyebrow, .section-head .eyebrow { color: #8b5a3c; }
.pillar-num { color: #1a1a1a; }
.service-icon { background: #f5f0e8; color: #1a1a1a; }
.service-card { background: #ffffff; }
.service-card:hover { border-color: #1a1a1a; }
.section-head h2 { color: #1a1a1a; }

/* Why-us softer warm */
.why-us { background: linear-gradient(180deg, #faf6ee 0%, #ffffff 100%); }
.pillar { background: #ffffff; border: 1px solid var(--card-border); }

/* Contact panel: charcoal instead of navy */
.contact { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); }
.contact .section-head .eyebrow { color: #d6c5a8; }

/* Status pills in /devis use the accent_glow which is now near-zero charcoal —
   keep them readable by overriding with warm sand for "draft", etc. */
.s-draft { background: #ececec; color: #6b6760; }
.s-sent { background: #f0e6d6; color: #6b4f2a; }
.s-accepted { background: #e8e2cf; color: #1a1a1a; }
.s-rejected { background: #f0d4c4; color: #6b3520; }
.s-invoiced { background: #d6c5a8; color: #1a1a1a; }

/* Logo mark inside the new monochrome system — paint roller block becomes ink */
.brand img { background: transparent; }

/* Body bg becomes cream */
body { background: #f5f0e8; }
.site-footer { background: #ffffff; }

/* Beige header pass 2026-06-02 — header sits in a warmer cream than the
   body, with a hairline ink underline so the band reads as a distinct
   strip even against the cream sections below. */
.site-header {
  background: #ebe1cf;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  backdrop-filter: none;
}
.site-nav a { color: #1a1a1a; }
.site-nav a:hover { color: #8b5a3c; }

/* Canonical gk-nav adoption 2026-06-02 — replace bespoke .site-header with
   the gateka-core _gk_nav.html include (brand_html + nav_pages from
   packages.yaml). Keep the beige strip via a targeted background override;
   gk-nav.css owns the rest of the layout. */
.gk-nav-brand img { display: block; }

/* ───────────────────────────────────────────────────────────────────────
}

/* ── Smooth scroll-shrink for the logo (elen-pattern, 2026-06-03) ────
   gk-nav.css §line 41 applies `transition: none` to every
   `.gk-nav-brand img`/svg — load-bearing only when a logo can reflow
   the nav layout horizontally. With a fixed-width SLOT around the
   img, the height transition is purely visual and safe to re-enable.
   `!important` defeats both that rule and the HTML `height=` attr.
   `.22s ease` matches gk-nav's own bar height transition for a synced
   shrink. Slot dimensions = 211×40 (SVG viewBox 380×72 → ratio
   5.28:1, so width = 40 × 5.28 ≈ 211). Shrink height = 28 (~70% of
   40, mirrors elen's 48→34 ratio). */
.mpa-logo-slot img {
  transition: height .22s ease !important;
}
.gk-nav.is-scrolled .mpa-logo-slot img {
  height: 28px !important;
}

/* ───────────────────────────────────────────────────────────────────────
   peintre-paris.fr inspiration pass 2026-06-03 — adopt their photo
   choices for gallery cards + their partner-logo credibility strip.
   Local /static/images/portfolio/* still take precedence; CDN URLs are
   placeholders for now (replace once real photos drop).
   ─────────────────────────────────────────────────────────────────────── */
.gc-1 { background:
  url('/static/images/portfolio/realisation-1.jpg') center / cover no-repeat,
  url('https://peintre-paris.fr/wp-content/uploads/2022/02/greenery-2.jpg') center / cover no-repeat,
  #0f2744; }
.gc-2 { background:
  url('/static/images/portfolio/realisation-2.jpg') center / cover no-repeat,
  url('https://peintre-paris.fr/wp-content/uploads/2022/02/pantone2.jpg') center / cover no-repeat,
  #1a3a5c; }
.gc-3 { background:
  url('/static/images/portfolio/realisation-3.jpg') center / cover no-repeat,
  url('https://peintre-paris.fr/wp-content/uploads/2022/02/jjsphere_pantone-couleurs-2021_ultimate-gray_illuminating_gris-jaune_3.jpg') center / cover no-repeat,
  #1d4e85; }

/* Partners strip — peintre-paris.fr-inspired credibility band */
.partners { padding: 56px 20px; background: #ebe1cf; }
.partners-inner { max-width: 1040px; margin: 0 auto; text-align: center; }
.partners .eyebrow { color: #8b5a3c; margin-bottom: 8px; }
.partners h2 { font-size: 1.5rem; margin: 0 0 32px; color: #1a1a1a;
  font-weight: 700; letter-spacing: -0.01em; }
.partners-row { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 36px 56px; }
.partner-logo { background: #fff; border-radius: 8px;
  padding: 14px 22px; height: 64px; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.partner-logo img { max-height: 36px; width: auto; display: block;
  filter: grayscale(1); opacity: 0.78; transition: filter .2s, opacity .2s; }
.partner-logo:hover img { filter: grayscale(0); opacity: 1; }