/* ============================================================
   menu.css  —  Garderie Bana
   Page-specific styles for menu.php only
   (hero / menu accordion / cards / cta). Dead rules removed.
   Shared navbar & breadcrumb live in navbar.css.
   ============================================================ */

/* Header: one image at HALF the slider height (slider was 750px) */
.page-hero{
   width:100%;
   height:375px;
   background-size:cover;
   background-position:center;
   margin-top:60px;
   position:relative;
}
.page-hero .page-hero-ov{
   position:absolute;top:0;left:0;right:0;bottom:0;
   background:rgba(0,0,0,.28);
   display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.page-hero h1{color:#fff;margin:0;text-align:center;}
.page-hero h1 small{display:block;font-size:24px;color:#fff;margin-top:6px;}
@media(max-width:991px){ .page-hero{height:260px;margin-top:107px;} }
@media(max-width:767px){ .page-hero{height:200px;} }
/* Page content */
.grp-section{max-width:1080px;margin:0 auto;padding:60px 24px;}
/* CTA with PARALLAX (background-attachment:fixed) like the home call-to-action.
   EASY TO CHANGE: swap the image url(...) below for any image you like
   (e.g. a babies photo). Keep "fixed" to keep the scroll/parallax effect. */
#grp-cta{background-color:#95c0ff;padding:65px 0;}
/* On phones, fixed backgrounds can jump; switch to scroll there. */
@media(max-width:767px){ #grp-cta{background-attachment:scroll;} }
/* Red section like the gallery, with the SAME curved transition into contact */
.grp-autres{text-align:center;padding:70px 0 40px;background:#E21C3F;}
.grp-autres h3{font-size:30px;color:#fff;margin-bottom:45px;}
.grp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1080px;margin:0 auto;padding:0 24px;}
/* ===== Nicer kid-friendly group cards (white, colored top bar, icon) ===== */
.grp-card{display:flex;flex-direction:column;align-items:center;justify-content:center;
   background:#fff;border-radius:18px 40px;padding:30px 14px 26px;text-decoration:none;
   position:relative;overflow:hidden;transition:.25s ease;box-shadow:0 8px 0 rgba(0,0,0,.10);}
.grp-card:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;}
.grp-card.c1:before{background:#54ab34;}
.grp-card.c2:before{background:#ff5157;}
.grp-card.c3:before{background:#5255c5;}
.grp-card.c4:before{background:#238dcd;}
.grp-card .grp-ico{font-size:42px;line-height:1;margin-bottom:10px;}
.grp-card .grp-name{font-family:Baloo,cursive;font-size:22px;color:#333;font-weight:700;}
.grp-card .a{font-size:15px;color:#777;font-family:Lato,sans-serif;font-weight:700;margin-top:4px;}
.grp-card:hover{transform:translateY(-8px);box-shadow:0 16px 24px rgba(0,0,0,.18);}
.grp-card.active{box-shadow:0 0 0 3px #fff, 0 10px 22px rgba(0,0,0,.2);}
.grp-card.active .grp-name{color:#E21C3F;}
/* curve fill (same as site) */
.grp-grid-2{grid-template-columns:repeat(2,1fr)!important;max-width:760px;}
#curveDownColor1{display:block;margin-bottom:-1px;}
#curveDownColor1 path{fill:#E21C3F;}
@media(max-width:860px){
   .grp-grid{grid-template-columns:1fr;}
   .grp-grid{grid-template-columns:1fr 1fr;}
}
/* ===== Menu accordion ===== */
.menu-section{padding:55px 24px 20px;max-width:1000px;}
.menu-intro h2{font-size:32px;color:#E21C3F;margin-bottom:14px;font-family:Baloo,cursive;}
.menu-intro p{font-size:17px;color:#514d4d;max-width:780px;margin:0 auto 36px;}
.menu-week{border:2px solid #fdf5e6;border-radius:14px;margin-bottom:16px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.05);}
.menu-week-head{width:100%;border:none;background:#338DE8;color:#fff;font-family:Baloo,cursive;font-size:20px;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:.2s;}
.menu-week-head:hover{background:#2a7bd0;}
.menu-week.active .menu-week-head{background:#E21C3F;}
.menu-week-icon{font-size:26px;font-weight:700;line-height:1;}
.menu-week-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.menu-week.active .menu-week-body{max-height:1200px;}
.menu-week-body .table-responsive{padding:18px;}
.table-menu{margin:0;}
.table-menu td{vertical-align:middle;font-size:16.5px;}
@media(max-width:600px){ .menu-week-head{font-size:17px;padding:13px 18px;} .table-menu td{font-size:14px;} }
/* Contact section heading: match the red section-title size used site-wide */
.grp-intro h2{font-size:38px;color:#E21C3F;margin:10px 0 18px;}