/* ==========================================================================
   THEORY.CSS - STYLES SPÉCIFIQUES AUX PAGES DE THÉORIE 
   ========================================================================== */

/* --- LAYOUT GÉNÉRAL THÉORIE --- */
.main-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--_spacing-md);
  padding-bottom: var(--_spacing-lg);
  margin-bottom: var(--_spacing-lg);
  border-bottom: var(--_border-light);
}

.intro-paragraph.card-inset {
  margin-bottom: var(--_spacing-md);
}

.intro-paragraph.card-inset ul {
  margin-left: var(--_spacing-lg);
}

.card-inset[class*="theme-"] {
  color: var(--_text);
}

.guide-container {
  max-width: 34.375rem;
  margin: var(--_spacing-xl) auto;
}

.rules-card {
  display: table;
  margin: var(--_spacing-lg) auto;
  padding: var(--_spacing-md) var(--_spacing-lg);
}

/* --- FRISE DE NAVIGATION (ONGLETS) --- */
.frise-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--_spacing-sm);
  padding: var(--_spacing-lg);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.frise-container::-webkit-scrollbar {
  display: none;
}

.frise-container .btn {
  flex-shrink: 0;
}

.frise .btn {
  padding: 0.75rem 1.25rem;
  min-height: var(--_min-touch-target);
  font-weight: var(--_fw-bold);
  color: #7c3aed;
  background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
  border: 2px solid transparent;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(124, 58, 237, 0.1);
  transition: all 0.2s ease;
}

/* Hover - Légèrement plus foncé */
.frise .btn:hover {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.2);
}

/* ÉTAT ACTIF - Vraiment marqué */
.frise .btn[aria-selected="true"] {
  color: white;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border: 2px solid #6d28d9;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5);
  font-weight: 900;
}

/* Hover sur l'actif */
.frise .btn[aria-selected="true"]:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.6);
}
/* Dark mode */
:root[data-theme="dark"] .frise .btn {
  background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
  color: #ddd6fe;
}

:root[data-theme="dark"] .frise .btn:hover {
  background: linear-gradient(135deg, #5b21b6 0%, #6d28d9 100%);
  color: white;
}

:root[data-theme="dark"] .frise .btn[aria-selected="true"] {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: white;
  border-color: #a78bfa;
}

/* --- NAVIGATION AVEC FLÈCHES --- */
.nav-with-arrows {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: var(--_spacing-xl) 0;
}

.nav-arrow {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  z-index: 10;
}

.nav-arrow:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
}

.nav-arrow:active:not(:disabled) {
  transform: scale(0.95);
}

.nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: #d1d5db;
}

.nav-arrow:focus {
  outline: 3px solid rgba(139, 92, 246, 0.5);
  outline-offset: 2px;
}

.nav-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-with-arrows .frise-container {
  flex: 1;
  margin: 0;
}

/* --- PANNEAU DE CONTENU D'ONGLET --- */
.theory-panel.card-inset[class*="theme-"] {
  margin-top: var(--_spacing-md);
  padding: 0;
  background-color: var(--_background);
  animation: fadeIn 0.5s ease-out;
}
:root[data-theme="dark"] .theory-panel.card-inset[class*="theme-"] {
  background-color: var(--_background);
}

.theory-panel .title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--_spacing-md);
  padding: var(--_spacing-lg) var(--_spacing-lg) var(--_spacing-md);
  margin-bottom: var(--_spacing-lg);
  border-bottom: 0.125rem solid rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
}

:root[data-theme="dark"] .theory-panel .title-wrapper {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theory-panel .panel-content {
  padding: 0 var(--_spacing-lg) var(--_spacing-lg);
}

.panel-content ul,
.panel-content ol {
  padding-left: var(--_spacing-lg);
  margin-bottom: var(--_spacing-md);
}

.panel-content .card-inset + table,
.panel-content .card-inset + h3,
.panel-content .card-inset + ul {
  margin-top: var(--_spacing-lg);
}

/* --- STYLES DES TABLEAUX --- */
.theory-panel .table-wrapper {
  margin: var(--_spacing-lg) 0;
  border: var(--_border-light);
  border-radius: var(--_radius-sm);
  overflow-x: auto;
}

.theory-panel .table-sortes-categories {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 0.0625rem solid #000000;
  border-radius: var(--_radius-sm);
  overflow: hidden;
  font-size: 1.1rem;
}

.theory-panel .table-sortes-categories caption {
  padding-bottom: 0.75rem;
  font-size: var(--_font-size-lg);
  font-weight: var(--_fw-black);
  text-align: center;
}

.theory-panel .table-sortes-categories th,
.theory-panel .table-sortes-categories td {
  padding: 0.75rem var(--_spacing-md);
  text-align: left;
  vertical-align: top;
}

.theory-panel .table-sortes-categories th {
  background-color: var(--_surface-alt);
  font-weight: var(--_fw-bold);
}

.theory-panel .table-sortes-categories .type {
  color: var(--_primary);
  font-weight: var(--_fw-bold);
  white-space: nowrap;
}

.theory-panel .table-sortes-categories tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"]
  .theory-panel
  .table-sortes-categories
  tbody
  tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}

.table-separator td {
  padding: var(--_spacing-sm) 0;
}

.table-separator div {
  height: 0;
  border-top: 0.0625rem solid black;
}
/* Espacement visuel entre les groupes */
.schema-tableau tbody tr td[rowspan] {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(0, 0, 0, 0.02);
  font-weight: var(--_fw-bold);
}

/* Première ligne sans padding en haut */
.schema-tableau tbody tr:first-child td {
  padding-top: 0.75rem;
}

/* Ajouter un espace après chaque groupe */
.schema-tableau tbody tr:has(+ tr td[rowspan]) td {
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

/* Dark mode */
:root[data-theme="dark"] .schema-tableau tbody tr td[rowspan] {
  background-color: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .schema-tableau tbody tr:has(+ tr td[rowspan]) td {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* --- THÈMES DE COULEUR (utilisent les variables de main.css) --- */

/* --- ÉLÉMENTS DE MISE EN FORME --- */
.mot-cle-important {
  color: var(--_accent);
  font-weight: var(--_fw-bold);
  background-color: rgba(88, 38, 103, 0.1);
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  display: inline;
  line-height: inherit;
}

:root[data-theme="dark"] .mot-cle-important {
  background-color: rgba(159, 122, 234, 0.2);
}
/* --- CARTES SÉMANTIQUES (remplace info-box) --- */

/* Toutes les cartes ont juste une bordure colorée à gauche */
/* --- ESPACEMENT DES CARTES --- */

/* Espacement vertical entre les cartes */
.card-inset + .card-inset,
.card-inset + .card-raised,
.card-raised + .card-inset,
.card-raised + .card-raised {
  margin-top: var(--_spacing-lg);
}

/* Espacement dans le contenu des panneaux */
.panel-content .card-inset,
.panel-content .card-raised {
  margin-top: var(--_spacing-md);
  margin-bottom: var(--_spacing-md);
}

/* Premier élément sans marge en haut */
.panel-content > .card-inset:first-child,
.panel-content > .card-raised:first-child {
  margin-top: 0;
}

/* Dernier élément sans marge en bas */
.panel-content > .card-inset:last-child,
.panel-content > .card-raised:last-child {
  margin-bottom: 0;
}
.card-inset.astuce,
.card-raised.astuce {
  border-left: 4px solid #3498db;
}

.card-inset.exemple,
.card-raised.exemple {
  border-left: 4px solid #27ae60;
}

.card-inset.mise-en-garde,
.card-raised.mise-en-garde {
  border-left: 4px solid #e74c3c;
}

.card-inset.note,
.card-inset.info,
.card-raised.note,
.card-raised.info {
  border-left: 4px solid var(--_accent);
}
.code-block {
  font-family: "Courier New", monospace;
  background-color: var(--_surface);
  padding: var(--_spacing-sm);
  border-radius: var(--_radius-sm);
  overflow-x: auto;
  white-space: pre;
  font-size: 0.9em;
  line-height: 1.4;
}

/* --- ARBRE SYNTAXIQUE --- */
.syntax-tree {
  font-family: "Courier New", "Consolas", monospace;
  font-size: 1rem;
  line-height: 1;
  background: var(--_surface);
  padding: 1.5rem;
  border-radius: var(--_radius-sm);
  overflow-x: auto;
}

.syntax-tree .phrase {
  color: var(--_text);
  font-weight: 700;
}

/* --- SECTIONS DE RÈGLES --- */
.rule-section {
  margin-bottom: 1.5rem;
}

.rule-section:last-child {
  margin-bottom: 0;
}

.rule-title {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0 0 0.8rem 0;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rule-title.variable {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  color: #155724;
  border-left: 5px solid #28a745;
}

.rule-title.invariable {
  background: linear-gradient(135deg, #f8d7da, #f5c6cb);
  color: #721c24;
  border-left: 5px solid #dc3545;
}

.rule-title.accord {
  background: linear-gradient(135deg, #d1ecf1, #bee5eb);
  color: #0c5460;
  border-left: 5px solid #17a2b8;
}

.rule-title:hover {
  transform: translateX(3px);
  transition: transform 0.2s ease;
}

.rule-section ul {
  margin-top: 0.5rem;
}

.rule-section li {
  margin-bottom: 1rem;
}

.rule-section li:last-child {
  margin-bottom: 0;
}

/* --- INTRO HERO --- */
.intro-hero {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(88, 38, 103, 0.1),
    rgba(159, 122, 234, 0.1)
  );
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.intro-lead {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--_text-color);
  margin: 0;
}

.highlight-number {
  color: var(--_accent, #582667);
  font-size: 1em;
  font-weight: 900;
}

/* --- NOTE AMÉLIORÉE --- */
.card-accent {
  border-left: 5px solid var(--_accent, #582667);
  background: linear-gradient(to right, rgba(88, 38, 103, 0.05), transparent);
}

.note-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
}

.note-icon {
  font-size: 1.5rem;
}

.note p {
  margin: 0.5rem 0;
}

.note-conclusion {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(88, 38, 103, 0.2);
  font-weight: 600;
}

/* --- GRILLE DES PRINCIPES --- */
.principles-grid {
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.principles-title {
  margin: 0 0 1.2rem 0;
  color: var(--_primary, #4a5568);
  font-size: 1.4rem;
  text-align: center;
  padding-bottom: 0.8rem;
  border-bottom: 3px solid rgba(88, 38, 103, 0.2);
}

.principle-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  border-left: 4px solid var(--_accent, #582667);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.principle-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.principle-item:last-child {
  margin-bottom: 0;
}

.principle-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}

.principle-content {
  flex: 1;
  line-height: 1.6;
}

.principle-content strong {
  color: var(--_accent, #582667);
  font-weight: 700;
}

/* --- EXEMPLES SHOWCASE --- */
.exemples-showcase {
  background: linear-gradient(
    135deg,
    rgba(74, 85, 104, 0.05),
    rgba(88, 38, 103, 0.05)
  );
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.exemples-title {
  margin: 0 0 1rem 0;
  color: var(--_primary, #4a5568);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exemple-simple,
.exemple-complexe {
  background: white;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border-left: 4px solid #38a169;
}

.exemple-complexe {
  border-left-color: #d97706;
}

.exemple-simple:last-child,
.exemple-complexe:last-child {
  margin-bottom: 0;
}

.exemple-label {
  display: inline-block;
  background: var(--_accent, #582667);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-right: 0.5rem;
  text-transform: uppercase;
}

.exemple-complexe p {
  margin: 0.5rem 0;
}

.analyse-list {
  margin: 0.5rem 0 0 1.5rem;
  padding: 0;
}

.analyse-list li {
  margin-bottom: 0.3rem;
  color: var(--_text-color);
}

.analyse-list li:last-child {
  margin-bottom: 0;
}

/* --- RESPONSIVE TABLETTES (max 768px) --- */
@media (max-width: 48rem) {
  .frise-container {
    padding: var(--_spacing-md);
    gap: var(--_spacing-xs);
  }

  .frise .btn {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }

  .nav-arrow {
    width: 2rem;
    height: 2rem;
  }

  .nav-arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .nav-with-arrows {
    gap: 0.5rem;
  }

  .theory-panel .title-wrapper {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--_spacing-md);
  }

  .theory-panel .panel-content {
    padding: 0 var(--_spacing-md) var(--_spacing-md);
  }

  .theory-panel .table-wrapper {
    margin: var(--_spacing-md) 0;
  }

  .theory-panel .table-sortes-categories {
    font-size: 1rem;
  }

  .theory-panel .table-sortes-categories th,
  .theory-panel .table-sortes-categories td {
    padding: 0.6rem var(--_spacing-sm);
  }

  .guide-container {
    margin: var(--_spacing-lg) auto;
  }

  .rules-card {
    padding: var(--_spacing-sm) var(--_spacing-md);
  }

  .intro-paragraph.card-inset ul {
    margin-left: var(--_spacing-md);
  }

  .rule-title {
    font-size: 1.1rem;
    padding: 0.5rem 0.8rem;
    display: block;
    text-align: center;
  }

  .info-box {
    padding: var(--_spacing-sm);
  }

  .code-block {
    font-size: 0.8em;
  }

  .syntax-tree {
    font-size: 0.75rem;
    box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.3);
  }

  .intro-lead {
    font-size: 1.1rem;
  }

  .principle-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .principle-icon {
    font-size: 2rem;
  }

  .principles-title,
  .exemples-title {
    font-size: 1.1rem;
  }
}

/* --- RESPONSIVE MOBILE (max 480px) --- */
@media (max-width: 30rem) {
  .main-header {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: var(--_spacing-md);
    margin-bottom: var(--_spacing-md);
  }

  .frise-container {
    padding: var(--_spacing-sm);
  }

  .frise .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .theory-panel .title-wrapper {
    padding: var(--_spacing-sm);
    margin-bottom: var(--_spacing-sm);
  }

  .theory-panel .title-wrapper h2,
  .theory-panel .title-wrapper h3 {
    font-size: 1.1rem;
  }

  .theory-panel .panel-content {
    padding: 0 var(--_spacing-sm) var(--_spacing-sm);
    font-size: 0.95rem;
  }

  .panel-content ul,
  .panel-content ol {
    padding-left: var(--_spacing-md);
  }

  .theory-panel .table-wrapper {
    border-radius: 0;
    margin-left: calc(-1 * var(--_spacing-sm));
    margin-right: calc(-1 * var(--_spacing-sm));
  }

  .theory-panel .table-sortes-categories {
    font-size: 0.85rem;
  }

  .theory-panel .table-sortes-categories th,
  .theory-panel .table-sortes-categories td {
    padding: 0.5rem 0.4rem;
  }

  .theory-panel .table-sortes-categories caption {
    font-size: 1rem;
    padding-bottom: 0.5rem;
  }

  .guide-container {
    margin: var(--_spacing-md) auto;
  }

  .rules-card {
    padding: var(--_spacing-sm);
    display: block;
  }

  .intro-paragraph.card-inset {
    padding: var(--_spacing-sm);
  }

  .intro-paragraph.card-inset ul {
    margin-left: var(--_spacing-sm);
  }
}

/* --- MODE SOMBRE --- */
[data-theme="dark"] .principle-item,
[data-theme="dark"] .exemple-simple,
[data-theme="dark"] .exemple-complexe {
  background: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .principle-item,
  :root:not([data-theme="light"]) .exemple-simple,
  :root:not([data-theme="light"]) .exemple-complexe {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* Badge exception */
.badge-exception {
  display: inline-block;
  background: #d32f2f;
  color: white;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 0.5rem;
  text-transform: uppercase;
}

/* Boîtes */
.irregular-list-box,
.astuce-box,
.intro-box {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  padding: 1.5rem;
  border-radius: 12px;
  margin: 1.5rem 0;
  border-left: 5px solid #7b1fa2;
}

.irregular-list-box h3,
.astuce-box h3 {
  color: #6a1b9a;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.irregular-content,
.exemple-phrase {
  line-height: 2;
  color: #4a148c;
}

.exemple-phrase strong {
  color: #6a1b9a;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
  .unified-theory-table thead th,
  .unified-theory-table tbody td {
    padding: 0.8rem 0.6rem;
    font-size: 0.9rem;
  }

  .badge-exception {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }
}
/* ==========================================================================
   PROTECTIONS DE SÉCURITÉ
   ========================================================================== */

/* Protection contre les URLs malveillantes */
a[href^="javascript:"],
a[href^="data:"],
a[href^="vbscript:"] {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.5;
  text-decoration: line-through;
}

/* Accessibilité - Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}