/* ============================================ */
/* GENERAL */
html, body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(135deg, #f0f4f8, #d0d8e2) fixed;
  display: flex;
  flex-direction: column;
}

/* HEADER */
header.bandeau-logo {
  height: 4.5rem;
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
}
.logo-crf { height: 3rem; width: auto; }
.titre-page { font-size: 1.5rem; color: #333; }
.datetime { font-size: 0.9rem; color: #555; }

/* SPACER */
.header-spacer { height: 4.5rem; }

/* BOX DE RECHERCHE */
.search-box {
  margin-top: 1rem; /* descend la box de recherche */
  text-align: center;
}
.search-box input {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.search-box input:focus {
  outline: none;
  border-color: #508BB8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* MAIN CONTENT */
main {
  padding-top: 6.5rem; /* espace sous header fixe */
  margin-bottom: 2.5rem;
}

/* SECTION TITLES & SEPARATORS */
.section-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0.5rem 0 0.5rem; /* réduit l'espace supérieur et inférieur */
  color: #333;
  text-transform: uppercase;
}
.section-separator {
  border: none;
  border-top: 3px solid #ccc;
  width: 60%;
  margin: 1rem auto; /* réduit l'espace au-dessus et en dessous */
  position: relative;
}
.section-separator::before {
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #c00;
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 10px;
  font-size: 0.9rem;
}

/* LINK COLUMNS */
.column-title {
  font-weight: 700;
  padding: 0.3rem;
  color: #fff;
  text-align: center;
  margin-bottom: 0.35rem;
  border-radius: 6px 6px 0 0;
}
.link-column {
  display: flex;
  flex-direction: column;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.link-block {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  color: #fff;
  text-decoration: none;
  transition: filter 0.3s ease, background-color 0.4s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.link-column .link-block:not(:last-child) { margin-bottom: 0.1rem; }
.link-block .icon { margin-right: 0.5rem; font-size: 1.2rem; }
.link-block .label { flex-grow: 1; font-size: 1rem; }
.link-block:hover { filter: brightness(115%); }
.row.justify-content-center { margin: 0 auto; }
.row.justify-content-center > .col-12 { margin-top: 0; } /* réduit espace entre titre et colonnes */

/* FOOTER */
.footer-fixed {
  background: rgba(255,255,255,0.9);
  text-align: center;
  padding: 0.5rem 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ccc;
  font-size: 0.9rem;
  z-index: 1000;
}

/* ============================================ */
/* COLORS PER SITE */
:root {
  /* JOFFRE */
  --equipements-title: #2E5984; --equipements-bg: #2A4F73;
  --securite-title: #356C9B; --securite-bg: #2F5F84;
  --reseau-title: #4178A4; --reseau-bg: #386B8E;
  --telephonie-title: #508BB8; --telephonie-bg: #45779F;
  --ressources-title: #607D8B; --ressources-bg: #51676F;
}

/* BIEVRE */
.site-bievre {
  --equipements-title: #5A7F65; --equipements-bg: #4F7057;
  --securite-title: #6E9075; --securite-bg: #5F8067;
  --reseau-title: #81A684; --reseau-bg: #6F936F;
  --telephonie-title: #93B69A; --telephonie-bg: #7EA07F;
  --ressources-title: #AABFA9; --ressources-bg: #98B69A; --ressources-text: #0b2b16;
}

/* OUTILS */
.site-outils {
  --equipements-title: #5D3FD3; --equipements-bg: #5436C6;
  --securite-title: #7E57C2; --securite-bg: #6F49B3;
  --reseau-title: #9575CD; --reseau-bg: #8566B8;
  --telephonie-title: #B39DDB; --telephonie-bg: #A089D0; --telephonie-text: #222;
  --ressources-title: #4A4A4A; --ressources-bg: #414141;
}

/* INFRASTRUCTURE MOBILE (couleur adoucie) */
.site-mobile {
  --equipements-title: #FF6F61; --equipements-bg: #E65C50;
  --securite-title: #FFA07A; --securite-bg: #FF7F50;
  --reseau-title: #FFB347; --reseau-bg: #FF9C40; /* moins flashy */
  --telephonie-title: #FFD700; --telephonie-bg: #FFC835; /* plus doux */
  --ressources-title: #8FD14F; --ressources-bg: #6BBF2B;
}

/* Ordinateurs */
[class*="site-"] .column-title.famille-ordinateurs { background-color: #6C757D; color: #fff; }
[class*="site-"] .link-block.famille-ordinateurs { background-color: #5A6268; color: #fff; }


/* APPLY COLORS */
[class*="site-"] .column-title.famille-equipements { background-color: var(--equipements-title); color: var(--equipements-text, #fff); }
[class*="site-"] .link-block.famille-equipements { background-color: var(--equipements-bg); color: var(--equipements-text, #fff); }
[class*="site-"] .column-title.famille-securite { background-color: var(--securite-title); color: var(--securite-text, #fff); }
[class*="site-"] .link-block.famille-securite { background-color: var(--securite-bg); color: var(--securite-text, #fff); }
[class*="site-"] .column-title.famille-reseau { background-color: var(--reseau-title); color: var(--reseau-text, #fff); }
[class*="site-"] .link-block.famille-reseau { background-color: var(--reseau-bg); color: var(--reseau-text, #fff); }
[class*="site-"] .column-title.famille-telephonie { background-color: var(--telephonie-title); color: var(--telephonie-text, #fff); }
[class*="site-"] .link-block.famille-telephonie { background-color: var(--telephonie-bg); color: var(--telephonie-text, #fff); }
[class*="site-"] .column-title.famille-ressources { background-color: var(--ressources-title); color: var(--ressources-text, #fff); }
[class*="site-"] .link-block.famille-ressources { background-color: var(--ressources-bg); color: var(--ressources-text, #fff); }