*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#243224;background:#fff;line-height:1.45}
img{max-width:100%}
.site-header{background:#fff}
.header-inner{
  width:min(94vw,1250px);
  min-height:clamp(125px,17vh,220px);
  margin:auto;
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,38px);
  padding:clamp(10px,1.8vh,18px) clamp(12px,2.5vw,28px)
}
.logo{width:clamp(95px,11vw,150px);height:auto;object-fit:contain;flex:0 0 auto}
.brand{min-width:0}
.brand h1{font-family:Georgia,serif;font-size:clamp(30px,4vw,48px);letter-spacing:1px;color:#195522;margin:0;line-height:1.05}
.tagline{font-family:cursive;font-size:clamp(23px,3vw,36px);color:#87451b;margin-top:-3px;line-height:1.1}
.brand p{font-weight:600;color:#24542b;font-size:clamp(13px,1.45vw,18px);margin:.65em 0 0}
.motto{margin-left:auto;text-align:center;font-family:cursive;font-size:clamp(16px,2vw,24px);color:#467c35;line-height:1.2}
.nav{background:#155421;display:flex;justify-content:center;flex-wrap:wrap}
.nav a{color:white;text-decoration:none;padding:clamp(9px,1.35vh,16px) clamp(9px,1.35vw,17px);border-right:1px solid #3a7041;font-weight:700;font-size:clamp(11px,1.1vw,14px);white-space:nowrap}
.nav a:hover,.nav a.current{background:#2d7135}
.nav a.current{box-shadow:inset 0 -4px #d5df54}

.container{width:min(94vw,1180px);margin-left:auto;margin-right:auto}
.hero{
  min-height:clamp(300px,43vh,390px);
  background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,0) 62%),url('carte_petit_bosc_sans_ecritures.jpg') center/cover;
  display:flex;align-items:center;padding:clamp(18px,3vh,40px) 5%
}
.hero-box{background:rgba(255,255,255,.95);max-width:510px;padding:clamp(18px,2.3vw,34px);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.hero h2{font-size:clamp(23px,2.5vw,30px);line-height:1.18;margin-top:0}
.script{font-family:cursive;font-size:clamp(20px,2.2vw,26px);color:#215a2c;font-style:italic}

.latest{
  width:min(92vw,1180px);
  margin:clamp(-16px, -2vh, -8px) auto clamp(15px,2.5vh,28px);
  position:relative;background:#fff;border-radius:16px;box-shadow:0 5px 24px rgba(0,0,0,.14);
  display:flex;align-items:center;gap:clamp(10px,2vw,22px);padding:clamp(12px,1.7vh,18px) clamp(14px,2vw,24px)
}
.latest-title{font-size:clamp(16px,2vw,22px);color:#185422;white-space:nowrap}
.latest-content{flex:1;min-width:0}.badge{background:#ef5b50;color:#fff;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:bold;margin-right:8px}
.button{display:inline-block;border:0;border-radius:6px;background:#2d7135;color:#fff;padding:10px 18px;text-decoration:none;font-weight:bold;text-transform:uppercase;font-size:12px;cursor:pointer}
.button:hover{filter:brightness(.92)}.button.orange{background:#e46f13}.button.small{padding:9px 14px;white-space:nowrap}

.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px)}
.action-card{
  min-height:clamp(230px,30vh,330px);text-align:center;padding:clamp(15px,2vw,25px);border-radius:16px;
  background:linear-gradient(#fff,#f0f5e9);box-shadow:0 4px 18px rgba(0,0,0,.08);border:1px solid #e2eadb
}
.action-card:nth-child(2){background:linear-gradient(#fffaf2,#fff0df)}
.round-icon{margin:auto;width:clamp(44px,4.5vw,58px);height:clamp(44px,4.5vw,58px);border-radius:50%;background:#4d8c35;color:#fff;display:grid;place-items:center;font-size:clamp(22px,2.2vw,28px)}
.incident-card .round-icon{background:#d77a22}
.action-card h3{color:#205c2b;font-size:clamp(18px,2vw,23px);line-height:1.15;margin:.7em 0}
.incident-card h3{color:#b84d12}.action-card p{min-height:clamp(70px,9vh,105px);font-size:clamp(13px,1.25vw,16px);margin:.6em 0 1em}

.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,1.8vw,22px);margin-top:clamp(14px,2vh,22px)}
.panel,.content{background:#fbfcf7;border:1px solid #e1e8d9;border-radius:14px;padding:clamp(16px,2vw,24px)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-head h2{font-size:clamp(18px,1.8vw,20px);margin:0}.panel-head a{font-size:12px;color:#39733b;text-decoration:none}
.placeholder-list>div{border-top:1px solid #dfe7dc;padding:clamp(10px,1.5vh,18px) 0}.placeholder-list>div:first-child{border-top:0}
.placeholder-list p{margin:4px 0;color:#667066;font-size:13px}.agenda-empty{margin-top:20px;padding:clamp(22px,4vh,35px) 12px;text-align:center;color:#536453;border:1px dashed #b9c9b5;border-radius:10px}
.business-slide{margin-top:15px;min-height:clamp(150px,22vh,205px);border-radius:10px;background:linear-gradient(135deg,#6a4a2e,#a77c51);color:#fff;padding:20px;text-align:center}
.business-icon{font-size:30px}.business-slide h3{font-size:18px}.muted{color:#687368;font-size:13px}.dots{text-align:center;margin-top:8px}.dots span{display:inline-block;width:8px;height:8px;background:#c7cec5;border-radius:50%;margin:0 4px}.dots .active{background:#34733a}

.content{margin-top:clamp(18px,3vh,35px);min-height:320px}.content h2{font-size:clamp(24px,2.6vw,30px);color:#205d28}
.three-cols,.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.three-cols>div,.doc-grid>div{padding:18px;background:#fff;border-radius:10px;border:1px solid #e0e7dc}
.doc-grid{grid-template-columns:repeat(4,1fr)}.form-section{background:#f7faf2}.form-section form{max-width:850px}
.form-section label{display:block;font-weight:700;margin:15px 0}.form-section input[type=text],.form-section input[type=email],.form-section input[type=tel],.form-section select,.form-section textarea{width:100%;margin-top:6px;border:1px solid #c9d3c5;border-radius:7px;padding:12px;font:inherit;background:#fff}
.form-section input[type=checkbox]{width:auto;margin-right:8px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.photo-note{text-align:center;padding:50px;border:2px dashed #c9d6c3;border-radius:12px;color:#667066}
.contact-band{margin-top:clamp(18px,3vh,35px);background:#edf4e5;padding:clamp(16px,2.5vh,25px) 8%;display:flex;justify-content:center;align-items:center;gap:clamp(25px,7vw,80px);text-align:center}
.contact-band p{margin:0}
footer{background:#14521e;color:#fff;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:clamp(20px,3vh,32px) max(30px,calc((100% - 1180px)/2));font-size:14px}
.toast{position:fixed;right:20px;bottom:20px;background:#1d5b27;color:#fff;padding:14px 20px;border-radius:8px;display:none;box-shadow:0 5px 20px rgba(0,0,0,.2)}

@media (min-width:1100px) and (min-height:800px){
  .page-home main{min-height:calc(100dvh - 125px)}
  .page-home .hero{min-height:36dvh}
  .page-home .action-card{min-height:27dvh}
}
@media (max-width:1000px){
  .motto{display:none}
  .grid{grid-template-columns:1fr 1fr}
  .grid .businesses{grid-column:1/-1}
  .doc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:850px){
  .header-inner{flex-wrap:wrap;justify-content:center;text-align:center;min-height:auto}
  .brand p{margin-bottom:0}
  .nav a{padding:10px 9px;font-size:11px}
  .hero{min-height:340px;padding:20px 15px}
  .latest{margin:10px auto 18px;flex-wrap:wrap}
  .latest-content{flex-basis:100%;order:3}
  .actions,.grid,.three-cols,.doc-grid{grid-template-columns:1fr}
  .grid .businesses{grid-column:auto}
  .form-row,footer{grid-template-columns:1fr}
  .contact-band{display:block}
  .contact-band .button{margin-top:15px}
}
@media (max-width:520px){
  .logo{width:105px}
  .brand h1{font-size:28px}.tagline{font-size:22px}
  .nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .nav a{flex:0 0 auto}
  .hero{min-height:420px}
  .hero-box{max-width:100%}
  .latest-title{white-space:normal}
}

/* Correction écran 19 pouces : accueil plus compact */
@media (min-width: 851px){
  .page-home .header-inner{
    min-height: 112px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .page-home .logo{width:112px}
  .page-home .brand h1{font-size:38px}
  .page-home .tagline{font-size:28px}
  .page-home .brand p{font-size:14px;margin-top:.35em}
  .page-home .motto{font-size:18px}
  .page-home .nav a{padding-top:11px;padding-bottom:11px}
  .page-home .hero{
    min-height:245px;
    height:245px;
    padding-top:18px;
    padding-bottom:18px;
  }
  .page-home .hero-box{
    max-width:500px;
    padding:18px 25px;
  }
  .page-home .hero h2{
    font-size:25px;
    margin-bottom:9px;
  }
  .page-home .hero-box p{margin:7px 0;font-size:14px}
  .page-home .script{font-size:21px}
  .page-home .latest{
    margin-top:-12px;
    margin-bottom:14px;
    padding-top:11px;
    padding-bottom:11px;
  }
  .page-home .actions{gap:14px}
  .page-home .action-card{
    min-height:215px;
    padding:15px 18px;
  }
  .page-home .round-icon{width:46px;height:46px;font-size:22px}
  .page-home .action-card h3{font-size:18px;margin:.45em 0}
  .page-home .action-card p{
    min-height:58px;
    font-size:13px;
    margin:5px 0 9px;
  }
  .page-home .button{padding:8px 13px;font-size:11px}
  .page-home .grid{margin-top:14px}
  .page-home .panel{padding:15px}
  .page-home .business-slide{min-height:130px;padding:13px}
}

/* Très grands écrans : éviter un accueil disproportionné */
@media (min-width:1400px) and (min-height:800px){
  .page-home .hero{height:280px;min-height:280px}
}

/* ===== Version finale optimisée pour écran 19 pouces =====
   Cible principale : écran desktop 1366x768 / 1600x900.
   Le contenu reste responsive et conserve le défilement si nécessaire. */
@media (min-width: 851px){
  .page-home .header-inner{
    width:min(92vw,1180px);
    min-height:92px;
    height:92px;
    padding:5px 12px;
    gap:22px;
  }
  .page-home .logo{width:88px}
  .page-home .brand h1{font-size:31px}
  .page-home .tagline{font-size:23px}
  .page-home .brand p{font-size:12px;margin-top:2px;line-height:1.2}
  .page-home .motto{font-size:15px}

  .page-home .nav a{
    padding:8px 11px;
    font-size:11px;
  }

  /* La photo n'occupe plus toute la largeur de l'écran.
     Elle est contenue dans une zone centrale et nettement moins haute. */
  .page-home .hero{
    width:min(92vw,1180px);
    height:170px;
    min-height:170px;
    margin:0 auto;
    padding:12px 28px;
    border-radius:0 0 12px 12px;
    background-position:center 52%;
  }
  .page-home .hero-box{
    max-width:445px;
    padding:12px 18px;
    border-radius:11px;
  }
  .page-home .hero h2{
    font-size:20px;
    margin:0 0 5px;
  }
  .page-home .hero-box p{
    font-size:11px;
    line-height:1.25;
    margin:4px 0;
  }
  .page-home .script{font-size:17px;margin-top:4px}

  .page-home .latest{
    width:min(88vw,1120px);
    margin:8px auto 10px;
    padding:8px 14px;
    gap:12px;
    min-height:43px;
  }
  .page-home .latest-title{font-size:16px}
  .page-home .latest-content{font-size:12px}
  .page-home .button.small{font-size:10px;padding:7px 10px}

  .page-home .actions{
    width:min(88vw,1120px);
    gap:12px;
  }
  .page-home .action-card{
    min-height:145px;
    padding:10px 14px;
    border-radius:11px;
  }
  .page-home .round-icon{
    width:34px;height:34px;font-size:17px;
  }
  .page-home .action-card h3{
    font-size:15px;
    margin:4px 0;
  }
  .page-home .action-card p{
    min-height:35px;
    font-size:11px;
    line-height:1.25;
    margin:3px 0 6px;
  }
  .page-home .action-card .button{
    font-size:9px;
    padding:6px 10px;
  }

  .page-home .grid{
    width:min(88vw,1120px);
    gap:12px;
    margin-top:10px;
  }
  .page-home .panel{
    padding:11px 13px;
  }
  .page-home .panel-head h2{font-size:16px}
  .page-home .placeholder-list>div{padding:7px 0}
  .page-home .placeholder-list p{font-size:10px}
  .page-home .business-slide{
    min-height:90px;
    padding:8px;
    margin-top:7px;
  }
  .page-home .business-icon{font-size:20px}
  .page-home .business-slide h3{font-size:13px;margin:3px}
  .page-home .business-slide p{font-size:10px;margin:2px}
  .page-home .dots{margin-top:4px}

  /* Le bandeau de contact et le pied de page restent compacts sur desktop. */
  .page-home .contact-band{
    margin-top:10px;
    padding:10px 6%;
  }
  .page-home .contact-band .script{font-size:17px}
  .page-home footer{
    padding-top:12px;
    padding-bottom:12px;
    font-size:11px;
  }
}

/* Pour les écrans desktop très hauts, on laisse respirer la page. */
@media (min-width: 851px) and (min-height: 850px){
  .page-home .hero{height:205px;min-height:205px}
  .page-home .action-card{min-height:170px}
}

/* Évite qu'un zoom ou une fenêtre légèrement plus étroite casse le menu. */
@media (min-width:851px) and (max-width:1200px){
  .page-home .nav a{padding-left:7px;padding-right:7px;font-size:10px}
}

/* ===== V2 : réduction de l'espace sous Actualités / Agenda / Commerçants ===== */
@media (min-width:851px){
  .page-home .grid{
    margin-bottom:0;
  }
  .page-home .contact-band{
    margin-top:2px;
    padding-top:6px;
    padding-bottom:6px;
    min-height:42px;
  }
  .page-home .contact-band .script{
    font-size:15px;
  }
  .page-home .contact-band p{
    font-size:11px;
  }
  .page-home .contact-band .button{
    padding:6px 12px;
    font-size:9px;
  }
  .page-home footer{
    padding-top:8px;
    padding-bottom:8px;
  }
}

/* Sur 1366x768 et écrans proches, garder l'accueil très compact. */
@media (min-width:851px) and (max-height:820px){
  .page-home .header-inner{height:88px;min-height:88px}
  .page-home .nav a{padding-top:7px;padding-bottom:7px}
  .page-home .hero{height:158px;min-height:158px}
  .page-home .latest{margin-top:6px;margin-bottom:7px}
  .page-home .action-card{min-height:136px}
  .page-home .grid{margin-top:8px}
  .page-home .contact-band{margin-top:1px}
}

/* ===== V3 : suppression de la zone blanche inutile sous les 3 blocs =====
   La page d'accueil ne force plus <main> à occuper artificiellement
   toute la hauteur de la fenêtre. Le bandeau "Vous avez une idée..."
   remonte immédiatement après Actualités / Agenda / Nos commerçants. */
@media (min-width:851px){
  .page-home main{
    min-height:0 !important;
    height:auto !important;
  }
  .page-home .grid{
    margin-bottom:0 !important;
  }
  .page-home .contact-band{
    margin-top:0 !important;
  }
}

/* ===== V4 : logo légèrement descendu pour éviter sa découpe en haut ===== */
@media (min-width:851px){
  .page-home .header-inner{
    align-items:center;
    padding-top:12px;
    padding-bottom:4px;
  }
  .page-home .logo{
    transform:translateY(6px);
  }
}

/* ===== V5 : positionnement final du logo =====
   Le logo descend davantage afin que sa base arrive au niveau
   du bas de la zone blanche, juste au-dessus / au niveau du menu vert. */
@media (min-width:851px){
  .page-home .logo{
    transform:translateY(14px);
  }
}

/* ==========================================================
   V6 : optimisation de TOUTES les pages pour écran 19 pouces
   La page d'accueil reste inchangée. Les pages internes sont
   compactées pour utiliser au mieux la hauteur disponible.
   ========================================================== */

@media (min-width:851px){
  .page-inner .header-inner{
    width:min(92vw,1180px);
    min-height:88px;
    height:88px;
    padding:4px 12px;
    gap:22px;
  }

  .page-inner .logo{
    width:88px;
  }

  .page-inner .brand h1{
    font-size:31px;
  }

  .page-inner .tagline{
    font-size:23px;
  }

  .page-inner .brand p{
    font-size:12px;
    margin-top:2px;
    line-height:1.2;
  }

  .page-inner .motto{
    font-size:15px;
  }

  .page-inner .nav a{
    padding:8px 11px;
    font-size:11px;
  }

  .page-inner .content{
    width:min(88vw,1120px);
    margin-top:12px;
    padding:16px 20px;
    min-height:0;
  }

  .page-inner .content h2{
    font-size:24px;
    margin:4px 0 10px;
  }

  .page-inner .content h3{
    font-size:17px;
    margin:9px 0 5px;
  }

  .page-inner .content p{
    font-size:12px;
    line-height:1.35;
    margin:6px 0;
  }

  .page-inner .three-cols{
    gap:12px;
    margin-top:10px;
  }

  .page-inner .three-cols>div{
    padding:12px;
  }

  .page-inner .placeholder-list>div{
    padding:9px 0;
  }

  .page-inner .doc-grid{
    gap:10px;
    margin-top:8px;
  }

  .page-inner .doc-grid>div{
    padding:12px;
    font-size:13px;
  }

  .page-inner .agenda-empty{
    margin-top:10px;
    padding:22px 12px;
  }

  .page-inner .photo-note{
    padding:30px;
  }

  .page-inner .form-section form{
    max-width:760px;
  }

  .page-inner .form-section label{
    margin:8px 0;
    font-size:12px;
  }

  .page-inner .form-section input[type=text],
  .page-inner .form-section input[type=email],
  .page-inner .form-section input[type=tel],
  .page-inner .form-section select,
  .page-inner .form-section textarea{
    padding:8px 10px;
    margin-top:3px;
    font-size:12px;
  }

  .page-inner .form-section textarea{
    min-height:70px;
  }

  .page-inner .form-section .button{
    padding:7px 13px;
    font-size:10px;
  }

  .page-inner .contact-band{
    margin-top:10px;
    padding:9px 6%;
  }

  .page-inner .contact-band .script{
    font-size:16px;
  }

  .page-inner .contact-band p{
    font-size:11px;
  }

  .page-inner footer{
    padding-top:10px;
    padding-bottom:10px;
    font-size:11px;
  }
}

/* Écrans 19 pouces classiques : 1366x768 / 1600x900 */
@media (min-width:851px) and (max-height:820px){
  .page-inner .header-inner{
    height:82px;
    min-height:82px;
  }

  .page-inner .nav a{
    padding-top:7px;
    padding-bottom:7px;
  }

  .page-inner .content{
    margin-top:9px;
    padding-top:13px;
    padding-bottom:13px;
  }

  .page-inner .contact-band{
    margin-top:7px;
    padding-top:6px;
    padding-bottom:6px;
  }

  .page-inner footer{
    padding-top:7px;
    padding-bottom:7px;
  }
}

/* Les formulaires peuvent naturellement défiler si leur contenu
   dépasse la hauteur disponible, sans écraser leur lisibilité. */
@media (min-width:851px) and (max-height:700px){
  .page-inner .content{
    margin-top:6px;
    padding-top:10px;
    padding-bottom:10px;
  }

  .page-inner .contact-band{
    display:none;
  }
}

/* ==========================================================
   V7 : pages pleine largeur
   Suppression des bandes blanches latérales sur desktop.
   Les blocs occupent toute la largeur disponible, avec des
   marges internes uniquement pour conserver une présentation
   aérée et lisible.
   ========================================================== */

@media (min-width:851px){
  /* En-tête et navigation sur toute la largeur */
  .page-home .header-inner,
  .page-inner .header-inner{
    width:100%;
    max-width:none;
  }

  /* Les pages intérieures utilisent toute la largeur */
  .page-inner .content{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    border-left:0;
    border-right:0;
    border-radius:0;
    padding-left:clamp(30px,5vw,90px);
    padding-right:clamp(30px,5vw,90px);
  }

  /* Bandeau de contact et pied de page pleine largeur */
  .page-inner .contact-band,
  .page-home .contact-band{
    width:100%;
  }

  .page-inner footer,
  .page-home footer{
    width:100%;
  }

  /* Sur l'accueil, les trois colonnes et les blocs bas
     remplissent également la largeur disponible. */
  .page-home .latest,
  .page-home .actions,
  .page-home .grid{
    width:calc(100% - 40px);
    max-width:none;
  }

  .page-home .hero{
    width:100%;
    max-width:none;
    border-left-radius:0;
    border-right-radius:0;
  }
}

/* Sur tablette/mobile, conserver le comportement responsive existant. */
@media (max-width:850px){
  .page-inner .content{
    width:94vw;
    margin-left:auto;
    margin-right:auto;
    border-radius:14px;
  }
}

/* ==========================================================
   V8 : logo abaissé sur les pages intérieures uniquement
   La page d'accueil validée n'est pas modifiée.
   ========================================================== */

@media (min-width:851px){
  .page-inner .header-inner{
    align-items:center;
    padding-top:14px;
    padding-bottom:0;
  }

  .page-inner .logo{
    transform:translateY(14px);
  }
}

/* Écrans de 19 pouces de hauteur classique */
@media (min-width:851px) and (max-height:820px){
  .page-inner .logo{
    transform:translateY(18px);
  }
}

/* ==========================================================
   V9 : correction du chevauchement logo / bandeau vert
   Pages intérieures uniquement.
   Le logo reste abaissé, mais la hauteur de l'en-tête est
   augmentée afin que le menu vert ne recouvre plus le bandeau
   supérieur.
   ========================================================== */

@media (min-width:851px){
  .page-inner .header-inner{
    height:106px;
    min-height:106px;
    box-sizing:border-box;
  }
}

@media (min-width:851px) and (max-height:820px){
  .page-inner .header-inner{
    height:104px;
    min-height:104px;
  }
  .page-inner .logo{
    transform:translateY(18px);
  }
}

/* ==========================================================
   V10 : bandeau vert du bas fixé naturellement en bas de page
   comme sur la page d'accueil.
   Les pages intérieures utilisent toute la hauteur disponible,
   avec le contenu au-dessus et le footer en bas.
   ========================================================== */

@media (min-width:851px){
  html, body{
    min-height:100%;
  }

  body:has(.page-inner){
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  body:has(.page-inner) .page-inner{
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  body:has(.page-inner) .page-inner main{
    flex:1 0 auto;
  }

  body:has(.page-inner) .page-inner footer{
    margin-top:auto;
    flex-shrink:0;
    width:100%;
  }
}

/* ==========================================================
   V11 : positionnement du bas des pages intérieures
   Le bandeau « Vous avez une idée... » puis le footer vert
   sont poussés ensemble au bas de l'écran, comme sur l'accueil.
   Correction appliquée uniquement à body.page-inner.
   ========================================================== */

@media (min-width:851px){
  body.page-inner{
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  body.page-inner > main{
    flex:1 0 auto;
  }

  body.page-inner > .contact-band{
    flex:0 0 auto;
    margin-top:auto;
  }

  body.page-inner > footer{
    flex:0 0 auto;
    width:100%;
    margin-top:0;
  }
}

/* Sur une page dont le contenu est plus long que l'écran,
   le document s'allonge normalement : aucun contenu n'est masqué. */
@media (min-width:851px) and (max-height:820px){
  body.page-inner > main{
    flex:0 0 auto;
  }
}

/* V12b : la photo ne contient plus le second cadre de bienvenue.
   Le seul cadre affiché est celui du site, .hero-box. */
@media (min-width:851px){
  .page-home .hero{
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0) 62%),
      url('carte_petit_bosc_sans_ecritures.jpg');
    background-position:center center;
    background-size:cover;
  }
}

.agenda-list{display:grid;gap:12px}.agenda-list .agenda-empty{margin-top:0}

/* ===== Correction finale : commerçants / artisans ===== */
@media (min-width:851px){
  .page-home .businesses .panel-head h2{
    white-space:nowrap;
    font-size:16px;
    line-height:1.15;
  }
  .page-home .businesses .business-slide{
    width:100%;
    min-height:125px;
    margin-top:7px;
    padding:14px 18px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:12px;
  }
  .page-home .businesses .business-icon{
    font-size:22px;
    margin-bottom:2px;
  }
  .page-home .businesses .business-slide h3{
    font-size:15px;
    margin:3px 0;
  }
  .page-home .businesses .business-slide p{
    font-size:10px;
    margin:2px 0;
  }
  .page-home .businesses .dots{
    margin-top:4px;
  }

  /* Nouvelle photo : affichage panoramique propre dans le bandeau. */
  .page-home .hero{
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0) 62%),
      url('carte_petit_bosc_sans_ecritures.jpg');
    background-position:center center;
    background-size:cover;
  }
}

/* Le pied de page reste bien présent en bas, sans être masqué. */
@media (min-width:851px){
  .page-home footer{
    position:relative;
    z-index:2;
    width:100%;
  }
}

/* ==========================================================
   Cartes de visite des commerçants : insertion automatique
   ========================================================== */
.business-image{
  display:none;
  width:100%;
  max-width:100%;
  height:112px;
  object-fit:contain;
  object-position:center;
  border-radius:8px;
  background:#fff;
  margin:0 auto 7px;
}
@media (min-width:851px){
  .page-home .business-slide{
    min-height:130px;
    padding:9px;
  }
  .page-home .business-slide.has-image{
    min-height:150px;
  }
  .page-home .business-image{
    height:105px;
  }
}
@media (max-width:850px){
  .business-image{
    height:auto;
    max-height:170px;
  }
}

/* ===== Version cartes de visite : image seule + texte sous l'image ===== */
@media (min-width:851px){
  .page-home .businesses .business-slide{
    margin-top:6px;
    min-height:122px;
    padding:8px 12px 7px;
    background:linear-gradient(135deg,#6a4a2e,#a77c51);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .page-home .businesses .business-image{
    display:block;
    width:auto;
    height:auto;
    max-width:170px;
    max-height:72px;
    object-fit:contain;
    margin:0 auto 5px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .page-home .businesses .business-slide h3{
    margin:2px 0 2px;
    font-size:14px;
    line-height:1.1;
  }
  .page-home .businesses .business-slide p{
    margin:1px 0 0;
    font-size:10px;
    line-height:1.15;
    white-space:nowrap;
  }
  .page-home .businesses .dots{margin-top:4px}
}

/* ==========================================================
   VERSION VALIDEE - CADRE CARTE DE VISITE COMPACT
   L'image de la carte de visite est seule dans son cadre,
   sans grand rectangle blanc horizontal. Le nom et le texte
   restent sous l'image.
   ========================================================== */
@media (min-width:851px){
  .page-home .businesses .business-slide{
    min-height:122px;
    padding:8px 10px 7px;
    overflow:hidden;
  }

  .page-home .businesses .business-image{
    display:block;
    width:auto;
    max-width:175px;
    height:auto;
    max-height:74px;
    object-fit:contain;
    margin:0 auto 5px;
    padding:0;
    border:0;
    border-radius:7px;
    background:transparent;
    box-shadow:none;
  }

  .page-home .businesses .business-slide h3{
    margin:2px 0 2px;
    font-size:14px;
    line-height:1.1;
  }

  .page-home .businesses .business-slide p{
    margin:1px 0 0;
    font-size:10px;
    line-height:1.15;
    white-space:nowrap;
  }

  .page-home .businesses .dots{
    margin-top:4px;
  }
}

/* ===== DERNIERE CORRECTION : cadre compact autour de la carte ===== */
@media (min-width:851px){
  .page-home .businesses .business-slide{
    width:220px;
    min-height:118px;
    height:auto;
    margin:7px auto 0;
    padding:8px 10px 7px;
    box-sizing:border-box;
    background:linear-gradient(135deg,#6a4a2e,#a77c51);
    border-radius:11px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .page-home .businesses .business-image{
    display:block;
    width:auto;
    max-width:175px;
    height:auto;
    max-height:74px;
    object-fit:contain;
    margin:0 auto 5px;
    padding:0;
    border:0;
    border-radius:7px;
    background:transparent;
    box-shadow:none;
  }

  .page-home .businesses .business-slide h3{
    margin:2px 0 2px;
    font-size:14px;
    line-height:1.1;
  }

  .page-home .businesses .business-slide p{
    margin:1px 0 0;
    font-size:10px;
    line-height:1.15;
    white-space:nowrap;
  }

  .page-home .businesses .dots{margin-top:4px;}
}

/* ===== V9 : agrandissement du cadre « Nos commerçants et artisans » =====
   Le cadre reste compact horizontalement, mais offre davantage de place
   à la carte de visite pour une lecture confortable sur écran 19 pouces. */
@media (min-width:851px){
  .page-home .businesses .business-slide{
    width:300px;
    min-height:165px;
    padding:12px 14px 10px;
    margin:9px auto 0;
    border-radius:12px;
  }

  .page-home .businesses .business-image{
    max-width:240px;
    max-height:105px;
    margin:0 auto 7px;
    border-radius:8px;
  }

  .page-home .businesses .business-slide h3{
    font-size:15px;
    margin:3px 0 3px;
  }

  .page-home .businesses .business-slide p{
    font-size:11px;
    line-height:1.2;
    margin:1px 0 0;
  }

  .page-home .businesses .dots{
    margin-top:7px;
  }
}

/* ===== V4 : colonne de droite rééquilibrée =====
   Le bloc Adhérer est volontairement plus compact afin de donner
   davantage d'espace vertical au bloc Commerçants et artisans. */
@media (min-width:851px){
  .page-home .actions .action-card:nth-child(3){
    min-height:108px;
    padding:7px 12px;
  }
  .page-home .actions .action-card:nth-child(3) .round-icon{
    width:32px;height:32px;font-size:16px;
  }
  .page-home .actions .action-card:nth-child(3) h3{
    font-size:14px;
    margin:3px 0;
  }
  .page-home .actions .action-card:nth-child(3) p{
    min-height:24px;
    font-size:10px;
    margin:2px 0 4px;
  }
  .page-home .actions .action-card:nth-child(3) .button{
    font-size:9px;
    padding:5px 9px;
  }

  .page-home .businesses{
    min-height:270px;
  }
  .page-home .businesses .business-slide{
    min-height:185px;
    padding:12px;
    margin-top:9px;
  }
  .page-home .businesses .business-image{
    max-height:135px;
    max-width:82%;
  }
  .page-home .businesses .business-icon{font-size:22px}
  .page-home .businesses .business-slide h3{font-size:15px;margin:4px}
  .page-home .businesses .business-slide p{font-size:11px;margin:3px}
  .page-home .businesses .dots{margin-top:6px}
}

/* V5 : Accueil, remplacement du bloc Incident par Adhérer et agrandissement des commerçants */
@media (min-width:851px){
  .page-home .actions{
    grid-template-columns:1fr 1fr;
  }
  .page-home .actions .action-card{
    min-height:clamp(190px,25vh,270px);
  }
  .page-home .actions .adhesion-home-card{
    background:linear-gradient(#fff,#f0f5e9);
  }
  .page-home .grid{
    grid-template-columns:1fr 1fr 1.35fr;
  }
  .page-home .businesses{
    min-height:340px;
    padding:16px 18px;
  }
  .page-home .businesses .panel-head h2{
    font-size:clamp(18px,1.9vw,23px);
  }
  .page-home .businesses .business-slide{
    width:min(94%,360px);
    min-height:220px;
    padding:14px;
    margin-top:12px;
  }
  .page-home .businesses .business-image{
    max-width:290px;
    max-height:145px;
    margin-bottom:9px;
  }
  .page-home .businesses .business-slide h3{
    font-size:17px;
    margin:4px 0;
  }
  .page-home .businesses .business-slide p{
    font-size:12px;
    line-height:1.25;
  }
  .page-home .businesses .dots{
    margin-top:8px;
  }
}
@media (max-width:850px){
  .page-home .actions{grid-template-columns:1fr;}
}

/* ===== V6 : accueil, grille finale 2 x 3 =====
   La Vie du quartier et Adhérer ont exactement les mêmes dimensions
   que Actualités et Agenda. Le cadre Commerçants occupe toute la
   hauteur des deux lignes, sans modifier les deux panneaux du bas. */
@media (min-width:851px){
  .page-home .home-layout{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:145px 145px;
    gap:12px;
    width:calc(100% - 40px);
    max-width:none;
    margin:0 auto;
    align-items:stretch;
  }

  .page-home .home-layout > .action-card,
  .page-home .home-layout > .panel{
    width:100%;
    min-width:0;
    min-height:0;
    height:100%;
    margin:0;
  }

  /* Ordre : Vie | Adhérer | Commerçants
                 Actualités | Agenda | Commerçants */
  .page-home .home-layout > .businesses{
    grid-column:3;
    grid-row:1 / span 2;
    min-height:0;
    height:100%;
    padding:12px 14px;
  }

  .page-home .home-layout > .businesses .panel-head{
    justify-content:center;
  }
  .page-home .home-layout > .businesses .panel-head h2{
    white-space:nowrap;
    font-size:16px;
  }

  .page-home .home-layout > .businesses .business-slide{
    width:300px;
    max-width:94%;
    min-height:190px;
    height:auto;
    margin:18px auto 0;
    padding:12px 14px 10px;
  }

  .page-home .home-layout > .businesses .business-image{
    max-width:240px;
    max-height:125px;
  }

  .page-home .home-layout > .businesses .dots{
    margin-top:10px;
  }

  /* Les deux panneaux du bas gardent leurs dimensions identiques
     aux deux cartes du haut. */
  .page-home .home-layout > .panel:not(.businesses){
    padding:11px 13px;
  }

  .page-home .home-layout > .action-card{
    padding:10px 14px;
    border-radius:11px;
  }
}

@media (max-width:850px){
  .page-home .home-layout{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:94vw;
    margin-left:auto;
    margin-right:auto;
  }
  .page-home .home-layout > .businesses{
    grid-column:auto;
    grid-row:auto;
  }
}

/* V7 : suppression définitive de toute bande blanche sous le footer de l'accueil */
@media (min-width:851px){
  html, body{min-height:100%;}
  body.page-home{
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  body.page-home > main{
    flex:1 0 auto;
    min-height:0 !important;
    height:auto !important;
  }
  body.page-home > .contact-band{
    flex:0 0 auto;
    margin-bottom:0 !important;
  }
  body.page-home > footer{
    flex:0 0 auto;
    width:100%;
    margin:0 !important;
  }
}

/* V8 corrigée : mise en page de la seule page « L'association » */
.page-inner .association-panels{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
  gap:16px;
  margin-top:16px;
  align-items:start;
}
.page-inner .association-history-panel,
.page-inner .association-bureau-panel,
.page-inner .association-statuts-panel{
  background:#fff;
  border:1px solid #e0e7dc;
  border-radius:10px;
  padding:16px 18px;
}
.page-inner .association-history-panel{min-width:0}
.page-inner .association-history-panel .histoire-contenu h2{
  color:#205d28;
  font-size:clamp(22px,2.2vw,28px);
  margin:0 0 12px;
}
.page-inner .association-history-panel .histoire-contenu section{margin:0 0 14px}
.page-inner .association-history-panel .histoire-contenu h3{
  color:#2d7135;
  font-size:clamp(16px,1.5vw,19px);
  margin:10px 0 6px;
}
.page-inner .association-history-panel .histoire-contenu p{margin:6px 0;font-size:14px;line-height:1.48}
.page-inner .association-history-panel .histoire-emphase,
.page-inner .association-history-panel .histoire-conclusion{
  padding:10px 12px;
  background:#f0f5e9;
  border-left:4px solid #4d8c35;
  border-radius:6px;
}
.page-inner .association-bureau-panel h3,
.page-inner .association-statuts-panel h3{color:#205d28;margin-top:0}
.page-inner .association-bureau-panel .bureau-contenu p{font-size:13px;margin:9px 0;line-height:1.4}
.page-inner .association-bureau-panel .bureau-acceptation{margin-top:16px;font-style:italic;color:#536453}
.page-inner .association-statuts-panel{grid-column:1 / -1}
@media (max-width:850px){
  .page-inner .association-panels{grid-template-columns:1fr}
  .page-inner .association-statuts-panel{grid-column:auto}
}
/* V9 - Page « L'association » : présentation conforme à la maquette V8 de référence */
.page-inner .association-panels{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:16px;
  width:100%;
}
.page-inner .association-history-panel,
.page-inner .association-bureau-panel,
.page-inner .association-statuts-panel{
  width:100%;
  min-width:0;
  background:#fff;
  border:1px solid #e0e7dc;
  border-radius:10px;
  padding:0 12px 16px;
  overflow:hidden;
}
.page-inner .association-panel-title{
  margin:0 -12px 0;
  padding:12px 12px 8px;
  color:#222;
  font-size:16px;
  line-height:1.2;
  font-weight:700;
}
.page-inner .association-history-panel .histoire-contenu{
  width:100%;
  min-width:0;
}
.page-inner .association-history-panel .histoire-contenu h2{
  color:#205d28;
  font-size:clamp(22px,2.2vw,28px);
  margin:0 0 12px;
  line-height:1.2;
}
.page-inner .association-history-panel .histoire-contenu section{
  margin:0;
  padding:0 0 16px;
  border-bottom:1px solid #e1e7de;
}
.page-inner .association-history-panel .histoire-contenu section + section{padding-top:16px}
.page-inner .association-history-panel .histoire-contenu section:last-child{border-bottom:0;padding-bottom:0}
.page-inner .association-history-panel .histoire-contenu h3{
  color:#2d7135;
  font-size:clamp(16px,1.5vw,19px);
  margin:10px 0 6px;
  line-height:1.25;
}
.page-inner .association-history-panel .histoire-contenu p{
  margin:6px 0;
  font-size:14px;
  line-height:1.48;
  overflow-wrap:anywhere;
  word-break:normal;
}
.page-inner .association-history-panel .histoire-emphase,
.page-inner .association-history-panel .histoire-conclusion{
  padding:10px 12px;
  background:#f0f5e9;
  border-left:4px solid #4d8c35;
  border-radius:6px;
  margin-top:10px;
}
.page-inner .association-bureau-panel h3,
.page-inner .association-statuts-panel h3{
  color:#205d28;
  margin:14px 0 10px;
}
.page-inner .association-bureau-panel .bureau-contenu p{
  font-size:14px;
  margin:9px 0;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.page-inner .association-bureau-panel .bureau-acceptation{
  margin-top:16px;
  font-style:italic;
  color:#536453;
}
.page-inner .association-statuts-panel{grid-column:auto}
@media (max-width:850px){
  .page-inner .association-panels{grid-template-columns:1fr}
}

/* V10 - Correction définitive du rendu HTML de Notre histoire et du Bureau */
.page-inner .association-panels{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
  gap:16px;
  align-items:start;
}
.page-inner .association-history-panel,
.page-inner .association-bureau-panel,
.page-inner .association-statuts-panel{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  background:#fff;
  border:1px solid #e0e7dc;
  border-radius:10px;
  padding:16px;
  overflow:hidden;
}
.page-inner .association-history-panel .histoire-contenu h2{
  color:#205d28;
  font-size:26px;
  margin:0 0 14px;
}
.page-inner .association-history-panel .histoire-contenu section{
  margin:0;
  padding:0 0 16px;
  border-bottom:1px solid #e1e7de;
}
.page-inner .association-history-panel .histoire-contenu section + section{padding-top:16px}
.page-inner .association-history-panel .histoire-contenu section:last-child{border-bottom:0;padding-bottom:0}
.page-inner .association-history-panel .histoire-contenu h3{
  color:#2d7135;
  font-size:18px;
  margin:0 0 7px;
}
.page-inner .association-history-panel .histoire-contenu p{
  margin:6px 0;
  font-size:14px;
  line-height:1.48;
}
.page-inner .association-history-panel .histoire-emphase,
.page-inner .association-history-panel .histoire-conclusion{
  padding:10px 12px;
  background:#f0f5e9;
  border-left:4px solid #4d8c35;
  border-radius:6px;
}
.page-inner .association-bureau-panel h3{color:#205d28;margin:0 0 12px}
.page-inner .association-bureau-panel .bureau-contenu p{font-size:14px;margin:9px 0;line-height:1.5}
.page-inner .association-bureau-panel .bureau-acceptation{margin-top:16px;font-style:italic;color:#536453}
.page-inner .association-statuts-panel{grid-column:1 / -1}
@media (max-width:850px){
  .page-inner .association-panels{grid-template-columns:1fr}
  .page-inner .association-statuts-panel{grid-column:auto}
}


/* V11 - Accueil : commerçants = carte de visite uniquement */
@media (min-width:851px){
  .page-home .home-layout > .businesses .business-slide{
    width:100%;
    max-width:none;
    height:250px;
    min-height:250px;
    margin:8px 0 0;
    padding:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#6a4a2e,#a77c51);
    overflow:hidden;
  }
  .page-home .home-layout > .businesses .business-image{
    display:block;
    width:auto;
    height:auto;
    max-width:92%;
    max-height:238px;
    object-fit:contain;
    object-position:center;
    margin:0 auto;
  }
  .page-home .home-layout > .businesses .business-icon,
  .page-home .home-layout > .businesses .business-slide h3,
  .page-home .home-layout > .businesses .business-slide p{
    display:none !important;
  }
  .page-home .home-layout > .businesses .dots{
    margin-top:4px;
  }
}
@media (max-width:850px){
  .page-home .home-layout > .businesses .business-slide{
    width:100%;
    max-width:none;
    min-height:190px;
    height:190px;
    margin:8px 0 0;
    padding:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .page-home .home-layout > .businesses .business-image{
    max-width:95%;
    max-height:178px;
    object-fit:contain;
  }
  .page-home .home-layout > .businesses .business-icon,
  .page-home .home-layout > .businesses .business-slide h3,
  .page-home .home-layout > .businesses .business-slide p{
    display:none !important;
  }
}

/* V12 - Accueil : quatre cadres de gauche agrandis et colonne commerçants resserrée */
@media (min-width:851px){
  .page-home .home-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(280px,19vw);
    grid-template-rows:220px 155px;
    gap:12px;
    width:calc(100% - 40px);
    max-width:none;
  }

  /* Les quatre cadres de gauche ont exactement deux colonnes et deux lignes. */
  .page-home .home-layout > .action-card,
  .page-home .home-layout > .panel:not(.businesses){
    height:100%;
    min-height:0;
  }

  .page-home .home-layout > .businesses{
    grid-column:3;
    grid-row:1 / span 2;
    height:100%;
    min-height:0;
    padding:10px 8px 8px;
    overflow:hidden;
  }

  .page-home .home-layout > .businesses .panel-head{
    height:30px;
    justify-content:center;
    margin:0;
  }

  .page-home .home-layout > .businesses .panel-head h2{
    font-size:16px;
    white-space:nowrap;
    margin:0;
  }

  /* La zone brune épouse presque toute la largeur du cadre commerçants. */
  .page-home .home-layout > .businesses .business-slide{
    width:100%;
    max-width:none;
    height:calc(100% - 64px);
    min-height:0;
    margin:4px 0 0;
    padding:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .page-home .home-layout > .businesses .business-image{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    margin:0 auto;
  }

  .page-home .home-layout > .businesses .dots{
    margin-top:5px;
  }

  .page-home .home-layout > .businesses .business-icon,
  .page-home .home-layout > .businesses .business-slide h3,
  .page-home .home-layout > .businesses .business-slide p{
    display:none !important;
  }

  /* Les cadres de gauche restent aérés malgré leur agrandissement. */
  .page-home .home-layout > .action-card{
    padding:14px 18px;
  }
  .page-home .home-layout > .panel:not(.businesses){
    padding:14px 16px;
  }
  .page-home .home-layout > .action-card .round-icon{
    width:42px;
    height:42px;
    font-size:20px;
  }
  .page-home .home-layout > .action-card h3{
    font-size:18px;
    margin:7px 0;
  }
  .page-home .home-layout > .action-card p{
    min-height:38px;
    font-size:12px;
    margin:5px 0 10px;
  }
  .page-home .home-layout > .panel:not(.businesses) .panel-head h2{
    font-size:18px;
  }
  .page-home .home-layout > .panel:not(.businesses) > p{
    font-size:14px;
    margin-top:14px;
  }
}


/* Adresse e-mail du pied de page : blanc et gras */
footer .muted[data-content="pied_de_page.email"] {
  color: #fff;
  font-weight: 700;
}