/* Comité des fêtes de Feuillade — direction « affiche de frairie »
   Palette : craie #FBF7EF · encre #26221B · rouge frairie #C8381D · vert sapin #2A5540 · paille #E8B54A */

:root{
  --craie:#FBF7EF;
  --encre:#26221B;
  --rouge:#C8381D;
  --vert:#2A5540;
  --paille:#E8B54A;
  --blanc:#FFFFFF;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--craie);
  color:var(--encre);
  font-family:"Atkinson Hyperlegible",sans-serif;
  font-size:1.06rem;
  line-height:1.65;
}

img{max-width:100%;display:block}

a{color:var(--rouge)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--rouge);outline-offset:2px;
}

/* ---------- motif vichy (nappe de banquet) ---------- */
.vichy{
  height:20px;
  background:
    repeating-linear-gradient(90deg, rgba(200,56,29,.55) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(0deg, rgba(200,56,29,.55) 0 10px, transparent 10px 20px),
    var(--blanc);
  border-top:2px solid var(--encre);
  border-bottom:2px solid var(--encre);
}

/* ---------- en-tête façon affiche ---------- */
header.affiche{
  text-align:center;
  padding:2.2rem 1rem 0;
}
header.affiche .marque{
  display:inline-flex;align-items:center;gap:.9rem;
  text-decoration:none;color:var(--encre);
}
header.affiche .marque img{width:74px;height:74px}
header.affiche .marque .nom{
  font-family:"Staatliches",sans-serif;
  font-size:1.5rem;letter-spacing:.08em;line-height:1.1;text-align:left;
}
header.affiche .marque .nom small{
  display:block;font-size:.85rem;color:var(--vert);letter-spacing:.18em;
}

nav.programme{
  margin:1.4rem auto .9rem;
  font-family:"Staatliches",sans-serif;
  font-size:1.12rem;letter-spacing:.1em;
}
nav.programme a{
  color:var(--encre);text-decoration:none;
  padding:.15rem .7rem;
}
nav.programme a+a{border-left:2px dotted var(--encre)}
nav.programme a:hover{color:var(--rouge)}
nav.programme a[aria-current="page"]{
  color:var(--rouge);
  text-decoration:underline;
  text-decoration-thickness:3px;text-underline-offset:6px;
}
.guirlande{display:block;margin:0 auto;max-width:640px;width:90%}

/* ---------- typographie d'affiche ---------- */
h1,h2{font-family:"Ultra",serif;font-weight:400;line-height:1.08}
h1{font-size:clamp(2.4rem,7vw,4.2rem);color:var(--rouge);text-align:center}
h2{font-size:clamp(1.5rem,3.5vw,2.1rem);color:var(--vert);margin-bottom:.8rem}
h3{font-family:"Staatliches",sans-serif;font-weight:400;font-size:1.35rem;
   letter-spacing:.07em;color:var(--rouge);margin-bottom:.35rem}
.sur-titre{
  font-family:"Staatliches",sans-serif;letter-spacing:.28em;
  color:var(--vert);text-align:center;font-size:1rem;margin-bottom:.4rem;
}
.sous-titre{
  text-align:center;font-style:italic;max-width:38rem;margin:.9rem auto 0;
}

main{padding-bottom:0}
section.feuille{max-width:52rem;margin:0 auto;padding:2.6rem 1.25rem}
section.feuille p+p{margin-top:1rem}

/* ---------- panneau mission (encart d'affiche) ---------- */
.panneau-mission{
  max-width:46rem;margin:0 auto;
  border:3px solid var(--encre);
  background:var(--blanc);
  box-shadow:8px 8px 0 var(--paille);
  padding:0;
}
.panneau-mission .bandeau{
  background:var(--vert);color:var(--craie);
  font-family:"Staatliches",sans-serif;letter-spacing:.2em;
  text-align:center;padding:.45rem .5rem;font-size:1.05rem;
}
.panneau-mission blockquote{
  padding:1.4rem 1.6rem .6rem;
  font-size:1.12rem;
}
.panneau-mission blockquote::before{content:"« ";color:var(--rouge);font-family:"Ultra",serif}
.panneau-mission blockquote::after{content:" »";color:var(--rouge);font-family:"Ultra",serif}
.panneau-mission .source{
  padding:0 1.6rem 1.3rem;font-size:.92rem;color:var(--vert);font-style:italic;
}

/* ---------- bandes photo ---------- */
figure.bande{margin:0;position:relative}
figure.bande img{width:100%;height:min(58vh,460px);object-fit:cover;border-top:3px solid var(--encre);border-bottom:3px solid var(--encre)}
figure.bande figcaption{
  position:absolute;left:0;bottom:14px;
  background:var(--encre);color:var(--craie);
  font-family:"Staatliches",sans-serif;letter-spacing:.08em;
  padding:.35rem .9rem;font-size:1rem;max-width:88%;
}
.diptyque{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  max-width:60rem;margin:0 auto;padding:0 1.25rem;
}
.diptyque figure{margin:0}
.diptyque img{width:100%;height:300px;object-fit:cover;border:3px solid var(--encre)}
.diptyque figcaption{font-size:.92rem;font-style:italic;margin-top:.45rem}
@media(max-width:640px){.diptyque{grid-template-columns:1fr}}

/* ---------- programme / rendez-vous ---------- */
ol.rendezvous{list-style:none;max-width:46rem;margin:1.4rem auto 0}
ol.rendezvous li{
  display:grid;grid-template-columns:7.5rem 1fr;gap:1.1rem;
  padding:1.05rem 0;border-top:2px dotted var(--encre);
}
ol.rendezvous li:last-child{border-bottom:2px dotted var(--encre)}
ol.rendezvous .quand{
  font-family:"Staatliches",sans-serif;font-size:1.25rem;color:var(--rouge);
  letter-spacing:.06em;line-height:1.2;padding-top:.15rem;
}
@media(max-width:520px){ol.rendezvous li{grid-template-columns:1fr;gap:.2rem}}

.bouton{
  display:inline-block;margin-top:1.4rem;
  font-family:"Staatliches",sans-serif;font-size:1.15rem;letter-spacing:.12em;
  background:var(--rouge);color:var(--craie);text-decoration:none;
  padding:.6rem 1.5rem;border:3px solid var(--encre);
  box-shadow:5px 5px 0 var(--encre);
}
.bouton:hover{background:var(--vert)}
.centre{text-align:center}

/* ---------- formulaire ---------- */
form.billet{max-width:34rem;margin:1.5rem auto 0;background:var(--blanc);
  border:3px solid var(--encre);padding:1.6rem;box-shadow:8px 8px 0 var(--vert)}
form.billet label{display:block;font-family:"Staatliches",sans-serif;
  letter-spacing:.08em;margin:.9rem 0 .25rem}
form.billet input,form.billet textarea{
  width:100%;border:2px solid var(--encre);background:var(--craie);
  padding:.55rem .7rem;font:inherit;
}
form.billet button{
  margin-top:1.3rem;cursor:pointer;
  font-family:"Staatliches",sans-serif;font-size:1.1rem;letter-spacing:.12em;
  background:var(--paille);border:3px solid var(--encre);
  padding:.55rem 1.4rem;box-shadow:4px 4px 0 var(--encre);
}
form.billet button:hover{background:var(--rouge);color:var(--craie)}
.confirmation{
  display:none;margin-top:1.1rem;padding:.9rem 1rem;
  border:2px dashed var(--vert);background:#EFF5EF;color:var(--vert);font-weight:700;
}
.confirmation.visible{display:block}

.carte iframe{width:100%;height:380px;border:3px solid var(--encre);display:block}
.carte .legende-carte{font-size:.9rem;font-style:italic;margin-top:.5rem}

/* ---------- pied de page ---------- */
footer{
  background:var(--vert);color:var(--craie);margin-top:3rem;
  padding:2.4rem 1.25rem 2rem;text-align:center;
}
footer .fanions-pied{max-width:420px;margin:0 auto 1.2rem}
footer p{max-width:42rem;margin:.45rem auto;font-size:.98rem}
footer a{color:var(--paille)}
footer .liens-pied{font-family:"Staatliches",sans-serif;letter-spacing:.1em;margin-top:1rem}
footer .liens-pied a{color:var(--craie);text-decoration:none;padding:0 .6rem}
footer .liens-pied a:hover{color:var(--paille)}

@media (prefers-reduced-motion: no-preference){
  .guirlande polygon{transform-origin:top center;animation:balance 5s ease-in-out infinite alternate}
  @keyframes balance{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
}