/* =========================================================
   FEUILLE DE STYLE — PORTAIL COURS (CSS COMMENTÉ)
   Auteur : M. L. Foughali
   Objet : Header/Footer en bande, sections, tableaux, responsive.
   ========================================================= */

/* =========================================================
   1) VARIABLES GLOBALES & RÈGLES DE BASE
   --------------------------------------------------------- */
:root {
  /* Hauteurs bandeaux */
  --header-h: 6.2rem;
  --header-extra: 1.4rem;
  --footer-h: 1.5rem;

  /* Couleurs identitaires (harmonisées avec "Programme officiel") */
  --brand: #0d6efd;     /* Bleu principal Bootstrap */
  --brand-2: #0d6efd;   /* Même bleu pour cohérence */
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

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

body {
  padding-top: calc(var(--header-h) + var(--header-extra)); /* réserve sous header FIXE */
  padding-bottom: calc(var(--footer-h) + 1.25rem);          /* réserve au-dessus du footer */
  background-color: #fff;
  margin: 0;
}

/* =========================================================
   2) HEADER (BANDEAU HAUT) + BADGES
   --------------------------------------------------------- */
header#header-band {
  background: url("/assets/img/band-01.png") center / cover no-repeat;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  position: fixed; top: 0; left: 0; width: 100%; z-index: 10000;

  display: flex; align-items: center; justify-content: center;
  min-height: var(--header-h); height: auto; padding: .5rem 0;
}

.header-badges {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .35rem .9rem; text-align: center; font-weight: 700; font-size: 1.05rem; line-height: 1.25;
  width: 100%; margin: 0;
}
.header-badges .badge-item {
  flex: 1 1 320px; min-width: 260px; white-space: normal; overflow-wrap: anywhere;
}

/* =========================================================
   3) CONTENU (SECTIONS, INDENTATION, TABLES, MÉDIAS)
   --------------------------------------------------------- */
.section { margin-bottom: 2rem; }

/* Titre de section + actions à droite */
.section-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}

/* Titres de section en bleu identitaire */
.section-title h2,
.section-title h3,
.section-title h4 {
  margin: 0;
  color: var(--brand-2);
  font-weight: 700;
}

/* Ligne horizontale bleue sous le titre */
.section-rule {
  height: 2px;
  opacity: .35;
  background-color: currentColor; /* hérite du bleu du titre */
  border: 0;
}

/* Indentation douce */
.section-body { margin-left: clamp(0.75rem, 2vw, 2rem); }

/* Variante avec rail (filet vertical bleu clair) */
.section-body.with-rail {
  border-left: 2px solid rgba(13,110,253,.25);
  padding-left: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-left: clamp(0.5rem, 1.5vw, 1.25rem);
}

/* Tableaux d’évaluation : largeur compacte en desktop */
section[aria-labelledby="eval-title"] .table-responsive {
  width: 880px;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  padding-left: .5rem;
  padding-right: .5rem;
  overflow-x: auto;
}

/* Vignettes / icônes */
.pdf-icon { max-width: 28px; height: auto; }
.doc-thumb { max-width: 64px; height: auto; border-radius: 6px; }

/* Tables : règle générale (centrage vertical par défaut) */
table.table th,
table.table td {
  vertical-align: middle;
}

/* Tables d’évaluation : texte bleu + alignement haut */
section[aria-labelledby="eval-title"] table.table th,
section[aria-labelledby="eval-title"] table.table td {
  color: var(--brand-2);   /* même bleu que les titres */
  vertical-align: top;     /* texte en haut de la cellule */
  padding-top: .35rem;     /* respiration */
}

/* =========================================================
   4) FOOTER (BANDEAU BAS)
   --------------------------------------------------------- */
#footer-band {
  position: fixed; bottom: 0; left: 0; width: 100%;
  min-height: var(--footer-h);
  background: url("/assets/img/band-01.png") center / cover no-repeat;
  color: #fff; text-align: center;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  border-top: 1px solid rgba(255,255,255,.25);
  z-index: 10000;
}

/* Espaceur (si page courte) */
.spacer { height: calc(var(--footer-h)); }
.footer-offset { height: 0; }

/* =========================================================
   5) UTILITAIRES
   --------------------------------------------------------- */
.ds-logo { border-radius: 12px; max-width: 100%; height: auto; }
.ds-text-justify { text-align: justify; }
.ds-th { width: 33%; }
.ds-th-25 { width: 25%; }

/* =========================================================
   6) RESPONSIVE
   --------------------------------------------------------- */
/* ≤ 575.98px : Mobile */
@media (max-width: 575.98px) {
  /* Header devient STICKY */
  header#header-band {
    position: sticky; top: 0;
    padding-top: calc(.6rem + env(safe-area-inset-top, 0));
    padding-bottom: .65rem;
  }

  body { padding-top: 0 !important; }

  /* Vignettes compactes */
  .doc-thumb {
    width: 36px; max-width: 36px; height: 36px;
    object-fit: cover; border-radius: 6px;
  }
  .pdf-icon { width: 20px; max-width: 20px; height: auto; }

  /* Grille ressources */
  section[aria-labelledby="ressources-title"] .row>.col-2 {
    flex: 0 0 auto; width: auto;
  }

  /* Tables plus denses sur mobile */
  table.table th,
  table.table td {
    padding: .35rem .4rem;
    font-size: .925rem;
  }

  /* Indentation et rail conservés */
  .section-body,
  .section-body.with-rail {
    margin-left: .75rem;
    padding-left: .75rem;
    border-left-width: 2px;
  }

  /* Évaluations : pleine largeur */
  section[aria-labelledby="eval-title"] .table-responsive {
    width: 100%;
    margin: 0;
    padding: 0 .25rem;
  }
}

/* ≤ 992px : Tablettes / petits laptops */
@media (max-width: 992px) {
  .header-badges .badge-item {
    flex: 1 1 420px;
    min-width: 280px;
  }
}

/* =========================================================
   ESPACE SOUS LE HEADER (RESPIRATION VISUELLE)
   --------------------------------------------------------- */
main,
.section:first-of-type,
.container:first-of-type {
  margin-top: 1rem;
}

.text-blanc-casse {
  color: rgb(205, 210, 216); /* blanc cassé élégant */
}

#intro-title {
  color: var(--brand); /* même bleu que Programme officiel */
}


/* =========================================================
   NOTES / ASTUCES
   ---------------------------------------------------------
   - Forcer le header FIXE sur mobile :
       • Supprimer le bloc @media (sticky)
       • Garder body{ padding-top: calc(var(--header-h)+var(--header-extra)); }
   - Éviter transform/filter/perspective/backdrop-filter sur parents du header/footer.
   - Pour plus d’espace avant le footer :
       • insérer <div class="spacer"></div> juste avant #footer-band.
   ========================================================= */