/* ==================================================================
   CIVIS-CI — Styles spécifiques à la page « Nos actions & programmes »
   ================================================================== */

/* === 4.1 PROGRAMMES EN COURS === */
.current{background:var(--paper)}
.prog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.prog-card{ background:#fff; border:1px solid var(--rule); border-radius:22px; padding:34px 32px; display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease; }
.prog-card:hover{transform:translateY(-4px); box-shadow:0 28px 56px -34px rgba(15,45,26,.4)}
.prog-card.flagship{ grid-column:span 2; background:var(--green-deep); color:#fff; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.prog-card.flagship .fc-media{
  align-self:stretch; border-radius:16px; min-height:240px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px), linear-gradient(150deg, #2C6E3F, #14331f);
  border:1px solid rgba(255,255,255,.15); display:flex; align-items:flex-end; padding:18px;
}
.prog-card.flagship .fc-media .ph{ font-family:'JetBrains Mono', monospace; font-size:11px; color:rgba(255,255,255,.8); background:rgba(0,0,0,.25); padding:6px 10px; border-radius:6px; }
.prog-card.flagship .fc-media--illus{ align-items:center; justify-content:center; padding:24px; }
.prog-card.flagship .fc-media--illus svg{ width:100%; height:auto; max-height:240px; display:block; }
.prog-status{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:6px 12px; border-radius:999px; }
.prog-status.live{ background:var(--orange-soft); color:var(--orange-deep); }
.prog-status.soon{ background:#FFF4D6; color:#8A6D1A; }
.prog-status.recurring{ background:var(--green-soft); color:var(--green-deep); }
.prog-card.flagship .prog-status{ background:rgba(255,255,255,.15); color:#F3C39B; }
.prog-status .pulse{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.prog-card .pc-label{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--ink-3); letter-spacing:.08em; }
.prog-card.flagship .pc-label{ color:rgba(255,255,255,.6); }
.prog-card h3{ font-family:'Newsreader', serif; font-size:26px; font-weight:600; line-height:1.15; }
.prog-card.flagship h3{ font-size:34px; }
.prog-card p{ color:var(--ink-2); font-size:14.5px; line-height:1.6; }
.prog-card.flagship p{ color:rgba(255,255,255,.85); font-size:15.5px; }
.prog-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.prog-meta .chip{ font-size:12px; padding:6px 12px; border-radius:999px; background:var(--cream); color:var(--ink-2); border:1px solid var(--rule); }
.prog-card.flagship .prog-meta .chip{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.2); }
.prog-card .pc-foot{ margin-top:auto; padding-top:8px; }
.prog-detail{ display:flex; flex-direction:column; gap:10px; }
.prog-detail .d-row{ display:flex; gap:10px; align-items:baseline; font-size:14px; color:var(--ink-2); }
.prog-card.flagship .prog-detail .d-row{ color:rgba(255,255,255,.85); }
.prog-detail .d-row .k{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); min-width:80px; flex-shrink:0; }
.prog-card.flagship .prog-detail .d-row .k{ color:#F3C39B; }

/* === 4.2 PROJETS ACHEVÉS — timeline === */
.completed{background:var(--cream)}
.timeline{ position:relative; padding-left:0; }
.tl-item{ display:grid; grid-template-columns: 130px 1fr; gap:32px; align-items:start; padding:26px 0; border-top:1px solid var(--rule); position:relative; }
.tl-item:last-child{border-bottom:1px solid var(--rule)}
.tl-date{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--orange-deep); letter-spacing:.06em; font-weight:500; padding-top:4px; text-transform:uppercase; }
.tl-body{ display:flex; align-items:flex-start; gap:18px; }
.tl-dot{ width:12px; height:12px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:6px; box-shadow:0 0 0 4px var(--orange-soft); }
.tl-text h4{ font-family:'Newsreader', serif; font-size:21px; font-weight:600; line-height:1.25; }
.tl-text p{ color:var(--ink-2); font-size:14px; margin-top:6px; line-height:1.55; }

/* === 4.3-4.6 AXES TRANSVERSAUX === */
.approaches{background:var(--paper)}
.ap-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.ap-card{ background:#fff; border:1px solid var(--rule); border-radius:20px; padding:34px 32px; display:flex; flex-direction:column; gap:16px; }
.ap-card .ap-ic{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--accent, var(--green)); color:#fff; }
.ap-card .ap-ic svg{width:24px; height:24px}
.ap-card .ap-n{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--ink-3); letter-spacing:.1em; }
.ap-card h3{ font-family:'Newsreader', serif; font-size:25px; font-weight:600; line-height:1.15; }
.ap-card p{ color:var(--ink-2); font-size:14.5px; line-height:1.6; }
.ap-card ul{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.ap-card ul li{ display:flex; gap:12px; align-items:baseline; font-size:14px; color:var(--ink-2); line-height:1.5; }
.ap-card ul li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent, var(--green)); flex-shrink:0; transform:translateY(-2px); }
.ap-card .me-stat{ display:flex; gap:24px; margin-top:6px; padding-top:18px; border-top:1px solid var(--rule); }
.ap-card .me-stat .n{ font-family:'Newsreader', serif; font-size:34px; font-weight:600; color:var(--accent, var(--green)); line-height:1; }
.ap-card .me-stat .l{ font-size:12px; color:var(--ink-3); margin-top:6px; max-width:140px; }

/* === 4.7 COALITIONS === */
.coalitions{background:var(--green-darkest); color:#fff; position:relative; overflow:hidden}
.coalitions .co-bg{ position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px); }
.coalitions .wrap{position:relative}
.coalitions .section-head h2{color:#fff}
.coalitions .section-head .num{color:rgba(255,255,255,.5)}
.coalitions .section-head p.intro{color:rgba(255,255,255,.75)}
.co-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.co-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:12px; transition:background .2s ease; }
.co-card:hover{background:rgba(255,255,255,.09)}
.co-card .co-tag{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#F3C39B; }
.co-card h4{ font-family:'Newsreader', serif; font-size:21px; font-weight:600; line-height:1.2; }
.co-card p{ color:rgba(255,255,255,.7); font-size:13.5px; line-height:1.55; }

/* === RESPONSIVE === */
@media (max-width: 1000px){
  .prog-grid, .ap-grid{grid-template-columns:1fr}
  .prog-card.flagship{grid-column:auto; grid-template-columns:1fr}
  .co-grid{grid-template-columns:1fr 1fr}
  .tl-item{grid-template-columns:90px 1fr; gap:16px}
}
@media (max-width:560px){ .co-grid{grid-template-columns:1fr} }