/* ============================================================
   pages.css  —  Garderie Bana
   Inner-page content styles for the four group pages
   (hero / intro / facts / approche / journee / timeline / cards).
   Note: the #grp-cta background image is set inline per page
   because it differs for each group.
   ============================================================ */

/* Hero: one image at half the old slider height */
.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;}
.grp-intro{text-align:center;}
.grp-intro .pre{color:#19AA5F;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:15px;}
.grp-intro h2{font-size:38px;color:#E21C3F;margin:10px 0 18px;}
.grp-intro p{font-size:18px;max-width:780px;margin:0 auto;}
.grp-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;}
.grp-fact{background:#fdf5e6;border-radius:18px;padding:30px 22px;text-align:center;transition:.25s;}
.grp-fact:hover{transform:translateY(-6px);box-shadow:0 10px 26px rgba(0,0,0,.08);}
.grp-fact .ico{font-size:40px;}
.grp-fact .num{font-size:30px;font-weight:700;color:#338DE8;margin:8px 0 2px;font-family:Baloo,cursive;}
.grp-fact .lbl{font-weight:700;color:#777;}
.grp-approche{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
.grp-approche img{width:100%;border-radius:20px;box-shadow:0 12px 30px rgba(0,0,0,.12);}
.grp-approche h3{font-size:30px;color:#E21C3F;margin-bottom:16px;}
.grp-approche ul{list-style:none;margin-top:18px;padding:0;}
.grp-approche li{padding:10px 0 10px 38px;position:relative;font-size:17px;}
.grp-approche li:before{content:"\f1fc";font-family:"Font Awesome 5 Free";font-weight:900;color:#19AA5F;position:absolute;left:6px;}

/* CTA with parallax (background-attachment:fixed). Image is set inline per page. */
#grp-cta{
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
   background-attachment:fixed;
   background-color:#fdf5e6;
   padding:90px 0;
}
@media(max-width:767px){ #grp-cta{background-attachment:scroll;} }

/* Red section with 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(5,1fr);gap:14px;max-width:1080px;margin:0 auto;padding:0 24px;}

/* 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:16px 32px;padding:22px 12px 20px;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:6px;}
.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.c5:before{background:#f5a623;}
.grp-card .grp-ico{font-size:32px;line-height:1;margin-bottom:6px;}
.grp-card .grp-name{font-family:Baloo,cursive;font-size:18px;color:#333;font-weight:700;}
.grp-card.c1 .grp-name{color:#54ab34;}
.grp-card.c2 .grp-name{color:#ff5157;}
.grp-card.c3 .grp-name{color:#5255c5;}
.grp-card.c4 .grp-name{color:#238dcd;}
.grp-card.c5 .grp-name{color:#f5a623;}

.grp-card .a{font-size:13px;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);}


/* Curve fill (same as site) */
#curveDownColor1{display:block;margin-bottom:-1px;}
#curveDownColor1 path{fill:#E21C3F;}

@media(max-width:1100px){ .grp-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:860px){
   .grp-facts,.grp-approche,.grp-grid{grid-template-columns:1fr;}
   .grp-grid{grid-template-columns:1fr 1fr;}
}

/* Journee type (timeline) */
.grp-journee{background:linear-gradient(to bottom,#fffdf8,#fdf5e6);padding:70px 0;}
.grp-journee h3{font-size:30px;color:#E21C3F;text-align:center;margin-bottom:40px;font-family:Baloo,cursive;}
.grp-timeline{max-width:600px;margin:0 auto;position:relative;padding-left:20px;}
.grp-timeline:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:3px;background:#f0e6d2;border-radius:3px;}
.grp-tl{display:flex;gap:22px;align-items:flex-start;padding:14px 0;position:relative;}
.grp-tl:before{content:"";position:absolute;left:-17px;top:22px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid #E21C3F;box-shadow:0 0 0 3px #fdf5e6;transition:.25s ease;}
.grp-tl:nth-child(4n+1):before{border-color:#E21C3F;}
.grp-tl:nth-child(4n+2):before{border-color:#FFA500;}
.grp-tl:nth-child(4n+3):before{border-color:#19AA5F;}
.grp-tl:nth-child(4n+4):before{border-color:#338DE8;}
.grp-tl:hover:before{transform:scale(1.25);}
.grp-tl .t{display:inline-block;font-weight:700;color:#fff;min-width:104px;text-align:center;font-size:14px;font-family:Baloo,cursive;background:#338DE8;padding:7px 12px;border-radius:20px;letter-spacing:.3px;}
.grp-tl:nth-child(4n+1) .t{background:#E21C3F;}
.grp-tl:nth-child(4n+2) .t{background:#FFA500;}
.grp-tl:nth-child(4n+3) .t{background:#19AA5F;}
.grp-tl:nth-child(4n+4) .t{background:#338DE8;}
.grp-tl .x{font-size:16.5px;color:#514d4d;line-height:1.6;padding-top:5px;}