/* === PALETTE DE COULEURS HARMONISÉE === */
:root {
  /* Vos couleurs de base */
  --bleu-fonce: rgb(14, 65, 99);    /* Bleu profond */
  --vert-fonce: rgb(18, 77, 37);    /* Vert profond */
  
  /* Couleurs dérivées harmonisées */
  --bleu-medium: rgb(42, 108, 155); /* Bleu intermédiaire */
  --bleu-light: rgb(100, 160, 210); /* Bleu clair */
  --bleu-pale: rgba(14, 65, 99, 0.01); /* Bleu très pale */
  
  --vert-medium: rgb(45, 135, 75);  /* Vert intermédiaire */
  --vert-light: rgb(90, 180, 110);  /* Vert clair */
  --vert-pale: rgba(18, 77, 37, 0.01); /* Vert très pale */
  
  /* Couleurs complémentaires */
  --orange: rgb(220, 120, 45);      /* Orange terreux */
  --orange-pale: rgba(220, 120, 45, 0.01);
  
  --violet: rgb(110, 60, 150);      /* Violet profond */
  --violet-pale: rgba(110, 60, 150, 0.01);
}

/* === CONFIGURATION APPARENCE ET POLICE GLOBALE === */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Évite un défilement horizontal parasite */
    background-color: #ffffff !important; /* Force le fond blanc pur */
    font-size: 15px;                      /* Légèrement augmentée (au lieu de 14px) */
    line-height: 1.35;                    /* Interligne légèrement aéré pour le confort */
}

/* Ajustement proportionnel pour les titres */
h1 { font-size: 1.75em; margin-top: 15px; margin-bottom: 10px; }
h2 { font-size: 1.4em; margin-top: 20px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
h3 { font-size: 1.15em; margin-top: 15px; }

/* === CALLOUT THÉORÈME (Vert) === */
.callout-theoreme {
  background: var(--vert-pale);
  border: 1px solid var(--vert-fonce);
  border-left: 4px solid var(--vert-fonce);
  padding: 20px 0px 0px 10px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  counter-increment: theorem;
  font-size: 0.98em; /* Ajusté proportionnellement */
}

.callout-theoreme::before {
  content: "Théorème  : " attr(title);
  position: absolute;
  top: -12px;
  left: 15px;
  background: var(--vert-fonce);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em; 
  z-index: 1;
  white-space: nowrap;
}

/* === CALLOUT PROPRIÉTÉ (Bleu) === */
.callout-propriete {
  background: var(--vert-pale);
  border: 1px solid var(--vert-fonce);
  border-left: 4px solid var(--vert-fonce);
  padding: 20px 0px 0px 10px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  counter-increment: propriete;
  font-size: 0.98em;
}

.callout-propriete::before {
  content: "Propriété  : " attr(title);
  position: absolute;
  top: -12px;
  left: 15px;
  background: var(--vert-fonce);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
  z-index: 1;
  white-space: nowrap;
}

/* === CALLOUT COROLLAIRE === */
.callout-corollaire {
  background: white;
  border: 1px solid var(--vert-medium);
  border-left: 4px solid var(--vert-fonce);
  padding: 20px 0px 0px 10px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  counter-increment: corollaire;
  font-size: 0.98em;
}

.callout-corollaire::before {
  content: "Corollaire  : " attr(title);
  position: absolute;
  top: -12px;
  left: 15px;
  background: var(--vert-fonce);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
  z-index: 1;
  white-space: nowrap;
}

/* === CALLOUT DÉFINITION (Vert medium) === */
.callout-definition {
  background: var(--bleu-pale);
  border: 1px solid var(--bleu-medium);
  border-left: 4px solid var(--bleu-medium);
  padding: 20px 0px 0px 10px;
  margin: 20px 0;
  border-radius: 0;
  position: relative;
  counter-increment: definition;
  font-size: 0.98em;
}

.callout-definition::before {
  content: "Définition : " attr(title);
  position: absolute;
  top: -12px;
  left: 15px;
  background: var(--bleu-medium);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
  z-index: 1;
  white-space: nowrap;
}

/* === CALLOUT EXEMPLE (Orange) === */
.callout-exemple {
  background: var(--orange-pale);
  border: 1px solid var(--orange);
  border-left: 4px solid var(--orange);
  padding: 20px 10px 10px 20px;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  font-size: 0.98em;
}

.callout-exemple::before {
  content: "Exemple : " attr(title);
  position: absolute;
  top: -12px;
  left: 15px;
  background: var(--orange);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
  z-index: 1;
  white-space: nowrap;
}

/* === CALLOUT REMARQUE === */
.callout-remarque {
  background: white; 
  border: 1px solid black;
  border-left: 4px solid black;
  padding: 10px 10px 0px 20px;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  font-size: 0.98em;
}

.callout-remarque::before {
  content: "Remarque : " attr(title); 
  position: absolute;
  top: -12px;
  left: 15px;
  background: black; 
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
  z-index: 1;
  white-space: nowrap;
}

/* === CALLOUT ATTENTION === */
.callout-attention {
  background: #fffafa; 
  border: 1px solid #d9534f; 
  border-left: 5px solid #d9534f; 
  padding: 20px 15px 5px 20px;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  font-size: 0.98em;
}

.callout-attention::before {
  content: "Attention " attr(title); 
  position: absolute;
  top: -12px;
  left: 15px;
  background: #d9534f; 
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
  z-index: 1;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

/* === CALLOUT NOTATION === */
.callout-notation {
  background: white; 
  border: 1px solid black;
  border-left: 4px solid black;
  padding: 20px 10px 0px 20px;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  font-size: 0.98em;
}

.callout-notation::before {
  content: "Notation : " attr(title); 
  position: absolute;
  top: -12px;
  left: 15px;
  background: black; 
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
  z-index: 1;
  white-space: nowrap;
}

/* --- INITIALISATION DES COMPTEURS --- */
body {
  counter-reset: theorem propriete definition corollaire exo-num;
}

/* --- LA BOÎTE EXERCICE --- */
.callout-exercice {
  margin: 1.5rem 0; 
  border: 1px solid #0E4163 !important;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  position: relative; 
  --stars: ""; 
  font-size: 0.98em;
}

/* --- LE BANDEAU SUPÉRIEUR EXERCICE --- */
.callout-exercice::before {
  counter-increment: exo-num;
  content: "\F4CB\00a0 Exercice " counter(exo-num) ": " attr(title);
  display: flex;
  justify-content: space-between; 
  align-items: center;
  background-color: #0E4163;
  color: white;
  padding: 11px 15px; 
  font-weight: bold;
  font-size: 1.05rem;   /* Réajusté harmonieusement */
  line-height: 1.4;
  font-family: system-ui, -apple-system, sans-serif;
}

/* --- AJOUT DES ÉTOILES À DROITE --- */
.callout-exercice::after {
  content: var(--stars);
  position: absolute;
  top: 11px;      
  right: 15px;
  color: #FFD700; 
  font-family: system-ui, sans-serif;
  font-weight: bold;
  font-size: 1rem; 
  pointer-events: none; 
}

/* --- LOGIQUE DES ÉTOILES --- */
.callout-exercice[style*="--star: 1"] { --stars: "★☆☆☆☆"; }
.callout-exercice[style*="--star: 2"] { --stars: "★★☆☆☆"; }
.callout-exercice[style*="--star: 3"] { --stars: "★★★☆☆"; }
.callout-exercice[style*="--star: 4"] { --stars: "★★★★☆"; }
.callout-exercice[style*="--star: 5"] { --stars: "★★★★★"; }

/* --- L'ÉNONCÉ --- */
.callout-enonce {
  padding: 15px;
  background-color: rgba(14, 65, 99, 0.02);
  line-height: 1.55;
  border-top: 1px solid rgba(14, 65, 99, 0.1);
}

.callout-exercice .callout-enonce {
  padding-bottom: 5px; 
}

/* Imbrications internes */
.callout-exercice .callout {
  margin-top: 0.5rem !important;   
  margin-bottom: 0.5rem !important; 
  margin-left: 15px;               
  margin-right: 15px;
  font-size: 0.98em;
}

.callout-exercice .callout:last-child {
  margin-bottom: 15px !important;
}

.callout-exercice .callout.callout-style-default {
  border-top: none;
  border-right: none;
  border-bottom: none;
}

.callout-enonce p:last-child {
  margin-bottom: 0;
}

/* === STYLES POUR LE CONTENU ET LES TEXTES === */
.callout-theoreme p,
.callout-propriete p,
.callout-definition p,
.callout-exemple p,
.callout-remarque p {
  margin: 0.45rem 0;
  line-height: 1.45;
}

/* --- LISTES ET ÉLÉMENTS INTERNES --- */
.callout-theoreme ul, .callout-propriete ul, .callout-definition ul, .callout-exemple ul, .callout-remarque ul {
  margin: 0.5rem 1rem;
  padding-left: 1.2rem;
}

.callout-theoreme ol, .callout-propriete ol, .callout-definition ol, .callout-exemple ol, .callout-remarque ol {
  margin: 0.5rem 1rem;
  padding-left: 1.2rem;
}

li {
  margin-bottom: 4px;  
  margin-top: 4px;    
} 

/* --- COMPOSANTS DE MISES EN PAGE --- */
.hero-section {
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  color: white;
  padding: 2.2rem 0; 
  margin-bottom: 1.5rem;
  text-align: center;
  border-radius: 8px;
}

.concours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.concours-card {
  background: white;
  border-radius: 8px;
  padding: 1.3rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border: 1px solid #e9ecef;
  font-size: 0.98em;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.resource-card {
  background: white;
  padding: 1.6rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border: 1px solid #e9ecef;
  font-size: 0.98em;
}

.construction-banner {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 1.1rem;
  margin: 1.5rem 0;
  text-align: center;
  font-size: 0.98em;
}

/* --- BOUTONS DE TÉLÉCHARGEMENT --- */
.download-link .btn {
  width: 100%; 
  margin-bottom: 1rem;
  border-color: rgba(14, 65, 99, 1);
  color: rgba(14, 65, 99, 1);
  font-size: 0.92em;
  padding: 7px 14px;
}

.download-link .btn:hover {
  background-color: rgba(14, 65, 99, 1);
  color: white;
}

/* --- GESTION DE LA TAILLE DES CALLOUTS PAR DÉFAUT --- */
.callout.callout-style-default, 
.callout.callout-style-simple {
    font-size: 0.98em;      
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.35;
}

.callout-header {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 0.92em !important;
}

.callout-body {
    padding-top: 9px !important;
    padding-bottom: 5px !important;
}

.callout-icon-container i {
    font-size: 1.12em;
}

/* ==========================================================================
   STYLE HTML POUR LE BLOC DÉFINITION
   ========================================================================== */
.callout-definition-custom {
    border-left: 4px solid #0E4163 !important; /* Barre verticale épaisse */
    background-color: #F5F8FA !important;      /* Fond très clair */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0px !important;              /* Coins droits pros */
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px !important;
}

/* Style du titre */
.callout-definition-custom > .callout-header {
    background-color: transparent !important;
    color: #0E4163 !important;
    font-family: var(--bs-font-sans-serif);
    font-weight: bold;
    font-size: 1.1em;
    padding: 0 0 8px 0 !important;
}