:root{
      --maroon:#8C272E; /* proche #740308 */
    }
    body{
      font-family:'Inter', Arial, sans-serif;
      color:#222;
      min-height:100vh;
      position:relative;}
main {
  background: #fcfcfc;
  border-radius: 14px;
  max-width: 1100px;   /* limite la largeur du contenu */
  margin-inline: auto; /* centre horizontalement */
  box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* légère ombre élégante */
}
    body::before{
      content:"";
      position:fixed;
      inset:-50%;
      width:200%;
      height:200%;
      background:url(img/couvgagarko.jpg);
      z-index:-1;
      animation: floatBG 18s ease-in-out infinite alternate;
    }
    @keyframes floatBG{
      0%{transform:translate(0,0) scale(1)}
      100%{transform:translate(6%,8%) scale(1.05)};
    }

    /* Cartes “classiques” pour garder ton look */
    .card{
      background:#fff;
      border-radius: .5rem;
      border: #707070 solid 1px;
    }
    .text-maroon{ color: var(--maroon) }
    .bg-maroon{ background: var(--maroon) }

    /* Header image de fond */
.header-bg{
  background-image:url('https://www.limoges.fr/sites/default/files/styles/768x430/public/media/images/limoges.jpg?itok=0gETV03I');
  background-size:cover;
  background-position:center;
  position:relative;           /* nécessaire pour le ::after */
  overflow:hidden;
  border-radius: 12px;         /* si bords arrondis */
}

/* Ombre/contraste par-dessus l'image (reste cliquable) */
.header-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to center, transparent 60%, rgba(0, 0, 0, 0.37)),     /* fondu bas */
  radial-gradient(100% 140% at 50% -10%, transparent 50%, rgba(0, 0, 0, 0.308) 85%); /* vignette douce */
  box-shadow:
    inset 0 60px 120px rgba(0, 0, 0, 0.281),   /* haut */
    inset 0 -200px 140px rgba(0, 0, 0, 0.692);  /* bas */
  mix-blend-mode: multiply;  /* optionnel : booste le contraste */
}

/* Écrans larges → on resserre un peu le main */
@media (max-width: 1280px){
  main{ max-width: 980px; }
}

/* Laptop */
@media (max-width: 1024px){
  main{
    max-width: 860px;
    border-radius: 12px;
  }
  .header-bg{
    border-radius: 10px;
    min-height: 320px; /* assure une bonne présence visuelle */
  }
  .card{
    border-radius: 10px;
  }
  /* Titres un poil plus compacts */
  .header-bg h1{ font-size: 2.25rem; line-height: 1.15; }
  .header-bg p{ font-size: 1.05rem; }
}

/* Tablette */
@media (max-width: 820px){
  main{
    max-width: 720px;
    margin: 16px auto;
  }
  .header-bg{
    min-height: 280px;
  }
  /* Logo header plus petit */
  .header-bg .w-16{ width: 52px; height: 52px; }
  /* Typo header plus lisible */
  .header-bg h1{ font-size: 1.9rem; }
  .header-bg p{ font-size: 1rem; }

  /* Cartes : padding un peu réduit */
  .card{ padding: 16px; }
  .card h2{ font-size: 1.25rem; }
}

/* Mobile */
@media (max-width: 640px){
  main{
    max-width: 95%;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  .header-bg{
    min-height: 240px;
    border-radius: 10px;
  }
  .header-bg .w-16{ width: 44px; height: 44px; }
  .header-bg h1{ font-size: 1.6rem; }
  .header-bg p{ font-size: .98rem; }

  /* Formulaire : confort saisie mobile */
  input[type="text"],
  input[type="tel"],
  input[type="email"]{
    font-size: 16px; /* évite le zoom iOS */
    padding: 12px;
  }

  /* Boutons plein écran déjà OK mais on renforce la lisibilité */
  button{
    padding: 12px 16px;
    font-weight: 700;
  }
}

/* Très petit mobile */
@media (max-width: 380px){
  .header-bg h1{ font-size: 1.45rem; }
  .card h2{ font-size: 1.15rem; }
}