:root{
  --mur:#D6CEC4;
  --mur-fonce:#C2B9AD;
  --email:#0E5586;
  --email-clair:#16699F;
  --accent:#77B245;
  --texte:#14202B;
  --gris:#4E5A63;
  --t:.18s ease;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1.5rem}
body{
  margin:0;color:var(--texte);
  font-family:"Libre Franklin",system-ui,"Segoe UI",sans-serif;
  font-size:19px;line-height:1.65;overflow-x:hidden;
  /* crépi du mur */
  background-color:var(--mur);
  background-image:
    radial-gradient(rgba(0,0,0,.09) 1px,transparent 1px),
    radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:7px 7px,7px 7px;
  background-position:0 0,3px 4px;
}
p{inline-size:min(100%,58ch);height:auto}
section[id]{scroll-margin-top:1.5rem}
:focus-visible{outline:4px solid var(--email);outline-offset:4px}
a{transition:background-color var(--t),color var(--t)}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
.saut{position:absolute;left:-9999px;top:0;background:var(--email);
  color:#fff;padding:14px 20px;z-index:10}
.saut:focus{left:0}
.zone{max-width:980px;margin:0 auto;padding:0 18px}
/* plaque émaillée : biseau net, ombre dure, jamais de flou */
.plaque{
  background:#fff;
  padding:28px 24px;
  box-shadow:
    inset 0 0 0 3px var(--email),
    inset 0 0 0 4px #fff,
    inset 0 0 0 5px var(--email),
    inset 3px 3px 0 rgba(255,255,255,.95),
    inset -3px -3px 0 rgba(0,0,0,.16),
    6px 6px 0 rgba(0,0,0,.20);
}
.plaque--email{
  background:var(--email);color:#fff;
  box-shadow:
    inset 0 0 0 5px var(--email),
    inset 0 0 0 7px rgba(255,255,255,.92),
    inset 3px 3px 0 rgba(255,255,255,.22),
    inset -3px -3px 0 rgba(0,0,0,.30),
    6px 6px 0 rgba(0,0,0,.24);
}
.plaque h2{
  margin:0;font-size:1.22rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;line-height:1.3;
}
/* pictogrammes en négatif */
.entete-picto{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.entete-picto h2{margin:0}
.picto{
  flex:0 0 auto;width:52px;height:52px;padding:9px;
  background:var(--email);color:#fff;
}
.plaque--email .picto{background:#fff;color:var(--email)}
.picto svg{display:block;width:100%;height:100%}
/* en-tête : logo, nom + rail vert */
.entete{padding:28px 0 0}
.entete .plaque{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.entete h1{
  margin:0;font-size:clamp(1.02rem,3.5vw,1.3rem);
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  line-height:1.35;inline-size:min(100%,26ch);
}
.entete .rue{margin:.5rem 0 0;font-size:18px;color:var(--gris);
  text-transform:none;letter-spacing:0;font-weight:400}
.rail{height:7px;background:var(--accent);margin:18px 0 0;border:0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),
             inset 0 -2px 0 rgba(0,0,0,.28);}
/* navigation en plaquettes vissées sur le rail */
.menu{margin:18px 0 0}
.menu ul{list-style:none;margin:0;padding:0;display:flex;
  flex-wrap:wrap;gap:8px}
.menu a{
  display:flex;align-items:center;min-height:48px;padding:10px 16px;
  background:#fff;color:var(--email);font-weight:600;text-decoration:none;
  box-shadow:inset 0 0 0 2px var(--email),3px 3px 0 rgba(0,0,0,.18);
}
.menu a:hover{background:var(--email);color:#fff}
.menu a[aria-current="page"]{
  background:var(--email);color:#fff;
  box-shadow:inset 0 0 0 2px var(--email),
             inset 0 0 0 4px var(--accent),3px 3px 0 rgba(0,0,0,.18);
}
/* plaque principale : format monumental */
.principale{margin:28px 0 0;padding:46px 30px 52px;text-align:center;
  background-image:
    radial-gradient(circle 6px at 20px 20px,var(--accent) 97%,transparent 100%),
    radial-gradient(circle 6px at calc(100% - 20px) 20px,var(--accent) 97%,transparent 100%),
    radial-gradient(circle 6px at 20px calc(100% - 20px),var(--accent) 97%,transparent 100%),
    radial-gradient(circle 6px at calc(100% - 20px) calc(100% - 20px),var(--accent) 97%,transparent 100%);
  background-repeat:no-repeat;
}
.principale h2{
  font-size:clamp(1rem,3.4vw,1.28rem);letter-spacing:.11em;
}
.principale .filet{width:110px;height:4px;background:var(--accent);
  margin:24px auto;border:0}
.principale .date{
  margin:0 auto;font-weight:800;
  font-size:clamp(1.9rem,8vw,3.6rem);
  line-height:1.08;letter-spacing:-.015em;inline-size:min(100%,15ch);
}
.principale .heure{
  display:block;margin-top:12px;font-weight:600;
  font-size:clamp(1.3rem,5vw,2.1rem);letter-spacing:.02em;
}
/* mosaïque de plaques de tailles inégales */
main section{margin:26px 0}
.mosaique{display:grid;gap:26px;margin:26px 0}
.releve{list-style:none;margin:0;padding:0}
.releve li{border-top:2px solid var(--mur)}
.releve li:first-child{border-top:0}
.releve a{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px 12px;flex-wrap:wrap;min-height:58px;padding:15px 8px;
  color:var(--texte);text-decoration:none;font-weight:600;
}
.releve a:hover{background:var(--mur)}
.releve .action{color:var(--email);font-weight:400;
  text-decoration:underline;text-underline-offset:4px}
.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;margin-top:20px;padding:13px 26px;
  background:var(--email);color:#fff;
  font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  font-size:18px;text-decoration:none;
  box-shadow:inset 0 0 0 3px var(--email),
             inset 0 0 0 5px rgba(255,255,255,.9),
             4px 4px 0 rgba(0,0,0,.22);
}
.bouton:hover{background:var(--email-clair)}
/* pied */
.pied{margin:26px 0 44px}
.pied p{color:#E3EAE6}
@media (min-width:880px){
  .principale{padding:64px 44px 70px}
  /* tailles volontairement inégales */
  .mosaique{grid-template-columns:5fr 4fr;align-items:start}
  .mosaique section{margin:0}
  .large{grid-column:1/-1}
  .etroite{max-width:36rem}
}
/* emblème de l'amicale, monté comme une plaque */
.embleme{
  flex:0 0 auto;display:block;width:106px;background:#fff;padding:9px;
  box-shadow:inset 0 0 0 3px var(--email),3px 3px 0 rgba(0,0,0,.18);
}
.embleme picture{display:block}
.embleme img{display:block;width:100%;height:auto}
@media (min-width:420px){.embleme{width:124px}}
@media (min-width:880px){.embleme{width:158px}}
main h1{margin:0 0 18px;font-size:clamp(1.3rem,4.6vw,1.9rem);
  font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  line-height:1.25}
.entete .titre-site{margin:0;font-size:clamp(1.02rem,3.5vw,1.3rem);
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  line-height:1.35;inline-size:min(100%,26ch)}
.liste-simple{list-style:none;margin:0;padding:0}
.liste-simple li{border-top:2px solid var(--mur);padding:16px 4px;
  font-weight:600}
.liste-simple li:first-child{border-top:0}
/* adresse de courriel, gravée sur la plaque */
.courriel{margin:20px 0 0}
.courriel a{
  display:inline-block;color:var(--email);font-weight:800;
  font-size:clamp(1.15rem,4.4vw,1.6rem);letter-spacing:-.01em;
  text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:3px;overflow-wrap:anywhere;
  padding:6px 2px;
}
.courriel a:hover{background:var(--email);color:#fff;
  text-decoration-color:var(--accent)}
.mention{margin:14px 0 0;font-size:16px;color:var(--gris)}
.compte{border-top:2px solid var(--mur)}
.compte:first-of-type{border-top:0}
.compte summary{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:16px 4px;cursor:pointer;list-style:none;font-weight:600}
.compte summary::-webkit-details-marker{display:none}
.compte summary::after{content:"Lire";flex:0 0 auto;color:var(--email);
  font-weight:400;text-decoration:underline}
.compte[open] summary::after{content:"Fermer"}
.compte-corps{padding:0 4px 12px}
.compte h3{margin:22px 0 8px;font-size:1.02rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.3}
.compte p{margin:0 0 12px}
.compte .presents{font-style:italic}
.compte .signature{margin-top:22px;font-weight:600}

/* formulaires */
.formulaire{margin-top:24px;max-width:36rem}
.champ{margin:0 0 18px;padding:0;border:0}
.champ label,.champ legend{display:block;margin-bottom:6px;font-weight:700}
.facultatif{font-weight:400;color:var(--gris)}
.champ input[type=text],.champ input[type=email],.champ input[type=tel],
.champ textarea{
  display:block;width:100%;box-sizing:border-box;min-height:50px;
  padding:10px 12px;font:inherit;color:var(--texte);background:#fff;
  border:0;box-shadow:inset 0 0 0 2px var(--email);border-radius:0;
}
.champ textarea{min-height:9rem;resize:vertical}
.champ input:focus,.champ textarea:focus{outline:4px solid var(--email);outline-offset:2px}
.champ [aria-invalid=true]{box-shadow:inset 0 0 0 3px #B3261E}
.civilite{display:flex;flex-wrap:wrap;gap:6px 24px}
.civilite legend{flex-basis:100%}
.civilite label{display:inline-flex;align-items:center;gap:8px;font-weight:400;
  min-height:44px;cursor:pointer}
.civilite input{width:20px;height:20px;accent-color:var(--email)}
.erreur{margin:6px 0 0;color:#B3261E;font-weight:600}
.formulaire > .erreur{margin:0 0 18px}
.confirmation{margin-top:24px;padding:16px 18px;background:var(--email);color:#fff;
  font-weight:600}
.formulaire .bouton{border:0;cursor:pointer;font-family:inherit;margin-top:6px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* photo de la résidence en fond de l'en-tête, sous un voile blanc */
.entete .plaque{
  background:
    linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 45%,rgba(255,255,255,.45) 100%),
    url(/fond-960.webp) left 38% / cover no-repeat,
    #fff;
}
@media (min-width:880px){
  .entete .plaque{background-image:
    linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 45%,rgba(255,255,255,.45) 100%),
    url(/fond-1190.webp)}
}

/* pied de page : adresse et mentions légales */
.pied .pied-legal{margin:18px 0 0;font-size:16px;color:var(--texte);inline-size:auto}
.pied .pied-legal a{color:var(--email);font-weight:600}
.mentions h2{margin:28px 0 8px;font-size:1.02rem;letter-spacing:.06em}
.mentions p{margin:0 0 12px}
.mentions a{color:var(--email)}