/* ============================================================================
   ÉVÉNEMENTS MENSUELS — Styles

   ÉVÉNEMENTS MENSUELS — Feuille de styles

   Styles du bandeau de rappel placé sous le ruban, de la carte de
   l'événement du jour et du calendrier mensuel organisé par semaines.

   Chaque événement porte sa propre couleur, injectée par le JavaScript dans
   la variable --ev-c : une seule règle CSS habille donc les trente et un
   événements du catalogue.

   Préfixe des classes : .ev-*

   Auteur : Émile SNYERS
   Version : 15.1
   Licence : © Tous droits réservés
   Utilisation à but non commercial autorisé .
   Non-commercial use permitted.
  // 🌍 Vous êtes autorisé à utiliser ce code, modifié ou non modifié, gratuitement et sans demande préalable, sous les conditions suivantes :  
  //  
  // 🇫🇷 Français :  
  // - Pour les entreprises ou associations opérant dans le secteur du nucléaire, l'utilisation est libre et sans aucune restriction.  
  // - Pour les entreprises ou associations exerçant en dehors du secteur du nucléaire, l'utilisation est permise uniquement dans un cadre non lucratif.  
  //  
  // 🇬🇧 English:  
  // - You are allowed to use this code, modified or unmodified, for free and without prior request, under the following conditions:  
  // - For companies or organizations operating in the nuclear sector, usage is free and without any restrictions.  
  // - For companies or organizations outside the nuclear sector, usage is allowed only in a non-profit context.  
  //  
  // 🇪🇸 Español:  
  // - Se le permite utilizar este código, modificado o no modificado, de forma gratuita y sin solicitud previa, bajo las siguientes condiciones:  
  // - Para empresas u organizaciones que operan en el sector nuclear, el uso es libre y sin restricciones.  
  // - Para empresas u organizaciones fuera del sector nuclear, el uso está permitido solo en un contexto sin fines de lucro.  
  //  
  // 🇩🇪 Deutsch:  
  // - Sie dürfen diesen Code, verändert oder unverändert, kostenlos und ohne vorherige Anfrage unter den folgenden Bedingungen verwenden:  
  // - Für Unternehmen oder Organisationen im Nuklearsektor ist die Nutzung kostenlos und uneingeschränkt.  
  // - Für Unternehmen oder Organisationen außerhalb des Nuklearsektors ist die Nutzung nur im gemeinnützigen Rahmen erlaubt.  
  //  
  // 🇮🇹 Italiano:  
  // - È consentito utilizzare questo codice, modificato o non modificato, gratuitamente e senza previa richiesta, alle seguenti condizioni:  
  // - Per le aziende o associazioni che operano nel settore nucleare, l'uso è gratuito e senza restrizioni.  
  // - Per le aziende o associazioni al di fuori del settore nucleare, l'uso è consentito solo in un contesto non profit.  
  //  
  // 🇷🇺 Русский:  
  // - Вам разрешено использовать этот код, измененный или неизмененный, бесплатно и без предварительного запроса на следующих условиях:  
  // - Для компаний или организаций, работающих в ядерной отрасли, использование бесплатно и без ограничений.  
  // - Для компаний или организаций за пределами ядерной отрасли использование разрешено только в некоммерческом контексте.  
  //  
  // 🇨🇳 中文:  
  // - 您可以在以下条件下免费使用此代码，无论是否经过修改，无需事先请求：  
  // - 对于在核能领域运营的企业或组织，可免费且无限制地使用。  
  // - 对于非核能领域的企业或组织，仅允许在非营利背景下使用。  
  //  
  // 🇯🇵 日本語:  
  // - 本コードを修正済みまたは未修正の状態で、以下の条件に基づき、事前の要請なしに無料で使用することが許可されています：  
  // - 原子力分野で活動する企業や団体は、自由かつ無制限に使用できます。  
  // - 原子力分野以外の企業や団体は、非営利目的の場合のみ使用が許可されます。  
  //  
  // 🇰🇷 한국어:  
  // - 이 코드를 수정하거나 수정하지 않은 상태로 다음 조건에 따라 사전 요청 없이 무료로 사용할 수 있습니다:  
  // - 핵 분야에서 활동하는 기업이나 단체는 무료로 제한 없이 사용할 수 있습니다.  
  // - 핵 분야 이외의 기업이나 단체는 비영리 목적으로만 사용이 허용됩니다.  
  //  
  // 🇧🇷 Português:  
  // - Você está autorizado a usar este código, modificado ou não modificado, gratuitamente e sem solicitação prévia, sob as seguintes condições:  
  // - Para empresas ou organizações que operam no setor nuclear, o uso é gratuito e sem restrições.  
  // - Para empresas ou organizações fora do setor nuclear, o uso é permitido apenas em um contexto sem fins lucrativos.  
  //  
  // 🇦🇪 العربية:  
  // - يُسمح لك باستخدام هذا الرمز، سواء كان معدلاً أو غير معدل، مجانًا وبدون طلب مسبق، بموجب الشروط التالية:  
  // - يُسمح للشركات أو الجمعيات العاملة في قطاع الطاقة النووية بالاستخدام مجانًا وبدون أي قيود.  
  // - يُسمح للشركات أو الجمعيات خارج قطاع الطاقة النووية بالاستخدام فقط في إطار غير ربحي.  
============================================================================ */

/* ==========================================================================
   1. BANDEAU SOUS LE RUBAN
   ========================================================================== */

.ev-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg-primary);
  border-bottom: 2px solid var(--border);
  border-left: 5px solid var(--ev-c, var(--accent));
  font-size: 9.5pt;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.ev-banner-icon { font-size: 15pt; flex-shrink: 0; }

.ev-banner-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-banner-text strong { color: var(--text-primary); }

.ev-banner-progress {
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 700;
  font-size: 9pt;
  white-space: nowrap;
}

.ev-banner-progress.is-done {
  background: var(--ev-c, var(--accent));
  color: #fff;
}

.ev-banner-link {
  padding: 4px 12px;
  border: 1px solid var(--ev-c, var(--accent));
  border-radius: 14px;
  background: transparent;
  color: var(--ev-c, var(--accent));
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  min-height: 0;
}

.ev-banner-link:hover { background: var(--bg-secondary); transform: none; }

.ev-banner-close {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-banner-close:hover { background: var(--bg-tertiary); transform: none; }

/* ==========================================================================
   2. ÉVÉNEMENT DU JOUR
   ========================================================================== */

.ev-today-card {
  position: relative;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-top: 5px solid var(--ev-c, var(--accent));
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-md);
}

.ev-today-card.is-done { border-color: var(--ev-c, var(--accent)); }

.ev-today-badge {
  position: absolute;
  top: -11px;
  left: 20px;
  padding: 3px 12px;
  border-radius: 12px;
  background: var(--ev-c, var(--accent));
  color: #fff;
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ev-today-main { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }

.ev-today-icon { font-size: 42pt; line-height: 1; flex-shrink: 0; }

.ev-today-title {
  font-size: 16pt;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.ev-today-humour {
  font-size: 10.5pt;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 6px;
  line-height: 1.5;
}

.ev-today-motivation {
  font-size: 10.5pt;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.ev-today-challenge {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.ev-challenge-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9.5pt;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.ev-challenge-line strong {
  font-size: 15pt;
  color: var(--ev-c, var(--accent));
  font-family: 'Consolas', 'Courier New', monospace;
  text-transform: none;
}

.ev-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-tertiary);
  overflow: hidden;
  margin-bottom: 8px;
}

.ev-bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--ev-c, var(--accent));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ev-challenge-status { font-size: 9.5pt; color: var(--text-secondary); }

/* Journée sans événement */
.ev-rest {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-primary);
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 22px;
}

.ev-rest-icon { font-size: 34pt; flex-shrink: 0; }
.ev-rest h3 { font-size: 12pt; margin: 0 0 4px; color: var(--text-primary); }
.ev-rest p { font-size: 10pt; color: var(--text-secondary); margin: 0; line-height: 1.6; }

/* ==========================================================================
   3. CALENDRIER DU MOIS
   ========================================================================== */

.ev-month {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 60px;
}

.ev-month-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ev-month-title {
  font-size: 14pt;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  text-transform: capitalize;
  min-width: 170px;
  text-align: center;
}

.ev-nav {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ev-nav:hover { border-color: var(--accent); color: var(--accent); transform: none; }

.ev-today {
  margin-left: auto;
  padding: 5px 14px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: transparent;
  color: var(--accent);
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
}

.ev-month-intro {
  font-size: 9.5pt;
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  margin-bottom: 18px;
}

.ev-week { margin-bottom: 20px; }

.ev-week-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 10.5pt;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.ev-week-range { font-size: 9pt; font-weight: 400; color: var(--text-muted); }

.ev-week-count {
  margin-left: auto;
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--bg-tertiary);
}

.ev-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.ev-card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 2px solid var(--border);
  border-left: 5px solid var(--ev-c, var(--accent));
  border-radius: 10px;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.ev-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Jours écoulés : atténués, mais toujours consultables. */
.ev-card.is-past { opacity: 0.55; }

.ev-card.is-today {
  border-color: var(--ev-c, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-md);
  opacity: 1;
}

.ev-card.is-won { background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary) 70%); opacity: 1; }

.ev-card-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 4px;
  border-radius: 8px;
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.ev-card-day {
  font-size: 15pt;
  font-weight: 800;
  color: var(--ev-c, var(--accent));
  line-height: 1;
}

.ev-card-weekday { font-size: 7.5pt; color: var(--text-muted); text-transform: uppercase; }

.ev-card-body { min-width: 0; }

.ev-card-title {
  font-size: 10pt;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.25;
}

.ev-card-humour {
  font-size: 8.5pt;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 5px;
}

.ev-card-goal {
  font-size: 8.5pt;
  color: var(--text-secondary);
  font-weight: 600;
}

.ev-card-flag {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11pt;
  color: var(--ev-c, var(--accent));
  font-weight: 700;
}

.ev-card-flag-today { animation: evPulse 1.6s ease-in-out infinite; }

@keyframes evPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ==========================================================================
   4. PANNEAU LATÉRAL
   ========================================================================== */

.ev-panel-big {
  font-size: 26pt;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Consolas', 'Courier New', monospace;
  line-height: 1;
  margin-bottom: 6px;
}

.ev-panel-note { font-size: 9pt; line-height: 1.6; color: var(--text-secondary); }

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 768px) {
  .ev-banner { padding: 6px 10px; gap: 8px; font-size: 8.5pt; }
  .ev-banner-text { white-space: normal; }
  .ev-banner-link { display: none; }

  .ev-today-main { flex-direction: column; gap: 10px; }
  .ev-today-icon { font-size: 30pt; }
  .ev-today-title { font-size: 13pt; }
  .ev-today-humour, .ev-today-motivation { font-size: 9.5pt; }

  .ev-month { padding: 12px; }
  .ev-month-title { font-size: 12pt; min-width: 0; flex: 1; }
  .ev-today { margin-left: 0; width: 100%; }
  .ev-cards { grid-template-columns: 1fr; }
  .ev-week-count { margin-left: 0; }
}

@media (hover: none) and (pointer: coarse) {
  .ev-nav, .ev-today, .ev-banner-link { min-height: 40px; }
  .ev-banner-close { min-height: 32px; min-width: 32px; }
}

@media print {
  .ev-banner, .ev-nav, .ev-today { display: none !important; }
  .ev-card, .ev-today-card { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-card, .ev-bar-fill { transition: none !important; }
  .ev-card:hover { transform: none; }
  .ev-card-flag-today { animation: none; }
}