/* Esthétique sobre, images en cartes, header image sur la page détail, et hero image en accueil */
:root{
  --bg:#f7f7fa;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --accent:#6c5ce7;
  --ring: rgba(108,92,231,.35);
  --border:#e5e7eb;
  --shadow: 0 10px 25px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0e16;
    --card:#0f1320;
    --ink:#e5e7eb;
    --muted:#94a3b8;
    --border:#1f2937;
    --shadow: 0 10px 25px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 800px at 100% -20%, rgba(108,92,231,.06), transparent 60%), var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:1024px; margin:0 auto; padding:24px;}

.site-header{
  position:sticky; top:0; backdrop-filter:saturate(160%) blur(8px);
  background:color-mix(in oklab, var(--bg), transparent 20%);
  border-bottom:1px solid var(--border);
  z-index:50;
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between}
.brand{font-weight:700; letter-spacing:.2px; color:var(--ink); text-decoration:none}
.nav-link{color:var(--muted); text-decoration:none; margin-left:16px}
.nav-link.active,.nav-link:hover{color:var(--ink)}

.hero{display:grid; place-items:center; min-height:60vh;}
.hero-card{
  background:var(--card);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  border-radius:18px;
  padding:32px;
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap:24px;
}
.hero-content h1{font-size: clamp(28px, 3.6vw, 48px); line-height:1.1; margin:0 0 12px}
.lead{color:var(--muted); font-size:1.05rem; margin:0 0 20px}
.accent{color:var(--accent)}
.hero-image{position:relative; border-radius:16px; overflow:hidden; aspect-ratio: 4/3; box-shadow:var(--shadow);}
.hero-image img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(102%) contrast(102%)}
.hero-image .overlay{position:absolute; inset:0; background:linear-gradient(to top right, rgba(0,0,0,.25), rgba(0,0,0,.0) 60%);}

.btn{
  background:transparent; color:var(--ink); border:1px solid var(--border);
  padding:12px 16px; border-radius:12px; text-decoration:none; display:inline-block;
  transition:.2s transform ease, .2s background ease, .2s color ease, .2s border ease;
}
.btn:hover{transform:translateY(-1px); border-color:color-mix(in oklab, var(--accent), var(--border) 50%)}
.btn-primary{background:var(--ink); color:var(--card); border-color:var(--ink)}
.btn-primary:hover{background:color-mix(in oklab, var(--ink), var(--accent) 30%); border-color:transparent}

.page-title{margin:18px 0 6px}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin:20px 0 60px;
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; min-height:260px; position:relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(2,6,23,.10) }
.card .cover{
  position:relative;
  height:140px; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent), white 78%), color-mix(in oklab, #22d3ee, white 78%));
}
.card .cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(102%) contrast(102%);
}
.card .cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.0) 40%, rgba(0,0,0,.35));
}
.card .emoji-badge{
  position:absolute; left:10px; top:10px;
  font-size:28px; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.card h2{margin:14px 16px 6px; font-size:1.08rem}
.card p{margin:0 16px 18px; color:var(--muted)}

.detail{
  background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
  overflow:hidden;
}
.detail .detail-hero{
  position:relative; height:240px; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent), white 78%), color-mix(in oklab, #22d3ee, white 78%));
}
.detail .detail-hero img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(102%) contrast(102%);
  transform: scale(1.02);
}
.detail .detail-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 50%, rgba(0,0,0,0));
}
.detail .detail-hero .title{
  position:absolute; left:18px; bottom:16px; right:18px; color:#fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.detail .detail-hero .title h1{ margin:0; font-size: clamp(22px, 3vw, 32px) }
.detail .detail-hero .title .sub{ margin-top:6px; color: rgba(255,255,255,.9) }

.detail .content{ padding:20px 22px }
.detail .content p{ color:var(--muted); font-size:1.05rem }

.panel{
  background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
  padding:22px; margin: 18px 0 40px;
}
.form .row{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin:10px 0 18px}
.field label{display:block; font-weight:600; margin:0 0 6px}
.field input{width:100%; padding:12px 12px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--ink);}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}

.back{display:inline-block; margin:10px 0 12px; color:var(--muted); text-decoration:none}
.back:hover{color:var(--ink)}

.site-footer{border-top:1px solid var(--border); margin-top:40px; padding:22px 0}

/* --- Ajustements de lisibilité globaux --- */
.hero-content { 
  max-width: 65ch;         /* colonne de lecture confortable */
}
.lead { 
  max-width: 65ch; 
  line-height: 1.6;
}

/* --- Mobile / petits écrans --- */
@media (max-width: 768px) {
  .wrap {
    padding: 24px 20px;     /* un peu plus d’air sur les côtés */
  }
  .hero-card{
    grid-template-columns: 1fr;  /* passe en une seule colonne */
    padding: 24px;               /* padding un poil réduit pour mobile */
  }
  .hero-image{
    order: -1;                   /* image au-dessus du texte (optionnel) */
    aspect-ratio: 16/9;          /* ratio plus naturel plein écran */
  }
  .hero-content,
  .hero-content h1,
  .lead {
    text-align: center;          /* centrage propre sur mobile */
    margin-inline: auto;         /* recentre la colonne */
  }
}
.photo-caption {
  font-size: 0.75rem; /* petit texte */
  font-style: italic;
  color: #888; /* gris discret */
  margin-top: 0.3rem;
  text-align: center;
  line-height: 1.2;
}

/* Pour que ça reste propre sur mobile */
@media (max-width: 600px) {
  .photo-caption {
    font-size: 0.7rem;
    padding: 0 0.5rem; /* évite que le texte touche les bords */
  }
}