/* Version corrigée : texte complet + rubriques complètes + charte ocre, bandeau aligné colonne */
:root{
  --page: 920px;
  --texte: #111;
  --fond: #f6f6f4;
  --papier: #ffffff;
  --bord: #d7d7d3;

  /* Ocre / marron-kaki */
  --accent: #7b5a2f;      /* ocre foncé */
  --accent-soft: #f2e7d6; /* beige/ocre clair (fond prologue) */

  --gris: #555;
  --ombre: 0 14px 30px rgba(0,0,0,.08);
  --rayon: 14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--texte);
  background:var(--fond);
  line-height:1.55;
}

.page{width:min(100% - 2rem, var(--page)); margin: 0 auto;}

.skip{
  position:absolute; left:-999px; top:0;
  background:var(--papier); border:1px solid var(--bord);
  padding:.6rem .9rem; border-radius: 10px;
}
.skip:focus{left:1rem; top:1rem; z-index:2000}

/* Bandeau sticky, même largeur que la colonne (pas plus étroit) */
.sticky-banner{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--papier);
  border-bottom: 1px solid var(--bord);
}
.bandeau{
  width: min(100% + 2rem, var(--page)); /* desktop : même largeur que la colonne de texte */
  height:auto;
  display:block;
  margin: 0 auto;
}

/* Bloc "papier" unique (prologue + rubriques) */
.papier{
  background:var(--papier);
  border:1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin: 1rem 0;
  overflow:hidden; /* pas de séparation visuelle */
}

.prologue{
  padding: 1.1rem 1.1rem 1rem;
  border-bottom: 1px solid var(--bord);
}
.sur-titre{
  font-weight:700;
  letter-spacing:.02em;
  color:var(--gris);
  text-transform:uppercase;
  font-size:.9rem;
}
h1{margin:.3rem 0 .15rem; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height:1.1;color: var(--accent);}
.citation{font-style:italic; color:var(--gris); margin-bottom:1rem;}

.prologue-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 1rem;
  align-items:start;
}
@media (max-width: 860px){
  .prologue-grid{grid-template-columns:1fr}
}

/* Prologue : fond beige/ocre clair */
.intro-box{
  border-left: 5px solid var(--accent);
  background: var(--accent-soft);
  padding: .85rem .9rem;
  border-radius: 10px;
}
.intro{margin:0}

/* Boîte “Un village, une équipe” : sans fond coloré, juste encadrée */
.boite{
  border:1px solid var(--bord);
  border-radius: var(--rayon);
  padding: .9rem 1rem;
  background: transparent;
}
.h3{margin:0 0 .5rem; font-size:1.05rem}
.boite ul{margin:.4rem 0 0; padding-left: 1.1rem}
.boite li{margin:.35rem 0}

/* Accordéon */
.accordion{padding: .2rem 0}
.acc-item{border-top:1px solid var(--bord)}
.acc-item summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding: .95rem 1.1rem;
  font-weight:900;
  font-size: 1.05rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  color: var(--accent); /* titres en ocre */
}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}
.tri{
  width: 1.2rem;
  display:inline-flex;
  justify-content:center;
  color: var(--accent);
  transition: transform .15s ease;
}
details[open] > summary .tri{transform: rotate(90deg);}
.acc-content{padding: 0 1.1rem 1rem 2.85rem;}
.acc-content p{margin:.45rem 0; color:#222}

/* Contact */
.contact{
  background:var(--papier);
  border:1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1rem 1.1rem;
  box-shadow: var(--ombre);
  margin: 1rem 0 1.2rem;
}
.contact h2{margin:0 0 .5rem}
.actions{display:flex; gap:.6rem; flex-wrap:wrap; margin:.8rem 0 0}
.btn{
  display:inline-flex;
  align-items:center;
  padding:.6rem .85rem;
  border-radius: 12px;
  border:1px solid var(--bord);
  text-decoration:none;
  color:inherit;
  background:#fff;
}
.btn:hover{border-color: color-mix(in oklab, var(--accent) 40%, var(--bord))}
.btn-accent{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--bord));
  background: color-mix(in oklab, var(--accent) 12%, white);
}

.pied{
  color:var(--gris);
  font-size:.95rem;
  padding: 0 0 1.6rem;
}


/* Mobile : bandeau pleine largeur + léger "zoom" (crop ~10% de chaque côté) */
@media (max-width: 680px){
  .sticky-banner{ overflow:hidden; }
  .bandeau{
    width: 130vw;        /* +20% => ~10% rogné de chaque côté */
    max-width:none;
    margin: 0;
    margin-left: -15vw;  /* centre le crop */
  }
}