.page--programme .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-8);
}

.page--programme .header {
  text-align: center;
  margin-bottom: var(--spacing-16);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page--programme .title {
  font-family: var(--font-family-heading);
  font-size: clamp(3rem, 6vw, 5rem);
  margin: 0 0 var(--spacing-4) 0;
  color: var(--foreground);
  text-transform: uppercase;
}

.page--programme .subtitle {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Sections */
.page--programme .section {
  margin-bottom: var(--spacing-16);
}

.page--programme .sectionHeader {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-10);
}

.page--programme .sectionTitle {
  font-family: var(--font-family-heading);
  font-size: 2.5rem;
  margin: 0;
  color: var(--foreground);
  /* Élément flex : min-width:auto par défaut refuse de se réduire sous la
     largeur de son mot le plus long. À 320px de large — la largeur de
     référence du critère WCAG 2.1 « 1.4.10 Reflow » (AA), équivalente à un
     zoom de 400% sur un écran de 1280 —, un titre comme « KIHONS
     FONDAMENTAUX » en Teko 2.5rem restait plus large que son conteneur et
     poussait .headerSeparator hors du document : 2px de défilement horizontal.
     Même correctif que .formSection / .infoItem > div dans contact.css.
     overflow-wrap complète le dispositif pour un mot isolé plus large que la
     colonne (audit du 6 août 2026). */
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  /* Sous 480px, un titre comme "KIHONS FONDAMENTAUX" en nowrap dépasse la
     zone utile de 320/375px (jusqu'à 110px de débordement mesuré). Le titre
     peut repasser à la ligne ; .headerSeparator (flex-grow:1) absorbe déjà
     l'espace restant sur une ligne, donc rien d'autre à ajuster. */
  .page--programme .sectionTitle {
    white-space: normal;
  }
}

.page--programme .headerSeparator {
  flex-grow: 1;
}

/* Kihon Grid */
.page--programme .kihonGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  gap: var(--spacing-6);
}

.page--programme .techCard {
  background-color: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
  /* Élément de grille : min-width:auto par défaut refuse de se réduire sous
     sa largeur intrinsèque une fois .kihonGrid repassé en une seule colonne
     sous 768px, débordant l'écran à 320/375px. */
  min-width: 0;
}

.page--programme .techCard:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.page--programme .cardHeader {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  background-color: var(--surface);
}

.page--programme .cardIcon {
  color: var(--secondary);
}

.page--programme .cardHeader h3 {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  margin: 0;
  flex-grow: 1;
}

.page--programme .cardContent {
  padding: var(--spacing-6);
  flex-grow: 1;
}

.page--programme .cardDesc {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-4);
  font-style: italic;
}

.page--programme .techList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2);
}

.page--programme .techList li {
  font-size: 0.9rem;
  color: var(--foreground);
  display: flex;
  align-items: center;
}

.page--programme .techList li::before {
  content: "•";
  color: var(--primary);
  margin-right: var(--spacing-2);
  font-weight: bold;
}

.page--programme .subSection {
  margin-top: var(--spacing-4);
}

.page--programme .subSection h4 {
  font-family: var(--font-family-monospace);
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 var(--spacing-2) 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-1);
}

/* Katas */
.page--programme .katasContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--spacing-8);
  background-color: var(--surface);
  padding: var(--spacing-8);
  border: 1px solid var(--border);
}

.page--programme .kataGroup h3 {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  color: var(--primary);
  margin: 0 0 var(--spacing-2) 0;
  border-bottom: 2px solid var(--secondary);
  display: inline-block;
}

.page--programme .groupDesc {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  font-style: italic;
  margin-bottom: var(--spacing-4);
}

.page--programme .kataList {
  list-style: none;
  padding: 0;
  margin: var(--spacing-4) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.page--programme .kataList li {
  font-family: var(--font-family-monospace);
  font-size: 1rem;
}

/* Bottom Grid */
.page--programme .bottomGrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-8);
}

.page--programme .complementaryBox, .page--programme .resourcesBox {
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: var(--spacing-8);
}

.page--programme .complementaryBox h3, .page--programme .resourcesBox h3 {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  margin: 0 0 var(--spacing-6) 0;
  text-transform: uppercase;
}

.page--programme .checkList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

/* Puce carrée à la place du filet terre cuite de 3px qui bordait le côté
   gauche de chaque item (audit du 6 août 2026, P3).
   La bordure latérale colorée sur un élément de liste est le
   marqueur le plus reconnaissable des interfaces générées automatiquement, et
   elle n'appartenait pas au vocabulaire de la charte : le site n'utilise nulle
   part ailleurs d'accent posé sur un seul côté. Le carré plein, lui, prolonge
   la signature du projet — rayon zéro, formes franches, comme un sceau ou une
   tuile. Même correction sur .page--style .historyList li, seule autre
   occurrence du site.
   top: 0.6em aligne le carré sur la première ligne de texte quelle que soit
   la longueur de l'élément (une valeur en em suit la taille de police, un
   centrage flex casserait sur les items à deux lignes). */
.page--programme .checkList li {
  position: relative;
  padding-left: var(--spacing-5);
}

.page--programme .checkList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background-color: var(--secondary);
}

.page--programme .linksList {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.page--programme .resourceLink {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  text-decoration: none;
  color: var(--foreground);
  padding: var(--spacing-3);
  background-color: var(--surface);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.page--programme .resourceLink:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateX(5px);
}

.page--programme .linkSeparator {
  margin: var(--spacing-2) 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .page--programme .bottomGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page--programme .kihonGrid {
    grid-template-columns: 1fr;
  }
  
  .page--programme .techList {
    grid-template-columns: 1fr;
  }
  
  .page--programme .katasContainer {
    grid-template-columns: 1fr;
  }
}