/* --- POLICE --- */
@font-face {
  font-family: 'Internet Friends';
  src: url('fonts/InternetFriends.woff2') format('woff2'),
       url('fonts/InternetFriends.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

body {
  background-color: #C21121; 
  font-family: 'Internet Friends', sans-serif;
  color: #B3E6FB; 
}

.page {
  max-width: 1200px;   
  margin: 0 auto;       
  padding: 60px 80px;
  position: relative;   
}

/* --- 1. LOGO --- */


/* Style de base du logo, SANS margin */
.logo-wrap {
  text-align: center;
}

.logo {
  width: 280px;
  display: block;
  margin: 0 auto;
}

/* Modificateur : gros espace, uniquement pour la page de garde */
.logo-wrap--hero {
  margin-bottom: 10px; /* ou la valeur que tu avais */
}

/* Modificateur : petit espace, pour les pages de contenu */
.logo-wrap--compact {
  margin-bottom: 90px;
}

.titre {
  margin-top: 160px;
  margin-bottom: 250px;
}

.ligne {
  display: flex; 
  justify-content: center;       
  align-items: center;  
  gap: 16px;
  font-size: 80px;
  margin-bottom: 20px;
  flex-wrap: wrap;       
}

.box {
  background-color: #B3E6FB;
  color: #b7302f;
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 32px;
}


.a-propos {
  text-align: left;      
  margin-bottom: 160px;    
}

.a-propos h2 {
  font-size: 80px;
  margin-bottom: -10px;
  margin-left: 80px;
  color: #B3E6FB;
}


.a-propos-contenu {
  position: relative;      
  max-width: 850px;
  margin: 0 auto;           
}

.papier {
  background-color: #f2ecd8;
  background-image:
    linear-gradient(#d8cfae 1px, transparent 1px),
    linear-gradient(90deg, #d8cfae 1px, transparent 1px);
  background-size: 24px 24px;
  color: #2a2a2a;
  font-size: 20px;
  line-height: 1.2;
  text-align: left;         /* le texte reste aligné à gauche, PAS centré */
  padding-top: 29px;
  padding-bottom: 29px;
  padding-left: 40px;
  padding-right: 30px;
  border-radius: 2px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15); /* petit effet de profondeur, optionnel */
}

.fleche {
  position: absolute;
  bottom: -85px;
  left: 320px;
  width: 240px;
  z-index: 1;
}

.timbre-link {
  position: absolute;
  bottom: -55px;
  left: 540px;
  z-index: 2;
  display: block;
}

.timbre {
  width: 170px;
  transform: rotate(-8deg);
  display: block;
}

/* --- 4. FOOTER --- */
.footer {
  display: flex;
  justify-content: center;
  gap: 40px;
  font-size: 24px;
  color: #2a2a2a;
  margin-top: 350px;
}

.page-bleue {
  background-color: #B3E7FB; 
  color: #2a2a2a;
}

.page-jaune {
  background-color: #FAF0CA; 
  color: #2a2a2a;
}

.page-verte {
  background-color: #00693E; 
  color: #B3E6FB;
}
/* --- LETTRINE + TEXTE --- */
.cours-intro {
  padding-top: -600px;
  display: flex;
  align-items: flex-start;   
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 60px auto;
}

.lettrine {
  display: flex;
  flex-direction: column;    
  font-size: 50px;
  color: #b7302f;
  line-height: 1.23;         
}

.texte-cours {
  font-size: 25px; 
  line-height: 1.5;
  flex: 1;
  margin-bottom: 70px;
}

/* --- TITRE PCSI --- */
.matiere {
  margin-top: 60px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.titre-matiere {
  color: #C21121;
  font-size: 56px;
  margin-bottom: 20px;
}

/* --- DOSSIERS --- */
.dossiers {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.dossier img {
  width: 190px;
  display: block;
  transition: transform 0.2s ease;
}

.dossier:hover img {
  transform: translateY(-6px);
}

.dossier-titre {
  position: absolute;
  top: 870px;          /* ajuste selon où tu veux que le texte tombe sur le dossier */
  right: 910px;
  color: white;           /* ou la couleur qui contraste le mieux avec ton image de dossier */
  font-size: 22px;
  text-align: center;
  line-height: 1.3;
  text-decoration: none;
}

/* --- INTRO TEXTE --- */
.intro-sujets {
  margin-bottom: 40px;
}

.texte-intro {
  font-size: 23px;
  line-height: 1.5;
  color: #b3e6fb;
  max-width: 1150px;
}
.texte-intro-noir {
  font-size: 23px;
  line-height: 1.5;
  color: #2a2a2a;
  max-width: 950px;
  margin-left: 40px;
}

/* --- GRILLE DE CARTES --- */
.grille-sujets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
  gap: 24px;
  margin-bottom: 60px;
}

.carte-sujet {
  background-color: #B3E6FB;
  color: #C21121;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  min-height: 150px;
  border-radius: 4px;
  font-size: 24px;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.carte-sujet:hover {
  transform: translateY(-4px);
  background-color: #a8d4ea;
}

/* --- ANCIENS SUJETS --- */
.anciens-sujets h2 {
  color: #B3E6FB;
  font-size: 40px;
  margin-bottom: 30px;
  margin-top: 110px;
}

.conseil {
  max-width: 850px;
  margin: 0 auto 100px auto;
  position: relative;
}

.conseil-num {
  color: #B3E6FB;
  font-size: 20px;
  display: block;
  margin-bottom: 6px;
}

.conseil h2 {
  font-size: 36px;
  color: #B3E6FB;
  margin-bottom: 20px;
}

.conseil p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.methode {
  background-color: #B3E6FB;
  color: #2a2a2a;
  padding: 24px 30px;
  border-radius: 4px;
  margin: 24px 0;
}

.methode h3 {
color: #FAF0CA; /* le rouge du site en accent, pour le titre de l'encart */
  font-size: 20px;
  margin-bottom: 12px;
}

.sommaire {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 120px;
  margin-top:30px;
  margin-left:50px;
  max-width: 700px;
}

.sommaire a {
  color: #2a2a2a;
  text-decoration: none;
  font-size: 18px;
}

.sommaire a:hover {
  text-decoration: underline;
}

.sommaire-sidebar {

  margin-top: 70px;
  top: 40px;
  display: flex;
  flex-direction: row;    /* ← EXPLICITE : les colonnes côte à côte */
  gap: 100px;               /* espace entre colonne physique et colonne maths */
}

.sommaire-colonne {
  display: flex;
  flex-direction: column;  /* ← à l'intérieur d'UNE colonne, les liens s'empilent */
  gap: 8px;
}

.sommaire-colonne h4 {
  color: #B3E6FB;
  font-size: 32px;
  margin-bottom: 6px;
}

.sommaire-colonne a {
  color: #2a2a2a;
  text-decoration: none;
  font-size: 20px;
  margin-left: 30px;
  display: block; /* chaque lien sur sa propre ligne dans la colonne */
}

.sommaire-colonne a:hover {
  color: #B3E6FB;
  text-decoration: none;
}

/* --- TITRE DE MATIERE --- */
.titre-matiere-annales {
  color: #B9D9EB;
  font-size: 44px;
  margin: 60px 0 30px 0;
  border-bottom: 3px solid #B3E6FB;
  padding-bottom: 10px;
}

/* --- CHAPITRE --- */
.chapitre-annales {
  max-width: 900px;
  margin: 0 auto 50px auto;
}

.chapitre-annales h3 {
  font-size: 26px;
  color: #B9D9EB;
  margin-bottom: 16px;
}

/* --- LISTE + CARTE D'EXERCICE --- */
.liste-exercices {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales */
  gap: 14px;
}

.carte-exercice {
  display: block;
  background-color: #B3E6FB;
  color: #2a2a2a;
  text-decoration: none;
  padding: 18px 24px;
  border-radius: 4px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.carte-exercice:hover {
  transform: translateY(-4px);
  background-color: #a0d9f2;
}

.exo-meta {
  font-size: 13px;
  color: #617A3F;
  margin-bottom: 4px;
}

.exo-titre {
  font-size: 20px;
  margin-bottom: 4px;
}

.exo-desc {
  font-size: 14px;
  color: #444;
}

/* --- LAYOUT EN 2 COLONNES : sommaire + contenu --- */
.layout-annales {
  display: grid;
  grid-template-columns: 440px 1fr; /* colonne fixe pour le sommaire, le reste pour le contenu */
  gap: 60px;
  align-items: start; /* empêche les colonnes de s'étirer à la même hauteur */
}

.date-maj {
  font-style: italic;
  font-size: 15px;
  color: #B3E6FB;
}

/* --- BOUTON D'APPEL A L'ACTION --- */
.bouton {
  display: inline-block;
  background-color: #B3E6FB;
  color: #2A2A2A;
  text-decoration: none;
  font-size: 20px;
  padding: 16px 32px;
  border-radius: 4px;
  margin-top: 20px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.bouton:hover {
  background-color: #a0d9f2;
  transform: translateY(-3px);
}

/* --- PAGE COURS : fond clair + police normale, pour la lisibilité --- */
body.page-cours {
  background-color: #B3E6FB;
  color: #1a1a1a;
}

.cours-contenu {
  max-width: 820px;
  margin: 0 auto;
  font-family: 'Georgia', 'Times New Roman', serif; /* police "normale", pas la police manuscrite */
  font-size: 18px;
  line-height: 1.7;
}

.cours-contenu h2 {
  font-family: 'Internet Friends', sans-serif; /* les titres gardent l'identité du site */
  color: #FAF0CA;
  font-size: 30px;
  margin-top: 50px;
  margin-bottom: 16px;
}

.cours-contenu p {
  margin-bottom: 16px;
}

.cours-contenu ul {
  margin: 0 0 20px 20px;
}

.cours-contenu li {
  margin-bottom: 10px;
}

/* --- ENCARTS DEFINITION (fond bleu clair, bon contraste) --- */
.definition {
  background-color: #B3E6FB;
  color: #1a1a1a;
  padding: 16px 22px;
  border-radius: 4px;
  margin: 20px 0;
}

.definition p {
  margin-bottom: 0;
}

/* --- CAS CLASSIQUES (même esprit, légèrement distingué) --- */
.cas-classique {
  background-color: #eaf7fd;
  border-left: 4px solid #B3E6FB;
  padding: 16px 22px;
  margin: 20px 0;
  border-radius: 4px;
}

/* --- FORMULES MISES EN AVANT (fbox en LaTeX) --- */
mjx-container {
  overflow-x: auto; /* évite que les formules longues cassent la mise en page sur mobile */
}

/* --- PAGE COURS : fond clair + police normale, pour la lisibilité --- */
body.page-cours {
  background-color: #ffffff;
  color: #1a1a1a;
}

.cours-contenu {
  max-width: 820px;
  margin: 0 auto;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.7;
}

.cours-contenu h2 {
  font-family: 'Internet Friends', sans-serif;
  color: #f9eaaf;
  font-size: 30px;
  margin-top: 50px;
  margin-bottom: 16px;
}

.cours-contenu p {
  margin-bottom: 16px;
}

.cours-contenu ul {
  margin: 0 0 20px 20px;
}

.cours-contenu li {
  margin-bottom: 10px;
}

.definition {
  background-color: #faf0ca8c;
  border-left: 4px solid #B3E6FB;
  color: #1a1a1a;
  padding: 16px 22px;
  border-radius: 4px;
  margin: 20px 0;
}

.definition p {
  margin-bottom: 0;
}

.cas-classique {
  background-color: #e9755143;
  border-left: 4px solid #E97451;
  padding: 16px 22px;
  margin: 20px 0;
  border-radius: 4px;
}

mjx-container {
  overflow-x: auto;
}

/* --- COMPTEUR DE SECTIONS (h2) --- */
.cours-contenu {
  counter-reset: section definition cas;
}

.cours-contenu h2 {
  counter-increment: section;
  margin-left:-80px;
}

.cours-contenu h2::before {
  content: counter(section) ". ";
  color: #f9eaaf;
}

/* --- COMPTEUR DE DEFINITIONS, GLOBAL (pas de reset entre sections) --- */
.definition {
  counter-increment: definition;
}

.definition::before {
  content: "Définition " counter(definition) "";
  font-weight: bold;
  color: #0a5a7a;
  display: block;
  margin-bottom: 6px;
}

/* --- COMPTEUR DES CAS/EXEMPLES, GLOBAL AUSSI --- */
.cas-classique {
  counter-increment: cas;
}

.cas-classique::before {
  content: "Exemple " counter(cas) "";
  font-weight: bold;
  color: #0a5a7a;
  display: block;
  margin-bottom: 6px;
}

/* --- SOUS-TITRES h3 dans les cours --- */
.cours-contenu h3 {
  font-family: 'Internet Friends', sans-serif;
  color: #FAF0CA;
  font-size: 24px;
  margin-top: 36px;
  margin-bottom: 12px;
  margin-left:-40px;
}

/* le h3 à l'intérieur d'un encart .methode garde une taille cohérente avec le reste de l'encart */
.methode h3 {
  margin-top: 0;
  font-size: 20px;
}

/* --- EXERCICES --- */
.exercice {
  background-color: #00693d44;
  border-left: 4px solid #00693E;
  padding: 20px 26px;
  margin: 30px 0;
  border-radius: 4px;
}

.exo-duree {
  font-style: italic;
  color: #666;
  margin-bottom: 12px;
}

.exercice ol {
  margin: 0 0 16px 20px;
}

.exercice li {
  margin-bottom: 10px;
}

.exo-image {
  max-width: 100%;
  display: block;
  margin: 16px auto;
  border-radius: 4px;
}

.questions-cours {
  background-color: #b3e5fb47;
  padding: 20px 30px;
  border-radius: 4px;
  margin: 20px 0;
}

.questions-cours ul {
  margin-left: 20px;
}

.questions-cours li {
  margin-bottom: 10px;
}

.questions-cours ul ul {
  margin-top: 8px;
}