/* =========================================================
   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 (valeurs validées) */
  --header-h: 5.0em;
  /* bandeau haut — mobile/tablette par défaut */
  --header-extra: 1.4rem;
  --footer-h: 0.0em;
  /* bandeau bas */

  /* 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 {
  /* Réserve sous header FIXE (desktop) */
  padding-top: calc(var(--header-h) );
  /* Réserve au-dessus du footer */
  padding-bottom: calc(var(--footer-h) );
  background-color: #fff;
  margin: 0;
}

/* =========================================================
   2) HEADER (BANDEAU HAUT) — CENTRÉ ET ÉPURÉ
   --------------------------------------------------------- */
#header-band {
  margin-top: 0;
  /* aucune marge par défaut */
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-h);
  /* hauteur par défaut */
  background: url("/assets/img/band.jpg") 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;
}

#header-band .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  /* neutralise les marges Bootstrap */
}

.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;
  /* pas de marge interne */
}

.header-badges .badge-item {
  flex: 1 1 320px;
  min-width: 260px;
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 0;
}

/* =========================================================
   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) — CENTRÉ ET ÉPURÉ
   --------------------------------------------------------- */
#footer-band {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: var(--footer-h);
  background: url("/assets/img/band.jpg") 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;
  margin-top: 0;
}

#footer-band .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

#footer-band p {
  margin: 0;
}

/* supprime toute marge du <p> */

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

.footer-offset {
  height: 0;
}

/* 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%;
}

.blanc-casse {
  color: rgb(175, 185, 197);
}

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

/* variante (si utilisée) */
#intro-title {
  color: var(--brand);
}

/* même bleu que Programme officiel */

/* =========================================================
   5) RESPONSIVE
   --------------------------------------------------------- */

/* ≥ 992px : réduis la hauteur du header (plus fin sur desktop) */
@media (min-width: 992px) {
  :root {
    --header-h: 4.0em;
  }

  /* règle validée (LG et +) */
}

/* ≤ 575.98px : Mobile */
@media (max-width: 575.98px) {

  /* Header sticky propre avec même hauteur que la variable */
  #header-band {
    position: sticky;
    top: 0;
    height: var(--header-h);
    min-height: var(--header-h);
    padding: 0;
    margin-top: 0;
  }

  /* Pas de double réserve en haut quand sticky actif */
  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 (si tu tiens à conserver l’étirement) */
@media (max-width: 992px) {
  .header-badges .badge-item {
    flex: 1 1 420px;
    min-width: 280px;
    margin: 0;
  }
}

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

/* =========================================================
   7) NOTES / ASTUCES
   ---------------------------------------------------------
   - Cause racine corrigée : marges par défaut neutralisées (header, container, p).
   - Header FIXE mobile : supprimer le bloc @media(sticky) et conserver
     body{ padding-top: calc(var(--header-h) + var(--header-extra)); } si besoin.
   - Éviter transform/filter/perspective/backdrop-filter sur parents du header/footer.
   - Pour plus d’espace avant le footer : insérer <div class="spacer"></div> avant #footer-band.
   ========================================================= */


/* =========================================================
   FOOTER TEXTUEL — CENTRÉ ÉQUILIBRÉ
   --------------------------------------------------------- */
#footer-textual {
  margin-top: 0 !important;
  border-top: 1px solid var(--bs-border-color, rgba(0,0,0,.1));
}

#footer-textual .container {
  display: flex;
  align-items: center;           /* centrage vertical */
  justify-content: center;       /* centrage horizontal */
  /* min-height: var(--footer-h);               hauteur harmonisée avec footer-band */
  padding: 0;                    /* supprime py-3 de Bootstrap */
  text-align: center;
}

#footer-textual .footer-oneline,
#footer-textual .d-md-none {
  line-height: 1.4;              /* équilibre visuel vertical */
}