/* =========================================================
   SYSTEME DE TRI
   ========================================================= */

.tri-section {
  max-width: 1100px;
  margin: 0 auto 45px;
  padding: 0 24px;
  color: #e9ded0;
}

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

.tri-header {
  text-align: center;
  margin-bottom: 24px;
}

.tri-header .eyebrow {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 11px;
  color: #b8a480;
  margin-bottom: 5px;
}

.tri-header h2 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f3e6c8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* Petit ornement sous le titre */

.tri-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  color: #b8a480;
}

.tri-flourish span {
  display: block;
  width: 55px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #8a7a58,
    transparent
  );
}

.tri-flourish b {
  font-size: 10px;
  font-weight: normal;
  color: #c9a35a;
}


/* =========================================================
   PANNEAU PRINCIPAL
   ========================================================= */

.tri-controls {
  position: relative;

  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;

  padding: 20px 22px;

  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(255, 255, 255, .055),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      rgba(239, 228, 205, .075),
      rgba(228, 213, 179, .035)
    );

  border: 1px solid rgba(233, 222, 208, .18);
  border-radius: 7px;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* Cadre intérieur */

.tri-controls::before {
  content: "";
  position: absolute;
  inset: 5px;

  border: 1px solid rgba(201, 163, 90, .12);
  border-radius: 4px;

  pointer-events: none;
}


/* =========================================================
   GROUPES
   ========================================================= */

.tri-group {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 6px;

  min-width: 170px;
  flex: 1;
}

.tri-group.tri-search {
  flex: 1.7;
}


/* =========================================================
   LABELS
   ========================================================= */

.tri-group label {
  padding-left: 2px;

  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;

  color: #b8a480;
}


/* =========================================================
   INPUT / SELECT
   ========================================================= */

.tri-input-wrap {
  position: relative;
}

.tri-icon {
  position: absolute;
  left: 11px;
  top: 50%;

  transform: translateY(-52%);

  font-family: serif;
  font-size: 19px;
  line-height: 1;

  color: #9c8150;
  pointer-events: none;
}

.tri-group input,
.tri-group select {
  width: 100%;
  height: 39px;

  padding: 7px 11px;

  font-family: 'EB Garamond', serif;
  font-size: 14px;

  color: #241a10;

  background:
    linear-gradient(
      160deg,
      rgba(239, 228, 205, .96),
      rgba(228, 213, 179, .92)
    );

  border: 1px solid rgba(0, 0, 0, .42);
  border-radius: 3px;

  outline: none;

  box-shadow:
    0 2px 5px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .4);

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.tri-search input {
  padding-left: 34px;
}

.tri-group input::placeholder {
  color: #6f604b;
  font-style: italic;
}

.tri-group input:focus,
.tri-group select:focus {
  border-color: #c9a35a;

  box-shadow:
    0 0 0 2px rgba(201, 163, 90, .16),
    0 3px 7px rgba(0, 0, 0, .35);
}


/* =========================================================
   SELECT
   ========================================================= */

.tri-group select {
  cursor: pointer;
  appearance: auto;
}


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

.tri-reset {
  position: relative;
  z-index: 2;

  height: 39px;
  padding: 0 17px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  flex: none;

  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: #12100c;

  background:
    linear-gradient(
      180deg,
      #d9b96e,
      #b89045
    );

  border: 1px solid rgba(0, 0, 0, .45);
  border-radius: 3px;

  cursor: pointer;

  box-shadow:
    0 2px 5px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .3);

  transition:
    filter .15s ease,
    transform .1s ease,
    box-shadow .15s ease;
}

.tri-reset span {
  font-size: 9px;
}

.tri-reset:hover {
  filter: brightness(1.1);

  box-shadow:
    0 3px 7px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

.tri-reset:active {
  transform: translateY(1px);

  box-shadow:
    0 1px 3px rgba(0, 0, 0, .5);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

  .tri-section {
    padding: 0 16px;
  }

  .tri-controls {
    align-items: stretch;
    padding: 18px;
  }

  .tri-group,
  .tri-group.tri-search {
    flex: 1 1 calc(50% - 7px);
  }

  .tri-reset {
    flex: 1 1 100%;
  }
}


@media (max-width: 500px) {

  .tri-header h2 {
    font-size: 21px;
  }

  .tri-controls {
    padding: 16px;
  }

  .tri-group,
  .tri-group.tri-search {
    flex: 1 1 100%;
  }

  .tri-reset {
    width: 100%;
  }
}