/* ============================================================
   a_propos.css  —  Garderie Bana
   Page-specific styles for a_propos.php only
   (hero / intro / approche / savez-vous / timeline / cta / cards).
   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;}
.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;}
.grp-journee{background:#fdf5e6;padding:60px 0;}
.grp-journee h3{font-size:30px;color:#E21C3F;text-align:center;margin-bottom:36px;}
.grp-timeline{max-width:720px;margin:0 auto;}
.grp-tl{display:flex;gap:20px;padding:16px 0;border-bottom:1px dashed #e3d9c4;}
.grp-tl:last-child{border-bottom:none;}
.grp-tl .t{font-weight:700;color:#338DE8;min-width:90px;font-size:18px;font-family:Baloo,cursive;}
.grp-tl .x{font-size:17px;}
/* 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-facts,.grp-approche,.grp-grid{grid-template-columns:1fr;}
   .grp-grid{grid-template-columns:1fr 1fr;}
}
/* ===== Savez-vous : white box on cream (lets the colored icons shine) ===== */
.ap-savez-band{background:#fdf5e6;padding:60px 0 70px;}
.ap-savez-box{max-width:1050px;margin:0 auto;background:#fff;border-radius:55px 120px;box-shadow:10px 0 0 0 rgba(153,153,153,.22);padding:48px 50px 52px;}
.ap-savez-box h3{color:#E21C3F;margin-bottom:14px;}
.ap-savez-intro{font-size:16px;color:#514d4d;max-width:760px;margin:0 auto 26px;}
.ap-savez-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:center;}
.ap-savez-list ul.custom li{line-height:34px;font-size:16px;}
.ap-savez-note{margin-top:18px;font-style:italic;color:#338DE8;font-weight:700;font-size:15px;}
.ap-savez-logo img{max-width:240px;}
@media(max-width:820px){ .ap-savez-grid{grid-template-columns:1fr;gap:24px;} .ap-savez-box{border-radius:20px 60px;padding:34px 26px;} .ap-savez-logo img{margin-top:10px;} }