/* assets/css/home.css — CSS de la page d'accueil, reprise quasi verbatim du template
   (template-thailand/en/index.html), chargee UNIQUEMENT sur index.php. Toutes les regles sont
   scopees sous .home-page pour ne jamais entrer en collision avec les classes generiques de
   style.css (.hero etait deja utilisee par l'ancienne mise en page, entre autres) ni avec les
   selecteurs bruts details/summary du template (qui toucheraient sinon le lang-switcher du
   header, commun a toutes les pages). Variables reprises de style.css (--red/--red-dark/
   --navy/--muted/--line/--white), pas de nouveau jeu de tokens hors --red-tint/--success*/
   --warn*/--radius/--shadow propres a cette page.
*/

.home-page {
  --hp-success: #1E7A4C; --hp-success-tint: #E7F4EC;
  --hp-warn: #8A5A10; --hp-warn-tint: #FCEFD9;
  --hp-radius: 14px; --hp-shadow: 0 12px 32px rgba(45,42,74,.10);
}

/* ---------- Hero (centre, style template) ---------- */
/* padding/border-bottom mis a plat explicitement : style.css definit deja un .hero non scope
   (ancienne mise en page) qui laisserait sinon transparaitre un padding lateral et une bordure
   non voulus par le template (le cascade CSS fusionne les proprietes non redeclarees plutot
   que de les ignorer). */
.home-page .hero {
  padding: 60px 0 40px; border-bottom: none; text-align: center;
  background: radial-gradient(1100px 400px at 50% -80px, rgba(165,25,49,.06), transparent);
}
.home-page .hero h1 { font-size: clamp(28px,4.2vw,42px); max-width: 840px; margin: 0 auto .5em; }
.home-page .hero p.lead { max-width: 640px; margin: 0 auto 26px; color: var(--muted); font-size: 17px; }
.home-page .hp-btn-primary {
  display: inline-block; background: var(--red); color: #fff; padding: 15px 30px; border-radius: 999px;
  font-weight: 700; text-decoration: none; font-size: 16px; box-shadow: var(--hp-shadow); border: none; cursor: pointer;
  font-family: inherit;
}
.home-page .hp-btn-primary:hover { background: var(--red-dark); }
.home-page .trust-line { margin-top: 18px; color: var(--muted); font-size: 13.5px; }

.home-page .badges {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; margin-top: 40px;
}
.home-page .badge { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; font-size: 13.5px; }
.home-page .badge b { display: block; font-size: 14.5px; margin-bottom: 2px; }

/* ---------- Sections generiques ---------- */
.home-page section { padding: 64px 0; }
.home-page .hp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.home-page .hp-section-title { text-align: center; max-width: 680px; margin: 0 auto 8px; }
.home-page .hp-section-title h2 { font-size: 27px; }
.home-page .hp-section-title p { color: var(--muted); font-size: 15.5px; margin: 0; }
.home-page .hp-kicker {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red-dark); background: var(--red-tint); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}

/* ---------- Comparatif avant/apres ---------- */
.home-page .compare { max-width: 820px; margin: 38px auto 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.home-page .compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.home-page .compare-col { padding: 20px 24px; }
.home-page .compare-col.old { background: #FAF6F2; border-right: 1px solid var(--line); }
.home-page .compare-col.new { background: var(--red-tint); }
.home-page .compare-head { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
/* #9a6a3a d'origine (template) ne passait qu'a 4.34:1 sur #FAF6F2 (sous le seuil AA de 4.5:1
   requis pour du texte de 12px, meme en gras) — assombri a #6B4A26 (7.42:1) pour la conformite
   accessibilite, meme teinte "brun/legacy", juste plus foncee. */
.home-page .compare-col.old .compare-head { color: #6B4A26; }
.home-page .compare-col.new .compare-head { color: var(--red-dark); }
.home-page .compare-col ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.home-page .compare-col ul li { margin-bottom: 8px; color: var(--ink); }
@media (max-width: 640px) {
  .home-page .compare-row { grid-template-columns: 1fr; }
  .home-page .compare-col.old { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ---------- Verificateur d'eligibilite ---------- */
.home-page .eligibility {
  background: #fff; border: 1px solid var(--line); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow);
  padding: 36px; max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start;
}
.home-page .elig-icon { width: 56px; height: 56px; border-radius: 12px; background: var(--red-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-page .elig-icon svg { width: 28px; height: 28px; color: var(--red); stroke: currentColor; fill: none; stroke-width: 1.8; }
.home-page .eligibility .hp-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--ink); }
.home-page .eligibility select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; font-size: 15px; background: #fff; color: var(--ink); font-family: inherit; }
.home-page #eligResult { margin-top: 16px; padding: 15px 16px; border-radius: 9px; font-size: 14.5px; display: none; }
.home-page #eligResult.show { display: block; }
.home-page #eligResult.ok { background: var(--hp-success-tint); border: 1px solid #BFE3CD; color: var(--hp-success); }
.home-page #eligResult.warn { background: var(--hp-warn-tint); border: 1px solid #EDD6A8; color: var(--hp-warn); }
.home-page .elig-cta { margin-top: 20px; }
.home-page .fineprint { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
@media (max-width: 600px) {
  .home-page .eligibility { grid-template-columns: 1fr; text-align: center; }
  .home-page .eligibility .elig-icon { margin: 0 auto; }
}

/* ---------- Timeline (3 etapes) ---------- */
.home-page .timeline { max-width: 900px; margin: 40px auto 0; display: flex; justify-content: space-between; position: relative; }
.home-page .timeline::before { content: ""; position: absolute; top: 24px; left: 8%; right: 8%; height: 2px; background: var(--line); }
.home-page .tl-step { position: relative; text-align: center; flex: 1; padding: 0 12px; }
.home-page .tl-step .circle {
  width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 2px solid var(--red); color: var(--red);
  font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  position: relative; z-index: 2;
}
.home-page .tl-step h3 { font-size: 15.5px; margin-bottom: 6px; }
.home-page .tl-step p { color: var(--muted); font-size: 13.5px; margin: 0; }
@media (max-width: 760px) {
  .home-page .timeline { flex-direction: column; gap: 28px; }
  .home-page .timeline::before { display: none; }
}

/* ---------- Bloc de contenu (qui a besoin d'un TDAC) ---------- */
.home-page .hp-content-block { max-width: 780px; margin: 0 auto; }
.home-page .hp-content-block h2 { font-size: 23px; margin: 0 0 14px; }
.home-page .hp-content-block p { font-size: 15.5px; margin: 0 0 14px; }

/* ---------- Tarifs ---------- */
.home-page .pricing { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 36px; align-items: stretch; max-width: 1000px; margin-left: auto; margin-right: auto; }
.home-page .price-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; text-align: left; display: flex; flex-direction: column; position: relative; }
.home-page .price-card.featured { border: 2px solid var(--red); box-shadow: var(--hp-shadow); }
.home-page .price-card .flag { position: absolute; top: -13px; left: 26px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; padding: 5px 13px; border-radius: 999px; }
.home-page .price-card h3 { font-size: 17.5px; margin-bottom: 4px; }
.home-page .price-card .amount { font-size: 33px; font-weight: 800; color: var(--ink); margin: 8px 0 4px; }
.home-page .price-card .amount span { font-size: 13px; color: var(--muted); font-weight: 400; }
.home-page .price-card p.desc { color: var(--muted); font-size: 14px; flex: 0 0 auto; min-height: 38px; }
.home-page .price-card ul { list-style: none; padding: 0; margin: 14px 0 22px; text-align: left; font-size: 14px; flex: 1; }
.home-page .price-card ul li { padding-left: 22px; position: relative; margin-bottom: 9px; }
.home-page .price-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.home-page .price-card a { display: block; background: var(--cream); color: var(--ink); text-decoration: none; padding: 12px; border-radius: 9px; font-weight: 700; text-align: center; border: 1px solid var(--line); }
.home-page .price-card.featured a { background: var(--red); color: #fff; border-color: var(--red); }
.home-page .price-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 24px; max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.7; }
@media (max-width: 860px) { .home-page .pricing { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.home-page .hp-faq { max-width: 780px; margin: 36px auto 0; }
.home-page .hp-faq details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 17px 20px; margin-bottom: 10px; }
.home-page .hp-faq summary { font-weight: 700; cursor: pointer; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.home-page .hp-faq summary::-webkit-details-marker { display: none; }
.home-page .hp-faq summary::after { content: "+"; color: var(--red); font-size: 19px; font-weight: 400; flex-shrink: 0; }
.home-page .hp-faq details[open] summary::after { content: "\2212"; }
.home-page .hp-faq details p { color: var(--muted); font-size: 14.5px; margin: 12px 0 0; }

.home-page .hp-closing {
  text-align: center; background: var(--navy); color: #fff; border-radius: 14px; padding: 36px 28px;
  font-size: 19px; font-weight: 700; max-width: 900px; margin: 20px auto 0;
}