/* ==========================================================
   EmmaHarmonie
   Design System V2
   ========================================================== */

:root{

    --primary:#4D7396;
    --primary-dark:#35546F;
    --secondary:#82C6A8;
    --accent:#C9B28F;

    --background:#F8FAFC;
    --surface:#FFFFFF;

    --text:#24313F;
    --text-light:#667688;

    --border:#E4EAF1;

    --success:#58B77C;
    --warning:#E4B363;

    --shadow:0 12px 35px rgba(0,0,0,.08);

    --radius:18px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Poppins",sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.7;

}

img{
    max-width:100%;
    display:block;
}

button{
    font-family:inherit;
}

.hidden{
    display:none;
}

/* ==========================================================
   HERO
   ========================================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px 25px;

    text-align:center;

    background:
    linear-gradient(rgba(0,0,0,.45),
    rgba(0,0,0,.45)),
    url("images/charge-mentale.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.hero-overlay{
    display:none;
}

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    color:#fff;

}

.badge{

    display:inline-block;

    padding:10px 22px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(8px);

    border-radius:999px;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:25px;

}

.hero h1{

    font-size:3.2rem;

    line-height:1.2;

    margin-bottom:25px;

    font-weight:700;

}

.hero-text{

    max-width:760px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.9;

}

.hero-infos{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin:45px 0;

}

.info-card{

    width:170px;

    padding:20px;

    border-radius:18px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(10px);

}

.info-card span{

    display:block;

    margin-top:10px;

    font-size:.95rem;

}

/* ==========================================================
   BOUTONS
   ========================================================== */

.primary-btn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    border:none;

    border-radius:999px;

    padding:18px 36px;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

    box-shadow:var(--shadow);

}

.primary-btn:hover{

    transform:translateY(-3px);

}

.secondary-btn{

    background:#fff;

    border:1px solid var(--border);

    border-radius:999px;

    padding:16px 30px;

    cursor:pointer;

    font-weight:600;

}

.secondary-btn:hover{

    background:#F3F7FB;

}

/* ==========================================================
   QUESTIONNAIRE
   ========================================================== */

.quiz-container{

    max-width:950px;

    margin:70px auto;

    padding:20px;

}

.progress-top{

    margin-bottom:35px;

}

.progress-text{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-weight:600;

    color:var(--primary-dark);

    margin-bottom:12px;

}

.progress-bar{

    height:14px;

    background:#E7EDF5;

    border-radius:999px;

    overflow:hidden;

}

#progressFill{

    height:100%;

    width:0;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transition:.35s;

}

.question-card{

    background:var(--surface);

    border-radius:22px;

    padding:45px;

    box-shadow:var(--shadow);

}

.question-card h2{

    font-size:1.7rem;

    margin-bottom:35px;

    color:var(--primary-dark);

}

#answersContainer{

    display:grid;

    gap:18px;

}

.answer{

    padding:20px;

    border:2px solid var(--border);

    border-radius:16px;

    background:#fff;

    cursor:pointer;

    transition:.25s;

}

.answer:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

}

.answer.selected{

    background:#EEF6FB;

    border-color:var(--primary);

}

.navigation{

    display:flex;

    justify-content:space-between;

    margin-top:35px;

}

/* ==========================================================
   RESULTATS
   ========================================================== */

.result-container{

    max-width:1100px;

    margin:70px auto;

    padding:20px;

}

.score-circle{

    width:250px;

    margin:0 auto 45px;

    position:relative;

}

.score-circle svg{

    width:250px;

    height:250px;

    transform:rotate(-90deg);

}

.bg-circle{

    fill:none;

    stroke:#E6EDF4;

    stroke-width:16;

}

.progress-circle{

    fill:none;

    stroke:var(--success);

    stroke-width:16;

    stroke-linecap:round;

    stroke-dasharray:565;

    stroke-dashoffset:565;

    transition:stroke-dashoffset 1.2s ease;

}

.score-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.score-content span{

    font-size:3rem;

    font-weight:700;

    color:var(--primary);

}

.score-content small{

    margin-top:8px;

    color:var(--text-light);

}

.result-title{

    text-align:center;

    font-size:2.2rem;

    color:var(--primary-dark);

    margin-bottom:20px;

}

.result-subtitle{

    text-align:center;

    max-width:760px;

    margin:0 auto 40px;

    color:var(--text-light);

    line-height:1.8;

}

#profileCards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

    margin-top:30px;

}

.profile-card{

    background:#fff;

    border-radius:20px;

    padding:28px;

    box-shadow:var(--shadow);

    border-top:6px solid var(--primary);

}

.profile-card h4{

    margin-bottom:12px;

    color:var(--primary-dark);

}

.profile-percent{

    margin-top:15px;

    font-weight:700;

    color:var(--primary);

}

.progress-profile{

    width:100%;

    height:10px;

    background:#E7EDF5;

    border-radius:999px;

    overflow:hidden;

    margin-top:12px;

}

.progress-profile-fill{

    height:100%;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transition:width .8s ease;

}

/* ==========================================================
   ANALYSE - CONSEILS
========================================================== */

.analysis,
.tips,
.therapy-card,
.email-box{

    background:#FFFFFF;

    border-radius:22px;

    padding:35px;

    margin-top:35px;

    box-shadow:var(--shadow);

}

.analysis h3,
.tips h3,
.therapy-card h3,
.email-box h3{

    color:var(--primary-dark);

    margin-bottom:20px;

}

.analysis p,
.tips p,
.therapy-card p{

    margin-bottom:16px;

    line-height:1.8;

}

/* ==========================================================
   HYPNOSE / REIKI
========================================================== */

.therapy-section{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

    margin-top:45px;

}

/* ==========================================================
   AVERTISSEMENT
========================================================== */

.medical-warning{

    margin-top:45px;

    background:#FFF8EF;

    border-left:6px solid var(--warning);

    border-radius:18px;

    padding:28px;

    line-height:1.8;

}

.medical-warning strong{

    display:block;

    margin-bottom:12px;

    color:#8B6D46;

}

/* ==========================================================
   APPEL A L'ACTION
========================================================== */

.cta{

    margin-top:70px;

    padding:55px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        #4D7396 0%,
        #6D92B2 100%
    );

    color:#fff;

    text-align:center;

    box-shadow:0 20px 60px rgba(77,115,150,.25);

}

.cta h3{

    font-size:2rem;

    margin-bottom:25px;

    font-weight:700;

    color:#fff;

}

.cta p{

    max-width:780px;

    margin:0 auto 35px;

    font-size:1.08rem;

    line-height:1.9;

    opacity:.96;

}

.cta-benefits{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:40px;

}

.cta-benefits div{

    background:rgba(255,255,255,.15);

    padding:14px 22px;

    border-radius:999px;

    backdrop-filter:blur(8px);

    font-weight:600;

}

.cta h3{

    font-size:2rem;

    margin-bottom:20px;

}

.cta p{

    max-width:760px;

    margin:0 auto 35px;

    line-height:1.9;

}

.booking-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:15px;

    padding:18px 38px;

    border-radius:999px;

    background:#FFFFFF;

    color:var(--primary-dark);

    text-decoration:none;

    font-size:1.05rem;

    font-weight:700;

    transition:all .35s ease;

    box-shadow:0 12px 35px rgba(0,0,0,.18);

}

.booking-btn:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

    background:#F7FAFC;

}

    transform:translateY(-3px);

}

/* ==========================================================
   FORMULAIRE
========================================================== */

.email-box{

    max-width:900px;

    margin:70px auto;

}

.email-box p{

    margin-bottom:25px;

    color:var(--text-light);

}

.email-box input[type="text"],
.email-box input[type="email"]{

    width:100%;

    padding:16px;

    margin-bottom:18px;

    border:1px solid var(--border);

    border-radius:14px;

    font-size:16px;

}

.rgpd{

    display:flex;

    gap:12px;

    align-items:flex-start;

    margin:20px 0;

    font-size:.95rem;

    line-height:1.6;

}

.rgpd input{

    margin-top:4px;

}

/* ==========================================================
   SEO
========================================================== */

.seo-content{

    background:#FFFFFF;

    margin-top:80px;

    padding:70px 20px;

}

.seo-container{

    max-width:900px;

    margin:auto;

}

.seo-container h2{

    color:var(--primary-dark);

    margin:35px 0 18px;

}

.seo-container p{

    line-height:1.9;

    color:var(--text-light);

}

/* ==========================================================
   FOOTER
========================================================== */

footer{

    background:#23384D;

    color:#FFFFFF;

    text-align:center;

    padding:45px 20px;

}

footer p{

    line-height:1.8;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

.hero h1{

font-size:2.3rem;

}

.question-card{

padding:30px;

}

.navigation{

flex-direction:column;

gap:15px;

}

.navigation button{

width:100%;

}

.score-circle{

width:210px;

}

.score-circle svg{

width:210px;

height:210px;

}

}

@media(max-width:600px){

.hero{

padding:45px 20px;

}

.hero-text{

font-size:1rem;

}

.hero-infos{

flex-direction:column;

align-items:center;

}

.info-card{

width:100%;

max-width:260px;

}

.question-card{

padding:24px;

}

.question-card h2{

font-size:1.35rem;

}

.cta{

padding:40px 25px;

}

.cta h3{

font-size:1.6rem;

}

.analysis,
.tips,
.therapy-card,
.email-box{

padding:25px;

}

}
/*==================================================
  Résultat global
==================================================*/

.global-result{

    max-width:900px;

    margin:40px auto 60px;

    padding:35px;

    background:rgba(255,255,255,.92);

    border-radius:22px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    text-align:center;

}

.global-result h2{

    color:#2f4f6b;

    font-size:2rem;

    margin-bottom:18px;

}

.global-result p{

    font-size:1.1rem;

    line-height:1.9;

    color:#555;

}