:root{
  --main-color:#4a2e00;
  --accent-color:#d4af37;
}

body{
  margin:0;
  font-family:Georgia,serif;
}

h4 {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 1rem;
  color: var(--main-color);
  margin: 4px 0;
  text-align: left;
  line-height: 1.2;
}

h5 {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 0.75rem;
  color: var(--main-color);
  margin: 4px 0;
  text-align: left;
  line-height: 1.2;
}

/* SECTIONS */
.section{
  max-width:1000px;
  margin:auto;
  padding:30px 20px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

/* BASE CARTES */
.card-principale,
.card-actu,
.card-important,
.card-rapide{
  border-radius:12px;
  padding:15px;
  color:white;
}

/* SECTION 1 */
.card-principale{
  background:linear-gradient(135deg,#6a4a1a,#f0d88c,#6a4a1a);
  width:100%;
  margin:auto;
  padding:12px;
}

.rapide-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:15px;
  text-align:center;
}

.card-principale .content{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.card-principale img{
  width:100%;
  max-width:70px;
  height:auto;
  border-radius:8px;
}

/* =========================
   HERO SLIDER
   ========================= */

.hero {
  position: relative;
  margin: 30px auto 0;
  width: 90%;
  max-width: 1200px;
  height: 220px;
  overflow: hidden;
  border-radius: 20px;
}

/* slider container */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: black;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero-slider img.active {
  opacity: 1;
}

/* voile sombre */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2;
}

/* =========================
   TEXTE DÉFILANT RAINBOW
   ========================= */

.marquee {
  position: absolute;
  top: 50%;              /* centre verticalement dans le hero */
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 3;
  transform: translateY(-50%); /* ajuste pour un vrai centrage */
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  font-size: 2rem;
  font-weight: bold;

  /* dégradé rainbow */
  background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation:
    marqueeMove 20s linear infinite,
    rainbow 15s linear infinite;
}

/* animation horizontale gauche ➜ droite */
@keyframes marqueeMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* animation couleur */
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


/* =========================
   SECTION ACTU
   ========================= */

.card-actu{
  background: linear-gradient(135deg, #6a4a1a, #f0d88c, #6a4a1a);
}

.card-actu .content{
  text-align:left;
}

/* =========================
   SECTION IMPORTANT
   ========================= */

.card-important{
  background: linear-gradient(135deg, #6a4a1a, #f0d88c, #6a4a1a);
  min-height:350px;
  display:flex;
}

.card-important .content{
  width:100%;
}

.card-important img{
  display:block;
  margin:20px auto;
  max-width:100%;
  max-height:220px;
  object-fit:contain;
}

/* =========================
   SECTION RAPIDE
   ========================= */

.card-rapide{
  background: linear-gradient(135deg, #6a4a1a, #f0d88c, #6a4a1a);
}

.card-rapide .content{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* BOUTONS */
.button{
  background:var(--accent-color);
  color:black;
  border:none;
  padding:6px 12px;
  border-radius:5px;
  font-weight:bold;
  cursor:pointer;
}

/* =========================
   RECHERCHE
   ========================= */

.recherche-section{
  max-width:550px;
  margin:20px auto;
  padding:10px;
}

.search-container{
  display:flex;
  gap:8px;
  justify-content:center;
}

.search-container input{
  flex:1;
  min-width:0;
  padding:10px;
  border:2px solid var(--main-color);
  border-radius:8px;
  font-size:16px;
}

.search-container button{
  background:var(--accent-color);
  color:white;
  border:none;
  padding:8px 14px;
  font-size:15px;
  border-radius:8px;
  cursor:pointer;
}

/* =========================
   OVERLAYS
   ========================= */

#overlay, #overlayResultat{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  justify-content:center;
  align-items:center;
  z-index:9999;
  overflow-y:auto;
}

#overlay-content, #overlayTexte{
  position:relative;
  width:90%;
  max-width:900px;
  max-height:90vh;
  background:#fff;
  border-radius:20px;
  padding:20px;
  box-sizing:border-box;
  overflow-y:auto;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px){

  .cards{
    grid-template-columns:1fr;
  }

  .hero{
    height:150px;
    margin-top:10px;
  }

  .marquee-text{
    font-size:1.2rem;
  }

  .rapide-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .card-principale h5{
    font-size:0.65rem;
    text-align:center;
  }

}