/* ==================================================================
   CIVIS-CI — Styles spécifiques à la page « Nos thématiques »
   ================================================================== */

/* === OVERVIEW GRID === */
.overview{ background:var(--paper); padding:80px 0 40px; }
.ov-head{ display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; gap:24px; }
.ov-head .num{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--ink-3); letter-spacing:.12em; display:block; margin-bottom:14px; }
.ov-head h2{ font-size:clamp(28px, 3vw, 40px); max-width:620px; }
.ov-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ov-card{
  background:#fff; border:1px solid var(--rule); border-radius:18px; padding:26px 24px;
  display:flex; flex-direction:column; gap:14px; min-height:210px;
  cursor:pointer; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative; overflow:hidden;
}
.ov-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.ov-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(15,45,26,.35); border-color:transparent; }
.ov-card:hover::before{transform:scaleX(1)}
.ov-card .ov-n{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-family:'Newsreader', serif; font-size:18px; font-weight:600; color:#fff; background:var(--accent); }
.ov-card h3{ font-family:'Newsreader', serif; font-size:21px; font-weight:600; line-height:1.15; }
.ov-card p{ font-size:13px; color:var(--ink-2); line-height:1.5; }
.ov-card .go{ margin-top:auto; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:6px; }

/* === THEME DETAIL === */
section.theme{ padding:88px 0; border-top:1px solid var(--rule); position:relative; }
section.theme:nth-child(even){ background:var(--cream); }
.theme-inner{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:start; }
section.theme:nth-child(even) .theme-inner{ grid-template-columns: 1.15fr 0.85fr; }
section.theme:nth-child(even) .theme-left{ order:2; }
.theme-left{ position:sticky; top:120px; }
.theme-tag{ display:inline-flex; align-items:center; gap:10px; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; font-weight:500; }
.theme-tag .num-badge{ width:30px; height:30px; border-radius:8px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Newsreader', serif; font-weight:600; font-size:15px; }
.theme-left h2{ font-size:clamp(32px, 3.6vw, 46px); line-height:1.04; margin-bottom:24px; }
.theme-left p.desc{ font-size:16px; color:var(--ink-2); line-height:1.65; }
.theme-fact{ margin-top:28px; padding:24px 26px; border-radius:16px; background:#fff; border:1px solid var(--rule); border-left:4px solid var(--accent); }
section.theme:nth-child(even) .theme-fact{ background:var(--paper); }
.theme-fact .fk{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.theme-fact .fv{ font-size:15px; color:var(--ink); line-height:1.5; }
.theme-fact .fv strong{ color:var(--accent); font-weight:700; }
.theme-right{ padding-top:6px; }
.actions-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.actions-label::after{ content:""; flex:1; height:1px; background:var(--rule); }
.action-list{ display:flex; flex-direction:column; gap:0; }
.action-item{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:20px 0; align-items:start; border-bottom:1px solid var(--rule); }
.action-item:first-child{border-top:1px solid var(--rule)}
.action-item .ai-mark{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600; }
.action-item .ai-text{ font-size:15.5px; color:var(--ink); line-height:1.5; padding-top:5px; }

/* === CTA BAND === */
.cta-band{ background:var(--green-darkest); color:#fff; position:relative; overflow:hidden; }
.cta-band .cb-bg{ position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px); }
.cta-band .wrap{ position:relative; padding:80px 0; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(32px, 4vw, 52px); line-height:1.04; max-width:680px; }
.cta-band h2 .serif{font-style:italic; color:#F3C39B}
.cta-band .cb-actions{display:flex; gap:14px; flex-wrap:wrap}

/* === RESPONSIVE === */
@media (max-width: 1000px){
  .ov-grid{grid-template-columns:repeat(2,1fr)}
  .theme-inner, section.theme:nth-child(even) .theme-inner{grid-template-columns:1fr; gap:32px}
  section.theme:nth-child(even) .theme-left{order:0}
  .theme-left{position:static}
}
@media (max-width: 560px){
  .ov-grid{grid-template-columns:1fr}
}