/* ============================================================
 *  ecriVOSGES — « Une commune se raconte »
 *  Complément local à basiclayout.css.
 *
 *  La page conserve la charte papier / bordeaux du site. Aucun
 *  fond sombre n'est appliqué sous le bandeau supérieur.
 * ============================================================ */

#wrapper {
  background-color: #fff !important;
}

.commune-page,
.commune-page > .container {
  box-sizing: border-box;
  background: #fff;
}

.commune-page {
  --commune-bordeaux: #7a1512;
  --commune-bordeaux-fonce: #58100e;
  --commune-creme: #f7f0df;
  --commune-papier: #fffdf8;
  --commune-sable: #c8b896;
  --commune-or: #c8a95e;
  --commune-encre: #282522;
  --commune-gris: #6c655d;
  padding: 0 0 34px;
  color: var(--commune-encre);
}

.commune-page a:focus-visible,
.commune-page summary:focus-visible {
  outline: 3px solid #afd601;
  outline-offset: 3px;
}

.commune-retour {
  margin: 14px 0 9px;
  font-size: 0.875rem;
}

.commune-retour a,
.commune-bas a {
  color: var(--commune-bordeaux);
  font-weight: 600;
}

/* ------------------------------------------------------------
 *  En-tête illustré
 * ---------------------------------------------------------- */
.commune-hero {
  position: relative;
  margin: 0 0 16px;
  padding: 25px 27px 23px;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(255,253,248,0.98), rgba(247,240,223,0.94));
  border: 1px solid var(--commune-sable);
  border-top: 5px solid var(--commune-bordeaux);
  box-shadow: 0 8px 22px rgba(81, 56, 34, 0.09);
}

.commune-hero.avec-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 26px;
  align-items: center;
}

.commune-surtitre {
  margin: 0 0 4px;
  color: var(--commune-bordeaux);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.commune-hero h1 {
  margin: 0;
  padding: 0;
  color: var(--commune-bordeaux);
  font-size: clamp(2.35rem, 5vw, 3.65rem);
  line-height: 0.98;
}

.commune-accroche {
  margin: 9px 0 14px;
  color: #605347;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.3;
}

.commune-resume {
  margin: 0;
  color: #3f3a35;
  font-size: 0.95rem;
  line-height: 1.58;
  text-align: left;
}

.commune-liens-rapides {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: 16px;
}

.commune-liens-rapides a {
  color: var(--commune-bordeaux);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.commune-liens-rapides a:hover {
  text-decoration: underline;
}

.commune-hero-image {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0;
}

.commune-hero-image a {
  display: block;
}

.commune-hero-image img {
  display: block;
  width: 100%;
  height: 225px;
  object-fit: cover;
  background: #e9e0ce;
  border: 1px solid #ae9870;
}

.commune-image-portrait img {
  object-position: center 18%;
}

.commune-image-couverture img {
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  background: #efe6d5;
}

.commune-hero-image figcaption {
  margin-top: 5px;
  color: #776d62;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.3;
  text-align: center;
}

/* ------------------------------------------------------------
 *  Chiffres clés
 * ---------------------------------------------------------- */
.commune-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 25px;
}

.commune-chiffres div {
  min-width: 0;
  padding: 13px 9px 11px;
  background: var(--commune-creme);
  border: 1px solid #dacbac;
  text-align: center;
}

.commune-chiffres dt {
  color: var(--commune-bordeaux);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.commune-chiffres dd {
  margin: 5px 0 0;
  color: #695d50;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
 *  Sections communes
 * ---------------------------------------------------------- */
.commune-section {
  margin: 0 0 28px;
}

.commune-section > h2 {
  margin-bottom: 7px !important;
}

.commune-introduction {
  margin: 0 0 13px;
  color: var(--commune-gris);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------
 *  Figures à découvrir
 * ---------------------------------------------------------- */
.commune-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.commune-figure {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  min-width: 0;
  min-height: 112px;
  overflow: hidden;
  background: var(--commune-papier);
  border: 1px solid #d6c9af;
  box-shadow: 0 3px 9px rgba(76, 53, 35, 0.07);
}

.commune-figure-visuel {
  display: flex;
  width: 82px;
  height: 100%;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #e8decc;
}

.commune-figure-visuel img {
  width: 100%;
  height: 100%;
  min-height: 112px;
  object-fit: cover;
  object-position: center 18%;
}

.commune-initiale {
  color: #8b7755;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
}

.commune-figure-texte {
  min-width: 0;
  padding: 11px 9px 9px;
}

.commune-figure h3,
.commune-livre h3 {
  margin: 0;
  padding: 0;
  color: var(--commune-bordeaux);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.15;
}

.commune-figure h3 a,
.commune-livre h3 a,
.commune-auteurs-sans-couverture a {
  color: var(--commune-bordeaux);
  text-decoration: none;
}

.commune-figure h3 a:hover,
.commune-livre h3 a:hover,
.commune-auteurs-sans-couverture a:hover {
  text-decoration: underline;
}

.commune-dates,
.commune-metiers-personne {
  margin: 4px 0 0;
  color: #72685d;
  font-size: 0.72rem;
  line-height: 1.25;
}

.commune-badge-auteur {
  display: inline-block;
  margin: 7px 0 0;
  padding: 2px 6px;
  color: #fff;
  background: var(--commune-bordeaux);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
 *  Chronologie et carte
 * ---------------------------------------------------------- */
.commune-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: 18px;
  align-items: start;
}

.commune-chronologie,
.commune-reperes {
  padding: 0 0 16px;
}

.commune-periodes {
  padding: 13px 14px;
  background: #fbf7ee;
  border: 1px solid #d8cbae;
}

.commune-periode + .commune-periode {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #e3d9c7;
}

.commune-periode-nom {
  margin: 0 0 5px;
  color: var(--commune-bordeaux);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
}

.commune-barre-ligne {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 22px;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
  font-size: 0.69rem;
}

.commune-barre-etiquette {
  color: #71685f;
}

.commune-barre-fond {
  display: block;
  height: 8px;
  overflow: hidden;
  background: #e6dece;
}

.commune-barre {
  display: block;
  height: 100%;
}

.commune-barre-naissance {
  background: var(--commune-bordeaux);
}

.commune-barre-deces {
  background: var(--commune-or);
}

.commune-barre-ligne strong {
  color: #4f473f;
  font-size: 0.7rem;
  text-align: right;
}

.commune-legende-barres {
  margin: 7px 0 0;
  color: #776d62;
  font-size: 0.68rem;
  text-align: right;
}

.commune-legende-barres span {
  display: inline-block;
  width: 14px;
  height: 7px;
  margin: 0 3px 0 9px;
}

.commune-legende-barres .naissance { background: var(--commune-bordeaux); }
.commune-legende-barres .deces { background: var(--commune-or); }

#commune-mini-carte {
  width: 100%;
  height: 268px;
  box-sizing: border-box;
  margin: 0 0 10px;
  background: #eee7d9;
  border: 1px solid #bda984;
}

.commune-reperes .leaflet-popup-content,
.commune-reperes .leaflet-control-attribution {
  font-family: "Source Sans 3", Helvetica, Arial, sans-serif;
}

.commune-carte-absente {
  padding: 18px;
  color: #71685f;
  background: var(--commune-creme);
  border: 1px solid #d8cbae;
  font-size: 0.84rem;
}

.commune-reperes-liens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.commune-reperes-liens a {
  color: var(--commune-bordeaux);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

/* ------------------------------------------------------------
 *  Métiers
 * ---------------------------------------------------------- */
.commune-nuage-metiers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 15px;
  background: var(--commune-creme);
  border: 1px solid #d8cbae;
}

.commune-nuage-metiers a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  color: #4e4032;
  background: #fff;
  border: 1px solid #cbb895;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.commune-nuage-metiers a:hover {
  color: var(--commune-bordeaux);
  border-color: var(--commune-bordeaux);
}

.commune-nuage-metiers span {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--commune-bordeaux);
  border-radius: 50%;
  font-size: 0.65rem;
}

.commune-complement {
  margin: 7px 0 0;
  color: #766c62;
  font-size: 0.75rem;
  font-style: italic;
}

/* ------------------------------------------------------------
 *  Livres
 * ---------------------------------------------------------- */
.commune-livres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 17px;
  background: #eee6d7;
  border: 1px solid #cbb895;
}

.commune-livre {
  min-width: 0;
  padding: 0 0 9px;
  background: #fff;
  box-shadow: 0 5px 12px rgba(65, 45, 30, 0.17);
}

.commune-livre-couverture {
  display: flex;
  width: 100%;
  aspect-ratio: 2 / 3;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ddd4c5;
}

.commune-livre-couverture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.commune-livre h3 {
  padding: 9px 8px 0;
}

.commune-livre > p {
  margin: 5px 8px 0;
  color: #756b61;
  font-size: 0.68rem;
  line-height: 1.25;
}

.commune-auteurs-sans-couverture {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 14px 18px;
  background: var(--commune-creme);
  border: 1px solid #d8cbae;
  list-style: none;
}

/* ------------------------------------------------------------
 *  Citation
 * ---------------------------------------------------------- */
.commune-citation {
  position: relative;
  margin: 29px 0;
  padding: 22px 27px 21px 34px;
  background: #f8f0df;
  border-left: 5px solid var(--commune-bordeaux);
}

.commune-citation::before {
  content: "“";
  position: absolute;
  top: -12px;
  left: 9px;
  color: rgba(122, 21, 18, 0.16);
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
}

.commune-citation-surtitre {
  position: relative;
  margin: 0 0 6px;
  color: var(--commune-bordeaux);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.commune-citation blockquote {
  position: relative;
  margin: 0;
}

.commune-citation blockquote p {
  margin: 0;
  color: #3c342d;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.4;
}

.commune-citation footer {
  margin-top: 8px;
  color: #6e6256;
  font-size: 0.78rem;
  text-align: right;
}

.commune-citation footer a {
  color: var(--commune-bordeaux);
  font-weight: 700;
}

/* ------------------------------------------------------------
 *  Inventaire complet
 * ---------------------------------------------------------- */
.commune-listes-completes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.commune-inventaire {
  align-self: start;
  background: #fff;
  border: 1px solid #d5c7aa;
}

.commune-inventaire summary {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--commune-bordeaux);
  background: var(--commune-creme);
  font-weight: 700;
  cursor: pointer;
}

.commune-inventaire summary span {
  display: inline-flex;
  min-width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--commune-bordeaux);
  border-radius: 50%;
  font-size: 0.7rem;
}

.commune-inventaire ul {
  margin: 0;
  padding: 0 12px 5px;
  list-style: none;
}

.commune-inventaire li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 51px;
  padding: 6px 0;
  border-bottom: 1px solid #eee7dc;
}

.commune-inventaire li:last-child {
  border-bottom: 0;
}

.commune-inventaire li img,
.commune-mini-vide {
  display: block;
  width: 36px;
  height: 45px;
  box-sizing: border-box;
  object-fit: cover;
  object-position: center 18%;
  background: #e9e0d2;
  border: 1px solid #cbb895;
}

.commune-inventaire li a {
  color: var(--commune-bordeaux);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.commune-inventaire li a:hover {
  text-decoration: underline;
}

.commune-inventaire small {
  color: #756c63;
  font-size: 0.72rem;
}

.commune-inventaire em {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 1px 5px;
  color: var(--commune-bordeaux);
  background: #f2e5d0;
  font-size: 0.64rem;
  font-style: normal;
}

.commune-bas {
  margin: 27px 0 0;
  text-align: center;
}

/* ------------------------------------------------------------
 *  Adaptation aux téléphones
 * ---------------------------------------------------------- */
@media (max-width: 768px) {
  .commune-page {
    padding-bottom: 22px;
  }

  .commune-hero,
  .commune-hero.avec-image {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 19px 17px;
  }

  .commune-hero-texte {
    order: 1;
  }

  .commune-hero-image {
    order: 2;
    width: 100%;
  }

  .commune-hero-image img {
    height: min(64vw, 320px);
  }

  .commune-hero h1 {
    font-size: clamp(2.1rem, 12vw, 3.1rem);
  }

  .commune-chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commune-figures,
  .commune-duo,
  .commune-listes-completes {
    grid-template-columns: 1fr;
  }

  .commune-livres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    padding: 11px;
  }

  .commune-reperes-liens {
    grid-template-columns: 1fr;
  }

  #commune-mini-carte {
    height: 300px;
  }

  .commune-citation {
    padding: 20px 17px 18px 25px;
  }
}

@media (max-width: 420px) {
  .commune-figure {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .commune-figure-visuel {
    width: 72px;
  }

  .commune-nuage-metiers {
    padding: 10px;
  }
}

@media print {
  .commune-retour,
  .commune-liens-rapides,
  .commune-reperes,
  .commune-bas {
    display: none !important;
  }

  .commune-hero,
  .commune-figure,
  .commune-livre {
    box-shadow: none;
  }

  .commune-inventaire:not([open]) > *:not(summary) {
    display: block !important;
  }
}