/* ============================================================================
   AGENDA DES ÉVÉNEMENTS — Styles

   AGENDA DES ÉVÉNEMENTS — Feuille de styles

   Styles des trois vues (mois, semaine, jour), de la barre de navigation et
   du panneau de détail.

   La couleur propre à chaque événement est injectée par le JavaScript dans
   la variable --ag-c, et n'est utilisée qu'en liseré : repeindre une case
   entière la rendrait illisible.

   Préfixe des classes : .ag-*

   Auteur : Émile SNYERS
   Version : 15.2
   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. ENCART REPLIABLE
   ========================================================================== */

.ag-about {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ag-about summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ag-about summary::-webkit-details-marker { display: none; }
.ag-about summary::marker { content: ''; }
.ag-about summary:hover { background: var(--bg-secondary); }
.ag-about summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.ag-about-icon { font-size: 15pt; flex-shrink: 0; }

.ag-about-title {
  flex: 1;
  font-size: 10.5pt;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.ag-about-chevron { font-size: 12pt; color: var(--accent); transition: transform 0.25s; flex-shrink: 0; }
.ag-about[open] .ag-about-chevron { transform: rotate(180deg); }

.ag-about-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--border);
  font-size: 10pt;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 78ch;
}

.ag-about-body h4 { font-size: 10pt; font-weight: 700; color: var(--text-primary); margin: 16px 0 5px; }
.ag-about-body p { margin: 9px 0; }

/* ==========================================================================
   2. BARRE DE NAVIGATION
   ========================================================================== */

.ag-panel {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

.ag-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.ag-bar-nav { display: flex; align-items: center; gap: 6px; }

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

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

.ag-today {
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 18px;
  background: transparent;
  color: var(--accent);
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
  white-space: nowrap;
}

.ag-today:hover { background: var(--accent-light); transform: none; }

.ag-period {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-size: 13pt;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

/* En français, seule la PREMIÈRE lettre se capitalise : « Semaine 34 — du 17
   au 23 août 2026 », et non « Du 17 Au 23 Août ». text-transform: capitalize
   met une majuscule à chaque mot, ce qui est un anglicisme typographique. */
.ag-period::first-letter,
.ag-single-date::first-letter,
.ag-detail-date::first-letter { text-transform: uppercase; }

.ag-views {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.ag-view {
  padding: 6px 16px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  min-height: 0;
}

.ag-view:hover { color: var(--accent); transform: none; background: transparent; }

.ag-view.is-active {
  background: var(--accent);
  color: var(--on-accent, #fff);
}

/* ==========================================================================
   3. VUE MOIS
   ========================================================================== */

.ag-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.ag-weekdays span {
  text-align: center;
  font-size: 8.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 4px 0;
}

.ag-weekdays span.is-weekend { color: var(--accent); }

.ag-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.ag-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 96px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ag-cell:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--bg-primary);
}

/* Jours débordant du mois : visibles mais en retrait, pour que les semaines
   à cheval restent lisibles. */
.ag-cell.is-out { opacity: 0.4; }

.ag-cell.is-weekend { background: var(--bg-secondary); }

.ag-cell.is-today {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 2px var(--accent-light);
}

.ag-cell.is-selected {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* Un liseré coloré à gauche : la couleur de l'événement sans repeindre
   toute la case, qui resterait illisible. */
.ag-cell.has-event::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ag-c, var(--accent));
}

.ag-cell-num {
  font-size: 10pt;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  align-self: flex-start;
  padding-left: 2px;
}

.ag-cell.is-today .ag-cell-num {
  background: var(--accent);
  color: var(--on-accent, #fff);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ag-cell-event { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
.ag-cell-icon { font-size: 11pt; line-height: 1.1; flex-shrink: 0; }

.ag-cell-title {
  font-size: 8.5pt;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ag-cell-goal {
  margin-top: auto;
  font-size: 7.5pt;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-cell-flag {
  position: absolute;
  top: 6px;
  right: 7px;
  font-size: 9pt;
  color: var(--ag-c, var(--accent));
  font-weight: 700;
}

.ag-count {
  margin: 14px 0 0;
  font-size: 9pt;
  color: var(--text-muted);
  text-align: center;
}

/* ==========================================================================
   4. VUE SEMAINE
   ========================================================================== */

.ag-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.ag-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 260px;
  padding: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ag-day:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--bg-primary);
}

.ag-day.is-weekend { background: var(--bg-secondary); }
.ag-day.is-today { border-color: var(--accent); border-width: 2px; }

.ag-day.has-event { border-top: 4px solid var(--ag-c, var(--accent)); }

.ag-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 10px 0;
}

.ag-day-name {
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.ag-day-num {
  font-size: 13pt;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ag-day-num.is-today {
  background: var(--accent);
  color: var(--on-accent, #fff);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10pt;
}

.ag-day-body { display: flex; flex-direction: column; gap: 6px; padding: 0 10px; }

.ag-day-icon { font-size: 20pt; line-height: 1; }

.ag-day-title { font-size: 9.5pt; font-weight: 700; line-height: 1.25; color: var(--text-primary); }

.ag-day-humour {
  font-size: 8pt;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-muted);
}

.ag-day-goal { font-size: 8pt; font-weight: 600; color: var(--text-secondary); margin-top: 4px; }

.ag-day-progress {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.ag-day-progress-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ag-c, var(--accent));
  transition: width 0.5s;
}

.ag-day-progress-text {
  font-size: 7.5pt;
  font-family: 'Consolas', 'Courier New', monospace;
  color: var(--text-muted);
}

.ag-day-won { font-size: 8pt; font-weight: 700; color: var(--ag-c, var(--accent)); }

.ag-day-empty {
  margin: auto;
  font-size: 9pt;
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ==========================================================================
   5. VUE JOUR
   ========================================================================== */

.ag-single {
  border: 2px solid var(--border);
  border-top: 5px solid var(--ag-c, var(--accent));
  border-radius: 12px;
  padding: 22px;
  background: var(--bg-primary);
}

.ag-single-empty {
  border-top-color: var(--border);
  border-style: dashed;
  text-align: center;
  padding: 40px 22px;
}

.ag-single-empty .ag-single-icon { font-size: 40pt; margin-bottom: 10px; }
.ag-single-empty h4 { font-size: 13pt; margin: 0 0 8px; color: var(--text-primary); }
.ag-single-empty p { font-size: 10pt; color: var(--text-secondary); margin: 0 0 16px; }

.ag-single-header { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.ag-single-icon { font-size: 40pt; line-height: 1; flex-shrink: 0; }

.ag-single h4 { font-size: 17pt; font-weight: 800; margin: 0 0 4px; color: var(--text-primary); }

.ag-single-date {
  font-size: 9.5pt;
  color: var(--text-muted);
  margin: 0;
}

.ag-badge-today {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.ag-single-humour {
  margin: 0 0 12px;
  padding: 12px 18px;
  border-left: 3px solid var(--ag-c, var(--accent));
  background: var(--bg-secondary);
  border-radius: 0 8px 8px 0;
  font-size: 11pt;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.55;
}

.ag-single-motivation {
  font-size: 10.5pt;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: 68ch;
}

.ag-single-challenge {
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.ag-single-challenge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.ag-single-challenge-head strong {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11pt;
  color: var(--ag-c, var(--accent));
}

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

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

.ag-single-status { font-size: 9.5pt; color: var(--text-secondary); margin: 0; }
.ag-single-status-muted { font-style: italic; color: var(--text-muted); }

/* ==========================================================================
   6. PANNEAU DE DÉTAIL
   ========================================================================== */

.ag-detail {
  position: relative;
  border: 2px solid var(--border);
  border-left: 5px solid var(--ag-c, var(--accent));
  border-radius: 12px;
  padding: 18px 22px;
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  margin-bottom: 60px;
}

.ag-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ag-detail-close:hover { color: var(--text-primary); border-color: var(--accent); transform: none; }

.ag-detail-date {
  font-size: 9pt;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.ag-detail-title { font-size: 13pt; font-weight: 700; margin: 0 0 10px; color: var(--text-primary); }

.ag-detail-humour {
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 3px solid var(--ag-c, var(--accent));
  font-size: 10pt;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

.ag-detail-motivation { font-size: 10pt; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.6; }
.ag-detail-goal { font-size: 9.5pt; color: var(--text-secondary); margin: 0 0 14px; }
.ag-detail-empty { font-size: 10pt; font-style: italic; color: var(--text-muted); margin: 0; }

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

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

.ag-panel-note { font-size: 9pt; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; }

.ag-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9.5pt;
  color: var(--text-secondary);
  margin-bottom: 9px;
  cursor: pointer;
  font-weight: 400;
}

.ag-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* ==========================================================================
   8. RESPONSIVE
   ==========================================================================
   Sous 900 px la vue Semaine passe en colonne unique : sept colonnes de
   260 px de haut deviennent illisibles sur un téléphone.
   ========================================================================== */

@media screen and (max-width: 1100px) {
  .ag-week { grid-template-columns: repeat(4, 1fr); }
}

@media screen and (max-width: 900px) {
  .ag-week { grid-template-columns: repeat(2, 1fr); }
  .ag-day { min-height: 200px; }
}

@media screen and (max-width: 768px) {
  .ag-panel { padding: 12px; }
  .ag-bar { gap: 10px; }
  .ag-period { font-size: 11pt; order: -1; width: 100%; min-width: 0; }
  .ag-bar-nav { flex: 1; }
  .ag-views { flex: 1; justify-content: center; }
  .ag-view { padding: 6px 12px; }

  .ag-grid { gap: 3px; }
  .ag-cell { min-height: 62px; padding: 4px 5px; gap: 2px; }
  .ag-cell-num { font-size: 9pt; }
  .ag-cell.is-today .ag-cell-num { width: 20px; height: 20px; font-size: 8pt; }
  .ag-cell-title, .ag-cell-goal { display: none; }
  /* Sur mobile, seule l'icône de l'événement reste : le titre ne tiendrait
     pas dans une case de 45 px de large. Le détail s'ouvre au clic. */
  .ag-cell-event { justify-content: center; }
  .ag-cell-icon { font-size: 13pt; }

  .ag-week { grid-template-columns: 1fr; }
  .ag-day { min-height: 0; }

  .ag-single { padding: 16px; }
  .ag-single-header { flex-direction: column; gap: 8px; }
  .ag-single-icon { font-size: 30pt; }
  .ag-single h4 { font-size: 14pt; }
  .ag-detail { padding: 14px 16px; }
}

@media (hover: none) and (pointer: coarse) {
  .ag-nav, .ag-today, .ag-view { min-height: 42px; }
  .ag-cell { min-height: 56px; }
}

@media print {
  .ag-about, .ag-views, .ag-bar-nav, .ag-detail-close { display: none !important; }
  .ag-cell, .ag-day, .ag-single { break-inside: avoid; }
  .ag-panel { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-cell, .ag-day, .ag-bar-fill, .ag-day-progress-fill,
  .ag-about-chevron { transition: none !important; }
  .ag-cell:hover, .ag-day:hover { transform: none; }
}