@charset "UTF-8";

/*
 * Sous-bandeau — position `sous-pied`, sous le pied de page.
 *
 * Position propre au template enfant (absente du cœur Cassiopeia) : voir
 * templates/index.php, juste après le bloc <footer>. Colonne de gauche
 * empilée (mesure d'impact au-dessus, création du site en dessous), liens
 * accessibilité/mentions légales à droite (mod_menu sur `menu-pied`).
 *
 * Même combinaison que le bandeau « Prochain rendez-vous » de la fiche
 * acteur : fond olive, texte crème (~4,8:1, au-dessus du seuil du texte
 * courant mais sans marge). Voir reemploi/CLAUDE.md : ne pas descendre la
 * taille du texte en dessous de celle-ci, ni y poser une autre couleur de
 * la palette.
 */

.container-sous-pied {
  color: var(--rem-creme);
  background-color: var(--rem-olive);
}

/* Grille à deux colonnes : la colonne de gauche empile ses deux lignes
   (modules 131 puis 130, dans cet ordre), la colonne de droite (module 132)
   couvre les deux lignes et reste centrée verticalement sur la pile. */
.container-sous-pied > .grid-child {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 2rem;
  row-gap: 0.3rem;
  max-width: none;
  padding-block: 0.9rem;
  padding-inline: var(--rem-marge-page);
  font-family: var(--rem-police-mono);
  font-size: 0.9rem;
}

.sema-sous-pied {
  margin: 0;
  text-align: left;
}

.sema-sous-pied p {
  margin: 0;
}

.sema-sous-pied__mesure {
  grid-column: 1;
  grid-row: 1;
}

/* Badge Écoindex (image servie par bff.ecoindex.fr, sans JS) aligné sur la
   phrase qui le précède. C'est elle qui donne la note en texte : la lettre
   blanche du badge sur la couleur de la note plafonne à ~1,5:1 (C). */
.sema-sous-pied__mesure p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
}

.sema-sous-pied__mesure img {
  display: block;
}

.sema-sous-pied__creation {
  grid-column: 1;
  grid-row: 2;
}

.sema-sous-pied__legal {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.sema-sous-pied a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--rem-trait-fin);
  text-underline-offset: 0.2em;
}

.sema-sous-pied a:hover,
.sema-sous-pied a:focus-visible {
  text-decoration-thickness: 2px;
}

/* Liste du mod_menu — à plat, sur une ligne, simple espacement entre les
   deux liens (pas de séparateur visuel). */
.sema-sous-pied__legal .mod-menu {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 1.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sema-sous-pied__legal .mod-menu a {
  text-decoration: none;
}

.sema-sous-pied__legal .mod-menu a:hover,
.sema-sous-pied__legal .mod-menu a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--rem-trait-fin);
  text-underline-offset: 0.2em;
}

@media (width <= 47.9375rem) {
  .container-sous-pied > .grid-child {
    grid-template-columns: 1fr;
    row-gap: 0.6rem;
  }

  .sema-sous-pied__mesure {
    grid-column: 1;
    grid-row: 1;
  }

  .sema-sous-pied__creation {
    grid-column: 1;
    grid-row: 2;
  }

  .sema-sous-pied__legal {
    grid-column: 1;
    grid-row: 3;
  }

  .sema-sous-pied__legal .mod-menu {
    justify-content: flex-start;
  }
}