/* ============================================================
   CLASSENPOCHE — Feuille de style responsive universelle
   Optimisée smartphone, grands caractères, accessibilité
   ============================================================ */

/* --- Variables globales --- */
:root {
  --bleu:       #1a4fa0;
  --bleu-lien:  #1a4fa0;
  --rouge:      #cc2200;
  --vert:       #007a2f;
  --orange:     #d06000;
  --violet:     #6600aa;
  --fond:       #ffffff;
  --fond-menu:  #f0f4ff;
  --bordure:    #c5d3ec;
  --texte:      #1a1a2e;
  --radius:     12px;
  --ombre:      0 2px 8px rgba(0,0,80,.12);
  --base-font:  24px;   /* Taille de base augmentée pour smartphones */
}

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--base-font);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  background: var(--fond) !important;
  color: var(--texte) !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

/* --- Barre de navigation supérieure --- */
#cp-topbar {
  background: var(--bleu);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

#cp-topbar a {
  color: #fff !important;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  transition: background .2s;
  touch-action: manipulation;
}

#cp-topbar a:hover, #cp-topbar a:active {
  background: rgba(255,255,255,.35);
}

#cp-topbar img {
  height: 36px;
  width: auto;
}

/* --- Contenu principal --- */
#cp-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* --- Logo --- */
img[src*="new-logo"], img[src*="logo"] {
  max-width: 140px !important;
  height: auto !important;
  display: block;
  margin: 0 auto 12px;
}

/* --- Titres --- */
h1, h2, h3,
.cp-titre {
  font-size: 1.4rem !important;
  color: var(--rouge) !important;
  font-weight: 700 !important;
  margin: 1rem 0 .5rem !important;
  line-height: 1.3 !important;
}

/* --- Liens de navigation (style bouton) --- */
a {
  color: var(--bleu-lien) !important;
  text-decoration: none !important;
  font-size: 1.1rem !important;
  line-height: 2 !important;
}

a:hover, a:active { text-decoration: underline !important; }

/* --- Grille de menus (niveaux / matières) --- */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0 28px;
}

.cp-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 12px !important;
  border-radius: var(--radius) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border: 2px solid transparent !important;
  box-shadow: var(--ombre) !important;
  background: var(--fond-menu) !important;
  color: var(--bleu) !important;
  transition: transform .15s, box-shadow .15s !important;
  min-height: 64px !important;
  touch-action: manipulation !important;
}

.cp-btn:hover, .cp-btn:active {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,0,80,.2) !important;
  background: #e3eaff !important;
}

/* Couleurs par niveau */
.cp-btn.sixieme   { border-color: var(--rouge)  !important; color: var(--rouge)  !important; }
.cp-btn.cinquieme { border-color: var(--vert)   !important; color: var(--vert)   !important; }
.cp-btn.quatrieme { border-color: var(--vert)   !important; color: var(--vert)   !important; }
.cp-btn.troisieme { border-color: var(--orange) !important; color: var(--orange) !important; }
.cp-btn.seconde   { border-color: var(--orange) !important; color: var(--orange) !important; }
.cp-btn.premiere  { border-color: var(--violet) !important; color: var(--violet) !important; }
.cp-btn.terminale { border-color: var(--bleu)   !important; color: var(--bleu)   !important; }
.cp-btn.bts       { border-color: var(--rouge)  !important; color: var(--rouge)  !important; }
.cp-btn.cm2       { border-color: #1a7a60       !important; color: #1a7a60       !important; }

/* --- Listes de cours (menus matière) --- */
.cp-section {
  margin: 20px 0;
}

.cp-section-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--rouge) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 1.2rem 0 .5rem !important;
  border-bottom: 2px solid var(--rouge);
  padding-bottom: 4px;
}

.cp-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

.cp-list li {
  border-bottom: 1px solid var(--bordure);
}

.cp-list li a {
  display: block !important;
  padding: 14px 8px !important;
  font-size: 1.1rem !important;
  color: var(--bleu) !important;
}

.cp-list li a::before {
  content: "▶ ";
  font-size: .75em;
  opacity: .6;
}

.cp-list li a:hover, .cp-list li a:active {
  background: var(--fond-menu) !important;
  border-radius: 8px !important;
}

/* --- Pages de cours (texte pédagogique) --- */
.cp-cours {
  background: #fafcff;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin: 12px 0;
}

.cp-cours p,
.cp-cours font,
div p font,
body > div p {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  color: var(--texte) !important;
  text-align: left !important;
}

/* Remplacer les vieilles balises font couleur bleue */
font[color="#0000FF"], font[color="#0000ff"],
font[color="#000099"], font[color="#0033CC"] {
  color: var(--bleu) !important;
  font-size: inherit !important;
}

font[color="#FF0000"], font[color="#ff0000"],
font[color="#CC0000"] {
  color: var(--rouge) !important;
  font-size: inherit !important;
}

font[size="2"] { font-size: 1rem !important; }
font[size="3"] { font-size: 1.1rem !important; }
font[size="4"] { font-size: 1.25rem !important; }

/* Vieilles images de pictos (bullet_l, bullet_s, pt*.gif) */
img[src*="bullet_"], img[src*="ptvert"], img[src*="ptrouge"],
img[src*="ptorange"], img[src*="ptcyan"], img[src*="ptviolet"],
img[src*="ptjaune"] {
  display: none !important;
}

/* Images de matières */
img[src*="fra"], img[src*="geo"], img[src*="hist"],
img[src*="maths"], img[src*="svt"], img[src*="ang"],
img[src*="pers"] {
  max-width: 60px !important;
  height: auto !important;
}

/* --- Bouton retour flottant --- */
#cp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bleu);
  color: #fff !important;
  padding: 12px 22px;
  border-radius: 50px;
  font-size: 1rem !important;
  font-weight: 700;
  margin: 20px 0;
  box-shadow: var(--ombre);
  text-decoration: none !important;
  touch-action: manipulation;
}

#cp-back:hover, #cp-back:active {
  background: #0f3070 !important;
}

/* --- Mentions "version complète" --- */
em > font[color="#00CC00"],
strong > font[color="#00CC00"],
.cp-pro {
  display: inline-block;
  background: #fffbe6;
  color: #7a5a00 !important;
  border: 1px solid #f0d060;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .9rem !important;
  font-style: normal;
}

/* --- Tables (si présentes) --- */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 1rem !important;
}

td, th {
  padding: 10px 8px !important;
  font-size: 1rem !important;
  border: 1px solid var(--bordure) !important;
  vertical-align: top !important;
}

/* --- Responsive --- */
@media (max-width: 520px) {
  :root { --base-font: 17px; }

  #cp-content { padding: 14px 12px 36px; }

  .cp-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cp-btn {
    font-size: 1.25rem !important;
    padding: 20px 16px !important;
    min-height: 70px !important;
  }

  .cp-list li a { padding: 16px 8px !important; font-size: 1.15rem !important; }

  h1, h2, h3, .cp-titre {
    font-size: 1.3rem !important;
  }

  .cp-cours { padding: 14px 12px; }
}

@media (max-width: 360px) {
  :root { --base-font: 16px; }
}

/* --- Accessibilité --- */
:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
  border-radius: 4px;
}