:root{
  --ciel:#e8eef2;        /* ciel délavé du cliché */
  --papier:#f7f6f2;      /* fond de page */
  --ardoise:#22303a;     /* texte principal, toits d'ardoise */
  --ardoise-clair:#55656f;
  --bleu:#1b4b73;        /* bleu civique, accent principal */
  --pierre:#c4b79c;      /* murets de galets */
  --trait:#d8d5cc;
  --focus:#b4532a;
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--papier);
  color:var(--ardoise);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
}

.enveloppe{ max-width:60rem; margin:0 auto; padding:0 1.5rem }

a{ color:var(--bleu) }
a:focus-visible,
button:focus-visible,
.lien-evitement:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:2px;
}

.lien-evitement{
  position:absolute; left:-9999px;
  background:#fff; color:var(--bleu);
  padding:.6rem 1rem; z-index:20;
}
.lien-evitement:focus{ left:1rem; top:1rem }

/* ---------- En-tête ---------- */
.entete{ padding:3rem 0 1.75rem; border-bottom:1px solid var(--trait) }

.blason{
  display:flex; align-items:baseline; gap:.9rem;
  flex-wrap:wrap;
}
.blason::before{
  content:"";
  width:.55rem; height:2.6rem;
  background:linear-gradient(to bottom,var(--bleu) 33.33%,#fff 33.33%,#fff 66.66%,#9b2335 66.66%);
  border:1px solid var(--trait);
  align-self:center;
}
.entete--interieure{ padding-bottom:1.25rem }
.entete--interieure .blason::before{ height:1.8rem; width:.4rem }
.entete--interieure h1{ font-size:clamp(1.9rem,5vw,2.7rem) }

h1{
  font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  font-weight:400;
  font-size:clamp(2.6rem,7vw,4.1rem);
  line-height:1;
  letter-spacing:-.015em;
  margin:0;
}
.situation{
  margin:.65rem 0 0;
  color:var(--ardoise-clair);
  font-size:.95rem;
}
.retour{ margin:.7rem 0 0; font-size:.9rem }

/* ---------- Photographie ---------- */
figure{ margin:2.25rem 0 0 }
figure img{
  display:block; width:100%; height:auto;
  background:var(--ciel);
  border-radius:2px;
}
figcaption{
  margin-top:.7rem;
  font-size:.86rem;
  color:var(--ardoise-clair);
  border-left:3px solid var(--pierre);
  padding-left:.75rem;
}

/* ---------- Bandeau : site en construction ---------- */
.chantier{
  background:var(--bleu);
  color:#fff;
  margin:2.75rem 0 0;
  padding:2.25rem 0 2.4rem;
}
.chantier h2{
  font-family:Georgia,"Iowan Old Style",Palatino,serif;
  font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2rem);
  line-height:1.25;
  margin:0 0 .85rem;
  max-width:32ch;
}
.chantier p{
  margin:0;
  max-width:66ch;
  color:#dce7f0;
}
.chantier p + p{ margin-top:.8rem }
.chantier a{ color:#fff }

/* ---------- Informations pratiques ---------- */
.pratique{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:2.75rem;
  padding:3rem 0;
}
h2.rubrique{
  font-family:Georgia,"Iowan Old Style",Palatino,serif;
  font-weight:400;
  font-size:1.45rem;
  margin:0 0 1.1rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--pierre);
}

dl{ margin:0 }
dt{
  font-size:.82rem;
  color:var(--ardoise-clair);
  letter-spacing:.02em;
}
dd{
  margin:.15rem 0 1.2rem;
  font-size:1.08rem;
}
dd:last-child{ margin-bottom:0 }
address{ font-style:normal }

table{
  border-collapse:collapse;
  width:100%;
  font-size:1.05rem;
}
caption{ text-align:left; color:var(--ardoise-clair); font-size:.82rem; padding-bottom:.4rem }
th,td{ padding:.55rem 0; border-bottom:1px solid var(--trait); text-align:left }
th{ font-weight:600; width:9rem }
td.fermee{ color:var(--ardoise-clair) }
.apres-horaires{
  margin:1rem 0 0;
  font-size:.92rem;
  color:var(--ardoise-clair);
  max-width:40ch;
}

/* ---------- Pages de contenu ---------- */
.texte{ padding:2.5rem 0 3.5rem; max-width:44rem }
.texte h2{
  font-family:Georgia,"Iowan Old Style",Palatino,serif;
  font-weight:400;
  font-size:1.4rem;
  margin:2.4rem 0 .7rem;
  padding-bottom:.4rem;
  border-bottom:2px solid var(--pierre);
}
.texte h2:first-of-type{ margin-top:1rem }
.texte h3{ font-size:1.05rem; margin:1.6rem 0 .3rem }
.texte p, .texte li{ max-width:70ch }
.texte ul{ padding-left:1.15rem }
.texte li{ margin-bottom:.35rem }
.etat{
  border-left:4px solid var(--bleu);
  background:var(--ciel);
  padding:1rem 1.25rem;
  margin:1.5rem 0;
}
.etat p{ margin:0 }
.etat p + p{ margin-top:.6rem }

/* ---------- Pied de page ---------- */
footer{
  border-top:1px solid var(--trait);
  background:var(--ciel);
  padding:2rem 0 2.5rem;
  font-size:.9rem;
  color:var(--ardoise-clair);
}
footer p{ margin:.35rem 0; max-width:70ch }
.liens-pied{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  margin:0 0 1rem; padding:0;
}

/* ---------- Bandeau première visite ---------- */
.avis-cookies{
  position:fixed; left:0; right:0; bottom:0;
  z-index:15;
  background:#fff;
  border-top:3px solid var(--bleu);
  box-shadow:0 -6px 24px rgba(34,48,58,.18);
  padding:1.1rem 0 1.25rem;
}
.avis-cookies[hidden]{ display:none }
.avis-cookies .enveloppe{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.9rem 1.5rem;
}
.avis-cookies p{ margin:0; flex:1 1 22rem; font-size:.94rem }
.avis-cookies button{
  font:inherit; font-size:.94rem;
  background:var(--bleu); color:#fff;
  border:2px solid var(--bleu); border-radius:2px;
  padding:.55rem 1.4rem; cursor:pointer;
}
.avis-cookies button:hover{ background:#153c5d; border-color:#153c5d }

@media (max-width:32rem){
  body{ font-size:16px }
  .entete{ padding-top:2rem }
}