:root{
  --homme:#3a86ff;
  --femme:#ff5d8f;
  --primaire:#6d28d9;
  --primaire-fonce:#4c1d95;
  --fond:#faf8ff;
  --carte:#ffffff;
  --texte:#2b2338;
  --gris:#6b6577;
  --radius:16px;
  --ombre:0 4px 16px rgba(60,30,90,0.10);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:var(--fond);
  color:var(--texte);
  line-height:1.5;
}
h1,h2,h3{line-height:1.25;margin-top:0;}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  background:var(--carte);
  padding:0.8rem 1.2rem;
  box-shadow:var(--ombre);
}
.logo{font-weight:700;font-size:1.2rem;color:var(--primaire-fonce);}
.burger{
  display:none;
  background:none;border:none;font-size:1.6rem;
  min-width:44px;min-height:44px;cursor:pointer;color:var(--primaire-fonce);
}
#mainNav{display:flex;gap:1.2rem;flex-wrap:wrap;}
#mainNav a{
  text-decoration:none;color:var(--gris);font-weight:600;
  padding:0.5rem 0.3rem;border-bottom:2px solid transparent;
  min-height:44px;display:flex;align-items:center;
}
#mainNav a.active,#mainNav a:hover{color:var(--primaire);border-color:var(--primaire);}

@media (max-width:800px){
  .burger{display:block;}
  #mainNav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--carte);
    flex-direction:column;
    padding:0.5rem 1.2rem 1rem;
    box-shadow:var(--ombre);
  }
  #mainNav.ouvert{display:flex;}
}

/* ===== LAYOUT GENERAL ===== */
main{max-width:1100px;margin:0 auto;padding:0 1.2rem;}
section{padding:2.5rem 0;border-bottom:1px solid #eee5fb;}
section:last-of-type{border-bottom:none;}
h2{font-size:1.6rem;color:var(--primaire-fonce);text-align:center;margin-bottom:1.5rem;}

/* ===== HERO ===== */
.hero{text-align:center;padding-top:2.5rem;}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--primaire-fonce);}
.soustitre{max-width:700px;margin:1rem auto 2rem;color:var(--gris);}

/* Jauge ratio */
.jauge-ratio{
  max-width:500px;margin:0 auto 2rem;
  background:var(--carte);
  border-radius:var(--radius);
  box-shadow:var(--ombre);
  padding:1.2rem;
}
.jauge-titre{font-weight:700;margin-bottom:0.6rem;color:var(--primaire-fonce);}
.jauge-barre{
  display:flex;width:100%;height:22px;border-radius:11px;overflow:hidden;
  background:#eee;
}
.jauge-hommes{background:var(--homme);height:100%;transition:width .4s;}
.jauge-femmes{background:var(--femme);height:100%;transition:width .4s;}
.jauge-legende{display:flex;justify-content:space-between;margin-top:0.6rem;font-size:0.95rem;}
.legende-h{color:var(--homme);font-weight:600;}
.legende-f{color:var(--femme);font-weight:600;}
.jauge-note{margin:0.8rem 0 0;font-size:0.9rem;color:var(--gris);}

.cta-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0.7rem 1.4rem;
  border-radius:999px;font-weight:700;text-decoration:none;
  border:none;cursor:pointer;font-size:1rem;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--primaire);color:#fff;box-shadow:0 4px 14px rgba(109,40,217,0.35);}
.btn-secondaire{background:#fff;color:var(--primaire);border:2px solid var(--primaire);}
.btn-full{width:100%;}

/* ===== OBJECTIFS ===== */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;}
.carte{
  background:var(--carte);border-radius:var(--radius);
  box-shadow:var(--ombre);padding:1.4rem;text-align:center;
}
.carte .icone{font-size:2rem;margin-bottom:0.5rem;}
.carte h3{color:var(--primaire-fonce);margin-bottom:0.4rem;}
.carte p{color:var(--gris);font-size:0.95rem;}

/* ===== FORMULAIRES ===== */
form{
  max-width:600px;margin:0 auto;
  background:var(--carte);border-radius:var(--radius);
  box-shadow:var(--ombre);padding:1.6rem;
  display:flex;flex-direction:column;gap:1.1rem;
}
form label{display:flex;flex-direction:column;gap:0.4rem;font-weight:600;font-size:0.95rem;}
input[type=text],input[type=number],input[type=date],textarea,select{
  padding:0.7rem;border:1px solid #ddd;border-radius:10px;
  font-size:1rem;font-family:inherit;min-height:44px;
}
textarea{resize:vertical;min-height:80px;}
fieldset{border:1px solid #ddd;border-radius:10px;padding:0.8rem;}
legend{font-weight:700;padding:0 0.4rem;color:var(--primaire-fonce);}
.radio,.check{
  display:flex;align-items:center;gap:0.5rem;font-weight:500;
  min-height:44px;
}
.ligne-double{display:flex;gap:1rem;flex-wrap:wrap;}
.ligne-double label{flex:1;min-width:150px;}
.message{font-size:0.9rem;font-weight:600;min-height:1.2em;}
.message.erreur{color:#c0392b;}
.message.succes{color:#1e8f4e;}

/* ===== PROFILS ===== */
.filtres{display:flex;justify-content:center;gap:0.6rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.filtre{
  background:#fff;border:2px solid #ddd;border-radius:999px;
  padding:0.5rem 1.1rem;min-height:44px;cursor:pointer;font-weight:600;color:var(--gris);
}
.filtre.active{border-color:var(--primaire);color:var(--primaire);}
.grille-profils{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;}
.carte-profil{
  background:var(--carte);border-radius:var(--radius);box-shadow:var(--ombre);
  padding:1.2rem;border-top:5px solid var(--gris);
}
.carte-profil.homme{border-top-color:var(--homme);}
.carte-profil.femme{border-top-color:var(--femme);}
.carte-profil h3{margin:0 0 0.2rem;color:var(--primaire-fonce);}
.carte-profil .badge-genre{font-size:0.85rem;font-weight:700;}
.carte-profil.homme .badge-genre{color:var(--homme);}
.carte-profil.femme .badge-genre{color:var(--femme);}
.carte-profil .bio{color:var(--gris);font-size:0.9rem;margin:0.5rem 0;}
.tags-intention{display:flex;flex-wrap:wrap;gap:0.4rem;}
.tag{background:#f1ebfd;color:var(--primaire-fonce);font-size:0.75rem;padding:0.25rem 0.6rem;border-radius:999px;}
.vide{text-align:center;color:var(--gris);font-style:italic;}

/* ===== EVENEMENTS ===== */
.grille-evenements{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;}
.carte-evenement{
  background:var(--carte);border-radius:var(--radius);box-shadow:var(--ombre);
  padding:1.2rem;
}
.carte-evenement .type-ev{font-size:0.8rem;font-weight:700;color:var(--primaire);text-transform:uppercase;}
.carte-evenement h3{margin:0.3rem 0;color:var(--primaire-fonce);}
.carte-evenement .infos-ev{font-size:0.85rem;color:var(--gris);margin-bottom:0.4rem;}
.carte-evenement p{font-size:0.92rem;}

footer{
  text-align:center;padding:1.5rem 1rem;color:var(--gris);font-size:0.85rem;
}