body {
     background-color: #f8f9fa;
 }

 .hero {
     background: url('../header20200322.png');
     color: white;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
     width: 100%;
    
     /* Hauteur par défaut pour mobile, ajustable */
    
     position: relative;
      background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
 }



 .hero-content {
     position: relative;
     z-index: 2;
 }

 .news-card img {
     max-height: 180px;
     object-fit: cover;
     border-radius: 0.5rem;
 }

 footer {
     background-color: #212529;
     color: #adb5bd;
     padding: 20px 0;
     margin-top: 40px;
 }

 .navbar-brand small {
     font-size: 0.8rem;
     color: #888;
 }

 /* Mobile (petits écrans) */
 @media (max-width: 768px) {
     .hero {
         height: 140px;
         /* plus petite hauteur pour mobile */
         /*background-position: center top;*/
         /* ajuste le focus si nécessaire */
     }
 }

 /* Desktop (grands écrans) */
 @media (min-width: 769px) {
     .hero {
         height: 380px;
         /* presque la hauteur d'origine de ton PNG */
         /*background-position: center center;*/
     }
 }

 /* Présentation et Actualités */
 .container.bg-white {
     background-color: #ffffff;
 }

 .news-card {
     transition: transform 0.2s;
 }

 .news-card:hover {
     transform: translateY(-5px);
 }


 /* Titre de section moderne */
 .section-title {
     font-size: 1.8rem;
     letter-spacing: 1px;
     color: #212529;
 }

 .section-underline {
     width: 80px;
     height: 4px;
     background-color: #198754;
     /* vert Bootstrap */
     border-radius: 2px;
     transition: width 0.4s ease;
 }

 /* Petit effet de survol sympa sur le titre */
 .section-title:hover+.section-underline {
     width: 140px;
 }

 /* Pour un effet encore plus propre sur mobile */
 @media (max-width: 576px) {
     .section-title {
         font-size: 1.5rem;
     }
 }



 /* Réutilise le même style de titre moderne */
 .section-title {
     font-size: 1.8rem;
     letter-spacing: 1px;
     color: #212529;
 }

 .section-underline {
     width: 80px;
     height: 4px;
     background-color: #198754;
     border-radius: 2px;
     transition: width 0.4s ease;
 }

 .section-title:hover+.section-underline {
     width: 140px;
 }

 /* Boîte de la prochaine journée */
 .next-event-box {
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .next-event-box:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 }

 /* Responsive */
 @media (max-width: 576px) {
     .section-title {
         font-size: 1.5rem;
     }
 }

 /* Charte : couleurs harmonisées avec la home moderne */
 :root {
     --brand-pink: #e89fb3;
     /* couleur accent / navbar clair */
     --brand-dark: #212529;
     /* navbar sombre sur home modernisée */
     --badge-green: #2aa84f;
     --card-radius: .6rem;
 }

 body {
     background: #f8f9fa;
     color: #222;
     font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 }

 /* Header image (bandeau) */
 .page-header {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
 }

 /* Navbar (same look as home) */
 .navbar-brand small {
     display: block;
     font-size: 0.8rem;
     color: #ddd
 }

 .navbar-custom {
     background-color: var(--brand-dark);
 }

 /* Hero-like strip for ludothèque */
 .library-hero {
     background: linear-gradient(90deg, rgba(34, 34, 34, 0.03), rgba(34, 34, 34, 0.01));
     border-radius: .5rem;
     padding: 1rem;
 }

 /* Cards */
 .game-card {
     border-radius: var(--card-radius);
     border-color: #2aa84f;
     overflow: hidden;
     transition: transform .18s ease, box-shadow .18s ease;
     /*background: #fff;*/
 }

 .game-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }

 .game-thumb {
     width: 100%;
     height: 180px;
     object-fit: cover;
     display: block;
     background: linear-gradient(90deg, #eee, #f7f7f7);
 }

 .badge-storage-black {
     position: absolute;
     top: 8px;
     left: 8px;
     padding: .25rem .5rem;
     font-size: .75rem;
     border-radius: .25rem;
     color: #fff;
 }

 .game-meta {
     font-size: .9rem;
     color: #555;
 }

 /* New / Loaned badges */
 .badge-new {
     position: absolute;
     top: 8px;
     right: 8px;
 }

 .badge-loan {
     position: absolute;
     top: 40px;
     right: 8px;
 }

 /* Loader */
 #loader-icon {
     display: none;
     text-align: center;
     padding: 1rem;
 }

 /* Filters */
 .form-control-sm {
     min-height: calc(1.5rem + .5rem);
 }

 /* Footer */
 footer {
     background: #212529;
     color: #adb5bd;
     padding: 18px 0;
     margin-top: 32px;
     text-align: center;
 }

 /* Adaptation mobile */
 @media (max-width: 576px) {
     .game-thumb {
         height: 140px;
     }

     .navbar-brand small {
         display: none;
     }
 }

 .neumorphic-counter {
     background: #f8f9fa;
     border-radius: 50px;
     box-shadow: 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff;
     padding: 0.6rem 1.2rem;
     font-weight: 600;
     color: #198754;
     display: inline-flex;
     align-items: center;
     transition: all 0.2s ease;
 }

 .neumorphic-counter:hover {
     box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
 }