/* =====================================================================
   Cours d'algorithmique — feuille de style unique
   ===================================================================== */

/* ---------- Base ---------- */
body {
  margin: 8px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  line-height: 135%;
  text-align: justify;
}

a:link, a:visited { color: #0000FF; text-decoration: none; }
a:hover { color: #CC0000; text-decoration: underline; }

img { border: 0; }

/* ---------- Mise en page des pages de cours ---------- */
.page {
  display: flex;
  align-items: flex-start;
  width: 960px;
  margin: 0 auto;
}

.menu {
  flex: 0 0 236px;
  padding: 6px;
  text-align: left;
}
main {
  flex: 0 0 700px;
  padding: 6px;
}

/* ---------- Menu de gauche ---------- */
.accueil img { display: block; }

.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul > li {
  margin-top: 6px;
  font-size: 14px;
  font-weight: bold;
}
.menu li li {               /* sous-menu du chapitre en cours */
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: normal;
  line-height: 100%;
}
.menu li.actif > ul { margin-top: 0; }

.pub {
  display: block;
  width: 220px;
  height: 1500px;
  margin-top: 43px;
  border: 0;
}

/* ---------- Encadré « Rappel » ---------- */
.rappel {
  box-sizing: border-box;
  width: 700px;
  padding: 4px 41px;
  border: 2px solid #447777;
  background: #FFFFCC;
  color: #447777;
  font-size: 14px;
  text-align: center;
}

/* ---------- Titres ---------- */
h1 {
  margin: 30px 0 60px;
  font-size: 30px;
  font-weight: normal;
  font-variant: small-caps;
  line-height: 100%;
  letter-spacing: 1px;
  text-align: center;
}
h2 {
  margin: 48px 0 18px;
  color: #444;
  font-size: 22px;
  text-align: left;
}
h3 {
  margin: 36px 0 9px;
  color: #444;
  font-size: 18px;
  text-align: left;
}

/* ---------- Texte courant ---------- */
main p, .corps {
  margin: 4px 0;
  text-indent: 30px;
}
li { text-indent: 0; }
li p { margin: 3px 0; }

strong { color: #FF0000; font-weight: bold; }   /* mots-clés en rouge */
.rem { color: #FF0000; }                         /* commentaires rouges, non gras */

p.centre { text-align: center; text-indent: 0; }
p.gauche { text-align: left; }

/* Citations en tête de chapitre */
.citations { padding-bottom: 30px; }
main p.citation { margin: 0 0 12px 250px; text-indent: 0; }

/* « Retour haut de page » */
main p.retour { margin-top: 18px; text-indent: 0; text-align: center; }
.retour img { display: block; margin: 0 auto; }

/* Liens vers corrigé / cours, en bas d'exercice */
main p.bas { text-align: right; text-indent: 0; }

/* ---------- Encadrés ---------- */
pre.code {
  margin: 18px 0;
  padding: 9px;
  border: 3px outset;
  background: #FFFFCA;
  font-family: 'Ubuntu Mono', 'Courier New', monospace;
  font-size: 16px;
  line-height: 130%;
  text-align: left;
  white-space: pre-wrap;
}

.gag {                                  /* « le gag de la journée », remarques */
  margin: 18px 50px;
  padding: 12px;
  border: 3px outset;
  background: #CCFFFF;
  color: #0000FF;
}

.exos {                                 /* liens vers les exercices */
  margin: 18px 150px;
  padding: 12px;
  border: 3px outset;
  background: #CCFFCC;
  color: #909090;
  text-align: center;
}

.rouge {                                /* définitions à retenir */
  margin: 18px 0;
  padding: 6px;
  border: 3px solid #FF0000;
  background: #FF0000;
  color: #FFFFFF;
}

/* ---------- Figures et vidéos ---------- */
figure { margin: 26px 0; text-align: center; }
figure img { display: block; margin: 0 auto; }
figcaption { font-style: italic; }

iframe.video { display: block; margin: 22px 0; border: 0; }

/* ---------- Tableaux ---------- */
table { border-collapse: collapse; }
main table { margin: 0 auto; }
main table.a-gauche { margin-left: 0; }
table.verite { margin: 22px auto; }
table.grille, table.entetes { margin-bottom: 22px; }
td { text-indent: 0; }

/* Tableau quadrillé générique */
table.grille { border: 2px solid #808080; }
table.grille td { border: 1px solid #808080; padding: 3px; }
table.grille.centre td { text-align: center; }

/* Tableau à en-têtes jaunes (passage par valeur / référence) */
table.entetes { border-width: 1px; border-color: #111; }
table.entetes td { border-color: #111; padding: 6px; text-align: center; }
table.entetes tr:first-child td,
table.entetes td:first-child { background: #FFFFCA; }
table.entetes td:first-child { text-align: left; }

/* Tables de vérité */
table.verite { table-layout: fixed; }
table.verite td { padding: 3px; text-align: center; background: #F2F2F2; }
table.verite tr:first-child td,
table.verite td:first-child { background: #CCCCCC; font-weight: bold; }
table.verite tr:first-child td:first-child { background: #666666; }

/* Cases d'un tableau (tri) */
table.cases { width: 95%; margin-bottom: 22px; table-layout: fixed; border: 1px solid; }
table.cases td { height: 40px; border: 1px solid; background: #DBDBDB; text-align: center; }

/* Comparatif fichiers texte / binaires */
table.comparatif { width: 100%; border: 2px outset; border-collapse: separate; border-spacing: 1px; background: #EEEEEE; }
table.comparatif td { padding: 3px; border: 1px inset; background: #FFFFFF; text-align: center; }
table.comparatif tr:first-child td { background: #EEEEEE; font-weight: bold; }
table.comparatif td:first-child { background: #EEEEEE; text-align: left; }

/* =====================================================================
   Pages d'énoncés et de corrigés
   ===================================================================== */
.exercices .rappel { margin: 51px auto 0; }
.feuille {
  width: 738px;
  margin: 0 auto;
  padding: 6px;
}
.feuille .accueil { float: left; }
.feuille main { padding: 0; }
.exercices h1 { margin-top: 30px; }
.exercices h2 {
  margin: 24px 0 12px;
  color: #447777;
  font-size: 18px;
}
.exercices hr {
  width: 75%;
  height: 2px;
  border: 0;
  background: #EEEEEE;
}
.corriges hr { background: #808080; }

/* =====================================================================
   Petits écrans
   ===================================================================== */
@media (max-width: 980px) {
  body { margin: 0; text-align: left; }
  h1 { margin: 20px 0 30px; }
  .page { display: block; width: auto; }
  .menu { padding: 10px 12px; border-bottom: 1px solid #ccc; }
  .pub { display: none; }
  main { padding: 10px 12px; }
  .rappel, .exercices .rappel { width: auto; margin: 0; padding: 4px 12px; }
  .feuille { width: auto; padding: 10px 12px; }
  main p.citation { margin-left: 15%; }
  .gag { margin: 18px 0; }
  .exos { margin: 18px 10%; }
  table { max-width: 100%; }
  img, iframe { max-width: 100%; height: auto; }
  iframe.video { aspect-ratio: 16 / 9; }
}

/* =====================================================================
   Page d'accueil
   ===================================================================== */
.couverture {
  width: 720px;
  margin: 0 auto;
  padding: 58px 15px 15px;
  text-align: center;
}
.couverture h1 { margin: 0 0 60px; font-weight: bold; }
.couverture p { margin: 0 0 22px; }
@media (max-width: 980px) {
  .couverture { width: auto; padding: 30px 12px; }
}