/* ==========================================================================
   KIPO - Styles propres à la page d'accueil
   (hero illustré, mockups produit, cartes problème/solution, comparatif,
    résultats, aperçu des tarifs, FAQ)
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
/* Hero a plat (section--cream), comme la Demo : la profondeur vient des blobs et
   du contenu, plus du degrade. */
.hero-accueil__blob-a { width: 440px; height: 440px; right: -130px; top: -90px; }
.hero-accueil__blob-b { width: 300px; height: 300px; right: 220px; bottom: -130px; }

.hero-visuel {
    position: relative;
    width: 100%;
    max-width: clamp(430px, 30vw, 600px);
    min-height: 500px;
    margin-inline: auto;
}
.hero-visuel__photo {
    width: 76%;
    margin-inline: auto;
    aspect-ratio: 37 / 52;
    object-fit: cover;
    border-radius: var(--r-lg);
}
.carte-flottante {
    position: absolute;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}
.carte-flottante__label { font-size: var(--fs-xs); color: var(--subtle); }
.carte-flottante__grand { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; }
.carte-flottante__delta { font-size: var(--fs-xs); color: var(--muted); }
.hero-visuel__note { top: 24px; left: -8px; }
.hero-visuel__avis { top: 132px; right: -8px; }
.hero-visuel__temoignage { bottom: 4px; left: 6px; max-width: 240px; gap: 8px; }
.hero-visuel__temoignage p { font-size: var(--fs-sm); }
.hero-visuel__temoignage .temoignage__auteur { display: flex; justify-content: space-between; align-items: center; width: 100%; }

@media (max-width: 480px) {
    .hero-visuel { max-width: 340px; min-height: 440px; }
    .carte-flottante { padding: 11px 13px; }
    .hero-visuel__avis { right: -2px; }
    .hero-visuel__note { left: -2px; }
}

/* --- Réassurance --------------------------------------------------------- */
.reassurance { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.reassurance__stats { display: flex; align-items: center; gap: 44px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__nombre { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1; }
.stat__nombre .etoiles { color: var(--olive); }
.stat__legende { color: var(--muted); font-size: var(--fs-sm); }
.stat__separateur { width: 1px; height: 50px; background: var(--border); }
.reassurance__note { color: var(--subtle); font-size: var(--fs-sm); }
@media (max-width: 560px) {
    .reassurance__stats { flex-direction: column; gap: 24px; }
    .stat__separateur { width: 60px; height: 1px; }
}

/* --- Problème & solution ------------------------------------------------- */
.probleme-solution { align-items: stretch; }
.ps-carte { padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }
.ps-carte--solution { border: 1px solid var(--olive); }   /* flat : filet 1px accent (au lieu de 2px), meme largeur que .carte -> zero reflow */
.ps-carte__titre { font-size: var(--fs-h3); }
.avant-apres-chip {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pale);
    border-radius: var(--r-pill);
    padding: 9px 15px;
    font-weight: 700;
    font-size: var(--fs-sm);
}
.avant-apres-chip__fleche { display: inline-flex; color: var(--olive); }
.avant-apres-chip__fleche .icon { width: 14px; }

/* --- Fonctionnalités ----------------------------------------------------- */
.fonctionnalites__blob-a { width: 300px; height: 300px; right: -120px; top: 220px; }
.fonctionnalites__blob-b { width: 200px; height: 200px; left: -90px; bottom: 120px; }

.fonctionnalite { margin-top: clamp(44px, 5vw, 70px); }
.fonctionnalite__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fonctionnalite__texte h3 { font-size: var(--fs-bloc); }
.fonctionnalite__visuel { position: relative; display: flex; justify-content: center; }

@media (max-width: 900px) {
    .fonctionnalite--inverse .fonctionnalite__texte { order: -1; }
}

/* Mockups produit (UI reconstruite en HTML/CSS) */
.mockup {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
}
.mockup--sms { border: 2.5px solid var(--ink); border-radius: 28px; }
.mockup__entete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mockup__entete--ligne { justify-content: space-between; }
.mockup__avatar {
    width: 36px; height: 36px;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--pale);
    color: var(--olive);
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800;
}
.mockup__qui strong { display: block; font-size: var(--fs-sm); }
.mockup__qui span { font-size: var(--fs-xs); color: var(--subtle); }
.mockup__bulle { background: var(--cream); border-radius: 14px; padding: 12px 14px; font-size: var(--fs-sm); }
.mockup__action { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mockup__btn { padding: 9px 16px; font-size: var(--fs-sm); gap: 7px; cursor: default; }
.mockup__btn .icon { width: 15px; }
.mockup__statut { font-size: var(--fs-xs); color: var(--subtle); }
.mockup__flottant {
    position: absolute;
    right: -14px; bottom: -22px;
    width: 220px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 13px 15px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: var(--fs-sm);
}
.mockup__meta { font-size: var(--fs-xs); color: var(--subtle); }

.mockup__direct { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--olive); }
.mockup__point { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--green); display: inline-block; flex: none; }
.mockup__point--rouge { background: var(--terracotta); }
.mockup__alerte {
    display: flex; align-items: center; gap: 10px;
    background: var(--alert);
    border: 1px solid rgba(188, 74, 48, .18);
    border-radius: 14px;
    padding: 11px 13px;
}
.mockup__alerte strong { display: block; font-size: var(--fs-sm); }
.mockup__alerte span { font-size: var(--fs-xs); color: var(--muted); }
.chip--alerte { background: rgba(188, 74, 48, .12); color: var(--terracotta); margin-left: auto; }
.mockup__note { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 14px; }
.mockup__note-label { font-size: var(--fs-xs); color: var(--subtle); }
.mockup__note-grand { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.mockup__delta { font-size: var(--fs-xs); }
.mockup__barres { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.mockup__barres span { width: 9px; background: var(--green); border-radius: 3px; }
.mockup__barres span:nth-child(1) { height: 40%; }
.mockup__barres span:nth-child(2) { height: 55%; }
.mockup__barres span:nth-child(3) { height: 68%; }
.mockup__barres span:nth-child(4) { height: 84%; }
.mockup__barres span:nth-child(5) { height: 100%; }

.mockup__citation { font-size: var(--fs-sm); margin: 6px 0 12px; }
.mockup__reponse { background: var(--pale); border-radius: 14px; padding: 12px 13px; }
.mockup__reponse-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--olive); margin-bottom: 6px; }
.mockup__reponse-label .icon { width: 14px; }
.mockup__reponse p { font-size: var(--fs-sm); }

@media (max-width: 900px) {
    .mockup__flottant { position: static; width: 100%; margin-top: 16px; right: auto; bottom: auto; }
    .fonctionnalite__visuel { display: block; }
}

/* --- Comment ça marche --------------------------------------------------- */
.ccm__blob { width: 220px; height: 220px; right: -90px; top: 60px; }
.ccm__cta { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ccm__note { color: var(--muted); font-size: var(--fs-sm); }

/* --- Comparatif (Kipo vs plateforme) ------------------------------------- */
.comparatif-vs { align-items: stretch; }
.vs-carte { padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; }
.vs-carte--kipo { border: 1px solid var(--olive); }   /* flat : filet 1px accent (au lieu de 2px) */
.vs-carte__badge { align-self: flex-start; }
.comparatif-vs__note { max-width: 640px; margin: clamp(28px, 4vw, 40px) auto 0; color: var(--muted); }

/* --- Résultats ----------------------------------------------------------- */
.resultats__blob { width: 260px; height: 260px; left: -110px; top: 80px; }
.avant-apres {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 14px;
    background: var(--pale);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    max-width: 540px;
    margin: 0 auto clamp(32px, 4vw, 48px);
    text-align: center;
}
.avant-apres__de { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--subtle); }
.avant-apres__fleche { color: var(--olive); display: inline-flex; align-self: center; }
.avant-apres__fleche .icon { width: 26px; }
.avant-apres__a { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--olive); line-height: 1; }
.avant-apres__legende { flex-basis: 100%; color: var(--muted); font-size: var(--fs-sm); }

.grille-temoignages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.note-wip { margin-top: 24px; color: var(--subtle); font-size: var(--fs-sm); font-style: italic; }
@media (max-width: 860px) { .grille-temoignages { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* --- Aperçu des tarifs --------------------------------------------------- */
.apercu-tarifs .conteneur { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.apercu-tarifs__sous { margin-bottom: 4px; }
.segments {
    display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 5px;
}
.segments__option {
    font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
    padding: 9px 16px; border-radius: var(--r-pill);
}
.segments__option.is-active { background: var(--pale); color: var(--olive); }

/* --- FAQ ----------------------------------------------------------------- */
.faq__blob { width: 240px; height: 240px; right: -100px; top: 120px; }