/* ===== Joyful Summer (Image palette) =====
   From bg.jpg:
   Lemon  #F4F061
   Mint   #AEE7D2
   Teal   #78D5BD
   Sky    #BFE9E0
   Pink   #F48FB8
*/

:root{
  /* palette extraite de bg.jpg */
  --lemon:#F4F061;
  --mint:#AEE7D2;
  --teal:#78D5BD;
  --sky:#BFE9E0;
  --pink:#F48FB8;

  /* typo */
  --serif:"Istok Web", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;


  /* surfaces */
  --bg:#fffdf7;
  --panel:#ffffff;
  --card:#ffffff;
  --ink:#111827;
  --muted:#1f2937;
  --line:#D0D5DD;

  /* shadows (colorés, 3D) */
  --shadow-1: 0 10px 22px rgba(120,213,189,.45);  /* teal */
  --shadow-2: 0 14px 34px rgba(244,143,184,.42);  /* pink */
  --shadow-3: 0 18px 48px rgba(244,240,97,.32);   /* lemon */
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:19px/1.7 var(--serif);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Top narrow background bar (image) */
body::before{
  content:"";
  position:fixed;
  top:0; left:0; right:0;
  height:30px;                     /* barre fine */
  background:url("../assets/bg.jpg") center/cover no-repeat;
  z-index:-1;
}

/* Layout */
.wrap{
  max-width:980px;
  margin:72px auto 32px;           /* espace = barre (30) + respiration */
  padding:0 16px;
}

/* Links */
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--pink)}

/* Header */
header.top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.muted{color:var(--muted)}

/* Buttons (carrés, gradient ↗ jaune→rose) */
.btn,.back{
  font-family:var(--sans);
  padding:12px 18px;
  border:1px solid var(--line);    /* bordures neutres */
  border-radius:0;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
  background:#fff;
  color:var(--ink);
  box-shadow:var(--shadow-1);
  transition:transform .12s, box-shadow .2s, background .2s;
}
.btn{
  background:linear-gradient(45deg, var(--mint), var(--lemon)); /* ↗ */
  color:#1b1b1b;
  box-shadow:var(--shadow-2), var(--shadow-3);
}
.back:hover,
.btn:hover{transform:translateY(-2px)}
.back:active,
.btn:active{transform:translateY(0)}

/* Panels */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:0;
  padding:22px;
  box-shadow:var(--shadow-1);
}

/* Search */
.searchbar{display:flex;gap:10px;align-items:center}
input[type="text"]{
  flex:1;
  padding:14px 16px;
  border:1px solid var(--line); border-radius:0;
  background:#fff; color:var(--ink);
  outline:none; font:19px/1.4 var(--sans);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input[type="text"]:focus{
  border-color:#bbb;
  box-shadow:0 0 0 4px rgba(191,233,224,.35);     /* sky glow */
  background:linear-gradient(0deg,#fff, rgba(244,240,97,.15)); /* lemon tint */
}

/* Results */
.results{margin-top:22px;display:flex;flex-direction:column;gap:18px}

/* Entries */
.entry{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:0;
  padding:22px;
  box-shadow:var(--shadow-1), var(--shadow-2);
  transition:transform .12s, box-shadow .2s;
}
.entry:hover{transform:translateY(-3px);box-shadow:var(--shadow-2), var(--shadow-3)}
.entry h2{
  margin:0 0 8px; font-size:28px; line-height:1.25;
  color:var(--ink);
  border-bottom:3px solid var(--pink); display:inline-block; padding-bottom:3px;
}

/* Field blocks */
.entry section{
  margin-top:14px; padding:12px 14px;
  border-left:6px solid var(--mint); /* touche palette */
  background:linear-gradient(0deg,#fff, rgba(244,240,97,.12)); /* lemon wash */
}
.entry section strong{display:block;font-weight:800;margin-bottom:6px}
.entry section div{white-space:pre-wrap}

/* Empty state */
.empty{
  text-align:center;padding:32px;border:1px dashed var(--line);border-radius:0;background:#fff;
  font-weight:800;color:var(--ink);box-shadow:var(--shadow-3)
}

/* Index grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:0;padding:18px;
  box-shadow:var(--shadow-1);
  transition:transform .12s, box-shadow .2s
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2), var(--shadow-3)}
.card h2{margin:0 0 10px;font-size:22px;color:var(--ink)}

.entry .actions a {
  display: inline-block;
  flex: none;
  text-decoration: none;
  padding: 0 2px;
}

.entry .title-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5em;
}

.entry .title-line h2 {
  margin: 0;
  flex: none;      /* do not stretch */
  display: inline; /* shrink-wrap the text */
}


.entry .title-line .actions a {
  display: inline-block;
  text-decoration: none;
}