/* Présentation « moderne » du site – mêmes couleurs et polices que la charte.
   Seule présentation, appliquée via data-style="moderne" sur <html> (voir inc/styles.php). */

/* =====================================================================
   MODERNE : cartes « bento », bandeaux anthracite, formes nettes
   ===================================================================== */
html[data-style="moderne"]{
  --grad-bleu:#00AEEF; --grad-vert:#8DC63F; --grad-marron:#8C6A3B;
  --shadow:none; --shadow-h:0 14px 34px rgba(52,50,50,.10);
  --radius:20px; --radius-sm:12px;
  --trait:#E9E0D8;
}
html[data-style="moderne"] body{background:var(--creme-clair)}
html[data-style="moderne"] .section--creme{background:#fff}
/* bandeau supérieur et en-tête */
html[data-style="moderne"] .topbar{background:var(--creme);color:var(--noir)}
html[data-style="moderne"] .topbar .bac{box-shadow:none}
html[data-style="moderne"] .site-header{box-shadow:none;border-bottom:1px solid var(--trait)}
html[data-style="moderne"] .site-header .wrap{min-height:84px}
html[data-style="moderne"] .brand img{width:70px;height:70px}
html[data-style="moderne"] .nav-main>ul>li>a,html[data-style="moderne"] .nav-main>ul>li>button{text-transform:none;letter-spacing:0;font-weight:700;font-size:.98rem;border-radius:10px;padding:12px 14px}
html[data-style="moderne"] .nav-main>ul>li.is-open>button,html[data-style="moderne"] .nav-main>ul>li>a:hover,html[data-style="moderne"] .nav-main>ul>li>button:hover,html[data-style="moderne"] .nav-main>ul>li.current>button,html[data-style="moderne"] .nav-main>ul>li.current>a{background:none;color:var(--bleu-fonce);box-shadow:inset 0 -3px 0 var(--bleu);border-radius:0}
html[data-style="moderne"] .nav-main .panel{border-top:0;border:1px solid var(--trait);border-radius:16px;box-shadow:0 20px 44px rgba(52,50,50,.12)}
/* boutons et étiquettes */
html[data-style="moderne"] .btn,html[data-style="moderne"] .wp-block-button__link{background:var(--bleu);box-shadow:none;text-transform:none;letter-spacing:0;font-weight:700;font-size:.92rem;padding:.85em 1.5em}
html[data-style="moderne"] .btn:hover,html[data-style="moderne"] .wp-block-button__link:hover{background:var(--bleu-fonce);transform:none;box-shadow:none}
html[data-style="moderne"] .btn--vert{background:var(--vert)}
html[data-style="moderne"] .btn--vert:hover{background:var(--vert-fonce)}
html[data-style="moderne"] .etiquette{background:#DDF3FC;color:var(--bleu-fonce);text-transform:none;letter-spacing:0;font-weight:700;font-size:.76rem}
html[data-style="moderne"] .etiquette--vert,html[data-style="moderne"] .etiquette--marron{background:#E6F4D3;color:var(--vert-fonce)}
/* accueil : bandeau en carte, photo nette, texte clair */
html[data-style="moderne"] .hero.hero--photo{width:calc(100% - 32px);max-width:calc(var(--wrap) - 48px);margin:20px auto 0;border-radius:28px;min-height:480px;background:#6B6663;align-items:flex-end}
html[data-style="moderne"] .hero.hero--photo .hero__bg{filter:none;transform:none;opacity:1}
html[data-style="moderne"] .hero.hero--photo .hero__bg::after{background:rgba(52,50,50,.52)}
html[data-style="moderne"] .hero .wrap{padding:0 44px}
html[data-style="moderne"] .hero.hero--photo .hero__lead{color:#fff;padding:0;margin:0 0 48px;max-width:680px;font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:500}
html[data-style="moderne"] .hero.hero--photo .hero__lead::before{display:none}
html[data-style="moderne"] .hero__nom{color:#fff;font-size:clamp(2.8rem,6.4vw,5rem);margin:.04em 0 .1em}
html[data-style="moderne"] .hero.hero--photo .hero__credit{background:rgba(255,255,255,.85);color:var(--noir)}
/* accès rapides en tuiles */
html[data-style="moderne"] .bulles{margin-top:16px}
html[data-style="moderne"] .bulles ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:calc(var(--wrap) - 48px);padding:0;width:calc(100% - 32px)}
html[data-style="moderne"] .bulle{flex-direction:row;width:auto;height:100%;gap:14px;text-align:left;background:#fff;border:1px solid var(--trait);border-radius:18px;padding:16px 18px;transition:border-color .2s,box-shadow .2s}
html[data-style="moderne"] .bulle__rond,html[data-style="moderne"] .bulle--vert .bulle__rond{width:52px;height:52px;border-radius:14px;background:#DDF3FC;flex-shrink:0}
html[data-style="moderne"] .bulle__rond svg{width:34px;height:34px;stroke:var(--bleu-fonce);stroke-width:2}
html[data-style="moderne"] .bulle__txt{font-size:.95rem}
html[data-style="moderne"] .bulle::after{content:"→";margin-left:auto;color:var(--bleu-fonce);font-weight:700}
html[data-style="moderne"] .bulle:hover{border-color:var(--bleu);box-shadow:var(--shadow-h);color:var(--noir)}
html[data-style="moderne"] .bulle:hover .bulle__rond,html[data-style="moderne"] .bulle:focus-visible .bulle__rond{transform:none;box-shadow:none;background:var(--bleu)}
html[data-style="moderne"] .bulle:hover .bulle__rond svg{stroke:#fff}
/* titres de section : filet à gauche au lieu du trait de pinceau */
html[data-style="moderne"] .section{padding:68px 0}
html[data-style="moderne"] .section-head h2{padding:0 0 0 18px}
html[data-style="moderne"] .section-head h2::after{left:0;top:.12em;bottom:.12em;width:5px;height:auto;background:var(--bleu);border-radius:5px}
/* cartes */
html[data-style="moderne"] .card,html[data-style="moderne"] .event,html[data-style="moderne"] .contact-card,html[data-style="moderne"] .sidenav,html[data-style="moderne"] .subpages a,html[data-style="moderne"] .bloc,html[data-style="moderne"] .cal__grille,html[data-style="moderne"] .cal__jourliste{box-shadow:none;border:1px solid var(--trait)}
html[data-style="moderne"] .card{padding:10px}
html[data-style="moderne"] .card__img{border-radius:12px}
html[data-style="moderne"] .card__body{padding:16px 12px 14px}
html[data-style="moderne"] .card:hover,html[data-style="moderne"] .event:hover,html[data-style="moderne"] .subpages a:hover{transform:none;border-color:var(--bleu);box-shadow:var(--shadow-h)}
html[data-style="moderne"] .contact-card--pp{background:#fff;border-color:var(--vert)}
/* agenda */
html[data-style="moderne"] .event__date{width:76px;height:76px;border-radius:16px;background:#DDF3FC;color:var(--bleu-fonce)}
html[data-style="moderne"] .agenda .event:nth-child(even) .event__date{background:#E6F4D3;color:var(--vert-fonce)}
html[data-style="moderne"] .event--externe{background:#FBF8F4;border-style:solid}
html[data-style="moderne"] .event__rec{background:#E6F4D3}
html[data-style="moderne"] .vues{background:#fff;border:1px solid var(--trait)}
html[data-style="moderne"] .vues__btn.is-actif{background:var(--bleu);box-shadow:none}
html[data-style="moderne"] .cal__fleche{box-shadow:none;border:1px solid var(--trait)}
/* pages intérieures : bandeau anthracite */
html[data-style="moderne"] .page-hero{background:#E3F5FD;padding:44px 0 46px;border-bottom:1px solid #CDEBF8}
html[data-style="moderne"] .page-hero::after{opacity:.5}
html[data-style="moderne"] .page-hero h1{color:var(--bleu-fonce)}
html[data-style="moderne"] .breadcrumb .sep{color:var(--bleu)}
html[data-style="moderne"] .sidenav li.current>a,html[data-style="moderne"] .sidenav li.current>.sn-row>a{background:var(--bleu)}
html[data-style="moderne"] .entry a.doc{box-shadow:none;border:1px solid var(--trait)}
html[data-style="moderne"] .entry a.doc:hover{box-shadow:none;border-color:var(--bleu)}
html[data-style="moderne"] .bloc--vert{background:var(--vert)}
html[data-style="moderne"] .subpages li:nth-child(3n+3) a::before{background:var(--bleu-fonce)}
html[data-style="moderne"] .pagination .current{background:var(--bleu)}
html[data-style="moderne"] .ann-urg a:hover{box-shadow:var(--shadow-h)}
@media (max-width:900px){
  html[data-style="moderne"] .bulles ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-style="moderne"] .nav-main>ul>li>a,html[data-style="moderne"] .nav-main>ul>li>button{box-shadow:none!important}
}
@media (max-width:640px){
  html[data-style="moderne"] .hero.hero--photo{min-height:380px;border-radius:20px;width:calc(100% - 20px);margin-top:10px}
  html[data-style="moderne"] .hero .wrap{padding:0 22px}
  html[data-style="moderne"] .hero.hero--photo .hero__lead{margin-bottom:30px}
  html[data-style="moderne"] .bulles ul{width:calc(100% - 20px);gap:10px}
  html[data-style="moderne"] .bulle{padding:12px;gap:10px}
  html[data-style="moderne"] .bulle::after{display:none}
  html[data-style="moderne"] .bulle__rond,html[data-style="moderne"] .bulle--vert .bulle__rond{width:44px;height:44px}
  html[data-style="moderne"] .bulle__rond svg{width:28px;height:28px}
  html[data-style="moderne"] .bulle__txt{font-size:.82rem}
}

/* Moderne – boutons et pictogrammes en teintes pastel, comme les étiquettes (Vie locale, Solidarité…) */
html[data-style="moderne"] .btn,html[data-style="moderne"] .wp-block-button__link{background:#DDF3FC;color:var(--bleu-fonce)}
html[data-style="moderne"] .btn:hover,html[data-style="moderne"] .wp-block-button__link:hover{background:#C3E9F9;color:#005A7D}
html[data-style="moderne"] .btn--vert{background:#E6F4D3;color:var(--vert-fonce)}
html[data-style="moderne"] .btn--vert:hover{background:#D5ECB6;color:#3F6614}
html[data-style="moderne"] .picto{background:#DDF3FC;border-radius:14px}
html[data-style="moderne"] .picto svg{stroke:var(--bleu-fonce)}
html[data-style="moderne"] .picto--vert{background:#E6F4D3}
html[data-style="moderne"] .picto--vert svg{stroke:var(--vert-fonce)}
html[data-style="moderne"] .picto--marron{background:#F7EEDD}
html[data-style="moderne"] .picto--marron svg{stroke:var(--marron)}
html[data-style="moderne"] .acces a:hover .picto{transform:none}
html[data-style="moderne"] .sidenav li.current>a,html[data-style="moderne"] .sidenav li.current>.sn-row>a,html[data-style="moderne"] .vues__btn.is-actif,html[data-style="moderne"] .pagination .current{background:#DDF3FC;color:var(--bleu-fonce)}
html[data-style="moderne"] .cal__fleche:hover{background:#DDF3FC;color:var(--bleu-fonce)}
html[data-style="moderne"] .is-auj .cal__num{background:#DDF3FC;color:var(--bleu-fonce)}
html[data-style="moderne"] .bulle:hover .bulle__rond,html[data-style="moderne"] .bulle:focus-visible .bulle__rond{background:#C3E9F9}
html[data-style="moderne"] .bulle:hover .bulle__rond svg{stroke:var(--bleu-fonce)}

/* Moderne v1.11 – bandeau d'accueil sur toute la largeur, tuiles d'accès rapide à cheval sur la photo (moitié de leur hauteur) */
html[data-style="moderne"] .hero.hero--photo{width:100%;max-width:none;margin:0;border-radius:0;min-height:520px}
html[data-style="moderne"] .hero .wrap{padding:0 24px}
html[data-style="moderne"] .hero.hero--photo .hero__lead{margin-bottom:96px}
html[data-style="moderne"] .hero.hero--photo .hero__credit{bottom:auto;top:12px;right:12px}
html[data-style="moderne"] .bulles{--tuile:88px;margin-top:calc(var(--tuile) / -2);position:relative;z-index:3}
html[data-style="moderne"] .bulles ul{margin:0 auto;width:calc(100% - 48px)}
html[data-style="moderne"] .bulle{min-height:var(--tuile);box-shadow:0 10px 26px rgba(52,50,50,.10)}
@media (max-width:640px){
  html[data-style="moderne"] .hero.hero--photo{width:100%;margin:0;border-radius:0;min-height:400px}
  html[data-style="moderne"] .hero .wrap{padding:0 16px}
  html[data-style="moderne"] .hero.hero--photo .hero__lead{margin-bottom:64px}
  html[data-style="moderne"] .bulles{--tuile:78px}
  html[data-style="moderne"] .bulles ul{width:calc(100% - 32px)}
}