/* =========================================================
   VARIABLES
========================================================= */

:root {

  --paper: #f5f1e8;
  --paper-light: #fbf9f4;
  --white: #ffffff;

  --ink: #2d2a25;
  --muted: #777066;

  --line: #d8d0c2;
  --line-dark: #c7bdad;

  --accent: #75624c;
  --accent-dark: #574736;

  --shadow:
    0 10px 30px rgba(45, 42, 37, 0.08);

}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  line-height: 1.6;

}


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


button,
input,
select {
  font: inherit;
}


/* =========================================================
   EN-TÊTE
========================================================= */

.site-header {

  border-bottom: 1px solid var(--line);

  background:
    rgba(251, 249, 244, 0.96);

}


.header-inner {

  width: min(1400px, calc(100% - 48px));

  margin: 0 auto;

  min-height: 130px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}


/* =========================================================
   MARQUE
========================================================= */

.brand {

  display: flex;

  flex-direction: column;

  gap: 2px;

  color: var(--ink);

  text-decoration: none;

}


.brand-small {

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--muted);

}


.brand-title {

  font-size: clamp(
    1.5rem,
    3vw,
    2.25rem
  );

  line-height: 1.1;

}


.brand-place {

  margin-top: 4px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.78rem;

  letter-spacing: 0.08em;

  color: var(--muted);

}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav {

  display: flex;

  align-items: center;

}


.main-nav a {

  padding: 8px 0;

  color: var(--ink);

  text-decoration: none;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.82rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}


.main-nav a.active {

  color: var(--accent-dark);

  border-bottom:
    1px solid var(--accent);

}


/* =========================================================
   PAGE CATALOGUE — PLUS À GAUCHE
========================================================= */

.catalogue-page {

  width: min(
    1550px,
    calc(100% - 16px)
  );

  margin-left: 8px;

  margin-right: auto;

  padding:
    40px 0 70px;

}




/* =========================================================
   ORGANISATION DU CATALOGUE
========================================================= */

.catalogue-layout {

  display: grid;

  /*
     Colonne des filtres élargie
  */
  grid-template-columns:
    360px
    minmax(0, 1fr);

  /*
     Espace entre filtres et cartes
  */
  gap: 32px;

  align-items: start;

}


/* =========================================================
   PANNEAU DES FILTRES
========================================================= */

.catalogue-tools {

  position: sticky;

  top: 24px;

  align-self: start;

  width: 100%;

  padding: 24px;

  background:
    var(--paper-light);

  border:
    1px solid var(--line);

  border-radius: 10px;

  box-shadow:
    0 8px 25px
    rgba(
      45,
      42,
      37,
      0.05
    );

}


/* =========================================================
   TITRE FILTRES
========================================================= */

.filters-header {

  padding-bottom: 18px;

  margin-bottom: 20px;

  border-bottom:
    1px solid var(--line);

}


.filters-kicker {

  display: block;

  margin-bottom: 4px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.68rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--muted);

}


.filters-header h2 {

  margin: 0;

  font-size: 1.35rem;

  font-weight: normal;

}


/* =========================================================
   RECHERCHE
========================================================= */

.search-wrap {

  margin-bottom: 22px;

}


.search-wrap label,
.filter-group label {

  display: block;

  margin-bottom: 7px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  color: var(--muted);

}


.search-wrap input {

  width: 100%;

  min-height: 42px;

  padding: 9px 11px;

  border:
    1px solid var(--line);

  border-radius: 6px;

  outline: none;

  background:
    var(--white);

  color: var(--ink);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


.search-wrap input:focus {

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px
    rgba(117, 98, 76, 0.1);

}


.search-wrap input::placeholder {

  color:
    #aaa39a;

}


/* =========================================================
   FILTRES
========================================================= */

.filters {

  display: flex;

  flex-direction: column;

  gap: 17px;

}

/* =========================================================
   POLICE DES MENUS DÉROULANTS UNIQUEMENT
========================================================= */

.catalogue-tools .filter-group select {

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.82rem;

  font-weight: 400;

  line-height: 1.4;

}


/* Conserver la même police lorsque le menu est ouvert/focus */

.catalogue-tools .filter-group select:focus {

  font-family:
    Arial,
    Helvetica,
    sans-serif;

}

/* =========================================================
   COMPTEUR
========================================================= */

.tools-bottom {

  margin-top: 23px;

  padding-top: 18px;

  border-top:
    1px solid var(--line);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.78rem;

  color: var(--muted);

}


/* =========================================================
   RÉSULTATS
========================================================= */

.catalogue-results {

  min-width: 0;

}


/* =========================================================
   GRILLE DES CARTES
========================================================= */

.card-grid {

  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        270px,
        1fr
      )
    );

  gap: 28px;

}


/* =========================================================
   CARTE POSTALE
========================================================= */

.postcard-card {

  overflow: hidden;

  background:
    var(--paper-light);

  border:
    1px solid var(--line);

  border-radius: 9px;

  box-shadow:
    0 6px 20px
    rgba(
      45,
      42,
      37,
      0.05
    );

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.postcard-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    var(--shadow);

}


/* =========================================================
   PHOTO
========================================================= */

.postcard-photo {

  position: relative;

  overflow: hidden;

  background:
    #ddd5c7;

  aspect-ratio:
    4 / 3;

}


/* =========================================================
   PHOTOS DU CATALOGUE — IMAGE ENTIÈRE
========================================================= */

.postcard-photo {

  position: relative;

  overflow: hidden;

  background:
    #e5dfd4;

  /*
     On garde un cadre suffisamment haut
     pour les cartes postales.
  */
  aspect-ratio:
    4 / 3;

  display: flex;

  align-items: center;

  justify-content: center;

}


.postcard-photo img {

  display: block;

  width: 100%;

  height: 100%;

  /*
     Affiche toute la carte sans la recadrer.
  */
  object-fit: contain;

  /*
     Évite que l'image soit agrandie
     au-delà de son cadre.
  */
  object-position: center;

  cursor: zoom-in;

  transition:
    transform 0.35s ease;

}


/*
   Petit effet au passage de la souris,
   sans modifier le cadrage.
*/

.postcard-card:hover
.postcard-photo img {

  transform:
    scale(1.015);

}


/* =========================================================
   CONTENU CARTE
========================================================= */

.postcard-content {

  padding: 20px;

}


.eyebrow {

  margin:
    0 0 5px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.68rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--accent);

}


.postcard-content h3 {

  margin:
    0 0 17px;

  font-size: 1.2rem;

  font-weight: normal;

  line-height: 1.3;

}


/* =========================================================
   MÉTADONNÉES
========================================================= */

.meta-list {

  display: flex;

  flex-direction: column;

}


.meta-row {

  display: grid;

  grid-template-columns:
    90px
    minmax(0, 1fr);

  gap: 10px;

  padding: 7px 0;

  border-top:
    1px solid var(--line);

  font-size: 0.83rem;

}


.meta-row span:first-child {

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.68rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--muted);

}


.meta-row span:last-child {

  overflow-wrap:
    anywhere;

}


/* =========================================================
   AUCUN RÉSULTAT
========================================================= */

.no-results {

  padding:
    80px 25px;

  text-align: center;

  border:
    1px dashed var(--line-dark);

  border-radius: 10px;

  background:
    var(--paper-light);

}


.no-results-symbol {

  display: block;

  margin-bottom: 12px;

  font-size: 1.5rem;

  color: var(--accent);

}


.no-results h2 {

  margin:
    0 0 8px;

  font-size: 1.4rem;

  font-weight: normal;

}


.no-results p {

  margin: 0;

  color: var(--muted);

}


/* =========================================================
   BOÎTE D'ERREUR
========================================================= */

.error-box {

  padding: 30px;

  border:
    1px solid var(--line);

  border-radius: 10px;

  background:
    var(--paper-light);

}


.error-box h2 {

  margin-top: 0;

  font-size: 1.4rem;

  font-weight: normal;

}


/* =========================================================
   LIGHTBOX
========================================================= */

#lightbox {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 25px;

  background:
    rgba(
      20,
      18,
      15,
      0.88
    );

}


#lightbox[hidden] {

  display: none;

}


.lightbox-background {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  padding: 30px;

}


#lightbox-image {

  display: block;

  max-width: 94vw;

  max-height: 88vh;

  width: auto;

  height: auto;

  object-fit: contain;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  box-shadow:
    0 20px 60px
    rgba(
      0,
      0,
      0,
      0.45
    );

  cursor: zoom-out;

}


#lightbox-caption {

  max-width: 90vw;

  margin-top: 13px;

  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.8rem;

  text-align: center;

  opacity: 0.9;

}


/* =========================================================
   BOUTON FERMETURE
========================================================= */

.lightbox-close {

  position: fixed;

  top: 18px;

  right: 24px;

  z-index: 10001;

  width: 46px;

  height: 46px;

  padding: 0;

  border: none;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.12
    );

  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 2rem;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;

}


.lightbox-close:hover {

  background:
    rgba(
      255,
      255,
      255,
      0.22
    );

  transform:
    scale(1.05);

}


/* =========================================================
   PIED DE PAGE
========================================================= */

.site-footer {

  border-top:
    1px solid var(--line);

  background:
    var(--paper-light);

}


.site-footer > div {

  width: min(
    1400px,
    calc(100% - 48px)
  );

  margin: 0 auto;

  padding: 25px 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

}


.site-footer strong {

  font-size: 0.9rem;

  font-weight: normal;

}


.site-footer span {

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.72rem;

  color: var(--muted);

}


/* =========================================================
   TABLETTES
========================================================= */

@media (max-width: 950px) {

  .catalogue-layout {

    grid-template-columns:
      230px
      minmax(0, 1fr);

    gap: 25px;

  }


  .card-grid {

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(
          230px,
          1fr
        )
      );

    gap: 20px;

  }


  .catalogue-tools {

    padding: 19px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

  .header-inner {

    width:
      calc(100% - 32px);

    min-height: 110px;

    align-items:
      flex-start;

    flex-direction: column;

    justify-content:
      center;

    gap: 12px;

  }


  .catalogue-page {

    width:
      calc(100% - 32px);

    padding-top: 28px;

  }


  /*
     Sur mobile, les filtres ne restent plus
     collés à gauche : ils passent au-dessus
     du catalogue.
  */

  .catalogue-layout {

    grid-template-columns: 1fr;

    gap: 25px;

  }


  .catalogue-tools {

    position: relative;

    top: auto;

  }


  .filters {

    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 15px;

  }


  .card-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 18px;

  }


  .postcard-content {

    padding: 15px;

  }


  .meta-row {

    grid-template-columns:
      1fr;

    gap: 2px;

  }


  .site-footer > div {

    width:
      calc(100% - 32px);

    flex-direction: column;

    align-items:
      flex-start;

    gap: 7px;

  }

}


/* =========================================================
   PETITS TÉLÉPHONES
========================================================= */

@media (max-width: 500px) {

  .filters {

    grid-template-columns: 1fr;

  }


  .card-grid {

    grid-template-columns: 1fr;

  }


  .brand-title {

    font-size: 1.45rem;

  }


  #lightbox {

    padding: 10px;

  }


  .lightbox-background {

    padding: 15px;

  }


  #lightbox-image {

    max-width: 96vw;

    max-height: 82vh;

  }


  .lightbox-close {

    top: 10px;

    right: 12px;

    width: 42px;

    height: 42px;

  }

}

.reset-filters {
  width: 100%;
  margin-top: 20px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.reset-filters:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line-dark);
}