/* Charte « Cahier quadrillé » de maths.eduzonelab.com (choisie le 2026-10-16).
   Le cahier de maths : papier à petits carreaux, encre bleue, le jaune du Z du logo en surligneur,
   la marge rouge. Titres en Source Serif 4 (comme les lettres jaunes du logo), texte en Atkinson
   Hyperlegible (celle des cours), notes manuscrites en Kalam (comme « MATHS. » dans le logo).
   Polices : fonts-charte.css. Chargé après Bootstrap, custom.css et meyawo.css. */

:root {
  --papier: #FBFCFE;                    /* fond des pages */
  --carreau: rgba(37, 99, 235, .085);   /* lignes du quadrillage */
  --feuille: #FFFFFF;                   /* cartes */
  --trait: #DCE5F2;                     /* bordures et séparateurs */
  --trait-fort: #C9D6EA;                /* champs de formulaire, pointillés */
  --encre: #1E3A8A;                     /* liens, icônes, petits titres */
  --encre-vive: #1D4ED8;                /* boutons */
  --encre-pale: #EEF3FF;                /* fonds de sélection */
  --texte: #172033;
  --texte-doux: #5B6478;
  --surligneur: #FEC31C;                /* le jaune du Z */
  --marge: #E25563;                     /* la marge rouge du cahier */
  --ombre-feuille: 0 1px 0 rgba(23, 32, 51, .03), 0 14px 30px -20px rgba(30, 58, 138, .3);
  --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;
  /* Anciens noms, encore utilisés par quelques règles */
  --accent: var(--encre-vive);
  --accent-strong: var(--encre);
  --accent-soft: var(--encre-pale);
}

/* --- Page : papier à petits carreaux --- */
body {
  font-family: var(--police-texte);
  color: var(--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;
}
.text-muted { color: var(--texte-doux) !important; }

/* Pas de !important : un titre à couleur dédiée garde la sienne. */
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é (le jaune du Z) : <h2 class="surligne"> */
.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);
}
.manuscrit { font-family: var(--police-main); }

a { color: var(--encre); }
a:hover { color: var(--encre-vive); }
.btn-link { color: var(--texte); }
.btn-link:hover, .btn-link:focus, .btn-link.focus { color: var(--encre); }

/* --- Boutons et formulaires --- */
.btn { border-radius: 10px; }
.btn-primary {
  background-color: var(--encre-vive) !important;
  border-color: var(--encre-vive) !important;
  color: #fff !important;
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--encre) !important;
  border-color: var(--encre) !important;
  color: #fff !important;
}
.btn-outline-primary { color: var(--encre-vive); border-color: var(--encre-vive); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--encre-vive); border-color: var(--encre-vive); color: #fff;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(29, 78, 216, .2); }
.form-control:focus, .custom-select:focus {
  border-color: var(--encre-vive);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
}
.text-primary { color: var(--encre) !important; }
.bg-primary { background-color: var(--encre-vive) !important; }
.badge-primary { background-color: var(--encre-pale) !important; color: var(--encre) !important; }
.border-primary { border-color: var(--encre-vive) !important; }

/* --- Cartes et tableaux : feuilles blanches posées sur le quadrillage --- */
.card { border-radius: 8px !important; border-color: var(--trait) !important; }
.table { background-color: var(--feuille); }

/* Feuille du cahier avec la marge rouge (le texte commence après la marge) */
.cahier-feuille {
  background-color: var(--feuille) !important;
  background-image: linear-gradient(90deg, transparent 30px, var(--marge) 30px, var(--marge) 32px, transparent 32px) !important;
  border: 1px solid var(--trait) !important;
  border-radius: 6px !important;
  box-shadow: var(--ombre-feuille) !important;
  overflow: hidden;
}

/* --- Pied de page (la barre du haut et le menu sont réglés dans layout.html) --- */
footer.footer.bg-light {
  background-color: rgba(255, 255, 255, .92) !important;
  border-top: 1px solid var(--trait);
}