/* Design clair, chaleureux et responsive – base Pico.css + personnalisations
   Police: Inter (Google Fonts) / fallback système
*/
:root{
  /* Palette chaleureuse (ambre / sable / bleu doux) */
  --bg: #fffaf3;           /* fond doux */
  --bg-soft:#fff6e9;
  --card:#ffffff;
  --border:#f1e5d0;
  --text:#1f2937;          /* gris foncé lisible */
  --muted:#6b7280;
  --brand:#f59e0b;         /* ambre */
  --brand-2:#fbbf24;       /* ambre clair */
  --accent:#3b82f6;        /* bleu doux pour liens/focus natifs Pico */
  --ring: rgba(245, 158, 11, .25);
  --ok:#16a34a;
  --ko:#ef4444;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(245,158,11,.10), transparent),
    radial-gradient(1200px 600px at 85% -20%, rgba(251,191,36,.12), transparent),
    var(--bg);
  color:var(--text);
  line-height:1.65;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

.container{max-width:1140px;margin:0 auto;padding:0 20px}
.py-8{padding:3rem 0}
.mt-6{margin-top:2rem}

.display{font-size:2.6rem;line-height:1.15;margin:0 0 .75rem}
.lead{font-size:1.08rem;color:var(--muted)}
.h5{font-size:1rem;margin:.25rem 0 .5rem}
.muted{color:var(--muted)}
.small{font-size:.92rem}

/* --- Header / Navigation --- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:#111827}
.brand img{filter: drop-shadow(0 0 6px rgba(245,158,11,.35));}

#site-nav{display:flex;gap:0.5rem;align-items:center}
#site-nav a{
  padding:.45rem .65rem;border-radius:.6rem;color:#374151;
  border:1px solid transparent;
}
#site-nav a:hover{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.22)}
#site-nav a.active{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#1f2937;font-weight:700;border-color:transparent;
}

.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#111827;margin:5px 0}

/* --- Hero --- */
.hero{
  padding:4.5rem 0 2.5rem;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(245,158,11,.22), transparent),
    radial-gradient(900px 400px at 85% 0%, rgba(251,191,36,.22), transparent);
}
.hero-inner{display:grid;gap:2rem;grid-template-columns:1.2fr .8fr;align-items:center}
.hero .btn{margin-right:.5rem}

/* --- Cards / blocs --- */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.25rem;
  box-shadow: 0 8px 24px rgba(17,24,39,.06);
}
.stats .statlist{list-style:none;margin:0;padding:0}
.statlist li{
  display:flex;align-items:center;justify-content:space-between;
  padding:.35rem 0;border-bottom:1px dashed rgba(17,24,39,.08)
}
.statlist li span{color:var(--muted)}

/* --- Grids --- */
.grid-2{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr}
.grid-3{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr 1fr}

.linkcard{display:block}
.linkcard h3{margin:.25rem 0 .25rem}
.linkcard p{color:var(--muted);margin:0}

/* --- Sections / tables / forms --- */
.page-header{
  padding:3rem 0 1rem;
  border-bottom:1px solid var(--border);
  background:var(--bg-soft);
}

.table-responsive{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.6rem;border-bottom:1px solid var(--border);text-align:left}
.table thead th{color:#9a6b00;border-bottom:2px solid rgba(245,158,11,.45)}

.form .form-row{margin-bottom:1rem}
.form label{display:block;margin-bottom:.4rem}
.form input,.form textarea{
  width:100%;
  padding:.7rem .9rem;
  color:#111827;background:#fff;
  border:1px solid var(--border);
  border-radius:.8rem;outline:none;
}
.form input:focus,.form textarea:focus{
  box-shadow:0 0 0 4px var(--ring);
  border-color:rgba(245,158,11,.7)
}

/* --- Boutons --- */
.btn{
  display:inline-block;padding:.7rem 1rem;border-radius:.8rem;
  border:1px solid var(--border);color:#1f2937;background:#fff;
  transition:transform .05s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);background:#fff7ea;border-color:rgba(245,158,11,.35)}
.btn-primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#111827;border-color:transparent;font-weight:700;
}

/* --- Alerts --- */
.alert{padding:.9rem 1rem;border-radius:.7rem;margin-bottom:1rem}
.alert.success{background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.35)}
.alert.error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35)}

/* --- Lists --- */
.check, .arrow{padding-left:1.1rem}
.check li, .arrow li{margin:.35rem 0}
.check li{list-style: "✓ " outside}
.arrow li{list-style: "› " outside}

/* --- Maps --- */
.map-embed iframe{
  border-radius:14px;
  box-shadow: 0 8px 22px rgba(17,24,39,.08);
  border:1px solid var(--border);
}

/* --- Footer --- */
.site-footer{
  margin-top:3rem;padding:2.5rem 0 0;
  border-top:1px solid var(--border);
  background:var(--bg-soft);
}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:.25rem 0}
.footer-bottom{
  border-top:1px solid var(--border);
  padding:1rem 0;margin-top:1rem;color:var(--muted)
}

/* --- Responsive --- */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  #site-nav{
    display:none;position:absolute;right:20px;top:56px;
    background:#fff;border:1px solid var(--border);
    padding:.75rem;border-radius:12px;flex-direction:column;min-width:220px
  }
  .nav-toggle{display:block}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}