/* ============================================================
   NOMAD-SAFE — style.css
   Reconstruit à partir de vos classes/IDs existants + des
   captures d'écran du site déjà en ligne (palette bleu nuit / or).
   Couvre : index, about, features, contact, terms.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  --navy-950:#070a12;
  --navy-900:#0b0f1a;
  --navy-850:#0e1424;
  --navy-800:#111726;
  --navy-700:#1a2233;
  --gold-500:#e0b04c;
  --gold-400:#f0c96a;
  --text-primary:#f5f6f8;
  --text-secondary:#a7adbe;
  --text-muted:#6d7488;
  --border-soft: rgba(255,255,255,0.09);
  --ok-500:#3fb87f;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --maxw:1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Poppins', sans-serif;
  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(224,176,76,0.08), transparent 60%),
    radial-gradient(ellipse 800px 650px at 100% 0%, rgba(60,80,140,0.14), transparent 55%),
    var(--navy-950);
  color:var(--text-primary);
  font-weight:300;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-weight:700; margin:0; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }

/* ---------------- HEADER / NAV (identique sur les 5 pages) ---------------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px; max-width:var(--maxw); margin:0 auto;
  position:relative; z-index:20;
}
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo img{ width:38px; height:38px; border-radius:50%; }
.logo h2{ font-size:17px; letter-spacing:0.3px; color:var(--gold-400); font-weight:700; }
.logo span{ font-size:11.5px; color:var(--text-muted); }

nav{ display:flex; align-items:center; gap:30px; }
nav a{
  text-decoration:none; color:var(--text-secondary); font-size:14.5px; font-weight:500;
  transition:color .15s ease; position:relative; padding:4px 0;
}
nav a:hover{ color:var(--text-primary); }
nav a.current{ color:var(--gold-400); }
nav a.current::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--gold-500); border-radius:2px;
}

.language-switch{ display:flex; gap:6px; background:rgba(255,255,255,0.05); padding:4px; border-radius:999px; }
.lang-btn{
  border:none; background:transparent; color:var(--text-secondary);
  font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:6px 14px; border-radius:999px; transition:.15s ease;
}
.lang-btn.active{ background:var(--gold-500); color:var(--navy-950); }
.lang-btn:not(.active):hover{ color:var(--text-primary); }

.buttons{ display:flex; gap:12px; }
.buttons button{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; cursor:pointer;
  padding:10px 20px; border-radius:10px; border:1px solid transparent; transition:.15s ease;
}
.login{ background:transparent; border-color:rgba(255,255,255,0.18); color:var(--text-primary); }
.login:hover{ background:rgba(255,255,255,0.06); }
.signup{ background:linear-gradient(155deg, var(--gold-400), var(--gold-500)); color:var(--navy-950); }
.signup:hover{ filter:brightness(1.07); }

/* Menu mobile (hamburger) */
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--text-primary); margin:5px 0; border-radius:2px; }

/* ---------------- HERO (index.html) ---------------- */
.hero{
  display:flex; gap:60px; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:50px 40px 90px; flex-wrap:wrap;
}
.hero .left{ flex:1; min-width:340px; max-width:560px; }
.hero .left .hero-logo{ width:64px; margin-bottom:18px; opacity:0.9; }
.hero h1{ font-size:46px; line-height:1.08; margin-bottom:14px; }
.hero #hero-subtitle2{ color:var(--gold-400); font-size:18px; font-weight:600; margin:0 0 14px; }
.hero #hero-description{ color:var(--text-secondary); font-size:15.5px; line-height:1.65; margin:0 0 28px; font-weight:300; }
.hero .actions{ display:flex; gap:14px; }
.more{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; cursor:pointer;
  padding:13px 26px; border-radius:11px; border:1px solid rgba(255,255,255,0.2);
  background:transparent; color:var(--text-primary); text-decoration:none; display:inline-block;
  transition:.15s ease;
}
.more:hover{ background:rgba(255,255,255,0.07); }

.hero .right{ flex:1; min-width:340px; max-width:460px; }
.card{
  background:rgba(255,255,255,0.045); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:30px; backdrop-filter:blur(8px);
}
.card h2{ color:var(--gold-400); font-size:22px; margin-bottom:20px; }
.card input, .card select{
  width:100%; padding:13px 15px; margin-bottom:13px; border-radius:10px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  color:var(--text-primary); font-family:'Poppins',sans-serif; font-size:14px; font-weight:300;
}
.card input::placeholder{ color:var(--text-muted); }
.card input:focus, .card select:focus{ outline:2px solid var(--gold-500); outline-offset:1px; border-color:transparent; }

.password-container{ position:relative; }
.password-container input{ padding-right:44px; }
.toggle-password{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  cursor:pointer; color:var(--text-muted); display:flex; margin-top:-6px;
}
.toggle-password:hover{ color:var(--text-primary); }
.toggle-password svg{ width:19px; height:19px; }

.input-group{ display:flex; gap:8px; margin-bottom:13px; }
.input-group select.country-select{ width:150px; flex-shrink:0; margin-bottom:0; }
.input-group input{ margin-bottom:0; }

.checkbox-group{ display:flex; align-items:flex-start; gap:9px; margin:6px 0 20px; }
.custom-checkbox{ width:16px; height:16px; margin-top:2px; accent-color:var(--gold-500); flex-shrink:0; }
.checkbox-label{ font-size:12.5px; color:var(--text-secondary); line-height:1.5; font-weight:300; }
.checkbox-label a{ color:var(--gold-400); text-decoration:none; font-weight:500; }
.checkbox-label a:hover{ text-decoration:underline; }

#submit-btn{
  width:100%; padding:14px; border:none; border-radius:11px; cursor:pointer;
  background:linear-gradient(155deg, var(--gold-400), var(--gold-500)); color:var(--navy-950);
  font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; transition:.15s ease;
}
#submit-btn:hover{ filter:brightness(1.07); }

/* ---------------- Sections génériques (about / features / contact / terms) ---------------- */
.page-hero{ max-width:var(--maxw); margin:0 auto; padding:60px 40px 20px; text-align:center; }
.page-hero .eyebrow{ color:var(--gold-400); font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px; }
.page-hero h1{ font-size:38px; margin-bottom:14px; }
.page-hero p{ color:var(--text-secondary); font-size:15.5px; max-width:600px; margin:0 auto; line-height:1.6; font-weight:300; }

section.block{ max-width:var(--maxw); margin:0 auto; padding:50px 40px; }
section.block.tight{ padding-top:10px; padding-bottom:10px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:900px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.feature-card{
  background:rgba(255,255,255,0.04); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:28px;
}
.feature-card .num{ font-size:12.5px; color:var(--gold-400); font-weight:700; letter-spacing:1px; margin-bottom:12px; }
.feature-card h3{ font-size:17px; margin-bottom:10px; }
.feature-card p{ color:var(--text-secondary); font-size:14px; line-height:1.6; font-weight:300; margin:0; }

.stat-row{ display:flex; gap:40px; flex-wrap:wrap; justify-content:center; padding:20px 40px 50px; max-width:var(--maxw); margin:0 auto; }
.stat{ text-align:center; }
.stat .n{ font-size:34px; font-weight:700; color:var(--gold-400); }
.stat .l{ font-size:13px; color:var(--text-secondary); margin-top:4px; }

/* Story / about */
.story-block{ display:flex; gap:50px; align-items:center; flex-wrap:wrap; }
.story-block .txt{ flex:1; min-width:320px; }
.story-block .txt h2{ font-size:26px; margin-bottom:16px; }
.story-block .txt p{ color:var(--text-secondary); font-size:15px; line-height:1.75; font-weight:300; margin-bottom:14px; }
.story-block .visual{
  flex:1; min-width:280px; min-height:280px; border-radius:var(--radius-lg);
  background:linear-gradient(155deg, rgba(224,176,76,0.14), rgba(20,26,44,0.6));
  border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center;
}

/* Contact form */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:var(--maxw); margin:0 auto; padding:10px 40px 70px; }
@media (max-width:860px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-info .item{ display:flex; gap:14px; margin-bottom:22px; }
.contact-info .ic{
  width:42px; height:42px; border-radius:11px; background:rgba(224,176,76,0.12); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info .ic svg{ width:20px; height:20px; }
.contact-info b{ display:block; font-size:14.5px; margin-bottom:3px; }
.contact-info span{ font-size:13.5px; color:var(--text-secondary); }
.contact-form-card{ padding:32px; }
.contact-form-card label{ display:block; font-size:12.5px; color:var(--text-secondary); margin-bottom:6px; }
.contact-form-card textarea{
  width:100%; padding:13px 15px; border-radius:10px; resize:vertical; min-height:110px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  color:var(--text-primary); font-family:'Poppins',sans-serif; font-size:14px; font-weight:300;
}
.form-success{
  display:none; background:rgba(63,184,127,0.12); color:var(--ok-500);
  border:1px solid rgba(63,184,127,0.3); border-radius:10px; padding:13px 16px; font-size:13.5px; margin-top:14px;
}
.form-success.show{ display:block; }

/* Terms / legal */
.legal-nav{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.legal-nav a{
  font-size:13px; padding:8px 16px; border-radius:999px; text-decoration:none;
  background:rgba(255,255,255,0.05); color:var(--text-secondary); border:1px solid var(--border-soft);
}
.legal-nav a:hover{ color:var(--text-primary); background:rgba(255,255,255,0.08); }
.legal-block{ max-width:820px; margin:0 auto; padding:20px 40px 60px; }
.legal-block h2{ font-size:22px; color:var(--gold-400); margin:34px 0 14px; scroll-margin-top:24px; }
.legal-block h2:first-child{ margin-top:0; }
.legal-block p{ color:var(--text-secondary); font-size:14.5px; line-height:1.8; font-weight:300; margin-bottom:14px; }
.legal-block .updated{ color:var(--text-muted); font-size:12.5px; margin-bottom:30px; display:block; }

/* ---------------- FOOTER (identique sur les 5 pages) ---------------- */
footer{ border-top:1px solid var(--border-soft); margin-top:40px; }
.footer-wrap{
  max-width:var(--maxw); margin:0 auto; padding:44px 40px;
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.footer-col h4{ font-size:13px; color:var(--text-primary); margin-bottom:14px; letter-spacing:0.4px; }
.footer-col a{ display:block; font-size:13.5px; color:var(--text-secondary); text-decoration:none; margin-bottom:10px; }
.footer-col a:hover{ color:var(--gold-400); }
.footer-brand{ max-width:280px; }
.footer-brand .logo{ margin-bottom:10px; }
.footer-brand p{ font-size:13px; color:var(--text-muted); line-height:1.6; font-weight:300; }
.footer-bottom{
  border-top:1px solid var(--border-soft); text-align:center; padding:18px 40px;
  font-size:12.5px; color:var(--text-muted);
}

/* Accessibilité */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--gold-400); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* ---------------- Responsive ---------------- */
@media (max-width:860px){
  nav, .language-switch{ display:none; }
  nav.mobile-open{
    display:flex; flex-direction:column; position:absolute; top:74px; left:0; right:0;
    background:var(--navy-900); padding:20px 40px; border-bottom:1px solid var(--border-soft); gap:18px;
  }
  .nav-toggle{ display:block; }
  header{ padding:18px 20px; }
  .hero{ padding:30px 20px 60px; }
  .hero h1{ font-size:34px; }
  .container, section.block, .page-hero, .contact-wrap, .legal-block, .footer-wrap{ padding-left:20px; padding-right:20px; }
}

/* Correctif pour aligner la case à cocher et le texte */
.checkbox-group {
    display: flex !important;
    flex-direction: row !important;      /* Aligne horizontalement */
    align-items: flex-start !important;  /* Aligne le haut de la case avec le texte */
    justify-content: flex-start !important;
    gap: 10px !important;                /* Espace fixe entre la case et le texte */
    margin: 15px 0 !important;           /* Espace au-dessus et en-dessous */
    width: 100% !important;
    text-align: left !important;
}

/* Force la case à cocher à garder sa taille et sa position à gauche */
.custom-checkbox {
    width: 18px !important;              /* Ajustez la taille si nécessaire */
    height: 18px !important;
    margin: 0 !important;                /* Supprime les marges parasites */
    flex-shrink: 0 !important;           /* Empêche la case de se déformer */
    cursor: pointer !important;
}

/* Force le texte à s'aligner correctement à côté de la case */
.checkbox-label {
    color: #ffffff !important;           /* Couleur du texte principal */
    font-size: 14px !important;          /* Taille de police standard */
    line-height: 1.4 !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: inline !important;
}

/* Style pour les liens Conditions et Politique */
.checkbox-label a {
    color: #e5b842 !important;           /* Couleur dorée pour vos liens */
    text-decoration: underline !important;
}

/* Applique l'image de fond à toute la section d'inscription */
section#inscription {
    background-image: url('images/fond.jpg') !important; /* Le chemin direct vers votre image */
    background-size: cover !important;                 /* L'image s'adapte à tout l'écran */
    background-position: center !important;             /* L'image reste centrée */
    background-repeat: no-repeat !important;           /* Évite la répétition */
    min-height: 100vh !important;                       /* Force l'affichage sur toute la hauteur */
}