/* ==========================================================================
   Gâprée — site officiel de la commune
   Voix signalétique : Barlow Condensed (plaque, navigation, dates, boutons)
   Voix bulletin     : Georgia (titres d'articles, textes)
   Palette bocage    : craie, encre de haie, vert prairie, ardoise,
                       rouge signalétique (plaque et repère de navigation)
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --craie: #F5F8F3;
  --blanc: #FFFFFF;
  --encre: #1F2B22;
  --prairie: #3F6B44;
  --prairie-fonce: #2E5233;
  --ardoise: #5C6B66;
  --sauge: #DCE6D8;
  --sauge-pale: #EDF3EA;
  --rouge: #BF2A1A;
  --radius: 10px;
  --gouttiere: clamp(20px, 4vw, 60px);
  --signaletique: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --bulletin: Georgia, "Times New Roman", serif;
}

/* --- Base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--bulletin);
  font-size: clamp(1.15rem, 0.98rem + 0.42vw, 1.4rem);
  line-height: 1.65;
  color: var(--encre);
  background: var(--craie);
}

img { max-width: 100%; }

a { color: var(--prairie); }
a:hover { color: var(--prairie-fonce); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--prairie);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gouttiere);
  top: -60px;
  z-index: 100;
  background: var(--encre);
  color: var(--blanc);
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-family: var(--signaletique);
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; color: var(--blanc); }

/* --- En-tête -------------------------------------------------------------- */

.site-header {
  background: var(--craie);
  border-bottom: 1px solid var(--sauge);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 2rem;
  padding: 1.05rem var(--gouttiere);
}

.brand {
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
}
.brand:hover { color: var(--prairie-fonce); }

.brand-dep {
  font-size: 1.02rem;
  letter-spacing: 0.09em;
  color: var(--ardoise);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem clamp(1.1rem, 3vw, 2.4rem);
}

.site-header nav a {
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
  padding: 0.15rem 0 0.25rem;
  border-bottom: 3px solid transparent;
}
.site-header nav a:hover {
  color: var(--prairie-fonce);
  border-bottom-color: var(--sauge);
}
.site-header nav a[aria-current="page"] {
  border-bottom-color: var(--rouge);
}

/* --- Accueil : photo et plaque d'entrée ----------------------------------- */

.hero { position: relative; }

.hero img {
  display: block;
  width: 100%;
  height: clamp(320px, 56vh, 620px);
  object-fit: cover;
}

.plate {
  position: absolute;
  bottom: 0;
  left: var(--gouttiere);
  transform: translateY(42%);
  margin: 0;
  display: inline-block;
  background: var(--blanc);
  border: 5px solid var(--rouge);
  border-radius: 12px;
  padding: 0.3em 0.75em 0.34em;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: clamp(2.1rem, 6.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre);
  box-shadow: 0 12px 30px rgba(31, 43, 34, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .plate {
    animation: plate-in 0.55s ease-out both;
  }
  @keyframes plate-in {
    from { opacity: 0; transform: translateY(58%); }
    to   { opacity: 1; transform: translateY(42%); }
  }
}

.intro {
  padding: 4.6rem var(--gouttiere) 0.4rem;
}

.intro-sub {
  margin: 0 0 0.5rem;
  font-style: italic;
  font-size: 1.22rem;
  color: var(--ardoise);
}

/* Sans limite de largeur, la phrase d'accueil tient sur une seule ligne :
   c'est la limite à 76 caractères qui la coupait et creusait le blanc à droite. */
.intro-texte {
  margin: 0;
  font-size: 1.18rem;
}

/* --- Sections et grilles --------------------------------------------------- */

.section {
  padding: 2.6rem var(--gouttiere) 3.8rem;
}

.section--blanche {
  background: var(--blanc);
  border-top: 1px solid var(--sauge);
  border-bottom: 1px solid var(--sauge);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
}

.section-title {
  margin: 0;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--prairie-fonce);
}

.section-link {
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--prairie);
  text-decoration: none;
  border-bottom: 2px solid var(--sauge);
}
.section-link:hover { border-bottom-color: var(--prairie); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}

/* Accueil : trois contenus plus la carte « tout voir », sur une seule ligne. */
.grid--accueil { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1179px) {
  .grid--accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .grid--accueil { grid-template-columns: 1fr; }
}

/* Quatrième carte : l'accès à la rubrique complète, en vert de prairie pâle.
   Sélecteur doublé pour passer devant le fond blanc de .card, défini plus bas. */
.card.card--tout {
  justify-content: center;
  gap: 0.55rem;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  background: var(--sauge-pale);
  border-color: var(--sauge);
  text-decoration: none;
  color: var(--encre);
}

.card.card--tout:hover { background: #E4EEDF; color: var(--encre); }

.card-tout-titre {
  font-family: var(--bulletin);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.25;
  color: var(--prairie-fonce);
}

.card-tout-compte {
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ardoise);
}

.card-tout-fleche {
  margin-top: 0.35rem;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--prairie);
  transition: transform 0.2s;
}

.card--tout:hover .card-tout-fleche { transform: translateX(6px); }

.empty {
  max-width: min(100%, 88ch);
  background: var(--sauge-pale);
  border: 1px dashed var(--sauge);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  font-style: italic;
  color: var(--ardoise);
}

/* --- Cartes (actualités, talents) ------------------------------------------ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--sauge);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(31, 43, 34, 0.05);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}

.card:hover {
  border-color: var(--prairie);
  box-shadow: 0 12px 26px rgba(31, 43, 34, 0.13);
  transform: translateY(-3px);
}

.card:focus-within {
  outline: 3px solid var(--prairie);
  outline-offset: 2px;
}
.card:focus-within .card-title a { outline: none; }

/* Sans photo, la carte devient un « avis » officiel, souligné de vert.
   Elle occupe toute la hauteur de la ligne, comme les cartes à photo. */
.card--avis {
  border-top: 4px solid var(--prairie);
  background: linear-gradient(var(--sauge-pale), var(--blanc) 60%);
}

.card--avis .card-body { flex: 1; }

.card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease-out;
}

.card:hover .card-img img { transform: scale(1.035); }

/* Les photos d'un article se passent depuis la liste, sans l'ouvrir. */
.carte-photos {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.carte-photos::-webkit-scrollbar { display: none; }

.carte-photos img {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* Le léger zoom au survol gênerait la lecture pendant qu'on fait défiler. */
.card:hover .carte-photos img { transform: none; }

.card-img .bande { height: 100%; }

.card-img .bande-fleche {
  width: 46px;
  height: 46px;
  font-size: 1.9rem;
}

/* Pastille de date posée sur la photo, écho de la plaque d'entrée */
.card-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  background: var(--blanc);
  border-radius: 8px;
  padding: 0.28rem 0.65rem 0.32rem;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--prairie-fonce);
  box-shadow: 0 3px 10px rgba(31, 43, 34, 0.25);
}

.card-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.3rem 1.35rem;
  flex: 1;
}

.card-date {
  flex: none;
  width: 3.5rem;
  margin: 0;
  padding: 0.45rem 0.15rem 0.5rem;
  text-align: center;
  background: var(--sauge-pale);
  border: 1px solid var(--sauge);
  border-radius: 8px;
}

.card-date-jour {
  display: block;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--prairie-fonce);
}

.card-date-mois {
  display: block;
  margin-top: 0.18rem;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise);
}

.card-text { min-width: 0; }

.card-title {
  margin: 0 0 0.35rem;
  font-family: var(--bulletin);
  font-size: 1.32rem;
  line-height: 1.32;
}

.card-title a {
  color: var(--encre);
  text-decoration: none;
}
.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-meta {
  margin: 0 0 0.45rem;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ardoise);
}

.card-excerpt {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.card-more {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prairie);
}

/* --- Pages et articles ------------------------------------------------------ */

.page {
  padding: 2.7rem var(--gouttiere) 3.6rem;
}

.page-head h1 {
  margin: 0 0 0.5rem;
  font-family: var(--bulletin);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.2;
}

.chapo {
  margin: 0 0 2.1rem;
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.5vw, 1.5rem);
  color: var(--ardoise);
}

.article {
  padding: 2.7rem var(--gouttiere) 3.6rem;
}

.crumb { margin: 0 0 1.6rem; }

.crumb a {
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--prairie);
  text-decoration: none;
}
.crumb a:hover { color: var(--prairie-fonce); }

.article-titre {
  margin: 0 0 0.4rem;
  font-family: var(--bulletin);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.2;
}

.article-meta {
  margin: 0 0 1.4rem;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ardoise);
}

.article-figure {
  margin: 1.4rem 0 1.8rem;
}

.article-figure img {
  width: 100%;
  max-height: 540px;
  object-fit: cover;
  border-radius: var(--radius);
}

.video {
  margin: 1.4rem 0 1.8rem;
  aspect-ratio: 16 / 9;
  max-width: min(100%, 1180px);
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius);
}

.prose {
  max-width: min(100%, 92ch);
  font-size: inherit;
  line-height: 1.75;
}

.prose p { margin: 0 0 1.1em; }

.prose h2, .prose h3 {
  font-family: var(--bulletin);
  line-height: 1.3;
  margin: 1.7em 0 0.5em;
}
.prose h2 { font-size: 1.45rem; }
.prose h3 { font-size: 1.25rem; }

.prose img {
  height: auto;
  border-radius: 8px;
}

.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.35em; }

.prose blockquote {
  margin: 1.4em 0;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 4px solid var(--sauge);
  color: var(--ardoise);
  font-style: italic;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--sauge);
  margin: 2em 0;
}

/* --- Contact ----------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  margin-bottom: 3.2rem;
}

.contact-card {
  background: var(--blanc);
  border: 1px solid var(--sauge);
  border-radius: var(--radius);
  padding: 1.6rem 1.75rem 1.75rem;
}

.contact-titre {
  margin: 0 0 1rem;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--prairie-fonce);
}

.contact-adresse {
  margin: 0 0 1rem;
  font-size: 1.18rem;
}

.contact-tel { margin: 0 0 0.4rem; }

.contact-tel a {
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  color: var(--prairie-fonce);
  text-decoration: none;
}
.contact-tel a:hover { color: var(--prairie); }

.contact-mail { margin: 0 0 1.2rem; overflow-wrap: anywhere; }

.contact-carte { margin: 0; }

.horaires {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.1rem;
}

.horaires th,
.horaires td {
  text-align: left;
  padding: 0.55rem 0.4rem 0.55rem 0;
  border-bottom: 1px solid var(--sauge);
}

.horaires th { font-weight: 700; padding-right: 1.2rem; }

.contact-note {
  margin: 0.9rem 0 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--ardoise);
}

.btn {
  display: inline-block;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--prairie);
  color: var(--blanc);
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
}
.btn:hover { background: var(--prairie-fonce); color: var(--blanc); }

.btn--clair { background: var(--blanc); color: var(--prairie-fonce); }
.btn--clair:hover { background: var(--sauge-pale); color: var(--encre); }

/* --- Bandeau contact (page d'accueil) ------------------------------------------ */

.bande-contact {
  background: var(--prairie-fonce);
  color: #EAF1E8;
  padding: clamp(2rem, 4vw, 3rem) var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.bande-titre {
  margin: 0 0 0.5rem;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blanc);
}

.bande-infos { margin: 0 0 0.3rem; font-size: 1.1rem; }

.bande-horaires { margin: 0; font-style: italic; color: #C9DAC6; }

.bande-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.bande-tel { margin: 0; }

.bande-tel a {
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  color: var(--blanc);
  text-decoration: none;
}
.bande-tel a:hover { color: #C9DAC6; }

.section-trombi .section-title { margin-bottom: 1.4rem; }

.trombi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(175px, 100%), 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.trombi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: var(--blanc);
  border: 1px solid var(--sauge);
  border-radius: var(--radius);
  padding: 1.25rem 0.9rem 1.2rem;
  text-align: center;
}

.trombi-photo,
.trombi-initiales {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.trombi-photo { object-fit: cover; }

.trombi-initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sauge-pale);
  border: 1px solid var(--sauge);
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  color: var(--prairie-fonce);
}

.trombi-nom {
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.3;
}

.trombi-fonction {
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--ardoise);
}

/* --- Pied de page -------------------------------------------------------------- */

.site-footer {
  margin-top: 2.2rem;
  background: var(--encre);
  color: #E9EFE7;
  padding: 2.6rem var(--gouttiere) 1.8rem;
  font-size: 1.02rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.6rem 2.4rem;
}

.footer-grid p { margin: 0 0 0.6rem; }

.footer-title {
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blanc);
}

.site-footer a { color: #CFE0CC; }
.site-footer a:hover { color: var(--blanc); }

.footer-base {
  margin: 2.2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(233, 239, 231, 0.25);
  font-size: 0.95rem;
  color: #B9C9B6;
}

/* --- Ajustements mobiles --------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 1.08rem; }

  .site-header-inner { padding-top: 0.9rem; padding-bottom: 0.85rem; }

  .hero img { height: clamp(260px, 46vh, 420px); }

  .intro { padding-top: 3.9rem; }

  .card-body { gap: 0.85rem; padding: 1rem 1.05rem 1.15rem; }

  .contact-tel a { font-size: 1.85rem; }
}

/* --- Impression ------------------------------------------------------------------ */

@media print {
  .site-header nav, .skip-link, .site-footer, .card-more, .btn { display: none; }
  body { background: #fff; }
}

/* --- Mouvement réduit ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.article-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ardoise);
}

/* --- Page avec sommaire latéral (guide d'administration) ---------------------- */

.page--avec-sommaire {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 64px);
  align-items: start;
}

.page--avec-sommaire .page-head { grid-column: 1 / -1; }

.page--avec-sommaire .prose { max-width: min(100%, 88ch); }

.sommaire {
  position: sticky;
  top: 24px;
  background: var(--sauge-pale);
  border: 1px solid var(--sauge);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.4rem;
}

.sommaire-titre {
  margin: 0 0 0.7rem;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--prairie-fonce);
}

.sommaire ol {
  margin: 0;
  padding-left: 1.2rem;
  counter-reset: none;
}

.sommaire li { margin-bottom: 0.55rem; line-height: 1.35; }

.sommaire a {
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sommaire a:hover {
  color: var(--prairie-fonce);
  border-bottom-color: var(--sauge);
}

/* Les titres visés ne collent pas au bord haut de la fenêtre. */
.page--avec-sommaire .prose h2 { scroll-margin-top: 24px; }

@media (max-width: 900px) {
  .page--avec-sommaire { grid-template-columns: 1fr; }
  .sommaire { position: static; }
}

@media print {
  .sommaire { display: none; }
  .page--avec-sommaire { display: block; }
}

/* --- Plusieurs photos dans un article ----------------------------------------- */

.galerie {
  display: flex;
  gap: 14px;
  margin: 1.4rem 0 0.6rem;
  padding-bottom: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.galerie-photo {
  margin: 0;
  flex: 0 0 auto;
  max-width: 86vw;
  scroll-snap-align: start;
}

/* Chaque photo garde ses proportions : une hauteur commune, une largeur qui
   suit le cadrage. Un recadrage de force coupait les photos verticales et
   rognait le haut des autres, ce qui n'est pas acceptable pour un reportage. */
.galerie-photo img {
  height: clamp(230px, 34vw, 420px);
  width: auto;
  max-width: 86vw;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--sauge-pale);
}

.galerie-photo figcaption {
  margin-top: 0.5rem;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ardoise);
}

.galerie:focus-visible {
  outline: 3px solid var(--prairie);
  outline-offset: 4px;
}

/* La vignette se signale comme cliquable : le mot est écrit, l'icône seule ne
   parle pas à tout le monde. */
.galerie-lien {
  display: block;
  position: relative;
  line-height: 0;
  border-radius: var(--radius);
}

.galerie-loupe {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(31, 43, 34, 0.86);
  color: var(--blanc);
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
  line-height: 1.4;
}

.galerie-lien:hover .galerie-loupe,
.galerie-lien:focus-visible .galerie-loupe {
  background: var(--prairie);
}

/* ------------------------------------------------ voir une photo en grand */

/* Chaque photo a sa vue, appelée par son adresse : tout marche sans script,
   et les flèches sont de vrais liens vers la photo voisine. */
.visionneuse {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}

.visionneuse:target { display: flex; }

/* La page ne défile plus derrière la photo ouverte. */
body:has(.visionneuse:target) { overflow: hidden; }

.visionneuse-fond {
  position: absolute;
  inset: 0;
  background: rgba(16, 22, 18, 0.985);
}

.visionneuse-cadre {
  position: relative;
  margin: 0;
  max-width: min(100%, 1500px);
  text-align: center;
}

.visionneuse-cadre img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  border-radius: var(--radius);
  background: var(--encre);
}

.visionneuse-legende {
  margin: 0.9rem auto 0;
  max-width: min(100%, 80ch);
  color: var(--blanc);
  font-size: 1.15rem;
  font-style: italic;
}

.visionneuse-compte {
  margin: 0.7rem 0 0;
  color: var(--blanc);
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
}

/* Des cibles larges : elles doivent s'attraper sans viser. */
.visionneuse-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(62px, 9vw, 86px);
  height: clamp(62px, 9vw, 86px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blanc);
  color: var(--encre);
  border-radius: 50%;
  font-size: clamp(2.8rem, 5vw, 3.6rem);
  line-height: 1;
  text-decoration: none;
  padding-bottom: 0.14em;
}

.visionneuse-fleche:hover,
.visionneuse-fleche:focus-visible {
  background: var(--prairie);
  color: var(--blanc);
}

.visionneuse-fleche--avant { left: clamp(8px, 2vw, 28px); }
.visionneuse-fleche--apres { right: clamp(8px, 2vw, 28px); }

.visionneuse-fermer {
  position: absolute;
  top: clamp(8px, 2vw, 24px);
  right: clamp(8px, 2vw, 24px);
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 26px;
}

.visionneuse-fermer:hover,
.visionneuse-fermer:focus-visible {
  background: var(--rouge);
  color: var(--blanc);
}

/* --------------------------------------- flèches de défilement des bandes */

.bande {
  position: relative;
}

.bande-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--encre);
  background: var(--blanc);
  color: var(--encre);
  border-radius: 50%;
  font-size: 2.4rem;
  line-height: 1;
  padding-bottom: 0.12em;
  cursor: pointer;
  z-index: 5;
}

.bande-fleche:hover,
.bande-fleche:focus-visible {
  background: var(--prairie);
  border-color: var(--prairie);
  color: var(--blanc);
}

.bande-fleche[disabled] {
  opacity: 0.28;
  cursor: default;
}

/* `display: flex` l'emporterait sur la valeur par défaut de [hidden]. */
.bande-fleche[hidden] { display: none; }

.bande-fleche--avant { left: 6px; }
.bande-fleche--apres { right: 6px; }

@media print {
  .visionneuse, .bande-fleche, .galerie-loupe { display: none !important; }
}

.galerie-compte {
  margin: 0 0 1.8rem;
  font-family: var(--signaletique);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ardoise);
}

@media (hover: none) {
  .galerie-compte::after { content: ""; }
}

@media print {
  .galerie { display: block; overflow: visible; }
  .galerie-photo { margin-bottom: 1rem; }
  .galerie-compte { display: none; }
}

/* --- Composition : le contenu est centré, à une largeur qui lui convient ------
   Deux mesures : large pour les grilles de cartes, resserrée pour la lecture
   d'un article. Le blanc restant est alors symétrique, et non plus une colonne
   vide sur la droite. La photo d'accueil, elle, reste pleine largeur. */

.intro,
.section,
.bande-contact,
.page {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.article {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* La photo d'un article garde ses proportions au lieu d'être recadrée en
   bandeau : on la centre, et sa hauteur est bornée. */
.article-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-figure img {
  width: auto;
  max-width: 100%;
  max-height: 640px;
  object-fit: contain;
}