/* ============================================
   YENDYX — BUILD COMPETENCY
   Meme systeme que yendyx.com : papier blanc, encre presque noire, un seul
   accent (le bleu du logo), Spectral pour les titres, Plex pour le texte.
   Filets plutot que cartes ; aucun halo, aucun degrade de fond.
   C'est un outil de travail : le corps est plus serre que sur le site vitrine.
   ============================================ */

/* Fontes hebergees avec le site : pas d'appel a un serveur tiers. */
@font-face { font-family: 'Spectral'; src: url('fonts/spectral-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('fonts/spectral-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('fonts/spectral-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
/* Un seul fichier pour 400 et 500 : yendyx.com livre deux copies identiques. */
@font-face { font-family: 'Plex Sans'; src: url('fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --encre:        #161616;
  --encre-2:      #393939;
  --gris:         #525252;
  --gris-clair:   #6F6F6F;
  --papier:       #FFFFFF;
  --papier-2:     #F4F4F4;
  --trait:        #E0E0E0;
  --trait-fort:   #8D8D8D;
  --accent:       #0068B8;
  --accent-fond:  rgba(0, 104, 184, 0.10);

  /* Etats : assez sombres pour rester lisibles en texte sur blanc. */
  --succes:       #2E6B3E;
  --attention:    #8A5A00;
  --erreur:       #A32A1E;
  --erreur-fond:  #FBEDEB;

  /* Agenda : l'entreprise doit se distinguer des cours (bleu), des temps
     proteges (vert) et des feries (ambre). Prune sourde, texte a 7:1 sur son fond. */
  --entreprise:      #6B3E75;
  --entreprise-fond: #F3EDF5;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --t-xs:   12.5px;
  --t-sm:   14px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   23px;

  --r: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* L'attribut hidden doit toujours gagner, meme sur un element en display: grid ou flex. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  background: var(--papier);
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font-family: inherit; }

/* Focus visible partout, jamais supprime. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Bouton secondaire commun : rectangle a filet, pas de pilule. */
.section-actions button,
.agenda-nav button,
.agenda-inline-btn,
.small-btn,
.ai-feedback button,
.modal-btn {
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.3;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.section-actions button:hover,
.agenda-nav button:hover,
.agenda-inline-btn:hover,
.small-btn:hover,
.ai-feedback button:hover,
.modal-btn:hover {
  border-color: var(--encre);
  background: var(--papier-2);
}
button:disabled,
.modal-btn:disabled { opacity: .5; cursor: default; }

/* ============================================
   MISE EN PAGE ET EN-TETE
   ============================================ */
.app-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px 48px;
}

.brand-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 64px;
  margin: 0 -32px;
  padding: 0 32px;
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
}

.brand-left { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-logo { display: block; width: 36px; height: 36px; }

.brand-title h1 {
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.2;
}
.brand-title p {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--gris);
  line-height: 1.2;
}

.brand-right { display: flex; align-items: center; gap: 24px; }

.global-progress {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.global-progress .label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-clair);
}
.global-progress .pct {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1;
}

.auth-chip button {
  background: none;
  border: 0;
  padding: 8px 0;
  font-size: var(--t-sm);
  color: var(--gris);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.auth-chip button:hover { color: var(--encre); border-bottom-color: var(--trait-fort); }

/* Progression globale : un simple filet sous l'en-tete. */
.progress-bar-container { margin: 0 -32px 28px; }
.progress-bar { height: 3px; background: var(--papier-2); }
.progress-bar .fill {
  height: 100%;
  background: var(--accent);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================
   MENU ET TITRES DE SECTION
   ============================================ */
/* Filet dessine par une ombre interne : un border-bottom obligerait les onglets
   a deborder d'un pixel pour le recouvrir, et ferait apparaitre une barre de
   defilement verticale dans ce conteneur qui defile horizontalement. */
.tabs-nav {
  display: flex;
  gap: 28px;
  box-shadow: inset 0 -1px 0 var(--trait);
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-btn {
  display: inline-block;
  padding: 10px 0;
  text-decoration: none;
  font-size: var(--t-sm);
  color: var(--gris);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color .14s ease;
}
.tab-btn:hover { color: var(--encre); }
.tab-btn.active { color: var(--encre); font-weight: 500; border-bottom-color: var(--encre); }

.page { display: block; animation: fadeIn .2s ease; }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.section-title,
.agenda-nav h2,
.radar-panel h2,
.ai-panel-header h2 {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--encre);
}

/* Etiquette technique : mono, petite capitale, comme les faits du site. */
.status-badge,
.status-pill,
.entry-date,
.ai-response-meta,
.radar-legend,
.legend {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
}

.legend { display: flex; gap: 18px; flex-wrap: wrap; color: var(--gris); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 1px; }

/* ============================================
   COMPETENCES
   ============================================ */
.competency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 48px;
}

/* Cartes cliquables : de vrais boutons (clavier, lecteur d'ecran), remis a plat. */
.competency-card,
.project-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-top: 1px solid var(--trait);
  cursor: pointer;
}
.competency-card { padding: 14px 0 16px; }
.competency-card:nth-child(-n+2) { border-top: 2px solid var(--encre); }
.competency-card:hover .card-title { color: var(--accent); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.card-title {
  font-size: var(--t-md);
  font-weight: 500;
  transition: color .14s ease;
}

.status-badge { text-transform: uppercase; white-space: nowrap; }
.status-mastered { color: var(--succes); }
.status-progress { color: var(--attention); }
.status-priority { color: var(--erreur); }
.status-todo     { color: var(--gris-clair); }

.card-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.bar-track { display: block; flex: 1; height: 3px; background: var(--papier-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; transition: width .5s ease; }
.level-text { font-family: var(--mono); font-size: var(--t-xs); color: var(--gris); min-width: 28px; text-align: right; }
.card-skills { display: block; font-size: var(--t-sm); color: var(--gris); }

.fill-mastered { background: var(--succes); }
.fill-progress { background: var(--attention); }
.fill-priority { background: var(--erreur); }
.fill-todo     { background: var(--trait-fort); }

/* Radar : pas d'encadre, un filet epais ouvre la section. */
.radar-panel { border-top: 2px solid var(--encre); padding-top: 14px; }
.radar-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.radar-legend { display: flex; gap: 16px; color: var(--gris); }
.radar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.radar-legend i { width: 16px; height: 2px; display: inline-block; }
.radar-wrap { display: grid; justify-items: center; }
.radar-wrap svg { width: 100%; max-width: 560px; height: auto; }
.radar-axis { stroke: var(--trait); stroke-width: 1; }
.radar-ring { fill: none; stroke: var(--trait); stroke-width: 1; }
.radar-label { font-size: 9px; fill: var(--gris); font-family: var(--sans); }
.radar-target { fill: none; stroke: var(--trait-fort); stroke-width: 1.2; stroke-dasharray: 4 3; }
.radar-current { fill: var(--accent-fond); stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.radar-dot { fill: var(--accent); }
.radar-empty { font-size: var(--t-sm); color: var(--gris); padding: 24px 0; }

/* ============================================
   PROJETS, JOURNAL, COURS : des listes a filets
   ============================================ */
.project-list,
.course-list { border-bottom: 1px solid var(--trait); }

.project-card,
.course-card {
  padding: 18px 0;
  border-top: 1px solid var(--trait);
  cursor: pointer;
}
.project-card:first-child,
.course-card:first-child { border-top: 2px solid var(--encre); }
.project-card:hover .project-name,
.course-card:hover h3 { color: var(--accent); }

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 4px;
}
.project-name,
.course-card h3 {
  font-size: var(--t-md);
  font-weight: 500;
  transition: color .14s ease;
}
.project-desc,
.course-card p { display: block; font-size: var(--t-sm); color: var(--gris); max-width: 68ch; }
.project-desc { margin-bottom: 10px; }
.project-progress { display: block; height: 3px; background: var(--papier-2); margin: 8px 0; max-width: 480px; }
.project-progress .fill { display: block; height: 100%; }
.project-facts { display: block; font-size: var(--t-sm); color: var(--gris); }

/* ============================================
   VUES DETAILLEES : une competence, un projet
   ============================================ */
.back-link {
  background: none;
  border: 0;
  padding: 4px 0;
  margin-bottom: 14px;
  font-size: var(--t-sm);
  color: var(--gris);
  cursor: pointer;
}
.back-link:hover { color: var(--encre); }

.detail-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.detail-actions { margin-left: auto; display: flex; gap: 8px; }
.detail-summary { max-width: 640px; margin-bottom: 36px; }
.detail-summary > p { font-size: var(--t-sm); color: var(--gris); margin: 6px 0 8px; }
.detail-summary .tags { margin-top: 10px; }
.detail-text { white-space: pre-line; max-width: 68ch; }
.detail-summary > .detail-text { font-size: var(--t-base); color: var(--encre-2); }

.detail-section { max-width: 760px; border-top: 2px solid var(--encre); padding-top: 12px; margin-bottom: 36px; }
.detail-section h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 600;
  margin-bottom: 4px;
}
.detail-section .count { font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; color: var(--gris-clair); }

.item-list { list-style: none; }
.item-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--trait);
}
.item-list .check { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.item-list .check input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--encre); cursor: pointer; }
.item-list .check input:checked + span { color: var(--gris); }
.item-list a { color: var(--accent); text-underline-offset: 2px; }
.item-main { min-width: 0; overflow-wrap: anywhere; }
.item-main .muted { display: block; font-size: var(--t-xs); color: var(--gris); }
.item-main .late { color: var(--erreur); }
.item-actions { display: flex; align-items: center; gap: 14px; }
.item-actions select {
  font-size: var(--t-sm);
  padding: 4px 6px;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
}

.link-btn {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  font-size: var(--t-sm);
  color: var(--gris);
  cursor: pointer;
}
.link-btn:hover { color: var(--encre); border-bottom-color: var(--trait-fort); }
.link-btn.danger:hover { color: var(--erreur); border-bottom-color: var(--erreur); }

.add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.add-row input {
  flex: 1 1 260px;
  padding: 7px 9px;
  font-size: var(--t-sm);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
}
.empty { font-size: var(--t-sm); color: var(--gris); padding: 6px 0; }
.project-list:has(> .empty),
.course-list:has(> .empty) { border-bottom: 0; }
.timeline:has(> .empty) { border-left: 0; padding-left: 0; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--gris);
  padding: 1px 6px;
  border: 1px solid var(--trait);
  border-radius: var(--r);
}

.course-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.course-card h3 { margin-bottom: 2px; }

.timeline { border-left: 1px solid var(--trait); padding-left: 24px; }
.timeline-entry { position: relative; padding-bottom: 24px; }
.timeline-entry::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--encre);
}
.entry-date { color: var(--gris-clair); margin-bottom: 2px; }
.entry-title { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; margin-bottom: 4px; }
.entry-desc { font-size: var(--t-sm); color: var(--gris); max-width: 68ch; }
.entry-status { margin-top: 6px; }
.status-pill { text-transform: uppercase; }

/* ============================================
   ASSISTANT IA
   ============================================ */
.ai-panel { margin-bottom: 36px; }
.ai-panel-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ai-panel-header .status-badge { color: var(--succes); text-transform: uppercase; }
.ai-panel-desc {
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--gris);
  max-width: 60ch;
  margin-bottom: 20px;
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  border-top: 2px solid var(--encre);
}
.ai-card {
  display: block;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--trait);
  padding: 14px 16px 14px 0;
  cursor: pointer;
}
.ai-card h3 { font-size: var(--t-base); font-weight: 500; margin-bottom: 2px; transition: color .14s ease; }
.ai-card p { font-size: var(--t-sm); color: var(--gris); }
.ai-card:hover h3 { color: var(--accent); }

.ai-response {
  display: none;
  border-top: 2px solid var(--encre);
  padding-top: 14px;
  margin-top: 36px;
}
.ai-response.visible { display: block; }
.ai-response-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ai-response-header h3 { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; }
.ai-response-meta { color: var(--gris-clair); }
.ai-response-body {
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--encre-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 76ch;
}
.ai-response-body strong { color: var(--encre); font-weight: 500; }
.ai-response-body code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--papier-2);
  border-radius: var(--r);
  padding: 1px 4px;
}
.ai-response-body h4 { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; color: var(--encre); margin: 16px 0 4px; }
.ai-sources { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--trait); font-size: var(--t-sm); color: var(--gris); }
.ai-sources ul { list-style: none; margin-top: 4px; }
.ai-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-size: var(--t-sm);
  color: var(--gris);
}
.ai-feedback button { padding: 4px 12px; }
.ai-thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--gris); font-size: var(--t-sm); }
.ai-thinking .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}

.philosophy-banner {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--t-sm);
  color: var(--gris);
}
.philosophy-banner .flow { font-family: var(--serif); font-style: italic; font-size: var(--t-md); color: var(--encre); display: flex; gap: 10px; }
.philosophy-banner .flow .arrow { color: var(--trait-fort); font-style: normal; }

/* ============================================
   OFFRES D'EMPLOI
   Une liste a filets, comme les reglages : ce sont des references, pas des cartes.
   ============================================ */
/* `.intro` existait seulement dans les reglages de l'agenda ; la regle y est restee
   identique, elle sert maintenant aussi aux pages qui ouvrent sur une explication. */
.intro { font-size: var(--t-sm); color: var(--gris); margin-bottom: 20px; max-width: 64ch; }
.intro a { color: var(--accent); }

.offer-open {
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--encre);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.offer-open:hover { color: var(--accent); }

.offer-text { margin-top: 28px; font-size: var(--t-sm); }
.offer-text summary { cursor: pointer; color: var(--gris); }
.offer-text summary:hover { color: var(--encre); }
.offer-text pre {
  margin-top: 10px;
  padding: 14px 16px;
  max-height: 420px;
  overflow: auto;
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--encre-2);
  background: var(--papier-2);
}

/* Ecart : meme grammaire que la proposition de plan — on coche ce qu'on garde. */
.gap-panel { max-width: 720px; margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--encre); }
.gap-panel[hidden] { display: none; }
.gap-groups { list-style: none; margin-top: 14px; }
.gap-groups > li + li { margin-top: 18px; }
.gap-groups h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: var(--t-base);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--trait);
}
.gap-groups h4 .muted { font-size: var(--t-xs); font-weight: 400; color: var(--gris); }
.gap-new { font-size: var(--t-xs); font-weight: 400; color: var(--accent); }
.gap-groups ul { list-style: none; }
.gap-groups ul li { border-bottom: 1px solid var(--trait); }
.gap-covered { margin-top: 14px; font-size: var(--t-xs); color: var(--gris); }
.gap-covered strong { color: var(--encre-2); font-weight: 500; }

/* ============================================
   A VENIR (accueil)
   Une liste datee, pas des cartes : ce qui compte est la date et le nom.
   ============================================ */
.upcoming { margin-bottom: 36px; border-top: 2px solid var(--erreur); padding-top: 10px; }
.upcoming-title {
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--erreur);
  margin-bottom: 6px;
}
.upcoming ul { list-style: none; }
.upcoming li {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm);
}
.upcoming time { font-family: var(--mono); font-size: var(--t-xs); color: var(--encre-2); }
.upcoming-what { color: var(--encre); font-weight: 500; }
/* Une ligne suffit : le detail complet est dans l'agenda, ici c'est un rappel. */
.upcoming-detail {
  grid-column: 2;
  color: var(--gris);
  font-size: var(--t-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upcoming-when { grid-row: 1; grid-column: 3; color: var(--gris); white-space: nowrap; }

/* ============================================
   AGENDA
   ============================================ */
.agenda-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.agenda-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agenda-nav h2 { margin: 0 8px; }
.agenda-nav button { padding: 5px 11px; }

.agenda-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: var(--t-sm);
  color: var(--gris);
  margin-bottom: 20px;
}
.agenda-status .period { color: var(--encre); font-weight: 500; }
.agenda-status .warn { color: var(--attention); }
.agenda-inline-btn { padding: 3px 10px; font-size: var(--t-xs); }

/* Semaine : grille horaire. Une meme heure est a la meme hauteur dans chaque jour ;
   la hauteur d'un bloc suit sa duree (MINUTE_PX dans js/agenda.js). */
.week-scroll { overflow-x: auto; }
.week-grid {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(112px, 1fr));
  min-width: 830px;
}
.wg-corner,
.wg-allday-label,
.wg-hours { position: sticky; left: 0; z-index: 3; background: var(--papier); }

/* En-tete de jour : le nom, ce qui distingue la journee, puis une bande de couleur
   qui donne la periode d'un coup d'oeil sur les sept colonnes. */
.wg-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 6px 0;
  min-width: 0;
  font-size: var(--t-xs);
  color: var(--gris-clair);
}
.wg-head-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.wg-head strong { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; color: var(--encre); }
.wg-head.today strong { text-decoration: underline; text-underline-offset: 3px; }
.wg-mark { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-mark.alert { color: var(--erreur); font-weight: 500; }
.wg-mark sup { font-size: .75em; }

/* Poussee en bas : un jour dont la mention passe a la ligne garde sa bande
   alignee avec celle des autres colonnes. */
.wg-band { margin-top: auto; height: 4px; background: var(--trait); }
.wg-band.school  { background: var(--accent); }
.wg-band.company { background: var(--entreprise); }
.wg-band.holiday { background: var(--attention); }
.wg-band.alert   { background: var(--erreur); }

.wg-allday-label {
  padding-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris-clair);
  border-bottom: 1px solid var(--trait-fort);
}
.wg-allday {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 24px;
  padding: 3px 2px 5px;
  border-left: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait-fort);
}

.wg-hours span {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris-clair);
  white-space: nowrap;
}
.wg-hours span:first-child { transform: none; }

/* Un filet par heure, dessine en fond : les colonnes demarrent sur une heure pleine. */
.wg-day {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--trait);
  background-image: linear-gradient(to bottom, var(--trait) 1px, transparent 1px);
  background-size: 100% var(--hour-px);
}
.wg-day.today { background-color: #FAFAFA; }

.agenda-item {
  padding: 3px 5px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--encre);
  background: var(--papier-2);
  border-left: 2px solid var(--trait-fort);
  overflow-wrap: anywhere;
}
.wg-day .agenda-item {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  top: var(--top);
  height: var(--h);
  left: var(--left);
  width: var(--w);
}
/* Deux ou trois cours a la meme heure se partagent la colonne et deviennent des
   lamelles. Celui qu'on vise reprend toute la largeur, passe devant, et grandit
   si son contenu ne tenait pas dans sa duree. */
.wg-day .agenda-item:hover,
.wg-day .agenda-item:focus-within {
  left: 2px;
  width: calc(100% - 4px);
  height: auto;
  min-height: var(--h);
  z-index: 15;
  box-shadow: 0 0 0 1px var(--trait-fort);
}
.wg-day .agenda-item.compact:hover,
.wg-day .agenda-item.compact:focus-within { white-space: normal; }
.wg-day .agenda-item.compact:hover time,
.wg-day .agenda-item.compact:hover .meta,
.wg-day .agenda-item.compact:focus-within time,
.wg-day .agenda-item.compact:focus-within .meta { display: block; }
.agenda-item time {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris);
}
.agenda-item strong { font-weight: 500; }
.agenda-item .meta {
  display: block;
  font-size: 11px;
  color: var(--gris);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Bloc court : une seule ligne, le detail reste dans l'infobulle. */
.agenda-item.compact { padding-top: 1px; padding-bottom: 1px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.agenda-item.compact time,
.agenda-item.compact .meta { display: none; }

/* Type de cours (CM, TD, TP, EXAMEN) : une etiquette courte, dans le vocabulaire de
   l'ecole, plutot qu'un mot noye dans la ligne de details. Le type change la facon de
   preparer, il doit se lire vite. */
.kind {
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris-clair);
}
/* L'enseignant compte moins que la matiere et la salle : il passe apres. */
.agenda-item .meta.teacher { color: var(--gris-clair); }

.agenda-item.event     { border-left-color: var(--accent); }
/* Examen : le seul rouge de la grille. Il ne sert qu'a ca. */
.agenda-item.exam {
  background: var(--erreur-fond);
  border-left: 3px solid var(--erreur);
}
.agenda-item.exam strong { font-weight: 500; color: var(--erreur); }
.agenda-item.exam .kind { color: var(--erreur); }
.agenda-item.work {
  background: var(--entreprise-fond);
  border-left: 3px solid var(--entreprise);
  color: var(--entreprise);
  font-weight: 500;
}
.agenda-item.work time { color: var(--entreprise); font-weight: 400; }
.agenda-item.protected { border-left-color: var(--succes); }
.agenda-item.optional  { background: var(--papier); border: 1px dotted var(--trait-fort); color: var(--gris); }
/* Le trajet est une annotation, pas un element : il ne se survole pas et ne capte
   aucun clic destine a ce qu'il y a dessous. */
.agenda-item.commute {
  background: none;
  border-left-color: transparent;
  font-size: 11px;
  color: var(--gris-clair);
  pointer-events: none;
}
.agenda-item.commute time { display: none; }

/* Un creneau libre est d'abord du vide : il ne doit pas peser autant qu'un cours.
   Pas de cadre au repos, juste une mention discrete ; le cadre apparait au survol,
   quand on cherche ou poser quelque chose. */
.wg-free {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 0;
  padding: 2px 5px;
  overflow: hidden;
  font: inherit;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
  color: #ADADAD;
  background: none;
  border: 1px dashed transparent;
  cursor: pointer;
}
.wg-free:hover,
.wg-free:focus-visible { color: var(--encre); border-color: var(--trait-fort); background: var(--papier-2); }

.now-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 2px;
  background: var(--erreur);
  pointer-events: none;
}
.now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--erreur);
}

/* Proposition de plan : une liste, pas une grille. Elle se lit et se coche aussi bien
   sur un telephone que sur un ecran large, et rien n'est ecrit avant validation. */
.agenda-plan {
  max-width: 720px;
  margin-bottom: 28px;
  padding-top: 12px;
  border-top: 2px solid var(--encre);
}
.agenda-plan[hidden] { display: none; }
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.plan-head h3 { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; }
.plan-head .muted { font-size: var(--t-sm); color: var(--gris); }
.plan-objective { font-size: var(--t-base); color: var(--encre-2); margin-top: 6px; max-width: 64ch; }
.plan-pending { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--gris); }
.plan-error { font-size: var(--t-sm); color: var(--erreur); }

.plan-list { list-style: none; margin-top: 14px; }
.plan-list li { border-bottom: 1px solid var(--trait); }
.plan-pick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Assez haut pour etre touche au doigt sans viser. */
  padding: 12px 0;
  cursor: pointer;
}
.plan-pick input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.plan-pick strong { display: block; font-size: var(--t-base); font-weight: 500; color: var(--encre); }
.plan-when { display: block; font-family: var(--mono); font-size: var(--t-xs); color: var(--gris); }
.plan-why { display: block; font-size: var(--t-sm); color: var(--gris); margin-top: 2px; }
.plan-dropped { font-size: var(--t-xs); color: var(--attention); margin-top: 10px; }
.agenda-plan .inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.agenda-settings {
  scroll-margin-top: 90px;   /* sous l'en-tete collant */
  margin-top: 48px;
  display: grid;
  gap: 36px;
  max-width: 720px;
}
.agenda-settings[hidden] { display: none; }
.agenda-settings section { border-top: 2px solid var(--encre); padding-top: 12px; }
.agenda-settings h3 { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; margin-bottom: 4px; }
.agenda-settings .intro { font-size: var(--t-sm); color: var(--gris); margin-bottom: 12px; max-width: 64ch; }
.agenda-settings .row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: var(--t-sm);
  color: var(--encre-2);
}
.agenda-settings input {
  width: 100%;
  padding: 7px 9px;
  font-size: var(--t-sm);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
}
.agenda-settings .inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.agenda-settings .inline input { flex: 1 1 260px; width: auto; }
.agenda-settings .pair { display: flex; align-items: center; gap: 8px; color: var(--gris); }
.agenda-settings .pair input { width: auto; }
.agenda-settings .pair input[type="number"] { width: 84px; }
.agenda-settings .form-error { font-size: var(--t-sm); color: var(--erreur); margin-top: 8px; }

a.agenda-inline-btn { display: inline-block; text-decoration: none; }
.agenda-settings .intro strong { color: var(--encre); font-weight: 500; }
.howto { margin-top: 12px; font-size: var(--t-sm); color: var(--encre-2); max-width: 64ch; }
.howto summary { cursor: pointer; color: var(--gris); }
.howto summary:hover { color: var(--encre); }
.howto p { margin-top: 8px; }

.agenda-list { list-style: none; font-size: var(--t-sm); }
.agenda-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--trait);
}
.agenda-list li .muted { color: var(--gris); }

/* ============================================
   MODALES ET CHAMPS
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(22, 22, 22, 0.42);
  animation: fadeIn .15s ease;
}
.modal-overlay[hidden] { display: none; }

.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border-radius: var(--r);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  animation: modalIn .18s cubic-bezier(.4, 0, .2, 1);
}
.modal.wide { max-width: 580px; }

.modal-header { padding: 20px 24px 12px; border-bottom: 1px solid var(--trait); }
.modal-header h3 { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; line-height: 1.22; }
.modal-subtitle { margin-top: 4px; font-size: var(--t-sm); color: var(--gris); white-space: pre-line; }

.modal-body {
  padding: 18px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-text { font-size: var(--t-base); color: var(--encre-2); white-space: pre-wrap; }

.modal-footer {
  padding: 14px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-btn { padding: 9px 18px; }
.modal-extra { margin-right: auto; color: var(--erreur); }
.modal-btn.primary { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.modal-btn.primary:hover { background: var(--encre-2); border-color: var(--encre-2); }
.modal-btn.danger { background: var(--erreur); border-color: var(--erreur); color: var(--papier); }
.modal-btn.danger:hover { background: #87231A; border-color: #87231A; }

.field label,
.field .group-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--encre);
  margin-bottom: 6px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-size: var(--t-base);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  padding: 8px 10px;
}
.field textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.field .hint { margin-top: 5px; font-size: var(--t-xs); color: var(--gris); }

.check-list { display: flex; flex-direction: column; }
.check-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-base);
  font-weight: 400;
  color: var(--encre);
  margin: 0;
  cursor: pointer;
}
.check-list input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--encre); cursor: pointer; flex-shrink: 0; }
.check-list input:checked + span { color: var(--gris); text-decoration: line-through; }

.modal-error {
  font-size: var(--t-sm);
  color: var(--erreur);
  background: var(--erreur-fond);
  border-left: 2px solid var(--erreur);
  padding: 8px 10px;
}
.modal-error[hidden] { display: none; }

/* ============================================
   NOTIFICATIONS
   ============================================ */
.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--trait-fort);
  border-radius: var(--r);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
  animation: toastIn .2s cubic-bezier(.4, 0, .2, 1);
}
.toast.leaving { animation: toastOut .2s ease forwards; }
.toast.success { border-left-color: var(--succes); }
.toast.error   { border-left-color: var(--erreur); }
.toast.info    { border-left-color: var(--accent); }
.toast button {
  font-size: 16px;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--gris);
  cursor: pointer;
  padding: 0 2px;
  margin-left: auto;
}
.toast button:hover { color: var(--encre); }

/* ============================================
   CONNEXION
   ============================================ */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}
.login-screen[hidden],
.app-container[hidden] { display: none; }
.login-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 18px; }
.login-form .brand-left { border-bottom: 2px solid var(--encre); padding-bottom: 14px; }
.login-message { font-size: var(--t-sm); color: var(--gris); }
.login-message:empty { display: none; }
.login-form .modal-btn { width: 100%; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(16px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================
   AGENDA : bascule de vue, taches, echeances, mois
   ============================================ */
.view-switch { display: inline-flex; }
.section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.view-switch button { border-radius: 0; }
.view-switch button + button { margin-left: -1px; }
.view-switch button:first-child { border-radius: var(--r) 0 0 var(--r); }
.view-switch button:last-child { border-radius: 0 var(--r) var(--r) 0; }
.view-switch button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }

/* Taches : blanc a filet encre, pour trancher sur les cours (bleu) et l'entreprise (prune). */
.agenda-item.task {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  align-items: start;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--encre);
}
.agenda-item.task time { grid-column: 1 / -1; }
.agenda-item.task.done .task-title { color: var(--gris); text-decoration: line-through; }
.task-check input { width: 14px; height: 14px; margin-top: 2px; accent-color: var(--encre); cursor: pointer; }
.task-title {
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.task-title:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================
   SEMAINE SUR TELEPHONE
   Les sept jours empiles, dans l'ordre des heures. Rien n'est cache par rapport a
   la grille : mêmes cours, memes creneaux libres, memes taches, en plus lisible.
   ============================================ */
.day-block + .day-block { margin-top: 26px; }
.day-block .wg-band { display: block; margin: 0; }
.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 7px 0 5px;
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 600;
}
/* Le formateur rend « lundi 14 septembre » : seule l'initiale se releve. */
.day-head > span:first-child::first-letter { text-transform: uppercase; }
.day-head .wg-mark {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--gris);
}
.day-block.today .day-head > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.day-empty { padding: 8px 0; font-size: var(--t-sm); color: var(--gris-clair); }

.day-list { list-style: none; }
.day-list > li + li { margin-top: 5px; }
/* 44 px : la cible minimale pour un doigt. */
.day-list .agenda-item { display: block; min-height: 44px; padding: 9px 10px; }
.day-list .agenda-item time { display: inline-block; margin-right: 10px; }
.day-list .agenda-item .meta { display: inline; white-space: normal; }
.day-list .agenda-item strong { display: block; }
.day-list .agenda-item.task { display: grid; }
.day-list .task-check input { width: 22px; height: 22px; }
.day-list .agenda-item.commute { padding: 4px 10px; min-height: 0; }

.day-free {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  color: var(--gris);
  background: none;
  border: 0;
  border-left: 2px dashed var(--trait-fort);
  cursor: pointer;
}
.day-free time { display: inline-block; margin-right: 10px; font-family: var(--mono); font-size: 11px; color: var(--gris-clair); }
.day-free:hover { background: var(--papier-2); color: var(--encre); }

.agenda-item.deliverable { background: var(--papier); border: 1px solid var(--trait); border-left: 3px solid var(--attention); }
.agenda-item.deliverable a { color: var(--attention); font-weight: 500; text-decoration: none; }
.agenda-item.deliverable a:hover { text-decoration: underline; }
.agenda-item.deliverable.done a { color: var(--gris); text-decoration: line-through; }

/* Mois : la couleur du filet haut de chaque jour dit la periode. */
.month-legend { display: inline-flex; align-items: center; gap: 6px; }
.month-legend::before { content: ""; width: 14px; height: 3px; background: var(--trait-fort); }
.month-legend.school::before { background: var(--accent); }
.month-legend.company::before { background: var(--entreprise); }
.month-legend.holiday::before { background: var(--attention); }
.month-legend.alert::before { background: var(--erreur); }
.month-legend sup { font-size: .75em; }

.month-weekdays,
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.month-weekdays { margin-bottom: 6px; font-family: var(--mono); font-size: var(--t-xs); color: var(--gris-clair); }

.month-day {
  min-height: 96px;
  padding: 4px 6px 6px;
  background: var(--papier);
  border-top: 3px solid var(--trait);
  box-shadow: inset 0 0 0 1px var(--trait);
  cursor: pointer;
  min-width: 0;
}
.month-day:hover { background: var(--papier-2); }
.month-day.period-school { border-top-color: var(--accent); }
.month-day.period-company { border-top-color: var(--entreprise); }
.month-day.holiday { border-top-color: var(--attention); }
.month-day.alert { border-top-color: var(--erreur); }
.month-day.outside { opacity: .45; }
.month-day.today { box-shadow: inset 0 0 0 2px var(--encre); }

.month-day-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.month-num {
  padding: 0;
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--encre);
  background: none;
  border: 0;
  cursor: pointer;
}
.month-holiday { font-size: 11px; color: var(--attention); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-mark { font-size: 11px; color: var(--erreur); font-weight: 500; white-space: nowrap; }
.month-mark sup { font-size: .75em; }
.month-courses { display: block; font-size: 11.5px; color: var(--accent); }
.month-exam { display: block; font-size: 11.5px; font-weight: 500; color: var(--erreur); }
.month-day ul { list-style: none; margin-top: 2px; }
.month-item { font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-item time { font-family: var(--mono); color: var(--gris); }
.month-item.deliverable { color: var(--attention); }
.month-item.done { color: var(--gris); text-decoration: line-through; }
.month-more { font-size: 11px; color: var(--gris); }

@media (max-width: 640px) {
  .month-weekdays, .month-grid { gap: 2px; }
  .month-day { min-height: 56px; padding: 2px 3px; }
  /* Sur telephone, le detail ne tient pas : le jour montre sa periode et son nombre d'elements. */
  .month-day ul, .month-holiday { display: none; }
  .month-courses { font-size: 10px; }
}

/* ============================================
   PETITS ECRANS
   ============================================ */
@media (max-width: 900px) {
  .competency-grid { grid-template-columns: 1fr; }
  .competency-card:nth-child(2) { border-top: 1px solid var(--trait); }
}

@media (max-width: 640px) {
  .app-container { padding: 0 16px 40px; }
  .brand-header { margin: 0 -16px; padding: 0 16px; height: 56px; }
  .brand-title p { display: none; }
  .brand-right { gap: 16px; }
  .global-progress .label { display: none; }
  .progress-bar-container { margin: 0 -16px 20px; }
  .tabs-nav { gap: 20px; margin-bottom: 24px; }
  .agenda-settings .row { grid-template-columns: 1fr; gap: 4px; margin-bottom: 10px; }
  /* Le titre de la periode prend la ligne, les fleches et « Aujourd'hui » la suivante,
     au lieu d'encadrer un titre qui passe a la ligne. */
  .agenda-nav { width: 100%; }
  .agenda-nav h2 { order: -1; width: 100%; margin: 0 0 8px; font-size: var(--t-md); }
  .agenda-toolbar { gap: 10px; margin-bottom: 12px; }
  /* Au doigt, on ne vise pas : 44 px de haut pour tout ce qui se touche. */
  .agenda-nav button,
  .section-actions button,
  .agenda-inline-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .agenda-nav button[data-nav="-1"],
  .agenda-nav button[data-nav="1"] { min-width: 44px; }
  /* Trop etroit pour trois colonnes : la date et l'echeance sur une ligne, le reste dessous. */
  .upcoming li { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .upcoming-what,
  .upcoming-detail { grid-column: 1 / -1; }
  .toast-stack { left: 16px; right: 16px; max-width: none; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .modal-btn { width: 100%; }
}