/* ==========================================================================
   AIST 2026 — Proposition 3 : "CERCLE"
   Direction sommet climatique moderne — dynamique, colorée, anneaux de données
   ========================================================================== */

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

:root {
  --forest:      #10231C;
  --forest-80:   rgba(16,35,28,0.8);
  --forest-60:   rgba(16,35,28,0.6);
  --forest-40:   rgba(16,35,28,0.4);
  --lime:        #C6F135;
  --lime-deep:   #96B821;
  --ocean:       #1F6E8C;
  --ocean-deep:  #16536B;
  --amber:       #F2A93B;
  --mint:        #F4F7EC;
  --mint-deep:   #E7EED7;
  --white:       #FFFFFF;

  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Manrope', -apple-system, sans-serif;

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-pill: 999px;

  --shadow-card: 0 20px 50px -20px rgba(16,35,28,0.22);
  --shadow-card-hover: 0 26px 60px -18px rgba(16,35,28,0.32);
}

* { box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--forest); background: var(--mint); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .font-display { font-family: var(--font-display); font-weight: 600; color: var(--forest); letter-spacing: -0.02em; line-height: 1.08; }
a { color: var(--ocean-deep); }
a:hover { color: var(--forest); }
.container-v3 { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.eyebrow-v3 {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ocean-deep); background: rgba(31,110,140,0.1);
  padding: 0.35rem 0.85rem; border-radius: var(--r-pill);
}
.eyebrow-v3.on-dark { color: var(--lime); background: rgba(198,241,53,0.14); }
.eyebrow-v3.amber { color: #8A5A0E; background: rgba(242,169,59,0.18); }

/* ---------- Navbar pilule ---------- */
.v3-nav { padding: 1.1rem 0; position: sticky; top: 0; background: var(--mint); z-index: 50; }
.v3-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--white); border-radius: var(--r-pill); padding: 0.6rem 0.6rem 0.6rem 1.3rem;
  box-shadow: var(--shadow-card);
}
.v3-nav-inner img { height: 38px; }
.v3-nav-links { display: flex; align-items: center; gap: 0.3rem; }
.v3-nav-links a {
  font-family: var(--font-body); font-weight: 600; font-size: 0.86rem; color: var(--forest-80);
  text-decoration: none; padding: 0.55rem 1rem; border-radius: var(--r-pill);
}
.v3-nav-links a:hover, .v3-nav-links a.active { background: var(--mint-deep); color: var(--forest); }
.btn-v3 {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-weight: 700; font-size: 0.86rem;
  padding: 0.65rem 1.4rem; border-radius: var(--r-pill); text-decoration: none;
  border: 2px solid var(--forest); color: var(--forest); background: transparent;
}
.btn-v3.filled { background: var(--lime); border-color: var(--lime); color: var(--forest); }
.btn-v3.on-dark { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-v3:hover { transform: translateY(-1px); }

/* ---------- Hero split ---------- */
.v3-hero { padding: 2.5rem 0 4rem; }
.v3-hero-card {
  background: var(--forest); border-radius: var(--r-lg); overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch;
  box-shadow: var(--shadow-card);
}
.v3-hero-text { padding: 3.2rem 3rem; color: var(--white); display:flex; flex-direction:column; justify-content:center; }
.v3-hero-text h1 { color: var(--white); font-size: clamp(2rem, 3.4vw, 2.9rem); margin: 1rem 0 1rem; }
.v3-hero-text h1 .accent { color: var(--lime); }
.v3-hero-text p.lead { color: rgba(255,255,255,0.78); font-size: 1.05rem; line-height:1.6; max-width: 460px; margin-bottom: 1.75rem; }
.v3-hero-photo { position: relative; min-height: 380px; 
  background-image: url('https://sinteredstone.it/wp-content/uploads/2025/04/Benin-Cotonou-Place_de_amazone-Pietra_Giallo-40x80x3.jpg');
  background-size: cover;
  background-position: 20% 80%; /* ajuste ici */
}
.v3-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 75%; display:block; }
.v3-ring-badge {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--lime); color: var(--forest);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow: var(--shadow-card);
  border: 4px solid var(--white);
}
.v3-ring-badge .rb-num { font-family: var(--font-display); font-weight:700; font-size:1.5rem; line-height:1; }
.v3-ring-badge .rb-lbl { font-family: var(--font-body); font-weight:700; font-size:0.58rem; text-transform:uppercase; letter-spacing:0.04em; }

.v3-stat-row { display:flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.v3-stat-pill {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-md); padding: 0.9rem 1.15rem; min-width: 108px;
}
.v3-stat-pill .num { font-family: var(--font-display); font-weight:700; font-size: 1.5rem; color: var(--lime); line-height:1; }
.v3-stat-pill .lbl { font-family: var(--font-body); font-size: 0.68rem; color: rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.04em; margin-top:0.25rem; }

@media (max-width: 900px) {
  .v3-hero-card { grid-template-columns: 1fr; }
  .v3-hero-photo { min-height: 240px; order: -1; }
  .v3-hero-text { padding: 2.2rem 1.75rem; }
}

/* ---------- Bento sections ---------- */
.v3-section { padding: 4.5rem 0; }
.v3-section.on-forest { background: var(--forest); color: var(--white); border-radius: var(--r-lg); margin: 0 1.5rem; padding: 3.5rem 2rem; }
.v3-section.on-forest h2 { color: var(--white); }
.v3-section-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom: 2.25rem; }
.v3-section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0.6rem 0 0; }

.bento-card {
  background: var(--white); border-radius: var(--r-md); padding: 1.75rem;
  box-shadow: var(--shadow-card); height: 100%; transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none; color: inherit; display:block;
}
.bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.bento-tag { display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:0.3rem 0.7rem; border-radius:var(--r-pill); margin-bottom:0.9rem; }
.bento-tag.g { background: rgba(198,241,53,0.25); color: var(--lime-deep); }
.bento-tag.o { background: rgba(31,110,140,0.14); color: var(--ocean-deep); }
.bento-tag.a { background: rgba(242,169,59,0.2); color: #8A5A0E; }
.bento-card h3 { font-size: 1.15rem; margin: 0 0 0.4rem; color: var(--forest); }
.bento-meta { font-size: 0.85rem; color: var(--forest-60); }
.bento-time { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--ocean-deep); }

.speaker-bento { text-align:center; }
.speaker-bento img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display:block; border: 3px solid var(--mint-deep); }
.speaker-bento:hover img { border-color: var(--lime); }
.speaker-bento .sp-name { font-family: var(--font-display); font-weight:700; font-size: 1rem; margin-bottom: 0.15rem; }
.speaker-bento .sp-role { font-size: 0.82rem; color: var(--forest-60); }
.speaker-bento .sp-country { display:inline-block; margin-top:0.5rem; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color: var(--ocean-deep); background: rgba(31,110,140,0.1); padding:0.25rem 0.6rem; border-radius: var(--r-pill); }

.news-bento img { width:100%; aspect-ratio: 16/10; object-fit:cover; border-radius: var(--r-sm); margin-bottom:1rem; }

/* Partner rings */
.partner-ring-row { display:flex; flex-wrap:wrap; gap: 2rem; }
.partner-ring { display:flex; flex-direction:column; align-items:center; gap:0.6rem; width: 108px; text-align:center; }
.partner-ring .pr-circle {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(255,255,255,0.08); /*border: 1px solid rgba(255,255,255,0.2)*/;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: 0.78rem; color: var(--lime);
}
.partner-ring .pr-name { font-size: 0.66rem; color: rgba(255,255,255,0.55); line-height:1.3; }

/* ---------- Program day pills ---------- */
.v3-tabs { display:flex; gap:0.5rem; margin-bottom: 2rem; flex-wrap:wrap; }
.v3-tabs button {
  font-family: var(--font-body); font-weight:700; font-size:0.85rem;
  background: var(--white); border: 2px solid var(--mint-deep); border-radius: var(--r-pill);
  padding: 0.6rem 1.3rem; cursor:pointer; color: var(--forest-60);
}
.v3-tabs button.active { background: var(--forest); border-color: var(--forest); color: var(--white); }

.session-card {
  display:flex; gap:1.25rem; align-items:flex-start;
  background: var(--white); border-radius: var(--r-md); padding: 1.5rem; box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}
.session-card .sc-time { font-family: var(--font-display); font-weight:700; color: var(--white); background: var(--ocean); border-radius: var(--r-sm); padding: 0.6rem 0.9rem; text-align:center; min-width: 76px; font-size: 0.85rem; }
.session-card h4 { font-size: 1.05rem; margin: 0 0 0.35rem; }

/* ---------- Delegate detail ---------- */
.detail-hero-photo { border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-card); }
.detail-hero-photo img { width:100%; aspect-ratio: 1; object-fit:cover; display:block; }

/* ---------- Forms ---------- */
.v3-field { margin-bottom: 1.2rem; }
.v3-field label { display:block; font-weight:700; font-size:0.82rem; margin-bottom:0.4rem; color: var(--forest-80); }
.v3-field input, .v3-field select, .v3-field textarea {
  width:100%; font-family: var(--font-body); font-size:0.95rem; padding: 0.8rem 1rem;
  border: 2px solid var(--mint-deep); border-radius: var(--r-sm); background: var(--white); color: var(--forest);
}
.v3-field input:focus, .v3-field select:focus, .v3-field textarea:focus { outline:none; border-color: var(--ocean); }

.cat-card { background: var(--white); border: 2px solid var(--mint-deep); border-radius: var(--r-md); padding: 1.3rem; cursor:pointer; height:100%; }
.cat-card.active { border-color: var(--lime); background: rgba(198,241,53,0.1); }
.cat-card .cc-num { font-family: var(--font-display); font-weight:700; color: var(--ocean-deep); font-size:0.85rem; }
.cat-card strong { display:block; font-family: var(--font-display); font-size:1.05rem; margin: 0.4rem 0 0.3rem; }
.cat-card .small { font-size:0.84rem; color: var(--forest-60); }

.v3-progress { display:flex; align-items:center; gap:0.5rem; margin-bottom:2rem; }
.v3-progress .seg { flex:1; height:6px; border-radius:3px; background: var(--mint-deep); }
.v3-progress .seg.done { background: var(--lime); }

/* FAQ accordion */
.v3-faq-item { background: var(--white); border-radius: var(--r-md); margin-bottom: 0.75rem; box-shadow: var(--shadow-card); overflow:hidden; }
.v3-faq-q { display:flex; justify-content:space-between; align-items:center; padding: 1.1rem 1.4rem; cursor:pointer; font-family: var(--font-display); font-weight:600; font-size:1rem; }
.v3-faq-q .mk { width:26px; height:26px; border-radius:50%; background: var(--mint-deep); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.v3-faq-item.open .mk { background: var(--lime); }
.v3-faq-a { max-height:0; overflow:hidden; transition: max-height .25s ease; padding: 0 1.4rem; color: var(--forest-60); font-size:0.9rem; line-height:1.6; }
.v3-faq-item.open .v3-faq-a { max-height: 260px; padding-bottom: 1.3rem; }

/* ---------- Footer ---------- */
.v3-footer { background: var(--forest); color: rgba(255,255,255,0.7); border-radius: var(--r-lg); margin: 0 1.5rem 1.5rem; padding: 3.5rem 2rem 2rem; }
.v3-footer .slogan { font-family: var(--font-display); font-weight:600; color: var(--lime); font-size: 1.2rem; max-width: 420px; margin-bottom: 2.5rem; }
.v3-footer h6 { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color: rgba(255,255,255,0.4); margin-bottom:0.9rem; }
.v3-footer a { color: rgba(255,255,255,0.75); text-decoration:none; }
.v3-footer a:hover { color: var(--lime); }
.v3-footer ul { list-style:none; padding:0; margin:0; }
.v3-footer li { margin-bottom:0.55rem; font-size:0.88rem; }
.v3-footer .hashtags { font-size:0.8rem; color: var(--amber); margin-top:1.2rem; }
.v3-footer-bottom { border-top:1px solid rgba(255,255,255,0.12); margin-top:2.5rem; padding-top:1.25rem; font-size:0.75rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; }

@media (max-width: 600px) {
  .v3-nav-inner { flex-wrap: wrap; border-radius: var(--r-md); }
  .v3-section.on-forest, .v3-footer { margin: 0 0.75rem; border-radius: var(--r-md); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .v3-nav-links { display: none; }
}
@media (max-width: 900px) {
  [style*="grid-template-columns:1.2fr 0.8fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:320px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:1.3fr 1fr 1fr 1.3fr"] { grid-template-columns: 1fr 1fr !important; gap: 1.75rem !important; }
}
@media (max-width: 560px) {
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.3fr 1fr 1fr 1.3fr"] { grid-template-columns: 1fr !important; }
  .v3-hero-text { padding: 2rem 1.4rem; }
  .container-v3 { padding: 0 1rem; }
  .v3-section.on-forest, .v3-footer { margin: 0 0.6rem; padding: 2.5rem 1.4rem 1.75rem; }
  .session-card { flex-direction: column; }
}

/* Menu mobile (nav pilule) */
.v3-nav-toggle { display:none; }
@media (max-width: 991px) {
  .v3-nav-toggle {
    display:flex; align-items:center; justify-content:center;
    width: 42px; height: 42px; border-radius: 50%; background: var(--mint-deep);
    border: none; cursor: pointer; order: 2; margin-left: auto; margin-right: 0.5rem;
  }
  .v3-nav-toggle span { display:block; width:16px; height:2px; background:var(--forest); position:relative; }
  .v3-nav-toggle span::before, .v3-nav-toggle span::after { content:""; position:absolute; width:16px; height:2px; background:var(--forest); left:0; }
  .v3-nav-toggle span::before { top:-5px; } .v3-nav-toggle span::after { top:5px; }
  .v3-nav-links {
    display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0;
    background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-card);
    flex-direction: column; padding: 0.6rem; gap: 0.2rem;
  }
  .v3-nav-links.open { display: flex; }
  .v3-nav-links a { width: 100%; }
  .v3-nav-inner { position: relative; flex-wrap: wrap; }
}

/* Sélecteur de langue */
.v3-lang { display:flex; align-items:center; gap:0.3rem; font-family:var(--font-body); font-weight:700; font-size:0.78rem; margin-right:0.5rem; }
.v3-lang a { color: var(--forest-40); text-decoration:none; padding:0.3rem 0.5rem; border-radius:var(--r-pill); }
.v3-lang a.active { color: var(--forest); background: var(--lime); }
.v3-lang span { color: var(--forest-40); }
@media (max-width: 991px) {
  .v3-lang { order: 1; margin-right: 0; margin-left: auto; }
  .v3-nav-toggle { order: 2; margin-left: 0.5rem; }
}

/* ---------- Compte à rebours (anneaux) ---------- */
.v3-countdown { display:flex; gap:0.9rem; margin: 0.25rem 0 1.75rem; flex-wrap:wrap; }
.v3-countdown .cd-ring {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 2px solid var(--lime);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.v3-countdown .cd-num { font-family: var(--font-display); font-weight:700; font-size:1.3rem; color: var(--lime); line-height:1; }
.v3-countdown .cd-lbl { font-family: var(--font-body); font-size:0.58rem; text-transform:uppercase; letter-spacing:0.04em; color: rgba(255,255,255,0.6); margin-top:0.15rem; }
@media (max-width: 420px) {
  .v3-countdown .cd-ring { width: 58px; height: 58px; }
  .v3-countdown .cd-num { font-size: 1.1rem; }
}

/* ---------- Grille des catégories d'inscription ---------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

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

@media (max-width: 560px) {
    .cat-grid { grid-template-columns: 1fr; }
}