/* ============================================================
   EYYAW Studio v189 — Pages complémentaires
   Couvre Diagnostics · Work · Insights · About · Contact ·
   Solutions · Secteurs · Manifeste · What We Do
   Fix prioritaire : ICÔNES TROP GRANDES
   ============================================================ */

/* ============================================================
   1. FIX ICÔNES — Priorité absolue
   Cause : SVG sans width/height → taille native (100%)
   Solution : contraintes strictes sur les conteneurs d'icônes
   ============================================================ */

/* Conteneurs d'icônes — carré arrondi standard 48×48 */
.diag-card-icon,
.sol-icon,
.ind-icon,
.eyyaw-cap-icon,
.eyyaw-method-icon,
.value-num,
.method-about-num,
.eyyaw-quicknav-num,
.icon-circle,
[class$="-icon"]:not(.cap-icon):not(.diag-item__icon),
[class*="-icon-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  color: var(--gold, #D4AF37) !important;
  background: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* SVG internes — forcés à 24×24 max */
.diag-card-icon svg,
.sol-icon svg,
.ind-icon svg,
.eyyaw-cap-icon svg,
.eyyaw-method-icon svg,
.value-num svg,
.method-about-num svg,
.eyyaw-quicknav-num svg,
.icon-circle svg,
[class$="-icon"]:not(.cap-icon) svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Images (si jamais une icône est une <img>) */
.diag-card-icon img,
.sol-icon img,
.ind-icon img,
.eyyaw-cap-icon img,
.eyyaw-method-icon img,
.value-num img,
.method-about-num img,
.eyyaw-quicknav-num img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

/* ============================================================
   2. CLASSES GÉNÉRIQUES (utilisées sur plusieurs pages)
   ============================================================ */

/* Headings par classe */
.h1 { font-size: clamp(2rem, 4.5vw, 3.5rem) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; }
.h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.15 !important; }
.h3 { font-size: clamp(1.2rem, 2vw, 1.6rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.h4 { font-size: 1.1rem !important; font-weight: 700 !important; letter-spacing: -0.015em !important; }

/* Séparateur */
.hr {
  height: 1px !important;
  background: var(--border, rgba(255,255,255,.08)) !important;
  border: 0 !important;
  margin: 32px 0 !important;
}

/* Sections */
.section { padding: clamp(64px, 10vw, 112px) 0 !important; }
.section-sm { padding: clamp(40px, 5vw, 64px) 0 !important; }

/* Grilles */
.grid { display: grid !important; gap: 20px !important; }
.grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}

/* Card générique */
.card {
  position: relative !important;
  background: rgba(15, 15, 15, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: all .3s cubic-bezier(.19, 1, .22, 1) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
}
.card:hover {
  border-color: rgba(212, 175, 55, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}
.card-num {
  font-family: 'Space Mono', ui-monospace, monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.24em !important;
  color: #D4AF37 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  align-self: flex-start !important;
  padding: 3px 10px !important;
  background: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 100px !important;
}
.card-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #F5F5F7 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.card-desc {
  font-size: 0.9rem !important;
  color: rgba(245, 245, 247, 0.6) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  font-family: 'Space Mono', ui-monospace, monospace !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #D4AF37 !important;
  transition: gap .3s ease !important;
}
.card:hover .card-link { gap: 12px !important; }

/* Boutons classiques .btn (en plus de .btn-morph) */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  border-radius: 100px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: all .3s cubic-bezier(.19, 1, .22, 1) !important;
  white-space: nowrap !important;
}
.btn-primary {
  background: #D4AF37 !important;
  color: #030303 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2) !important;
}
.btn-primary:hover {
  background: transparent !important;
  color: #D4AF37 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(212, 175, 55, 0.25) !important;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #F5F5F7 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.btn-ghost:hover {
  background: rgba(212, 175, 55, 0.12) !important;
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
}

/* Texte muted */
.dim { color: rgba(245, 245, 247, 0.35) !important; }
.is-muted { color: rgba(245, 245, 247, 0.5) !important; }

/* Body large */
.body-l { font-size: 1.05rem !important; color: rgba(245, 245, 247, 0.62) !important; line-height: 1.65 !important; }

/* ============================================================
   3. FAQ DIALOG (présent sur Work, Insights, Secteurs, About,
      Contact, Solutions, Diagnostics, What We Do)
   ============================================================ */
.faq-open-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 100px !important;
  font-size: 0.88rem !important;
  color: #F5F5F7 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .3s ease !important;
}
.faq-open-btn:hover {
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
}

.faq-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.faq-dialog[open],
.faq-dialog.is-open,
.faq-dialog[data-open="true"] {
  display: flex !important;
}
.faq-dialog-inner {
  background: #0a0a0a !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  max-width: 640px !important;
  width: 100% !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}
.faq-dialog-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.faq-dialog-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #F5F5F7 !important;
  margin: 0 !important;
}
.faq-dialog-close {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  color: #F5F5F7 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.faq-dialog-close:hover { background: rgba(212, 175, 55, 0.15) !important; color: #D4AF37 !important; }
.faq-list { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 4px 0 !important;
}
.faq-item:last-child { border-bottom: none !important; }
.faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 4px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #F5F5F7 !important;
  cursor: pointer !important;
  list-style: none !important;
}
.faq-question:hover { color: #D4AF37 !important; }
.faq-answer {
  padding: 0 4px 18px !important;
  font-size: 0.92rem !important;
  color: rgba(245, 245, 247, 0.62) !important;
  line-height: 1.65 !important;
}
.faq-dialog-foot {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* ============================================================
   4. HERO GÉNÉRIQUE (pour pages autres que Home)
   ============================================================ */
.hero {
  padding: clamp(80px, 10vw, 140px) var(--px, 24px) clamp(48px, 6vw, 80px) !important;
  text-align: center !important;
  position: relative !important;
}
.hero .h1,
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  max-width: 22ch !important;
  margin: 0 auto 20px !important;
  color: #F5F5F7 !important;
}
.hero .lead {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem) !important;
  color: rgba(245, 245, 247, 0.62) !important;
  max-width: 60ch !important;
  margin: 0 auto 36px !important;
  line-height: 1.65 !important;
}

/* ============================================================
   5. BREADCRUMB + HERO CAPS (What We Do)
   ============================================================ */
.eyyaw-breadcrumb {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 100px var(--px, 24px) 0 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.75rem !important;
  color: rgba(245, 245, 247, 0.5) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.eyyaw-breadcrumb a { color: rgba(245, 245, 247, 0.5) !important; }
.eyyaw-breadcrumb a:hover { color: #D4AF37 !important; }

.eyyaw-hero-caps {
  position: relative !important;
  padding: clamp(40px, 6vw, 80px) var(--px, 24px) clamp(60px, 8vw, 100px) !important;
  text-align: center !important;
  overflow: hidden !important;
}
.eyyaw-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.1), transparent 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.eyyaw-hero-caps > * { position: relative !important; z-index: 1 !important; }
.eyyaw-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #D4AF37 !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}

/* ============================================================
   6. QUICKNAV (What We Do)
   ============================================================ */
.eyyaw-quicknav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--px, 24px) !important;
}
.eyyaw-quicknav-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  font-size: 0.85rem !important;
  color: #F5F5F7 !important;
  text-decoration: none !important;
  transition: all .3s ease !important;
}
.eyyaw-quicknav-item:hover {
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
  transform: translateY(-2px) !important;
}
.eyyaw-quicknav-num {
  /* hérite du fix icônes du point 1 */
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  font-size: 0.72rem !important;
  border-radius: 50% !important;
}

/* ============================================================
   7. CAPS GRID (What We Do — liste des 7 capabilities)
   ============================================================ */
.eyyaw-caps-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--px, 24px) !important;
}
@media (max-width: 900px) {
  .eyyaw-caps-grid { grid-template-columns: 1fr !important; }
}
.eyyaw-cap {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 32px 28px !important;
  background: rgba(15, 15, 15, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  transition: all .4s cubic-bezier(.19, 1, .22, 1) !important;
  text-decoration: none !important;
  color: inherit !important;
}
.eyyaw-cap:hover {
  border-color: rgba(212, 175, 55, 0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important;
}
.eyyaw-cap-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.eyyaw-cap-num {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  color: #D4AF37 !important;
  font-weight: 700 !important;
}
.eyyaw-cap-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #F5F5F7 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
}
.eyyaw-cap-tagline {
  font-size: 0.95rem !important;
  color: #D4AF37 !important;
  font-style: italic !important;
  margin: 0 !important;
}
.eyyaw-cap-desc {
  font-size: 0.9rem !important;
  color: rgba(245, 245, 247, 0.6) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.eyyaw-cap-services {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.eyyaw-cap-services span {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.65rem !important;
  padding: 3px 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  color: rgba(245, 245, 247, 0.6) !important;
}
.eyyaw-cap-foot {
  margin-top: auto !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.eyyaw-cap-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #D4AF37 !important;
  transition: gap .3s ease !important;
}
.eyyaw-cap:hover .eyyaw-cap-link { gap: 12px !important; }

/* ============================================================
   8. WORK — Filtres + Grille + Cards
   ============================================================ */
.work-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 20px 0 !important;
  margin-bottom: 32px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.filter-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.filter-label {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.4) !important;
  font-weight: 700 !important;
}
.filter-chips {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  font-size: 0.8rem !important;
  color: rgba(245, 245, 247, 0.6) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .2s ease !important;
}
.filter-chip:hover {
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: #F5F5F7 !important;
}
.filter-chip.is-active {
  background: rgba(212, 175, 55, 0.15) !important;
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
}
.chip-count {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.7rem !important;
  padding: 1px 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 100px !important;
}
.filter-chip.is-active .chip-count {
  background: rgba(212, 175, 55, 0.3) !important;
}

.work-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr !important; }
}
.work-visual {
  height: 160px !important;
  background: linear-gradient(135deg, #141414, #050505) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  position: relative !important;
}
.work-visual-placeholder {
  font-family: 'Space Mono', monospace !important;
  font-size: 2rem !important;
  color: rgba(212, 175, 55, 0.4) !important;
}
.work-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(245, 245, 247, 0.4) !important;
}
.work-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.work-tags span {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.65rem !important;
  padding: 3px 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  color: rgba(245, 245, 247, 0.5) !important;
}
.work-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #F5F5F7 !important;
  margin: 0 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
}
.work-excerpt {
  font-size: 0.9rem !important;
  color: rgba(245, 245, 247, 0.55) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.work-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #D4AF37 !important;
  margin-top: auto !important;
}

/* ============================================================
   9. INSIGHTS — Grille
   ============================================================ */
.insights-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 900px) {
  .insights-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   10. ABOUT — Timeline + Values + Method
   ============================================================ */
.about-timeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  position: relative !important;
  padding-left: 32px !important;
}
.about-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 1px !important;
  background: rgba(212, 175, 55, 0.2) !important;
}
.timeline-item {
  position: relative !important;
}
.timeline-item::before {
  content: '' !important;
  position: absolute !important;
  left: -30px !important;
  top: 6px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #D4AF37 !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15) !important;
}
.timeline-year {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  color: #D4AF37 !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
.timeline-content { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.timeline-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #F5F5F7 !important;
  margin: 0 !important;
}
.timeline-desc {
  font-size: 0.9rem !important;
  color: rgba(245, 245, 247, 0.55) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.values-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 700px) {
  .values-grid { grid-template-columns: 1fr !important; }
}
.value-card {
  padding: 28px 24px !important;
  background: rgba(15, 15, 15, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: all .3s ease !important;
}
.value-card:hover {
  border-color: rgba(212, 175, 55, 0.3) !important;
  transform: translateY(-2px) !important;
}
.value-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #F5F5F7 !important;
  margin: 0 !important;
}
.value-desc {
  font-size: 0.9rem !important;
  color: rgba(245, 245, 247, 0.55) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.method-about {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.method-about-item {
  display: flex !important;
  gap: 20px !important;
  padding: 24px !important;
  background: rgba(15, 15, 15, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  transition: all .3s ease !important;
}
.method-about-item:hover { border-color: rgba(212, 175, 55, 0.3) !important; }
.method-about-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #F5F5F7 !important;
  margin: 0 0 6px !important;
}
.method-about-desc {
  font-size: 0.9rem !important;
  color: rgba(245, 245, 247, 0.55) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ============================================================
   11. CONTACT — Form progress + steps + choices
   ============================================================ */
.form-progress {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-bottom: 40px !important;
}
.progress-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all .3s ease !important;
}
.progress-dot.is-active {
  background: #D4AF37 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2) !important;
  transform: scale(1.2) !important;
}

.form-step {
  padding: 40px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.form-step .h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  color: #F5F5F7 !important;
  margin: 0 !important;
}

.choice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
@media (max-width: 700px) {
  .choice-grid { grid-template-columns: 1fr !important; }
}
.choice {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all .3s ease !important;
  font-size: 0.95rem !important;
  color: #F5F5F7 !important;
}
.choice:hover {
  border-color: rgba(212, 175, 55, 0.4) !important;
  background: rgba(212, 175, 55, 0.04) !important;
}
.choice input { margin: 0 !important; flex-shrink: 0 !important; }

.field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.field label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: rgba(245, 245, 247, 0.75) !important;
}
.field input,
.field textarea,
.field select {
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #F5F5F7 !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  transition: all .2s ease !important;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none !important;
  border-color: #D4AF37 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 0.88rem !important;
  color: rgba(245, 245, 247, 0.65) !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}
.check input { margin: 4px 0 0 0 !important; flex-shrink: 0 !important; }

.form-nav {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  flex-wrap: wrap !important;
}

/* ============================================================
   12. RESPONSIVE MOBILE — Compression des icônes
   ============================================================ */
@media (max-width: 640px) {
  .diag-card-icon,
  .sol-icon,
  .ind-icon,
  .eyyaw-cap-icon,
  .eyyaw-method-icon,
  .value-num,
  .method-about-num,
  .eyyaw-quicknav-num {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1.15rem !important;
  }
  .diag-card-icon svg,
  .sol-icon svg,
  .ind-icon svg,
  .eyyaw-cap-icon svg,
  .eyyaw-method-icon svg,
  .value-num svg,
  .method-about-num svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
}

/* ============================================================
   13. SAFETY — force la visibilité et coupe tout autoplay
   ============================================================ */
.reveal { opacity: 1 !important; transform: none !important; }
[class*="is-hidden"] { display: none !important; }