/* Charte « Cahier violet » de nsi.eduzonelab.com (choisie le 2026-10-16) : celle de maths.eduzonelab.com
   (« Cahier quadrillé ») avec l'encre violette du NSI. Papier à petits carreaux, le jaune du Z en surligneur,
   la marge rouge du cahier ; titres en Source Serif 4, texte en Atkinson Hyperlegible, notes en Kalam.
   Mode sombre (bouton « Sombre ») : tableau noir, même mise en page.
   Redéfinit les variables de custom.css pour les deux modes ; chargé après custom.css et meyawo.css. */

:root,
html[data-theme="light"] {
  --papier: #FCFBFF;
  --carreau: rgba(124, 58, 237, .075);
  --feuille: #FFFFFF;
  --trait: #E4DDF5;
  --trait-fort: #D3C7EE;
  --encre: #5B21B6;
  --encre-vive: #7C3AED;
  --encre-pale: #F3EEFF;
  --texte: #1E1633;
  --texte-doux: #615A73;
  --surligneur: #FEC31C;
  --surligneur-trait: rgba(254, 195, 28, .62);
  --marge: #E25563;
  --texte-bouton: #FFFFFF;
  --ombre-feuille: 0 1px 0 rgba(30, 22, 51, .03), 0 14px 30px -20px rgba(91, 33, 182, .32);
  --fond-page: none;
  --police-titres: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --police-texte: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --police-main: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
  /* variables de custom.css */
  --page-bg: var(--papier);
  --text-color: var(--texte);
  --muted-color: var(--texte-doux);
  --link-color: var(--encre);
  --surface-bg: var(--feuille);
  --surface-muted-bg: #F8F6FD;
  --border-color: var(--trait);
  --input-bg: #FFFFFF;
  --input-color: var(--texte);
  --input-placeholder: #8A839B;
  --footer-bg: rgba(255, 255, 255, .92);
  --welcome-color: var(--encre);
  --nav-icon-bg: #FFFFFF;
  --nav-icon-color: var(--encre);
  --nav-icon-border: var(--trait);
  --nav-icon-shadow: transparent;
  --nav-icon-text-shadow: none;
  --nav-menu-bg: #FFFFFF;
  --nav-menu-border: var(--trait);
  --nav-menu-shadow: rgba(30, 22, 51, .22);
  --navbar-border: var(--trait);
  --navbar-shadow: transparent;
  --barre-fond: #FFFFFF;
}

html[data-theme="dark"] {
  --papier: #1C2723;
  --carreau: rgba(238, 243, 239, .045);
  --feuille: #23302B;
  --trait: rgba(238, 243, 239, .12);
  --trait-fort: rgba(238, 243, 239, .24);
  --encre: #C9BDFE;
  --encre-vive: #A78BFA;
  --encre-pale: rgba(167, 139, 250, .14);
  --texte: #EEF3EF;
  --texte-doux: #A9BBB3;
  --surligneur: #F5CD47;
  --surligneur-trait: rgba(245, 205, 71, .32);
  --marge: #F2A1A1;
  --texte-bouton: #1C2723;
  --ombre-feuille: 0 20px 40px -26px rgba(0, 0, 0, .7);
  /* craie : poussière fine et traces d'effacement */
  --fond-page: radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, .05), transparent 55%),
               radial-gradient(ellipse at 88% 62%, rgba(255, 255, 255, .04), transparent 50%),
               url(/static/assets/imgs/craie-grain.png);
  --page-bg: var(--papier);
  --text-color: var(--texte);
  --muted-color: var(--texte-doux);
  --link-color: var(--encre);
  --surface-bg: var(--feuille);
  --surface-muted-bg: #283631;
  --border-color: var(--trait);
  --input-bg: #1C2723;
  --input-color: var(--texte);
  --input-placeholder: #8FA39A;
  --footer-bg: transparent;
  --welcome-color: var(--encre);
  --nav-icon-bg: transparent;
  --nav-icon-color: var(--encre);
  --nav-icon-border: var(--trait-fort);
  --nav-icon-shadow: transparent;
  --nav-icon-text-shadow: none;
  --nav-menu-bg: #23302B;
  --nav-menu-border: var(--trait);
  --nav-menu-shadow: rgba(0, 0, 0, .5);
  --navbar-border: var(--trait);
  --navbar-shadow: transparent;
  --barre-fond: rgba(19, 27, 24, .96);
}

/* --- Page : papier à petits carreaux (clair), ardoise (sombre) --- */
body {
  font-family: var(--police-texte);
  background-color: var(--papier) !important;
  background-image: linear-gradient(var(--carreau) 1px, transparent 1px),
                    linear-gradient(90deg, var(--carreau) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}
html[data-theme="dark"] body {
  background-image: var(--fond-page) !important;
  background-size: 100% 100%, 100% 100%, 160px 160px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--texte);
  letter-spacing: -.01em;
}

/* Titre surligné : <h2 class="surligne"> (en sombre : un trait de craie jaune) */
.surligne { position: relative; display: table; z-index: 0; }
.surligne::after {
  content: ""; position: absolute; z-index: -1;
  left: -.16em; right: -.24em; bottom: .05em; height: .46em;
  background: var(--surligneur); opacity: .62;
  border-radius: .14em .5em .22em .55em; transform: rotate(-1.2deg);
}
html[data-theme="dark"] .surligne::after { height: 4px; bottom: -.08em; opacity: .9; border-radius: 3px; }
.manuscrit { font-family: var(--police-main); }
.etiquette-main {
  display: inline-block; font-family: var(--police-main); font-weight: 700; font-size: 1.15rem; color: var(--encre);
  background: linear-gradient(transparent 50%, var(--surligneur-trait) 50%, var(--surligneur-trait) 92%, transparent 92%);
  padding: 0 .2em; margin-bottom: .2rem;
}
.welcome-message { font-family: var(--police-main); font-weight: 400; font-size: 1.32rem; margin-bottom: 1.5rem !important; }
.welcome-message strong { font-weight: 700; }

/* --- Boutons et formulaires : un seul bouton plein, à l'encre violette --- */
.btn { border-radius: 10px; }
.btn-primary, .btn-success {
  background-color: var(--encre-vive) !important;
  border-color: var(--encre-vive) !important;
  color: var(--texte-bouton) !important;
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus {
  filter: brightness(.93);
  color: var(--texte-bouton) !important;
}
.btn-outline-primary, .btn-outline-success,
.btn-outline-secondary, html[data-theme="dark"] .btn-outline-secondary {
  color: var(--encre);
  border: 1.5px solid var(--encre);
  background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-success:hover,
.btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-secondary:hover {
  color: var(--encre); background-color: var(--encre-pale); border-color: var(--encre);
}
.btn-link { color: var(--encre); }
.form-control, .custom-select, .custom-file-label { border: 1.5px solid var(--trait-fort); border-radius: 10px; }
.form-control:focus, .custom-select:focus {
  border-color: var(--encre-vive);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}
.badge-secondary { background-color: var(--encre-pale); color: var(--encre); }
.badge-light { background-color: var(--surface-muted-bg); color: var(--texte-doux); }
.alert-info { background-color: var(--feuille); border: 1.5px dashed var(--trait-fort); color: var(--texte-doux); border-radius: 6px; }
html[data-theme="dark"] .alert-info { background-color: transparent; }
.nav-tabs .nav-link { color: var(--texte-doux); }
.nav-tabs .nav-link.active { color: var(--encre); font-weight: 700; background-color: var(--feuille); border-color: var(--trait) var(--trait) var(--feuille); }

/* --- Cartes : feuilles blanches ; .feuille = avec la marge rouge du cahier --- */
.card { border-radius: 6px !important; border-color: var(--trait) !important; box-shadow: var(--ombre-feuille); }
.card.border-success { border-color: var(--trait) !important; }
.card.feuille {
  background-image: linear-gradient(90deg, transparent 30px, var(--marge) 30px, var(--marge) 32px, transparent 32px);
  overflow: hidden;
}
.card.feuille > .card-header, .card.feuille > .card-body, .card.feuille .list-group-item,
.card.feuille .theme-cours > .btn, .card.feuille .chapitre-cours > .btn { padding-left: 46px !important; }
.card.feuille > .card-header, .card.feuille .list-group-item,
.card.feuille > .card-header.bg-white, .card.feuille > .card-header.bg-success {
  background-color: transparent !important; color: var(--texte) !important;
}
.card.feuille > .card-header { border-bottom: 1px solid var(--trait); }
.card.feuille .border-top, .card.feuille .border-bottom { border-color: var(--trait) !important; }
.card.feuille .btn-link { color: var(--texte); }
.card.feuille .theme-cours > .btn { font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; }
.card.feuille .theme-cours .bi-bookmark-fill { color: var(--surligneur) !important; }
.t-classe { font-family: var(--police-main); font-weight: 400; font-size: 1.15rem; color: var(--encre); letter-spacing: 0; }
.cahier-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: 1.45rem; }

/* --- Barre du haut, menu, pied de page --- */
/* Menu tiroir : styles dans layout.html (comme maths.eduzonelab.com). */
.logo-nsi { height: 46px; width: auto; display: block; }
.logo-nsi.sombre, html[data-theme="dark"] .logo-nsi.clair { display: none; }
html[data-theme="dark"] .logo-nsi.sombre { display: block; }
footer.footer { border-top: 1px solid var(--trait); }

/* --- Tableaux posés sur le quadrillage --- */
.table { background-color: var(--feuille); }

/* --- Tableau de bord --- */
.dashboard-wrapper > .surligne { font-size: 2.35rem; }
.card.feuille .chapitre-cours > .btn { font-family: var(--police-texte); font-weight: 400; font-size: 1rem; }

/* --- Mode sombre : meyawo.css (chargé après custom.css) imposait des cartes blanches et des
   paragraphes #111, illisibles sur l'ardoise ; quelques pages ont des couleurs fixes. --- */
.card, .modal-content, .dropdown-menu, .list-group-item { background-color: var(--surface-bg); color: var(--texte); }
body { color: var(--texte); }
.text-muted { color: var(--texte-doux) !important; }
:where(html[data-theme="dark"]) p { color: inherit; }
html[data-theme="dark"] .notif-help { background: var(--encre-pale); }
html[data-theme="dark"] .nb-dropzone { background-color: var(--surface-muted-bg) !important; border-color: var(--trait-fort) !important; }
html[data-theme="dark"] .nb-dropzone .dz-icone, html[data-theme="dark"] .nb-dropzone .dz-sous { color: var(--texte-doux); }
html[data-theme="dark"] .dashboard-wrapper [style*="color:#6D6E71"] { color: var(--texte-doux) !important; }
html[data-theme="dark"] .alert-danger { background-color: rgba(242, 132, 130, .12); border-color: rgba(242, 132, 130, .4); color: var(--texte); }
html[data-theme="dark"] .alert-danger h4 { color: #F7B2B1; }
html[data-theme="dark"] .alert-success { background-color: rgba(143, 214, 160, .12); border-color: rgba(143, 214, 160, .4); color: var(--texte); }
html[data-theme="dark"] .alert-warning { background-color: rgba(245, 205, 71, .12); border-color: rgba(245, 205, 71, .4); color: var(--texte); }
html[data-theme="dark"] code { color: #F5A3C7; background: transparent; }
html[data-theme="dark"] .md-lead { color: var(--texte-doux); }
html[data-theme="dark"] .md-card { background: var(--feuille); border-color: var(--trait); color: var(--texte); }
html[data-theme="dark"] .md-card p { color: var(--texte-doux); }
html[data-theme="dark"] .md-card.md-danger { background: rgba(242, 132, 130, .08); border-color: rgba(242, 132, 130, .4); }
html[data-theme="dark"] .md-list { background: var(--feuille); border-color: var(--trait); color: var(--texte); }
html[data-theme="dark"] .md-list li { border-color: var(--trait); }
html[data-theme="dark"] .dashboard-wrapper h3[style*="color:#0088CE"] { color: #7CC7FF !important; }
html[data-theme="dark"] .dashboard-wrapper span[style*="background:#fff"] { background: var(--feuille) !important; }
a { color: var(--link-color); }
.bg-light { background-color: var(--surface-muted-bg) !important; }
footer.footer.bg-light { background-color: var(--footer-bg) !important; }

/* --- Corrections du 2026-10-16 (audit d'accessibilité, axe-core) ---
   Champs de formulaire et tableaux en mode sombre : sans ces règles, meyawo.css (chargé après custom.css)
   laissait du texte #495057 / #212529 sur l'ardoise (contraste 1,1 à 1,7 : listes déroulantes de la création
   d'activité et des comptes Google, champ « note », période de sauvegarde, en-têtes du suivi en direct). */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="date"] {
  background-color: var(--input-bg);
  color: var(--input-color);
  border-color: var(--trait-fort);
}
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: var(--surface-muted-bg); }
html[data-theme="dark"] .table th, html[data-theme="dark"] .table td, html[data-theme="dark"] .table td .small { color: var(--texte); }
html[data-theme="dark"] .table .thead-light th, html[data-theme="dark"] .table thead th {
  background-color: var(--surface-muted-bg); color: var(--texte); border-color: var(--trait);
}
/* Titres posés sur un en-tête coloré à texte blanc (ex. « Créer un compte ») : ils gardent le blanc. */
.text-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: inherit; }
html[data-theme="dark"] .custom-file-label { background-color: var(--input-bg); color: var(--input-color); border-color: var(--trait-fort); }