/* styles_updated_v6.css */
:root {
 --bg: #F8F8F8;
 --text: #000000;
 --brand: #8B821D;
 --accent: #FFF784;
 --link: #042878;
 --link-hover: #1E78C8;
 --muted: #808080;
 --card: #FFFC82;
}
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

.container { width: min(1100px, 100%); margin: 0 auto; padding-inline: 16px; }

/* Header */
.topbar{ background:#FFF784; margin:0; padding:0; height:76px; min-height:76px; width:100%; }
.topbar .header-stage{ position:relative; height:76px; width:100%; }

/* Campi logo bottom-left */
.hdr-logo{ position:absolute; left:0px; bottom:2px; width:190px; height:73px; display:block; }

/* personalisation(drapeau) */
.perso-flag{ position:absolute; right:20px; bottom:28px; width:67px; height:32px; display:block; }

/* Language tabs bottom-right */
.hdr-lang{ position:absolute; right:0; bottom:0; display:flex; gap:0; line-height:0; }
.hdr-lang .tab{ display:inline-flex; }
.hdr-lang img{ display:block; width:63px; height:16px; }
/* Titre et sous-titre */
.site-title { color: var(--brand); margin: 0; font-size: 0.8rem; text-align: center; vertical-align: center}
.site-tagline { color: var(--brand); margin: 0; font-size: 0.7rem; text-align: center; }
/* Bottom yellow line image filling the space between logo and FR tab */
.hdr-line{ position:absolute; left:0px; bottom:0; height:2px; width:calc(100% - 126px); display:block; object-fit:cover; }
@media (max-width: 420px){
  /* If the viewport becomes too narrow, avoid negative width for the line */
  .hdr-line{ width:max(0px, calc(100% - 126px)); }
}

/* Navigation icons (6 icons at the top) */
.nav-icons { margin: 24px 0 8px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: clamp(4px, 1vw, 16px); justify-items: center; }
.nav-icon-346 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: 0.70rem; line-height: 1.2; }
.nav-icon-346 img { width: 28px; height: 28px; }
.nav-icon-46 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: 0.70rem; line-height: 1.2; }
.nav-icon-46 img { width: 28px; height: 28px; }
.nav-icon-6 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: 0.70rem; line-height: 1.2; }
.nav-icon-6 img { width: 28px; height: 28px; }

/* Main layout */
.layout-grid { display: grid; grid-template-columns: 200px 1fr 200px; gap: 20px; align-items: start; margin: 8px 0 24px 0; }

/* Side banners */
.side { display: flex; justify-content: center; align-items: center; }
.side-banner { width: auto; height: auto; max-width: none; max-height: none; display: block; }

/* Category blocks (main zone) */
.section-header { background: var(--card); border: 1px solid #e0d96a; padding: 2px; text-align: center; }
.section-header h2 { margin: 0; font-size: 1rem; }
.categories { background: #fff; padding: 8px; font-size: 1.10rem; }
.category { display: grid; grid-template-columns: 75px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee; }
.category__icon img { width: 64px; height: auto; }
.category__title { font-size: 1.1rem; margin: 0; }
.category__links { margin: 4px 0 0 0; }
.category__links_FR_only { margin: 4px 0 0 0; }


/* Styling for [Francophone websites only] text */
.category__links_FR_only {
    color: #606060;
    font-size: 0.9rem;
    font-style: italic;
}



/* Footer & misc */
.stats { text-align: center; color: #404040; margin: 6px 0; font-size: 0.9rem; }
.footer { text-align: center; }
.footer__brand { font-weight: 700; font-size: 0.7rem}
.footer__date {font-weight: 700; font-size: 0.7rem}
.cookies { font-size: 0.65rem; }


/* Contrôle des espacements dans le footer */
.footer p { 
  margin: 0;                /* annule la marge par défaut */
}
.footer p + p { 
  margin-top: 4px;          /* espace réduit et maîtrisé entre les 2 lignes */
}

/* Lien spécifique dans le footer : couleur noire */
.footer__brand {
  color: #000 !important;
}

/* On neutralise les marges par défaut des <p> du footer pour maîtriser l'espacement */
.footer__content p { margin: 0; }
.footer__content p + p { margin-top: 4px; } /* ajustez 2–8px selon le rendu voulu */



/* Responsive threshold for hiding side banners */
@media (max-width: 900px) {
  .layout-grid { grid-template-columns: 1fr; }
  .side { display: none !important; }
}

@media (max-width: 750px) {
  .site-tagline { display: none !important; }
}

@media (max-width: 600px) {
  .site-title { display: none !important; }
}

@media (max-width: 650px) {
  .nav-icon-6 { display: none !important; }
}

@media (max-width: 500px) {
  .nav-icon-46 { display: none !important; }
}

/* Custom separator line between stats and footer */
.footer__content::before {
  content: "";
  display: block;
  height: 3px;               /* requested thickness */
  background: #808080;       /* requested color */
  width: 600px;              /* default width on wide screens */
  margin: 0 auto 8px auto;   /* centered, with space below before footer text */
}
@media (max-width: 600px) {
  .footer__content::before {
    width: calc(100vw - 150px); /* screen width minus 100px when viewport ≤ 600px */
  }
}