/* style_new.css — mathscollege.fr */

*, *::before, *::after { box-sizing: border-box; }

/* ===== THÈMES ===== */
:root {
  --bg:           #3d2b1a;
  --bg2:          #4e3824;
  --card-bg:      #ede8dc;
  --card-border:  #c8bda0;
  --text:         #1a1a1a;
  --text-menu:    #f0e8d8;
  --text-muted:   #9a9080;
  --accent:       #c8a84a;
  --accent-dark:  #9a7830;
  --link:         #7a5a20;
  --header-title-bg: rgba(61,43,26,0.88);
  --header-title-color: #e8c870;
  --actus-stripe: #e4dfd3;
  --niveau-bg:    #e4dfd3;
  --niveau-border:#c0b080;
  --niveau-hover: #d8d2c4;
  --footer-bg:    #251508;
  --footer-text:  #a89878;
  --card-shadow:  0 2px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,168,74,0.2);
}

body.light {
  --bg:           #f4f0e6;
  --bg2:          #ede8d8;
  --card-bg:      #fffef8;
  --card-border:  #c8c0a0;
  --text:         #2c2c2c;
  --text-menu:    #2c2c2c;
  --text-muted:   #6a6050;
  --accent:       #5a8a28;
  --accent-dark:  #3a5a18;
  --link:         #3a5a18;
  --header-title-bg: rgba(255,255,255,0.82);
  --header-title-color: #3a5a18;
  --actus-stripe: #f0ece0;
  --niveau-bg:    #eef4e2;
  --niveau-border:#a0be70;
  --niveau-hover: #daeab8;
  --footer-bg:    #3a5a18;
  --footer-text:  #e8e4d0;
  --card-shadow:  0 2px 8px rgba(0,0,0,0.08);
}
body.light .hamburger span,
body.light .hamburger2 span {
  background: #3a3028;
}

body {
  margin: 0;
  background-color: var(--bg);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  color: var(--text);
  transition: background-color 0.3s, color 0.3s;
}

/* ===== BOUTON THÈME — dans le body ===== */
.theme-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 0;
  max-width: 1050px;
  margin: 0 auto;
}
.theme-toggle {
  width: 46px; height: 26px;
  background: #e8e4d0;
  border: 2px solid #e8e4d0;
  border-radius: 13px;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, border-color 0.3s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.theme-toggle::after {
  content: '';
  display: block;
  width: 18px; height: 18px;
  background: #111111;
  border-radius: 50%;
  margin-left: 3px;
  transition: transform 0.3s;
}
body.light .theme-toggle {
  background: #2c2c2c;
  border-color: #2c2c2c;
}
body.light .theme-toggle::after {
  transform: translateX(20px);
  background: #f4f0e6;
}
.theme-toggle-label {
  font-size: 18px;
  line-height: 1;
}

/* ===== HEADER ===== */
.site-header {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.site-header img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.site-header-title {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--header-title-bg);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 10px 28px;
  font-family: Georgia, serif;
  font-size: clamp(22px, 4vw, 40px);
  font-weight: bold;
  color: var(--header-title-color);
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.site-header-title:hover { opacity: 0.9; text-decoration: none; }

.header-links {
  position: absolute;
  top: 10px; right: 14px;
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0; padding: 0;
}
.header-links li a {
  display: inline-block;
  background: var(--header-title-bg);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 5px 14px;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--header-title-color);
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s;
}
.header-links li a:hover { opacity: 0.8; text-decoration: none; }

/* ===== HAMBURGER GAUCHE ===== */
.hamburger {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 9999;
  width: 40px; height: 40px;
  background: var(--bg2);
  border-radius: 7px;
  border: 1.5px solid var(--card-border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 22px; height: 2.5px;
  background: var(--card-border);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu {
  display: none;
  position: fixed;
  top: 54px; left: 10px;
  background: var(--bg2);
  border: 1.5px solid var(--card-border);
  border-radius: 10px;
  padding: 8px 4px;
  z-index: 9998;
  min-width: 170px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.menu li { list-style: none; margin: 2px 0; }
.menu li a {
  display: block;
  padding: 8px 16px;
  font-family: Georgia, serif;
  font-size: 15px;
  color: var(--text-menu);
  text-decoration: none;
  border-radius: 6px;
  font-weight: normal;
  transition: background 0.15s;
}
.menu li a:hover { background: rgba(255,255,255,0.08); text-decoration: none; color: var(--accent); }

/* ===== HAMBURGER DROITE (mobile) ===== */
.hdivers { display: none; }
.hamburger2 {
  position: fixed;
  top: 10px; right: 10px;
  z-index: 9999;
  width: 40px; height: 40px;
  background: var(--bg2);
  border-radius: 7px;
  border: 1.5px solid var(--card-border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburger2 span { display: block; width: 22px; height: 2.5px; background: var(--card-border); border-radius: 2px; }
.menu2 {
  display: none;
  position: fixed;
  top: 54px; right: 10px;
  background: var(--bg2);
  border: 1.5px solid var(--card-border);
  border-radius: 10px;
  padding: 8px 4px;
  z-index: 9997;
  min-width: 150px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.menu2 li { list-style: none; margin: 2px 0; }
.menu2 li a {
  display: block;
  padding: 8px 16px;
  font-family: Georgia, serif;
  font-size: 15px;
  color: var(--text-menu);
  text-decoration: none;
  border-radius: 6px;
  font-weight: normal;
  transition: background 0.15s;
}
.menu2 li a:hover { background: rgba(255,255,255,0.08); text-decoration: none; color: var(--accent); }

/* ===== LAYOUT ===== */
.page-body {
  max-width: 1050px;
  margin: 0 auto;
  padding: 30px 20px 80px;
}

/* Images flottantes desktop */
.img-left {
  float: left;
  width: 180px;
  margin: 0 22px 16px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--card-border);
  background: var(--card-bg);
  clear: left;
}
.img-right {
  float: right;
  width: 180px;
  margin: 0 0 16px 22px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--card-border);
  background: var(--card-bg);
}
.img-left img, .img-right img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  display: block;
  padding: 6px;
}
.clearfix::after { content: ''; display: table; clear: both; }

/* ===== CARTES ===== */
.card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--card-shadow);
  transition: background 0.3s, border-color 0.3s;
}
.card h2 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: var(--accent-dark);
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--card-border);
}

/* ===== NIVEAUX ===== */
.niveaux-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.niveaux-grid a {
  display: block;
  text-align: center;
  padding: 10px 4px;
  background: var(--niveau-bg);
  border: 1.5px solid var(--niveau-border);
  border-radius: 9px;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: bold;
  color: var(--link);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.niveaux-grid a:hover { background: var(--niveau-hover); text-decoration: none; color: var(--link); }

/* ===== BIENVENUE ===== */
.card-bienvenue p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.toggle-link {
  color: var(--link);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}
.toggle-link:hover { opacity: 0.8; }
#hiddenContent p { font-size: 15px; line-height: 1.7; color: var(--text); margin-top: 10px; }
.u { text-decoration: underline; }

/* ===== ACTUS ===== */
.actus-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.actus-list li a,
.actus-list li span {
  display: block;
  padding: 7px 12px;
  background: var(--actus-stripe);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.15s;
  font-weight: normal;
}
.actus-list li a:hover { opacity: 0.8; text-decoration: none; }
.actus-list li span { color: var(--text-muted); font-style: italic; }

/* ===== MATHSPRIME ===== */
.card-mathsprime {
  background: linear-gradient(160deg, #0d1b5e 0%, #0a6fa8 60%, #0891B2 100%);
  border: 2px solid #FFD700;
  color: white;
  text-align: center;
}
.card-mathsprime h2 {
  color: #FFD700;
  border-bottom-color: rgba(255,215,0,0.3);
}
.card-mathsprime p {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  margin-bottom: 16px;
}
.mp-btn {
  display: inline-block;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #1a2d6b;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 28px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 0 #c47a00;
  transition: transform 0.2s, box-shadow 0.2s;
}
.mp-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #c47a00;
  text-decoration: none;
  color: #1a2d6b;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  text-align: center;
  padding: 16px 20px;
  font-family: Georgia, serif;
  font-size: 13px;
}
.site-footer a { color: #FFD700; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }

  .page-body { padding: 16px 10px 60px; }

  .img-left, .img-right { display: none; }

  .mobile-images {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 0;
  }
  .mobile-images .problem-img-wrap {
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid var(--card-border);
    background: var(--card-bg);
  }
  .mobile-images .problem-img-wrap img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    display: block;
    padding: 4px;
  }

  .niveaux-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
  }
  .niveaux-grid a { font-size: 13px; padding: 8px 2px; }

  .header-links { display: none; }
  .hdivers { display: block; }

  .card { padding: 14px 14px; }
  .card h2 { font-size: 16px; }
}

@media (min-width: 701px) {
  .mobile-images { display: none; }
}

/* Compatibilité autres pages */
.BienvenueIndex, .Actus, .Classes, .ContainerI, .main { all: unset; }
a { color: var(--link); font-family: Georgia, serif; font-size: 16px; text-decoration: none; }
a:hover { text-decoration: underline; cursor: pointer; }
input { background-color: rgba(208,209,210,0.85); border-radius: 6px; padding: 5px; }
input[type="submit"] { border-radius: 6px; padding: 4px 10px; cursor: pointer; }

/* ===== PAGES DE NIVEAU ===== */
.niveau-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

.niveau-header {
  text-align: center;
  padding: 18px 0 10px;
}
.niveau-badge {
  display: inline-block;
  background: var(--accent-dark);
  border: 2px solid var(--accent-dark);
  border-radius: 12px;
  padding: 10px 36px;
  font-family: Georgia, serif;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: bold;
  color: #fffef8;
  letter-spacing: 0.04em;
  box-shadow: var(--card-shadow);
}
body.light .niveau-badge {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fffef8;
}

/* Bouton Chapitres */
.chapitres-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 22px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: bold;
  color: var(--accent-dark);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.chapitres-btn:hover { background: var(--niveau-hover); text-decoration: none; }

/* Popup chapitres */
.chapitres-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 8888;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.chapitres-popup-overlay.open {
  display: flex;
}
.chapitres-popup {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 16px;
  padding: 20px 24px 24px;
  max-width: 420px;
  width: 90%;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.chapitres-popup h3 {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: bold;
  color: var(--accent-dark);
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--card-border);
}
.chapitres-popup-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chapitres-popup-list li a {
  display: block;
  padding: 8px 12px;
  background: var(--actus-stripe);
  border-left: 3px solid var(--accent);
  border-radius: 0 7px 7px 0;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: normal;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.15s;
}
.chapitres-popup-list li a:hover { opacity: 0.75; text-decoration: none; }
.popup-close {
  float: right;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 0 0 10px;
  line-height: 1;
}
.popup-close:hover { color: var(--text); }

.chapitres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.chapitre-card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: var(--card-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chapitre-card:hover {
  transform: translateY(-3px);
}

.chapitre-card h2 {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: bold;
  color: var(--accent-dark);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--card-border);
  line-height: 1.4;
}

.section-label {
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: bold;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 10px 0 5px;
}

.pdf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pdf-list li a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: var(--actus-stripe);
  border-left: 3px solid var(--accent);
  border-radius: 0 7px 7px 0;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: normal;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.15s;
}
.pdf-list li a:hover {
  opacity: 0.75;
  text-decoration: none;
}
.pdf-list li a img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Bouton retour */
.back-btn {
  display: inline-block;
  margin: 14px 0 0 0;
  padding: 8px 20px;
  background: var(--niveau-bg);
  border: 1.5px solid var(--niveau-border);
  border-radius: 8px;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--link);
  text-decoration: none;
  transition: background 0.15s;
}
.back-btn:hover { background: var(--niveau-hover); text-decoration: none; color: var(--link); }

/* Theme toggle sur pages de niveau */
.niveau-theme-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 0;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .chapitres-grid { grid-template-columns: 1fr; gap: 12px; }
  .niveau-page { padding: 12px 10px 50px; }
  .chapitre-card { padding: 14px 14px 10px; }
  .niveau-badge { font-size: 20px; padding: 8px 24px; }
}

/* ===== ACTUS FUN GRID (index.php) ===== */
.actus-fun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.actus-fun-card {
  border-radius: 14px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  border: 2px solid transparent;
  text-decoration: none;
  color: #1a1a1a;
  transition: transform 0.18s ease;
  cursor: pointer;
}
.actus-fun-card:hover { transform: translateY(-4px); text-decoration: none; color: #1a1a1a; }
.afc-icon { font-size: 30px; line-height: 1; }
.afc-label {
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
  color: #1a1a1a;
}

.afc-1 { background:#fdf0e0; border-color:#e8a840; box-shadow:0 4px 0 #a06010; }
.afc-2 { background:#e8f4fd; border-color:#5b9fd4; box-shadow:0 4px 0 #3a7ab0; }
.afc-3 { background:#edf6e8; border-color:#6aac50; box-shadow:0 4px 0 #4a8a30; }
.afc-4 { background:#fde8f0; border-color:#d45b8a; box-shadow:0 4px 0 #b03a68; }
.afc-5 { background:#ede8fd; border-color:#7a5bd4; box-shadow:0 4px 0 #5a3ab0; }
.afc-6 { background:#e8fdf4; border-color:#3db88a; box-shadow:0 4px 0 #1a9068; }
.afc-7 { background:#fdf8e0; border-color:#c8b030; box-shadow:0 4px 0 #887810; }

@media (max-width: 700px) {
  .actus-fun-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .afc-icon { font-size: 24px; }
  .afc-label { font-size: 12px; }
}

/* ===== BOUTON GO ! ===== */
.go-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 6vw, 70px);
  height: clamp(48px, 6vw, 70px);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a2d6b;
  font-size: clamp(13px, 1.8vw, 18px);
  font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 4px 0 #c47a00;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.go-btn:hover {
  transform: translateY(4px);
  box-shadow: 0 0px 0 #c47a00;
}