/* ============================================================
   brown_panel.css (version tokenisée)
============================================================ */

:root{
  --brown-panel-radius: 22px;
  --brown-panel-ease: cubic-bezier(.25,.1,.25,1);
  --brown-panel-text: rgba(255,255,255,0.92);
  --brown-panel-text-soft: rgba(230,214,158,0.92);
}

.brown-panel{
  position: relative;
  border-radius: var(--brown-panel-radius);

  background: var(--surface-brown-base);
  border: 1px solid var(--surface-border-soft);

  color: var(--brown-panel-text);
  box-shadow: var(--surface-shadow-soft);

  transform: translateZ(0);
  transition:
    transform .22s var(--brown-panel-ease),
    box-shadow .28s var(--brown-panel-ease),
    border-color .28s var(--brown-panel-ease);
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))){
  .brown-panel{
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.brown-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0.9;
  background: var(--surface-brown-overlay);
  mix-blend-mode: overlay;
}

.brown-panel::after{
  content:"";
  position:absolute;
  inset: 11px 14px;
  border-radius: calc(var(--brown-panel-radius) - 11px);
  pointer-events:none;
  border: 1px solid rgba(230,214,158,0.10);
  opacity: 0.9;
}

.brown-panel > *{
  position: relative;
  z-index: 1;
}

.brown-panel.p-lg{ padding: 34px 34px 40px; }
.brown-panel.p-md{ padding: 26px 26px 30px; }
.brown-panel.p-sm{ padding: 20px 18px 22px; }
.brown-panel.p-xs{ padding: 16px 14px 18px; }

.brown-panel.is-hoverable:hover{
  transform: translateY(-1px);
  border-color: rgba(230,214,158,0.22);
  box-shadow:
    0 18px 52px rgba(0,0,0,0.38),
    inset 0 0 18px rgba(0,0,0,0.18);
}

.brown-panel.is-hoverable:active{
  transform: translateY(0);
}

.brown-panel:focus-visible{
  outline: 2px solid rgba(230,214,158,0.55);
  outline-offset: 6px;
}

.brown-panel-title{
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.2vw + 1.4rem, 2.0rem);
  color: #fffdf8;
  text-shadow:
    0 2px 10px rgba(0,0,0,0.35),
    0 0 14px rgba(230,214,158,0.10);
}

.brown-panel-text{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--brown-panel-text-soft);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.35),
    0 0 10px rgba(230,214,158,0.08);
}

@media (max-width: 900px){
  :root{ --brown-panel-radius: 18px; }

  .brown-panel::after{
    inset: 9px 10px;
    border-radius: calc(var(--brown-panel-radius) - 9px);
  }

  .brown-panel-title{ font-size: 1.55rem; }
  .brown-panel-text{ font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce){
  .brown-panel{ transition: none !important; }
}