:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#4b5563;
  --pink:#c2186b;
  --panel:#f6f7fb;
  --border:#e5e7eb;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}
@font-face{
  font-family:"Font Awesome 6 Brands";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src: local("Font Awesome 6 Brands");
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

a{color:var(--pink);text-decoration:none}
a:hover{text-decoration:underline}

/* Header / nav (layout stable) */
.top{
  border-bottom:1px solid var(--border);
  background:#fff;
  position: relative;
  box-shadow: 0px 8px 9px 0px rgba(0, 0, 0, 0.25);
}

/* IMPORTANT: évite gros CLS en réservant une hauteur */
.top .inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:80px; /* réserve l’espace du logo */
}

.brand{font-weight:900}

.nav{display:flex;flex-wrap:wrap;gap:10px}
.nav a{
  padding:8px 10px;
  border-radius:12px;
  color:#fff;
  transition: all .5s ease;
}
.nav a:hover{background: #c2186b}

/* Contenu principal */
.wrap{max-width:1100px;margin:0 auto;padding:18px}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}

.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width: 900px){.grid{grid-template-columns:1fr 1fr}}

h1{font-size:22px;margin:0 0 10px;color: #c2186b;}
h2{font-size:18px;margin:0 0 10px;color: #c2186b;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(232,48,138,.35);
  background:rgba(232,48,138,.10);
  color:var(--pink);
  cursor:pointer;
  transition: all .5s ease;
}
.btn:hover{background:rgba(232,48,138,.14)}
.btn.secondary{border-color:var(--border);background:#fff;color:var(--text)}

.input, textarea, select{
  width:100%;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}
textarea{min-height:110px;resize:vertical}
label{display:block;margin:10px 0 6px;color:var(--muted);font-weight:700;font-size:13px}

.table{width:100%;border-collapse:collapse;margin-top:10px;overflow:hidden;border-radius:12px;background:#fff}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
.table th{color:var(--muted);font-weight:800;text-align:left}
.badge{display:inline-flex;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}

/* Accessibilité */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 14px;
  z-index:9999;
  background:#000;
  color:#fff;
  border-radius:8px;
}