@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root{
  --bg-1: #fff7ed;
  --card: #fffaf5;
  --accent: #6b2f00; /* brun sombre pour contraste */
  --muted: #7a5a40;
  --primary: #f97316; /* orange vif */
  --primary-2: #fb923c; /* orange moyen */
  --radius: 12px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, var(--bg-1), #eef2ff 100%);
  color:var(--accent);
}
.container{
  max-width:880px;
  margin:2.5rem auto;
  padding:2rem;
  background:var(--card);
  border-radius:20px;
  box-shadow:0 8px 30px rgba(15,23,42,0.06);
  border:1px solid rgba(15,23,42,0.04);
}
h1{margin:0 0 0.5rem 0;font-size:1.8rem;text-align:center}

/* Titles with small icons */
.title-with-icons{display:flex;align-items:center;justify-content:center;gap:0.6rem;margin:0.6rem 0;font-size:1.25rem}
.small-icon{width:18px;height:18px;flex:0 0 18px;vertical-align:middle;fill:var(--primary)}

/* Titles for add forms */
.add-title{font-size:1.1rem;text-align:center;color:var(--primary);margin-top:1rem;margin-bottom:0.6rem}

.tabs{margin:1rem 0 1.5rem}
.tabs{display:flex;flex-wrap:wrap;gap:0.4rem;justify-content:center}
.tabs a{
  display:inline-block;
  padding:0.6rem 1rem;
  margin-right:0.4rem;
  border-radius:8px;
  text-decoration:none;
  color:var(--muted);
  background:linear-gradient(180deg, rgba(249,115,22,0.08), rgba(251,146,60,0.04));
  font-weight:600;
  border:1px solid rgba(249,115,22,0.12);
}
.tabs a.active{
  color:var(--card);
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  box-shadow:0 6px 18px rgba(249,115,22,0.12);
}
.tabs a:hover,.tabs a:focus-visible{outline:2px solid rgba(249,115,22,0.12);transform:translateY(-2px)}

.content{background:transparent;padding:1.5rem;border-radius:12px;min-height:260px}
.list{list-style:none;padding:0;margin:0 0 1.2rem 0}
.list li{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:0.9rem 1rem;margin:0.5rem 0;border-radius:var(--radius);
  background:linear-gradient(180deg,#fffaf5,#fff3ea);
  border:1px solid rgba(107,47,0,0.04);
  box-shadow:0 6px 18px rgba(107,47,0,0.04);
  color:var(--accent);
}
.list li .meta{color:var(--muted);font-size:0.95rem}

form{display:block;margin-top:0.8rem}
input,select,button,textarea{font-size:0.95rem;padding:0.6rem;border-radius:10px;border:1px solid rgba(15,23,42,0.06);} 
input:focus,select:focus,button:focus,textarea:focus{outline:2px solid rgba(37,99,235,0.18)}
button{background:var(--primary);color:#fff;border:none;padding:0.6rem 1rem;font-weight:700;cursor:pointer;border-radius:10px}
button:hover{opacity:0.95}
.success{color:#059669;font-weight:700}

@media(max-width:720px){
  .container{margin:1rem;padding:1rem}
  .list li{flex-direction:column;align-items:flex-start}
  form input, form select, form textarea {width:100%;box-sizing:border-box}
  form button{width:100%;}
}