/* ==========================================================================
   TADAGBÉ — Les activités d'un espace (activites.html)
   Cartes horizontales : la date à gauche, ce qui se passe à droite.
   Prolonge opportunites.css, dont elle réutilise la barre de vue et la
   vue calendrier.
   ========================================================================== */

.acti-grid{display:grid;gap:16px}
.acti-grid[hidden]{display:none}

.acti{display:flex;gap:0;background:#fff;border:1px solid var(--bord);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s}
.acti:hover{transform:translateY(-3px);box-shadow:var(--ombre-fort)}
.acti.is-passe{opacity:.55}
.acti.is-passe:hover{transform:none;box-shadow:var(--ombre)}

/* La date en bloc : c'est le premier repère que l'œil cherche. */
.acti__date{flex:none;width:92px;background:var(--noir);color:#fff;text-align:center;
  padding:20px 0;display:flex;flex-direction:column;justify-content:center}
.acti__date b{font-family:'Archivo',Arial,sans-serif;font-size:30px;line-height:1;
  letter-spacing:-.02em}
.acti__date span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-top:5px;color:var(--or)}
.acti__date i{font-style:normal;font-size:10px;color:rgba(255,255,255,.5);margin-top:3px}

.acti__corps{flex:1;min-width:0;padding:18px 22px}
.acti__hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.acti__type{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vert);background:#EAF3E8;border-radius:20px;padding:5px 10px}
.acti__corps h3{font-size:17px;line-height:1.25}
.acti__desc{font-size:13px;line-height:1.7;color:var(--texte-2);margin-top:9px;max-width:78ch}

.acti__meta{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.acti__meta li{display:flex;gap:7px;align-items:center;font-size:12.2px;color:var(--texte-2)}
.acti__meta svg{flex:none;color:var(--texte-3)}

/* Places disponibles : vert quand il y a de la marge, orangé quand ça se
   remplit, rouge quand c'est fermé. */
.acti-pl{display:inline-block;margin-top:12px;font-size:11.8px;font-weight:700;
  letter-spacing:.02em;color:#2C6B27;background:#EAF3E8;border-radius:20px;padding:5px 11px}
.acti-pl--tendu{color:#8A5A0B;background:#FDF2DC}
.acti-pl--off{color:#A32B25;background:#FBEDEB}

.acti__pied{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--gris-2)}

@media(max-width:720px){
  .acti{flex-direction:column}
  .acti__date{width:100%;flex-direction:row;gap:8px;align-items:baseline;
    justify-content:center;padding:12px 0}
  .acti__date b{font-size:22px}
  .acti__date span,.acti__date i{margin-top:0}
  .acti__corps{padding:16px 18px}
  .acti__pied .btn{width:100%;justify-content:center}
}

/* Pastilles propres au sport : discipline et catégorie encadrent le type. */
.acti__disc{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--vert-fonce);border-radius:20px;padding:5px 10px}
.acti__cat{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#26507F;background:#E2EAF5;border-radius:20px;padding:5px 10px}

/* Conditions de participation : à lire avant de cliquer, donc visible sans
   ouvrir la fiche. */
.acti__cond{margin-top:12px;padding:11px 14px;background:var(--gris);
  border-left:3px solid var(--or);border-radius:0 var(--r) var(--r) 0;
  font-size:12.3px;line-height:1.6;color:var(--texte-2)}
.acti__cond b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texte-3);margin-bottom:4px}

/* Objectif d'une action solidaire : ce qu'elle vise, chiffré. */
.acti__obj{margin-top:12px;padding:11px 14px;background:#F1F7F0;
  border-left:3px solid var(--vert);border-radius:0 var(--r) var(--r) 0;
  font-size:12.5px;line-height:1.6;color:var(--texte-2)}
.acti__obj b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--vert);margin-bottom:4px}