/* --- Reset & Base --- */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, sans-serif;
}
html, body {overflow-x:hidden;} /* empêche swipe horizontal */
body {background:#f5f5f5; color:#333;}
a {text-decoration:none; color:inherit;}
section {padding:5vw 4vw;} /* padding adaptatif selon largeur écran */
.container {max-width:1100px; margin:0 auto;}
h1,h2,h3,h4 {margin-bottom:1em;}
p {margin-bottom:1em; line-height:1.6;}
button {cursor:pointer;}

/* --- Section Titles --- */
.section-title {
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900;
    position: relative;
    color: #4F46E5;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin-bottom:2em;
    animation: slideInTitle 0.6s ease-out;
}
.section-title::after {
    content:'';
    display:block;
    width:60px;
    height:4px;
    background:#FBBF24;
    margin:0.5em auto 0 auto;
    border-radius:2px;
}
@keyframes slideInTitle {
    0% {opacity:0; transform:translateY(-20px);}
    100% {opacity:1; transform:translateY(0);}
}

/* --- Hero --- */
.hero {
    background:#4F46E5;
    color:white;
    text-align:center;
    padding:clamp(4rem, 10vw, 10rem) 4vw;
}
.hero h1 {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    margin-bottom:1em;
    line-height:1.2;
}
.hero h1 .highlight {color:#FBBF24;}
.hero p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    margin-bottom:2em;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
    word-wrap: break-word;
}
.btn-primary {
    background:#FBBF24;
    color:#111;
    padding:1rem 2rem;
    border:none;
    border-radius:8px;
    font-weight:bold;
    transition:0.3s;
    display:inline-block;
    white-space: normal;
}
.btn-primary:hover {background:#F59E0B;}

/* --- Urgence --- */
.urgency {
    background:#FEE2E2;
    color:#B91C1C;
    padding:0.8rem 1rem;
    border-radius:8px;
    font-weight:bold;
    display:inline-block;
    margin-top:0.5rem;
    font-size:1rem;
}

/* --- Avant / Après --- */
.before-after {
    display:flex;
    flex-wrap:wrap;
    gap:2vw;
    justify-content:center;
    margin-bottom:3em;
    width:100%;
}
.box {
    flex:1 1 300px;
    min-width:280px;
    background:white;
    padding:2rem;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
.avant {background:#FFE5E5; border-left:5px solid #B91C1C;}
.apres {background:#E6F4EA; border-left:5px solid #16A34A;}
.before-after ul {list-style:none; padding-left:0; margin-top:1em;}
.before-after li {margin-bottom:1em; display:flex; flex-direction:column; gap:0.3em; word-wrap: break-word;}
.before-after li i {font-size:1.2em; flex-shrink:0;}
.pain-text {display:flex; align-items:center; gap:0.5em; font-weight:bold; font-size:1em;}
.avant .pain-text {color:#B91C1C;}
.apres .pain-text {color:#16A34A;}
.consequence-text {margin-left:28px; font-size:0.95em;}
.avant .consequence-text {color:#7F1D1D;}
.apres .consequence-text {color:#166534;}

/* --- Features --- */
.features {
    display:flex;
    flex-wrap:wrap;
    gap:2vw;
    justify-content:center;
    margin-top:2em;
    width:100%;
}
.feature {
    background:white;
    padding:1.5rem 1.8rem;
    border-radius:12px;
    flex:1 1 220px;
    display:flex;
    align-items:flex-start;
    gap:1em;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
.feature i {color:#4F46E5; font-size:1.5em; flex-shrink:0;}

/* --- Pricing --- */
.pricing {
    display:flex;
    flex-wrap:wrap;
    gap:2vw;
    justify-content:center;
    margin-top:2em;
    width:100%;
}
.plan {
    background:white;
    padding:2rem;
    border-radius:12px;
    flex:1 1 250px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    text-align:center;
    transition:0.3s;
    max-width:100%;
}
.plan:hover {transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.15);}
.plan .price {font-size:2em; font-weight:bold; margin:1em 0;}
.features-list {list-style:none; padding-left:0; margin-top:1em; text-align:left;}
.features-list li {margin-bottom:0.8em; font-size:1em; display:flex; align-items:center;}
.features-list li i {color:#16A34A; margin-right:0.5em; font-size:1.2em; flex-shrink:0;}
.bonus {color:#16A34A; font-weight:bold;}
.plan .btn-plan {margin-top:1.5em; display:inline-block; padding:0.8rem 1.5rem; border-radius:8px; font-weight:bold; transition:0.3s;}
.plan .btn-plan:hover {background:#F59E0B; color:#111;}

/* --- Demo vidéo --- */
.demo-section {
    background:#E0E7FF;
    text-align:center;
    padding:5vw 4vw;
    overflow:hidden;
}
.demo-section video {
    max-width:100%;
    height:auto;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* --- Formulaire --- */
.appointment-section {
    background:#4F46E5;
    color:white;
    padding:5vw 4vw;
}
.appointment-section .section-title {
    color:#FBBF24;
    font-size:clamp(1.6rem,4vw,2rem);
    font-weight:900;
    text-align:center;
    margin-bottom:2em;
}
.appointment-section .section-title::after {
    content:'';
    display:block;
    width:60px;
    height:4px;
    background:#fff;
    margin:0.5em auto 0 auto;
    border-radius:2px;
}
.appointment-section form {
    background:white;
    color:#333;
    padding:2rem;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    max-width:500px;
    margin:0 auto;
    width:100%;
}
.appointment-section input,
.appointment-section select,
.appointment-section textarea {
    width:100%;
    padding:0.8rem;
    margin-bottom:1rem;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:1rem;
}
.appointment-section button {
    width:100%;
    padding:1rem 0;
    font-size:1.05em;
    font-weight:bold;
    border-radius:10px;
    border:none;
    background:#FBBF24;
    color:#111;
    transition:0.3s;
}
.appointment-section button:hover {background:#F59E0B;}

/* --- Footer --- */
footer {text-align:center; padding:3em 2em; background:#333; color:white;}

/* --- Responsive fluide avec clamp et flex-wrap --- */
@media(max-width:1024px){
    .hero h1{font-size:clamp(1.8rem,4vw,2.4rem);}
    .hero p{font-size:clamp(1rem,2.5vw,1.1rem);}
    .before-after{gap:2vw;}
    .features{gap:2vw;}
    .pricing{gap:2vw;}
}

@media(max-width:768px){
    .hero{padding:6vw 4vw;}
    .hero h1{font-size:clamp(1.6rem,5vw,2rem);}
    .hero p{font-size:clamp(0.95rem,3vw,1rem);}
    .before-after{flex-direction:column; gap:1.5em;}
    .features, .pricing{flex-direction:column; gap:1.2em;}
    .plan{width:100%; max-width:350px;}
    .appointment-section form{padding:2rem; width:90%;}
}

@media(max-width:480px){
    .hero{padding:4vw 3vw;}
    .hero h1{font-size:clamp(1.4rem,5vw,1.6rem);}
    .hero p{font-size:clamp(0.85rem,4vw,0.95rem);}
    .btn-primary{padding:0.8rem 1.2rem;}
    .plan .price{font-size:1.5em;}
    .plan .btn-plan{padding:0.6rem 1rem;}
    .appointment-section .section-title{font-size:clamp(1.3rem,4vw,1.6rem);}
    .appointment-section form{padding:1.5rem; width:95%;}
    .appointment-section input,
    .appointment-section select,
    .appointment-section textarea{padding:0.6rem;}
    .appointment-section button{padding:0.7rem 0; font-size:0.95em;}
}


/* --- Pourquoi KIRA : cartes responsive --- */
.why-kira {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.why-kira .feature {
    flex: 1 1 auto;       /* s'adapte au contenu */
    width: 100%;           /* prend toute la largeur dispo sur mobile */
    max-width: 350px;      /* limite largeur sur desktop */
    min-height: auto;      /* supprime min-height forcé */
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column; /* texte et icônes bien alignés */
    height: auto;          /* ajuste la hauteur automatiquement */
}

@media(max-width:768px){
    .why-kira {
        flex-direction: column;
        align-items: center;
    }

    .why-kira .feature {
        width: 90%;      /* petit padding latéral */
        max-width: none; /* ignore max-width desktop pour mobile */
    }
}