/* ===========================
   DSIN – Landing Styles
   =========================== */
:root{
  --bg:#0b0d12;
  --bg-2:#0f131b;
  --card:#121826;
  --muted:#98a2b3;
  --text:#f7f7f8;
  --accent:#38bdf8; /* cyan */
  --accent-2:#7c3aed; /* violet */
  --success:#22c55e;
  --danger:#ef4444;
  --border:rgba(255,255,255,.1);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}

html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Montserrat","Roboto",system-ui,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{ color:blue; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ========= CTA flottant ========= */
.cta-container{
  position:fixed; right:20px; bottom:20px; z-index:20;
}
.cta-button{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#081018; font-weight:800; padding:14px 18px; border-radius:999px;
  box-shadow:var(--shadow);
}
.cta-button i{ font-size:18px; }

/* ========= Header héro vidéo ========= */
.rencontres-header{
  position:relative; min-height:50vh; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(60,80,120,.3), transparent 60%);
}
.rencontres-hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:brightness(.45) saturate(1.1);
}
.rencontres-header::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(11,13,18,.3) 0%, rgba(11,13,18,.9) 70%, var(--bg) 100%);
}

/* ========= Nav ========= */
#nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
#nav .logo img{ width:170px;}

/* Logo partenaire dans le header */
.partner-logo img {
  width: 200px;
  display: block;
  transition: transform 0.2s ease;
}
.partner-logo img:hover {
  transform: scale(1.05);
}

#nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:12px; }
.back-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  background:rgba(255,255,255,.08); border:1px solid var(--border); border-radius:12px;
}

/* ========= Hero content ========= */
.rencontres-content{ display:flex; justify-content:center; padding:10vh 24px 6vh; }
.rencontres-hero{ max-width:1100px; width:100%; }
.rencontres-hero h1{ font-size:18px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin:0 0 6px; }
.rencontres-hero h2{ font-size:52px; line-height:1.05; margin:0 0 14px; font-weight:900; }
.event-details{ display:flex; flex-wrap:wrap; gap:16px; margin:14px 0 12px; }
.event-details > div{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
  padding:8px 12px; border-radius:12px;
}

/* ========= Compte à rebours ========= */
.countdown-container{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.countdown-item{
  text-align:center; background:rgba(255,255,255,.08);
  border:1px solid var(--border); padding:12px 14px; border-radius:14px; min-width:80px;
}
.countdown-number{ display:block; font-size:26px; font-weight:900; }
.countdown-label{ font-size:11px; opacity:.85; }
.countdown-separator{ font-weight:900; opacity:.8; }

/* ========= Section Register (contenu + formulaire) ========= */
.register-section{ background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%); padding:64px 20px; }
.register-wrap{
  max-width:1200px; margin:0 auto;
  display:grid; gap:32px; grid-template-columns: 1.05fr .95fr; align-items:start;
}
.register-info h2{ margin:0 0 10px; font-size:30px; }
.register-info .kicker{ display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.info-block{
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  padding:16px 18px; border-radius:14px; margin:12px 0;
}
.info-row{ display:flex; gap:10px; align-items:flex-start; margin:6px 0; }
.info-row i{ min-width:20px; margin-top:2px; opacity:.9; }
.register-info ul{ margin:10px 0 0 0; padding-left:18px; }
.register-info li{ margin:6px 0; }

/* ====== Formulaire ====== */
.assister-form{
  background:#fff; color:#111; border-radius:16px; padding:20px; box-shadow:var(--shadow);
  border:1px solid #eceef1;
}
.assister-form .registration-content{ display:block; }
.assister-form .double{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.assister-form .field-container{ margin-bottom:12px; }
.assister-form input[type="text"],
.assister-form input[type="tel"],
.assister-form input[type="email"]{
  width:87%; padding:12px 14px; border:1px solid #d8dee6; border-radius:10px; font-size:14px; background:#fff; font-size: 15px;
}
.assister-form input[type="text"]:focus,
.assister-form input[type="tel"]:focus{ outline:none; border-color:#b8cdfa; box-shadow:0 0 0 3px rgba(59,130,246,.15); }


/* Par défaut : caché */
.assister-form .error-message{ display:none; color:#b4232a; font-size:12px; margin-top:6px; }
/* Afficher l'erreur uniquement si l’input a été "touché" */
.assister-form input[data-touched="true"]:invalid ~ .error-message{
  display:flex; align-items:center; gap:6px;
}
/* Bordure rouge uniquement après interaction */
.assister-form input[data-touched="true"]:invalid{
  border-color:#b4232a;
  box-shadow:0 0 0 3px rgba(244,63,94,.15);
}
.privacy-label{ display:flex; gap:10px; align-items:flex-start; font-size:13px; background:#f7f9fc; padding:10px 12px; border-radius:10px; border:1px solid #e6eaf0;margin: 10px 0 15px;}
.privacy-label p{ margin:0; }
.privacy-label .error{ display:none; color:#b4232a; font-size:12px; margin-top:6px; }
#connexion button{
  width:100%; padding:14px 16px; border:none; border-radius:12px; font-weight:800; cursor:pointer;
  background:linear-gradient(135deg,#22d3ee,#7c3aed); color:#fff; box-shadow:0 8px 20px rgba(124,58,237,.35);
}
#connexion button i{ margin-right:8px; }

div#recaptcha_container{padding: 2vh 0; }

/* ====== Grille des “événements majeurs” (si tu conserves la section) ====== */
.events-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px;
}
.event-card{
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; transition:transform .2s ease;
}
.event-card:hover{ transform:translateY(-4px); }
.event-image img{ width:100%; height:160px; object-fit:cover; }
.event-content{ padding:12px 14px; }
.event-content h3{ margin:0 0 6px; font-size:18px; }
.event-content p{ margin:0; color:var(--muted); }

/* ====== Timeline (déroulé) ====== */
.timeline{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.timeline-item{
  display:grid; grid-template-columns:40px 1fr; gap:12px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  padding:14px; border-radius:14px;
}
.timeline-marker{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#081018; border-radius:10px; font-size:18px;
}
.timeline-content h3{ margin:0 0 6px; font-size:16px; }
.timeline-content p{ margin:0; color:var(--muted); }

/* ====== Section vidéo Youtube ====== */
.video-section{ max-width:1100px; margin:36px auto; padding:0 20px; }
.video-section iframe{
  width:100%; height:520px; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#000;
}

/* ====== Footer ====== */
footer{
  padding:20px; text-align:center; color:var(--muted);
  border-top:1px solid var(--border); background:rgba(255,255,255,.03);
}
footer a{ color:#e2e8f0; text-decoration:underline; }

/* ====== Popup succès ====== */
.success-overlay{
  position:fixed; inset:0; display:none; z-index:40; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.success-popup{
  width:min(520px,92vw); background:#fff; color:#0b1220; border-radius:18px; padding:22px; box-shadow:var(--shadow);
}
.success-popup .success-icon{ font-size:42px; color:var(--success); margin-bottom:8px; }
.success-popup h3{ margin:6px 0 6px; }
.success-popup p{ margin:0 0 12px; color:#203049; }
.success-popup .close-popup{
  padding:10px 14px; border-radius:10px; border:1px solid #d9e0ea; background:#f7f9fc; cursor:pointer;
}

/* ====== Utilitaires ====== */
.content{ max-width:1100px; margin:0 auto; padding:40px 20px; }
.text .quadri{ display:inline-block; width:12px; height:12px; border-radius:3px;
  background:linear-gradient(135deg,#22d3ee,#7c3aed); margin-right:8px; vertical-align:middle; }

/* ====== Responsive ====== */
@media (max-width: 1100px){
  .events-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px){
  .rencontres-hero h2{ font-size:36px; }
  .register-wrap{ grid-template-columns:1fr; }
  .assister-form .double{ grid-template-columns:1fr; }
  .video-section iframe{ height:360px; }
}
@media (max-width: 560px){
  .event-details{ gap:10px; }
  .countdown-item{ min-width:66px; padding:10px; }
  .events-grid{ grid-template-columns:1fr; }
  #nav{ padding:14px; }
}