:root{
      --bleu:#215fab;
      --bleu-clair:#1f6f95;
      --sable:#f4efe6;
      --vert:#3f6f5b;
      --jaune:#f2c94c;
      --texte:#24313a;
      --blanc:#ffffff;

	}

    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:Arial,Helvetica,sans-serif;background:#f7f7f7;color:var(--texte);line-height:1.6;}
    a{text-decoration:none;color:inherit}

    .topbar{background:var(--bleu);color:white;font-size:14px;padding:8px 5%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

    header{background:white;padding:14px 5%;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 12px rgba(0,0,0,.08);position:sticky;top:0;z-index:1000;}
    .logo{display:flex;align-items:center;gap:14px;}
    .blason{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--bleu),var(--bleu-clair));color:white;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:bold;}
    .logo h1{font-size:24px;color:var(--bleu)}
    .logo span{font-size:14px;color:#666}

    /* MENU DEROULANT */
    .main-nav ul{list-style:none;}
    .main-menu{display:flex;gap:6px;align-items:center;font-weight:bold;color:var(--bleu);}
    .main-menu > li{position:relative;}
    .main-menu > li > a{display:block;padding:14px 11px;border-radius:999px;transition:.2s;white-space:nowrap;}
    .main-menu > li:hover > a{background:#e8f3f7;color:var(--bleu-clair);}
    .dropdown{position:absolute;top:100%;left:0;min-width:230px;background:white;border-radius:16px;box-shadow:0 14px 35px rgba(0,0,0,.16);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s;z-index:1100;}
    .main-menu > li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
    .dropdown li a{display:block;padding:9px 18px;font-size:14px;font-weight:600;color:var(--texte);}
    .dropdown li a:hover{background:#f2f7fa;color:var(--bleu-clair);}

    .menu-toggle{display:none;background:var(--bleu);color:white;border:0;border-radius:12px;padding:10px 14px;font-weight:bold;cursor:pointer;}

    /* IMAGE DU HAUT : SLIDER FONDU */
    .hero{min-height:520px;position:relative;color:white;display:flex;align-items:center;padding:70px 5%;overflow:hidden;}
    .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:fonduHero 24s infinite;z-index:0;}
    .hero-slide:nth-child(1){background-image:url('/accueil/images/images/pageaccueil/pleudaniel1.jpg');animation-delay:0s;}
    .hero-slide:nth-child(2){background-image:url('/accueil/images/images/pageaccueil/pleudaniel2.jpg');animation-delay:6s;}
    .hero-slide:nth-child(3){background-image:url('/accueil/images/images/pageaccueil/pleudaniel3.jpg');animation-delay:12s;}
    .hero-slide:nth-child(4){background-image:url('/accueil/images/images/pageaccueil/pleudaniel1.jpg');animation-delay:18s;}
    @keyframes fonduHero{0%{opacity:0}8%{opacity:1}25%{opacity:1}33%{opacity:0}100%{opacity:0}}

    .hero-content{max-width:760px;background:rgba(0,0,0,.22);padding:36px;border-radius:24px;backdrop-filter:blur(3px);position:relative;z-index:2;}
    .hero h2{font-size:46px;line-height:1.15;margin-bottom:18px;}
    .hero p{font-size:19px;margin-bottom:26px;}
    .btns{display:flex;flex-wrap:wrap;gap:14px;}
    .btn{padding:13px 20px;border-radius:999px;font-weight:bold;display:inline-block;}
    .btn-primary{background:var(--jaune);color:#2b2b2b}
    .btn-secondary{background:white;color:var(--bleu)}

    .quick-access{width:90%;max-width:1180px;margin:-55px auto 45px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:2;}
    .quick-card{background:white;padding:26px 20px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.13);text-align:center;transition:.2s;}
    .quick-card:hover{transform:translateY(-5px)}
    .quick-card .icon{font-size:36px;margin-bottom:10px}
    .quick-card h3{color:var(--bleu);font-size:19px;margin-bottom:8px}
    .quick-card p{font-size:14px;color:#666}

    .section{width:90%;max-width:1180px;margin:50px auto;}
    .section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px;gap:20px;}
    .section-title h2{font-size:32px;color:var(--bleu);}
    .section-title p{color:#666}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
    .news-card,.agenda-card,.info-box{background:white;border-radius:22px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.08);}
    .news-cardtxt{background:transparent;border-radius:22px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.08);padding: 10px;}
	.news-cardtxtv{overflow:hidden;box-shadow:0 6px 22px;padding: 10px;}
	
	  
	
	
    
    
    .news-card img{width:100%;height:185px;object-fit:cover;}
    .card-body{padding:22px}
    .tag{display:inline-block;background:#e8f3f7;color:var(--bleu-clair);padding:5px 10px;border-radius:999px;font-size:12px;font-weight:bold;margin-bottom:10px;}
    .card-body h3{color:var(--bleu);margin-bottom:8px;font-size:20px}
    .mairie-info{background:var(--sable);padding:55px 5%;margin-top:65px;}
    .info-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:35px;align-items:center;}
    .info-box{padding:30px}
    .info-box h2{color:var(--bleu);font-size:32px;margin-bottom:15px}
    .info-list{list-style:none;margin-top:20px}
    .info-list li{padding:10px 0;border-bottom:1px solid #ddd}
    .agenda-list{display:grid;gap:15px;}
    .agenda-card{padding:20px;display:flex;gap:18px;align-items:center;}
    .date-box{min-width:70px;background:var(--bleu);color:white;border-radius:16px;text-align:center;padding:10px;font-weight:bold;}
    .date-box strong{display:block;font-size:25px}
    footer{background:var(--bleu);color:white;padding:40px 5%;margin-top:60px;}
    .footer-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;}
    footer h3{margin-bottom:12px;color:var(--jaune)}
    footer p, footer li{font-size:14px;color:#e7edf1}
    footer ul{list-style:none}
    footer li{margin-bottom:8px}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}




    @media(max-width:1100px){.main-menu{gap:0}.main-menu > li > a{padding:12px 8px;font-size:14px}}
    @media(max-width:900px){
      header{align-items:flex-start;gap:16px;flex-wrap:wrap;}
      .menu-toggle{display:block;margin-left:auto;}
      .main-nav{width:100%;display:none;}
      .main-nav.open{display:block;}
      .main-menu{display:block;width:100%;}
      .main-menu > li{border-top:1px solid #edf1f5;}
      .main-menu > li > a{border-radius:0;padding:12px 0;}
      .dropdown{position:static;min-width:100%;box-shadow:none;border-radius:0;padding:0 0 8px 15px;opacity:1;visibility:visible;transform:none;display:none;background:#f8fbfd;}
      .main-menu > li.open .dropdown{display:block;}
      .hero h2{font-size:34px}.quick-access{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}
      
       .grid-2{
        grid-template-columns:1fr;
    }

    .grid-3{
        grid-template-columns:1fr;
    }
}
      
      
      
    }
    @media(max-width:560px){.topbar{font-size:13px}.hero{padding:50px 5%;min-height:470px}.hero-content{padding:24px}.hero h2{font-size:29px}.quick-access{grid-template-columns:1fr;margin-top:-35px}.section-title{display:block}}