/* ============================================================
   Calendar Manager — Styles des articles WP publiés (cm-article-*)
   Chargé sur le frontend via cle_enqueue_assets().

   PERSONNALISATION (child theme) :
   Surcharger les variables --cm-article-* dans :root pour adapter
   le design sans toucher à ce fichier.

   Variables dynamiques injectées par PHP sur .cm-article-wrap :
     --cm-article-color       couleur principale du type d'événement
     --cm-article-color-dark  version assombrie (75%) pour le dégradé
   ============================================================ */

/* ── Tokens de design ─────────────────────────────────────────── */
:root {
  /* Bouton d'inscription */
  --cm-article-btn-bg:           var(--ast-global-color-1, #5b9bd5);
  --cm-article-btn-color:        var(--ast-global-color-4, #fff);
  --cm-article-btn-radius:       8px;
  --cm-article-btn-font-size:    16px;
  --cm-article-btn-font-weight:  300;
  --cm-article-btn-shadow:       0 4px 12px rgba(0, 0, 0, .15);
  --cm-article-btn-shadow-hover: 0 6px 20px rgba(0, 0, 0, .25);

  /* En-tête */
  --cm-article-header-bg:        #f8f9fa;
  --cm-article-header-radius:    12px;
  --cm-article-header-padding:   20px 25px;
  --cm-article-accent-height:    2px;

  /* Carré décoratif (couleur type) */
  --cm-article-square-size:      12px;
  --cm-article-square-radius:    3px;
  --cm-article-square-opacity:   .65;

  /* Titre h2 */
  --cm-article-title-size:       22px;
  --cm-article-title-weight:     700;

  /* Méta (type, catégorie) */
  --cm-article-meta-color:       #666;
  --cm-article-meta-icon-opacity: .8;

  /* Labels de section */
  --cm-article-label-color:      #999;
  --cm-article-label-size:       11px;

  /* Boîte grise générique */
  --cm-article-box-bg:           #f8f8f8;
  --cm-article-box-radius:       8px;
  --cm-article-box-padding:      15px;
  --cm-article-box-font-size:    14px;

  /* Couleur accent (headings orga/lieu, liens) */
  --cm-article-accent-color:     var(--cm-article-color, #5b9bd5);

  /* Textes secondaires */
  --cm-article-text-secondary:   #666;
  --cm-article-text-muted:       #555;

  /* Images */
  --cm-article-img-shadow:       0 4px 12px rgba(0, 0, 0, .15);
  --cm-article-img-radius:       10px;
  --cm-article-orga-photo-size:  70px;
}

/* ── Conteneur global ────────────────────────────────────────── */
.cm-article-wrap {
  font-family: inherit;
  max-width: 800px;
  margin: 0 auto;
  color: inherit;
}

/* ── Labels de section (uppercase spaced) ────────────────────── */
.cm-article-section-label {
  letter-spacing: .4em;
  font-size: var(--cm-article-label-size);
  text-transform: uppercase;
  color: var(--cm-article-label-color);
  padding-bottom: 8px;
  margin-top: 24px;
  margin-bottom: 4px;
}

/* ── Boîte grise générique ───────────────────────────────────── */
.cm-article-grey-box {
  background: var(--cm-article-box-bg);
  border-radius: var(--cm-article-box-radius);
  padding: var(--cm-article-box-padding);
  font-size: var(--cm-article-box-font-size);
  line-height: 1.7;
}

/* ── Badge / pill ────────────────────────────────────────────── */
.cm-article-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ── En-tête — fond neutre, ligne dégradée couleur type ─────── */
.cm-article-header {
  background: var(--cm-article-header-bg);
  border-radius: var(--cm-article-header-radius);
  padding: var(--cm-article-header-padding);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

/* Ligne dégradée 2px en bas de l'en-tête — marque discrète du type */
.cm-article-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--cm-article-accent-height);
  background: linear-gradient(90deg, var(--cm-article-color, #5b9bd5) 0%, var(--cm-article-color-dark, #446e9e) 100%);
}

.cm-article-header-square {
  position: absolute;
  top: 15px;
  left: 15px;
  width: var(--cm-article-square-size);
  height: var(--cm-article-square-size);
  border-radius: var(--cm-article-square-radius);
  background: var(--cm-article-color, #5b9bd5);
  opacity: var(--cm-article-square-opacity);
  display: block;
}

.cm-article-title {
  color: inherit;
  margin: 0;
  padding-left: 30px;
  font-size: var(--cm-article-title-size);
  font-weight: var(--cm-article-title-weight);
  line-height: 1.3;
}

/* Type + catégorie dans l'en-tête */
.cm-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 30px;
  margin-top: 10px;
}

.cm-article-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cm-article-meta-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: var(--cm-article-meta-icon-opacity);
}

.cm-article-meta-text {
  font-size: 12px;
  color: var(--cm-article-meta-color);
  font-weight: 500;
}

/* ── Grille dates + bouton d'inscription ─────────────────────── */
.cm-article-dates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  align-items: start;
  margin-bottom: 4px;
}

.cm-article-dates-grid.cm-article-has-lien {
  grid-template-columns: 1fr auto;
}

.cm-article-dates-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-article-dates-row + .cm-article-dates-row {
  margin-top: 6px;
}

.cm-article-btn-wrap {
  text-align: right;
}

.cm-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  background: var(--cm-article-btn-bg);
  color: var(--cm-article-btn-color);
  text-decoration: none;
  border-radius: var(--cm-article-btn-radius);
  font-weight: var(--cm-article-btn-font-weight);
  font-size: var(--cm-article-btn-font-size);
  transition: all 0.3s ease;
  box-shadow: var(--cm-article-btn-shadow);
}

.cm-article-btn:hover {
  color: var(--cm-article-btn-color);
  background: color-mix(in srgb, var(--cm-article-btn-bg) 85%, black);
  transform: translateY(-2px);
  box-shadow: var(--cm-article-btn-shadow-hover);
  text-decoration: none;
}

/* ── Récurrences ─────────────────────────────────────────────── */
.cm-article-recurrences {
  margin-bottom: 20px;
}

.cm-article-recurrences ul {
  margin: 0;
  padding-left: 18px;
}

/* ── Description (image + texte) ─────────────────────────────── */
.cm-article-desc-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.cm-article-desc-img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--cm-article-img-radius);
  box-shadow: var(--cm-article-img-shadow);
}

.cm-article-desc-text {
  white-space: pre-wrap;
}

/* Image seule */
.cm-article-desc-img-solo-wrap {
  margin-bottom: 20px;
}

.cm-article-desc-img-solo {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--cm-article-img-radius);
  box-shadow: var(--cm-article-img-shadow);
}

/* Texte seul */
.cm-article-desc-text-solo {
  white-space: pre-wrap;
  margin-bottom: 20px;
}

/* ── Grille organisateur + lieu ──────────────────────────────── */
.cm-article-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.cm-article-info-heading {
  font-size: var(--cm-article-label-size);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--cm-article-accent-color);
  margin-bottom: 12px;
  font-weight: 600;
}

.cm-article-photo-orga {
  width: var(--cm-article-orga-photo-size);
  height: var(--cm-article-orga-photo-size);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--cm-article-img-shadow);
  margin-bottom: 10px;
  display: block;
}

.cm-article-photo-place {
  width: 60%;
  border-radius: var(--cm-article-box-radius);
  object-fit: cover;
  box-shadow: var(--cm-article-img-shadow);
  margin-bottom: 10px;
  display: block;
}

.cm-article-info-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.cm-article-info-desc {
  font-size: 13px;
  color: var(--cm-article-text-secondary);
  margin-bottom: 4px;
}

.cm-article-info-row {
  font-size: 13px;
  color: var(--cm-article-text-muted);
  margin-top: 4px;
}

.cm-article-info-row a {
  color: var(--cm-article-accent-color);
  text-decoration: none;
}

.cm-article-info-row a:hover {
  text-decoration: underline;
}

/* ── SEO : titre h1 thème + méta auteur/date visuellement masqués ──────────
   Présents dans le DOM pour les moteurs de recherche, invisibles à l'écran
   car le h2 (.cm-article-title) porte déjà ces informations visuellement.
   Couvre les classes des thèmes les plus répandus (Astra, GeneratePress,
   OceanWP, Neve, Twenty*). Adapter si le thème actif utilise d'autres noms.
   ──────────────────────────────────────────────────────────────────────── */
body:has(.cm-article-wrap) .entry-title,
body:has(.cm-article-wrap) .post-title,
body:has(.cm-article-wrap) .page-title,
body:has(.cm-article-wrap) .entry-meta,
body:has(.cm-article-wrap) .post-meta,
body:has(.cm-article-wrap) .entry-header .byline,
body:has(.cm-article-wrap) .entry-header .posted-on {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}