/* ════════════════════════════════════════
   HERBORARIUM — sommaire.css
   Page de sommaire des usages (grille de catégories)
   S'ajoute à style.css
════════════════════════════════════════ */

.page-header{
  text-align:center;
  padding:4rem 2rem 2.5rem;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse at 20% 80%, rgba(61,107,74,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(143,104,32,0.05) 0%, transparent 55%);
}

.hero-tag{
  display:inline-block;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-muted);
  border:1px solid var(--border);
  padding:0.35rem 0.9rem;
  border-radius:2px;
  margin-bottom:1.2rem;
}

.page-header h1{
  font-family:'Playfair Display', serif;
  font-size:clamp(2.2rem, 5vw, 3.5rem);
  font-weight:600;
  line-height:1.1;
  margin:0;
}

.page-header h1 em{ color:var(--accent); font-style:italic; }

.page-intro{
  max-width:640px;
  margin:1.4rem auto 0;
  font-size:1.08rem;
  line-height:1.75;
  color:var(--ink-light);
}

.page-intro strong{ color:var(--ink); font-weight:600; }

.usages-body{
  max-width:1000px;
  margin:0 auto;
  padding:3.5rem 2rem 5rem;
}

.usages-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
}

/* ===== CARTE USAGE (paysage) ===== */
.usage-card{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:1.3rem 1.6rem;
  border-radius:6px;
  border:1px solid var(--card-border);
  background:var(--card-bg);
  text-decoration:none;
  transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.usage-card::before{
  content:'';
  position:absolute;
  left:-30px;
  top:50%;
  width:140px;
  height:140px;
  transform:translateY(-50%);
  background:radial-gradient(circle, var(--card-color) 0%, transparent 68%);
  opacity:0.07;
  pointer-events:none;
}

.usage-card::after{
  content:'';
  position:absolute;
  inset:5px;
  border:1px solid var(--card-color);
  border-radius:3px;
  opacity:0.12;
  pointer-events:none;
  transition:opacity 0.18s, inset 0.18s;
}

.usage-card:hover::after{ opacity:0.24; inset:4px; }

.usage-corner{
  position:absolute;
  top:0.55rem;
  right:0.8rem;
  font-size:1rem;
  color:var(--card-color);
  opacity:0.16;
  pointer-events:none;
  transition:opacity 0.18s, transform 0.18s;
}

.usage-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(47,36,25,0.10);
  border-color:var(--card-color);
}

.usage-card:hover .usage-corner{ opacity:0.32; transform:rotate(20deg); }

.usage-frame-corner{
  position:absolute;
  width:20px;
  height:20px;
  color:var(--card-color);
  opacity:0.4;
  pointer-events:none;
  transition:opacity 0.18s;
}
.usage-frame-corner svg{ width:100%; height:100%; display:block; }
.usage-frame-corner.tl{ top:6px; left:6px; }
.usage-frame-corner.tr{ top:6px; right:6px; transform:scaleX(-1); }
.usage-frame-corner.bl{ bottom:6px; left:6px; transform:scaleY(-1); }
.usage-frame-corner.br{ bottom:6px; right:6px; transform:scale(-1,-1); }
.usage-card:hover .usage-frame-corner{ opacity:0.7; }

.usage-icon-wrap{ position:relative; flex-shrink:0; width:54px; height:54px; }

.usage-icon-wrap::after{
  content:'';
  position:absolute;
  inset:-5px;
  border:1px solid var(--card-color);
  border-radius:50%;
  opacity:0.3;
  transition:opacity 0.18s, inset 0.18s;
}
.usage-card:hover .usage-icon-wrap::after{ opacity:0.55; inset:-7px; }

.usage-icon{
  width:100%;
  height:100%;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.45rem;
  background:var(--card-color);
  box-shadow:0 2px 6px rgba(47,36,25,0.18);
  transition:transform 0.18s ease;
}
.usage-card:hover .usage-icon{ transform:scale(1.06); }

.usage-text{ flex:1; min-width:0; position:relative; }

.usage-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:0.6rem;
}

.usage-title{
  font-family:'Playfair Display', serif;
  font-size:1.18rem;
  font-weight:600;
  color:var(--card-color);
  margin:0;
}

.usage-count{
  flex-shrink:0;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-muted);
  white-space:nowrap;
}

.usage-flourish{
  display:block;
  width:52px;
  height:8px;
  margin:0.35rem 0 0.5rem;
  color:var(--card-color);
  opacity:0.6;
}

.usage-desc{
  font-size:0.92rem;
  font-style:italic;
  color:var(--ink-muted);
  line-height:1.4;
  margin:0;
}

.usage-arrow{
  position:relative;
  flex-shrink:0;
  font-size:0.85rem;
  color:var(--card-color);
  opacity:0.55;
  transition:transform 0.18s, opacity 0.18s;
}
.usage-card:hover .usage-arrow{ opacity:1; transform:translateX(4px); }

@media (max-width:700px){
  .usages-grid{ grid-template-columns:1fr; }
  .usages-body{ padding:2.5rem 1.2rem 3.5rem; }
}