/* =========================================================
   Fiki ApS — home.css
   Styles spécifiques à la page d'accueil.
   S'appuie sur les tokens définis dans style.css.
   ========================================================= */

/* ---------- HERO ---------- */
.hero{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap: 56px;
  min-height: calc(100svh - 76px);
  padding: 56px clamp(20px, 5vw, 64px) 64px;
}

.hero-copy{ max-width: 560px; }

.hero-stats-inline{
  display:flex;
  gap:28px;
  margin-top:36px;
  flex-wrap:wrap;
}
.hero-stats-inline div{ display:flex; flex-direction:column; gap:2px; }
.hero-stats-inline strong{
  font-family: var(--serif);
  font-size:22px;
  font-weight:500;
  color: var(--ink);
}
.hero-stats-inline span{ font-size:12.5px; color: var(--ink-faint); }

.hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:32px;
  flex-wrap:wrap;
}
.hero-actions .link-inline{
  font-size:14.5px;
  color: var(--ink-dim);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
}
.hero-actions .link-inline:hover{ color: var(--red); border-color: var(--red); }

.hero-media{
  position:relative;
  border-radius: var(--radius-l);
  overflow:hidden;
  aspect-ratio: 6/7;
  background: var(--paper-3);
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
}
.hero-media-tag{
  position:absolute;
  left:20px; bottom:20px;
  display:flex;
  align-items:center;
  gap:9px;
  padding: 10px 16px 10px 13px;
  border-radius:999px;
  background: rgba(242,240,234,0.92);
  backdrop-filter: blur(6px);
  font-size:13px;
  color: var(--ink-dim);
  box-shadow: var(--shadow-m);
}

@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    min-height:auto;
    padding-top:40px;
  }
  .hero-media{ order:-1; aspect-ratio: 4/3; }
}

/* ---------- STATS ---------- */
.stats-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: var(--paper-2);
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat-item{
  padding: 46px 32px;
  text-align:center;
  border-left:1px solid var(--line);
}
.stat-item:first-child{ border-left:none; }
.stat-num{
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight:500;
  color: var(--ink);
  line-height:1;
  margin-bottom:10px;
}
.stat-num .accent{ color: var(--red); }
.stat-label{
  font-size:13.5px;
  color: var(--ink-dim);
}

@media (max-width: 780px){
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(3){ border-left:none; }
  .stat-item{ border-bottom:1px solid var(--line); }
}
@media (max-width: 480px){
  .stats-grid{ grid-template-columns: 1fr; }
  .stat-item{ border-left:none !important; }
}

/* ---------- A PROPOS (2 colonnes) ---------- */
.about-section .container{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items:center;
}
.about-media{
  border-radius: var(--radius-l);
  overflow:hidden;
  aspect-ratio: 4/5;
  background: var(--paper-3);
}
.about-media img{ width:100%; height:100%; object-fit:cover; }

.about-copy h2{ max-width:14ch; }
.about-list{
  list-style:none;
  margin: 28px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.about-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:14.5px;
  color: var(--ink-dim);
}
.about-list li svg{ flex-shrink:0; margin-top:2px; width:18px; height:18px; }

@media (max-width: 900px){
  .about-section .container{ grid-template-columns:1fr; }
  .about-media{ aspect-ratio: 16/9; }
}

/* ---------- BANNIERE (taux 3%, pleine largeur) ---------- */
.rate-banner-section{
  padding: 64px 0;
}
.rate-banner{
  position:relative;
  overflow:hidden;
  min-height: 380px;
  display:flex;
  align-items:center;
  color: var(--white);
  margin-bottom: 28px;
}
.rate-banner img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.rate-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(100deg, rgba(20,18,16,0.82) 0%, rgba(20,18,16,0.55) 55%, rgba(20,18,16,0.3) 100%);
  z-index:1;
}
.rate-banner-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 64px);
  display:flex;
  align-items:center;
  gap: 56px;
  flex-wrap:wrap;
}
.rate-banner-figure{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rate-banner-figure strong{
  font-family: var(--serif);
  font-size: clamp(46px, 7vw, 76px);
  font-weight:500;
  line-height:1;
}
.rate-banner-figure span{
  font-size:13px;
  color: rgba(255,255,255,0.7);
  margin-top:6px;
}
.rate-banner-text{ max-width: 460px; }
.rate-banner-text p{ color: rgba(255,255,255,0.82); margin-bottom:0; }
.rate-banner-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:14px;
}

.rate-alert{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background: var(--red-tint);
  border:1px solid rgba(200,16,46,0.22);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  margin-top: 28px;
}
.rate-alert svg{ flex-shrink:0; width:20px; height:20px; margin-top:2px; color: var(--red); }
.rate-alert p{ margin:0; font-size:13.5px; line-height:1.6; color: var(--ink); }
.rate-alert strong{ color: var(--red-dark); }

/* ---------- QUI PEUT EMPRUNTER (style Shine) ---------- */
.profiles-intro{ max-width: 560px; margin-bottom: 56px; }

.profiles-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 24px;
}
.profile-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: 18px 10px 26px;
}
.profile-figure{
  width:100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow:hidden;
  background: var(--paper-3);
  margin-bottom:18px;
  position:relative;
  transition: transform 0.35s cubic-bezier(.16,.8,.24,1);
}
.profile-item:nth-child(2n) .profile-figure{ background: var(--paper-2); }
.profile-figure img{ width:100%; height:100%; object-fit:cover; }
.profile-item:hover .profile-figure{ transform: translateY(-6px); }
.profile-name{
  font-family: var(--serif);
  font-size:17px;
  color: var(--ink);
  margin-bottom:4px;
}
.profile-desc{ font-size:13px; line-height:1.55; color: var(--ink-faint); max-width:30ch; }

@media (max-width: 980px){
  .profiles-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px){
  .profiles-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
}

/* ---------- NOS CREDITS ---------- */
.credits-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:1px;
  background: var(--line);
  border:1px solid var(--line);
  border-radius: var(--radius-l);
  overflow:hidden;
}
.credit-item{
  background: var(--white);
  padding: 34px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition: background 0.25s ease;
}
.credit-item:hover{ background: var(--paper); }
.credit-icon{
  width:38px; height:38px;
  color: var(--red);
}
.credit-icon svg{ width:100%; height:100%; }
.credit-name{
  font-family: var(--serif);
  font-size:16.5px;
  color: var(--ink);
}
.credit-desc{ font-size:13px; color: var(--ink-faint); margin:0; line-height:1.5; }

.credit-item > div{ flex:1; }

.credit-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color: var(--red);
  padding-top:4px;
  margin-top:auto;
  transition: gap 0.2s ease, color 0.2s ease;
}
.credit-cta svg{
  width:14px; height:14px;
  transition: transform 0.2s ease;
}
.credit-cta:hover{ color: var(--red-dark); gap:10px; }
.credit-cta:hover svg{ transform: translateX(2px); }

@media (max-width: 980px){ .credits-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px){ .credits-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- SIMULATEUR ---------- */
.simulator{
  background: var(--paper-2);
  border-radius: var(--radius-l);
  padding: clamp(28px, 5vw, 56px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.sim-field{ margin-bottom: 30px; }
.sim-field label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:13.5px;
  color: var(--ink-dim);
  margin-bottom:10px;
}
.sim-field .sim-value{
  font-family: var(--serif);
  font-size:18px;
  color: var(--ink);
}
.sim-field input[type="number"]{
  width:100%;
  font-family: var(--serif);
  font-size:24px;
  color: var(--ink);
  background: var(--white);
  border:1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 13px 16px;
  margin-bottom:12px;
}
.sim-field input[type="number"]:focus{
  outline:none;
  border-color: var(--red);
}
.sim-field input[type="range"]{
  width:100%;
  accent-color: var(--red);
  height:4px;
}
.sim-hint{ font-size:12px; color: var(--ink-faint); margin-top:8px; }

.sim-result{
  background: var(--white);
  border-radius: var(--radius-m);
  padding: 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height: 260px;
  border:1px solid var(--line);
}
.sim-result-label{ font-size:13px; color: var(--ink-faint); margin-bottom:8px; }
.sim-result-value{
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 52px);
  color: var(--ink);
  line-height:1;
  margin-bottom:6px;
}
.sim-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  color: var(--ink-faint);
}
.sim-placeholder svg{ width:34px; height:34px; opacity:0.6; }
.sim-placeholder p{ font-size:13.5px; color: var(--ink-faint); margin:0; max-width:26ch; }
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 52px);
  color: var(--ink);
  line-height:1;
  margin-bottom:6px;
}
.sim-result-sub{ font-size:13px; color: var(--ink-dim); margin-bottom:24px; }
.sim-result-details{
  display:flex;
  gap:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
  width:100%;
  justify-content:center;
}
.sim-result-details div{ text-align:center; }
.sim-result-details strong{ display:block; font-size:15px; color:var(--ink); margin-bottom:2px; }
.sim-result-details span{ font-size:11.5px; color:var(--ink-faint); }

.sim-loading{
  width:34px; height:34px;
  border-radius:50%;
  border: 3px solid var(--line-strong);
  border-top-color: var(--red);
  animation: simSpin 0.7s linear infinite;
  margin-bottom:16px;
  display:none;
}
.sim-loading.active{ display:block; }
@keyframes simSpin{ to{ transform: rotate(360deg); } }

.sim-cta{ margin-top:22px; display:none; flex-direction:column; gap:10px; align-items:center; }
.sim-cta.active{ display:flex; }
.sim-cta p{ font-size:13px; color: var(--ink-dim); margin:0; }
.sim-cta-actions{ display:flex; gap:10px; }

@media (max-width: 900px){
  .simulator{ grid-template-columns:1fr; gap:32px; }
}

/* ---------- FAQ ---------- */
.faq-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  max-width: 1080px;
  margin: 0 auto;
}
.faq-list{ margin:0; }
@media (max-width: 860px){
  .faq-grid{ grid-template-columns: 1fr; gap:0; }
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding: 24px 4px;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family: var(--sans);
  font-size:16px;
  font-weight:500;
  color: var(--ink);
}
.faq-q svg{
  flex-shrink:0;
  width:18px; height:18px;
  color: var(--ink-faint);
  transition: transform 0.3s ease;
}
.faq-item.open .faq-q svg{ transform: rotate(45deg); color: var(--red); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition: max-height 0.35s ease;
}
.faq-a-inner{ padding: 0 4px 24px; font-size:14.5px; color: var(--ink-dim); max-width:70ch; }

/* ---------- TEMOIGNAGES ---------- */
.testi-section{ background: var(--paper-2); }
.testi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testi-card{
  background: var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 30px 28px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.testi-stars{ display:flex; gap:3px; color: var(--red); }
.testi-stars svg{ width:15px; height:15px; }
.testi-text{ font-size:14.5px; color: var(--ink-dim); line-height:1.7; margin:0; }
.testi-author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testi-avatar{
  width:40px; height:40px;
  border-radius:50%;
  background: var(--paper-3);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif);
  font-size:15px;
  color: var(--ink-dim);
  flex-shrink:0;
}
.testi-author-name{ font-size:14px; color: var(--ink); font-weight:600; }
.testi-author-role{ font-size:12.5px; color: var(--ink-faint); }

@media (max-width: 900px){ .testi-grid{ grid-template-columns:1fr; } }

/* ---------- CTA final avant footer ---------- */
.final-cta{
  text-align:center;
  padding: 72px clamp(20px,5vw,64px);
}
.final-cta h2{ max-width:20ch; margin:0 auto 20px; }
.final-cta p{ max-width:48ch; margin:0 auto 32px; }

/* ---------- COMMENT CA MARCHE ---------- */
.how-it-works-section{ background: var(--paper-2); }

.steps-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position:relative;
}
.step-card{
  position:relative;
  padding: 0 22px 0 0;
}
.step-card:not(:last-child)::after{
  content:"";
  position:absolute;
  top:22px;
  right:-2px;
  width: 44px;
  height:1px;
  background: var(--line-strong);
  background-image: linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 10px);
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.step-num{
  font-family: var(--serif);
  font-size: 15px;
  color: var(--red);
  font-weight:500;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(200,16,46,0.28);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  background: var(--white);
}
.step-card h3{ font-size:16.5px; margin-bottom:10px; line-height:1.32; }
.step-card p{ font-size:13.5px; line-height:1.6; margin:0; color: var(--ink-dim); }

@media (max-width: 1080px){
  .steps-grid{ grid-template-columns: repeat(3, 1fr); gap: 40px 22px; }
  .step-card:nth-child(3)::after{ display:none; }
  .step-card{ padding-right:22px; }
}
@media (max-width: 680px){
  .steps-grid{ grid-template-columns: 1fr; gap: 32px; }
  .step-card::after{ display:none !important; }
}