/* ==========================================================
   IYA Solutions — PREMIUM ENHANCEMENTS (sections hors hero)
   Surcouche réversible. Couleurs = charte officielle.
   ========================================================== */

/* ---------- Bandeau logos « ils nous font confiance » ---------- */
.logos{ padding:2.8rem 0; }
.logos-label{ font-size:.72rem; letter-spacing:.16em; margin-bottom:2rem; }

/* logos en N&B élégant, couleur + net au survol */
.logo-slot{ opacity:1; margin-right:4.2rem; }
.logo-slot img{
  height:30px;
  filter:grayscale(1);
  opacity:.48;
  transition:filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.logo-slot:hover img{ filter:grayscale(0); opacity:1; transform:translateY(-1px); }

/* encadrement « logo wall » : fines lignes haut/bas qui se fondent sur les bords (le masque horizontal du marquee les estompe) */
.logos-marquee{
  border-top:1px solid rgba(11,27,58,.13);
  border-bottom:1px solid rgba(11,27,58,.13);
  padding:1.5rem 0;
}

/* ---------- Scroll fluide + dégagement sous la nav fixe ---------- */
html{ scroll-behavior:smooth; scroll-padding-top:88px; }

/* ---------- Survol premium uniforme des cartes ---------- */
.mcard, .eco-card, .fit-card{
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mcard:hover, .eco-card:hover, .fit-card:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 54px -26px rgba(11,27,58,.40), 0 8px 22px -14px rgba(0,0,163,.22);
  border-color:rgba(0,0,163,.32);
}

/* ---------- Section écosystème : puce d'icône orange (cohérence méthode) ---------- */
.eco-ic{
  width:50px; height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(224,96,17,.12); color:#E06011; margin-bottom:1.2rem;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.eco-card:hover .eco-ic{ background:#E06011; color:#fff; transform:translateY(-2px); }
.eco-ic svg{ width:24px; height:24px; }
.eco-tag{ color:#0000A3 !important; }

/* ---------- Section « À qui on s'adresse » : fond navy + panneau clair ---------- */
.fit{
  background:
    radial-gradient(70% 60% at 85% 6%, rgba(0,0,163,.38), transparent 60%),
    radial-gradient(60% 60% at 10% 100%, rgba(224,96,17,.10), transparent 60%),
    linear-gradient(180deg,#0B1B3A,#081530);
  color:var(--on-dark);
}
.fit-head{ text-align:center; max-width:42rem; margin:0 auto 0; }
.fit-head h2{ color:#fff; }
.fit-head p{ color:var(--on-dark-muted); }
.fit-note{ color:var(--on-dark-muted) !important; }
.fit-note strong{ color:#fff !important; }

/* CTA quiz à la fin de « À qui on s'adresse » (ouvre la modale) */
.fit-cta{ text-align:center; margin-top:2.4rem; }
.fit-cta-q{ font-family:'Geist',sans-serif; font-weight:600; font-size:clamp(1.05rem,1.6vw,1.25rem); color:#fff; margin:0 0 1.2rem; }
.fit-cta .btn{ font-size:1rem; padding:1rem 1.8rem; }
.fit-cta-meta{ margin:1rem 0 0; font-family:'Geist Mono',monospace; font-size:.74rem; letter-spacing:.04em; color:var(--on-dark-muted); }

/* ---------- Écran d'intro de la modale quiz ---------- */
#quizModal.intro-mode .flow-head,
#quizModal.intro-mode .flow-progress{ display:none; }
.quiz-intro{ text-align:center; padding:.5rem 0 .2rem; }
.quiz-intro h2{ font-family:'Geist',sans-serif; font-weight:800; font-size:clamp(1.5rem,3vw,1.95rem); line-height:1.12; letter-spacing:-.02em; color:var(--anthracite); margin:.5rem 0 0; }
.quiz-intro em{ font-style:normal; color:var(--energie); }
.quiz-intro p{ font-family:'Montserrat',sans-serif; font-size:1rem; line-height:1.55; color:var(--text-muted); max-width:34rem; margin:1.1rem auto 1.9rem; }
.quiz-intro-meta{ margin:1.1rem 0 0; font-family:'Geist Mono',monospace; font-size:.72rem; letter-spacing:.04em; color:var(--text-dim); }

/* ---------- FAQ : titre pleine largeur en haut, puis questions (gauche) + CTA (droite, sticky) ---------- */
.faq-head{ margin-bottom:2.4rem; }
.faq-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.faq-aside{ position:sticky; top:96px; }
/* CTA dans l'aside : aligné à gauche, compact */
.faq-cta{ text-align:left; margin-top:0; }
.faq-cta p{ font-family:'Geist',sans-serif; font-weight:600; font-size:1.15rem; line-height:1.35; color:var(--anthracite); margin:0 0 1.2rem; letter-spacing:-.01em; }
.faq-cta p strong{ color:var(--cobalt); }
.faq-cta .btn{ font-size:1rem; padding:.95rem 1.6rem; }
.faq-cta-meta{ display:block; margin-top:.9rem; font-family:'Geist Mono',monospace; font-size:.72rem; letter-spacing:.04em; color:var(--text-dim); }

/* questions condensées */
.faq-item summary{ padding:1.05rem 0; font-size:1.02rem; }

@media (max-width:880px){
  .faq-grid{ grid-template-columns:1fr; gap:2rem; }
  .faq-aside{ position:static; }
}
/* épuré : pas de boîte, deux colonnes directement sur le fond navy */
.fitp{
  display:grid; grid-template-columns:1fr 1px 1fr;
  margin-top:2.6rem;
}
.fitp-col{ padding:1.4rem 2rem; }
.fitp-h{ display:flex; align-items:center; gap:.7rem; font-family:'Geist',sans-serif; font-weight:700; font-size:1.18rem; color:#fff; margin-bottom:1.5rem; letter-spacing:-.01em; }
.fitp-badge{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; }
.fitp-badge.yes{ background:linear-gradient(135deg,#2D5BFF,#0000A3); color:#fff; }
.fitp-badge.no{ background:rgba(255,255,255,.08); color:#AEB7CE; }
.fitp-badge svg{ width:15px; height:15px; }
.fitp-div{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent); }
.fitp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.2rem; }
.fitp-list li{ display:flex; gap:.8rem; align-items:flex-start; font-family:'Montserrat',sans-serif; font-size:.96rem; line-height:1.5; }
.fitp-ic{ flex:none; width:23px; height:23px; border-radius:50%; display:grid; place-items:center; margin-top:.05rem; }
.fitp-ic svg{ width:13px; height:13px; }
.fitp-ic.yes{ background:rgba(91,140,255,.16); color:#7CA0FF; border:1px solid rgba(91,140,255,.38); }
.fitp-ic.no{ background:rgba(255,255,255,.05); color:#8A93AC; border:1px solid rgba(255,255,255,.12); }
.fitp-yes li > span:last-child{ color:#EAEEF7; }
.fitp-yes strong{ color:#fff; }
.fitp-no li > span:last-child{ color:#9AA3BD; }
.fitp-no strong{ color:#C6CDDD; }

.fit-note{
  text-align:center; margin:1.9rem auto 0; max-width:42rem;
  font-family:'Montserrat',sans-serif; font-size:.95rem; line-height:1.5; color:var(--text-muted);
}
.fit-note strong{ color:var(--anthracite); font-weight:600; }

@media (max-width:820px){
  .fitp{ grid-template-columns:1fr; }
  .fitp-div{ height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); }
}

/* ---------- FAQ : finition ---------- */
.faq-item summary{ transition:color .2s var(--ease); }
.faq-item summary:hover{ color:var(--cobalt); }
.faq-item[open] summary::after{ transform:rotate(45deg); }

/* ============ SECTION MÉTHODE — process premium (inspiré 21st.dev) ============ */
.howit{ margin-top:3.4rem; }

/* grille : cartes + flèches chevron entre elles */
.howit-grid{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:.7rem; align-items:stretch; }
.howit-card{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:1.7rem 1.4rem;
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.howit-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 54px -26px rgba(11,27,58,.4), 0 8px 22px -14px rgba(0,0,163,.22);
  border-color:rgba(0,0,163,.32);
}
/* en-tête : badge numéro (carré arrondi navy) + puce d'icône */
.howit-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.howit-num{
  width:44px; height:44px; border-radius:13px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Geist',sans-serif; font-weight:800; font-size:1.15rem; color:#fff;
  background:#0B1B3A; box-shadow:none;
}
.howit-ic{
  width:44px; height:44px; border-radius:13px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(224,96,17,.12); color:#E06011;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.howit-card:hover .howit-ic{ background:#E06011; color:#fff; transform:translateY(-2px); }
.howit-ic svg{ width:22px; height:22px; }
.howit-card h3{ font-family:'Geist',sans-serif; font-weight:700; font-size:1.15rem; color:var(--anthracite); margin:0 0 .4rem; letter-spacing:-.01em; }
.howit-card p{ font-family:'Montserrat',sans-serif; font-size:.9rem; line-height:1.5; color:var(--text-muted); margin:0; }

/* flèche chevron entre cartes, au niveau de l'en-tête */
.howit-arrow{ align-self:start; margin-top:38px; display:flex; align-items:center; justify-content:center; color:#94A3B8; }
.howit-arrow svg{ width:22px; height:22px; }

/* bouton centré sous les cartes */
.howit-cta{ display:flex; justify-content:center; margin-top:2.8rem; }

@media (max-width:880px){
  .howit-grid{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .howit-arrow{ display:none; }
}
@media (max-width:520px){
  .howit-grid{ grid-template-columns:1fr; }
}