:root{
  --ink:#0f172a;
  --muted:#4B6076;
  --line:rgba(36,69,112,.14);
  --glassA:rgba(255,255,255,.86);
  --glassB:rgba(255,255,255,.58);
  --shadow:0 18px 52px rgba(2,6,23,.14);
  --r:18px;
  --wrap:980px;
  --pad:16px;
  --brandNavy:#244570;
  --brandCyan:#00A0E0;
  --brandGold:#fa0b0b;

  /* ✅ Boutons (nouveau) */
  --btnR:14px;
  --btnShadow: 0 10px 22px rgba(2,6,23,.14);
  --btnShadowHover: 0 14px 30px rgba(2,6,23,.18);
  --btnRing: 0 0 0 4px rgba(0,160,224,.18);
}

*{ 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: linear-gradient(180deg, #EEF8FF, #F3F7FF);
}

.adm-wrap{ width:min(var(--wrap), calc(100% - 2*var(--pad))); margin:0 auto; }

.adm-top{
  position:sticky;
  top:0;
  z-index:50;
  background: linear-gradient(180deg, rgba(36,69,112,.98), rgba(20,40,70,.96));
  border-bottom:3px solid rgba(250,202,11,.85);
  box-shadow:0 10px 30px rgba(2,6,23,.20);
}
.adm-top .adm-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}
.adm-brand{
  color:#fff;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px;
}
.adm-nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ✅ Liens du header → look “bouton propre”, sans bordures crados */
.adm-link{
  -webkit-appearance:none;
  appearance:none;
  color:#fff;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  font-weight:700;
  font-size:11px;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  box-shadow: 0 6px 16px rgba(2,6,23,.14);
}
.adm-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 10px 22px rgba(2,6,23,.18);
}
.adm-link:active{
  transform: translateY(0px);
  box-shadow: 0 6px 16px rgba(2,6,23,.14);
}
.adm-link:focus-visible{
  outline:none;
  box-shadow: var(--btnRing), 0 10px 24px rgba(2,6,23,.18);
}
.adm-link.is-danger{
  border-color: rgba(250, 11, 11, 0.55);
  box-shadow: 0 8px 20px rgba(250,202,11,.10), 0 10px 24px rgba(2,6,23,.18);
}

.adm-main{ padding: 18px 0 30px; }

.adm-card{
  background: linear-gradient(180deg, var(--glassA), var(--glassB));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:16px;
}

.adm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin: 0 0 12px;
}

.adm-h1{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(36,69,112,.95);
}

.adm-form{ display:grid; gap:12px; }
.adm-label{ font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: rgba(15,23,42,.78); }
.adm-input{
  width:100%;
  margin-top:6px;
  border-radius:14px;
  border: 1px solid rgba(36,69,112,.16);
  background: rgba(255,255,255,.82);
  padding: 12px 12px;
  font-weight:700;
  color: rgba(15,23,42,.88);
  outline:none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.adm-input:focus{
  border-color: rgba(0,160,224,.34);
  box-shadow: 0 18px 50px rgba(0,160,224,.14);
  background: rgba(255,255,255,.92);
}

/* ✅ Checkbox / radio : fini le look Windows 98 */
.adm-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color: rgba(15,23,42,.78);
}
.adm-check input[type="checkbox"],
.adm-check input[type="radio"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color: var(--brandCyan);
}

/* =========================
   ✅ BOUTONS PROPRETS (le cœur du fix)
========================= */

/* Base commune à TOUS les boutons/liens “button-like” */
.adm-btn,
.adm-mini{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid transparent;
  outline:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  text-decoration:none;
  font: inherit;
  line-height: 1;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease,
    border-color .12s ease,
    background .12s ease,
    color .12s ease;
}

/* Gros bouton principal */
.adm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius: var(--btnR);
  border-color: rgba(255,255,255,.22);
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;

  /* Gradient + léger “sheen” */
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.22), transparent 52%),
    linear-gradient(135deg, rgba(36,69,112,.98), rgba(0,160,224,.98));

  box-shadow: var(--btnShadow);
}
.adm-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02) saturate(1.02);
  box-shadow: var(--btnShadowHover);
}
.adm-btn:active{
  transform: translateY(0px);
  filter: brightness(.98);
  box-shadow: var(--btnShadow);
}
.adm-btn:focus-visible{
  box-shadow: var(--btnRing), var(--btnShadowHover);
}
.adm-btn:disabled,
.adm-btn[disabled]{
  cursor:not-allowed;
  opacity:.62;
  transform:none;
  filter:none;
  box-shadow:none;
}

/* Variante ghost (propre et “premium”) */
.adm-btn.is-ghost{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  color: rgba(36,69,112,.94);
  border-color: rgba(36,69,112,.16);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}
.adm-btn.is-ghost:hover{
  border-color: rgba(36,69,112,.24);
  box-shadow: 0 14px 30px rgba(2,6,23,.14);
}
.adm-btn.is-ghost:focus-visible{
  box-shadow: var(--btnRing), 0 14px 30px rgba(2,6,23,.14);
}

/* Mini boutons (actions table) */
.adm-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(36,69,112,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
  color: rgba(36,69,112,.92);
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
}
.adm-mini:hover{
  transform: translateY(-1px);
  border-color: rgba(36,69,112,.22);
  box-shadow: 0 12px 26px rgba(2,6,23,.14);
}
.adm-mini:active{
  transform: translateY(0px);
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
}
.adm-mini:focus-visible{
  box-shadow: var(--btnRing), 0 12px 26px rgba(2,6,23,.14);
}

/* Danger (mini) : pas rouge fluo moche, juste “gold warning” clean */
.adm-mini.is-danger{

}
.adm-mini.is-danger:hover{

}

/* ✅ Bonus: enlever les bordures crades sur buttons natifs dans des forms */
button{
  font-family: inherit;
}
button::-moz-focus-inner{
  border:0;
  padding:0;
}

.adm-alert{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(36,69,112,.14);
  font-weight:700;
  margin-bottom:12px;
}
.adm-alert.is-error{
  background: rgba(250,202,11,.14);
  border-color: rgba(250,202,11,.45);
  color: rgba(36,69,112,.95);
}

.adm-muted{ color: rgba(15,23,42,.70); font-weight:700; }

.adm-table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
}
.adm-table th, .adm-table td{
  padding:10px;
  border-bottom:1px solid rgba(36,69,112,.12);
  text-align:left;
  font-size:11px;
}
.adm-table th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: rgba(36,69,112,.92);
}
.adm-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
form{ margin:0; }

.adm-photos{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 980px){
  .adm-photos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.adm-photo{
  border-radius:14px;
  border:1px solid rgba(36,69,112,.12);
  background: rgba(255,255,255,.70);
  padding:10px;
  display:grid;
  gap:8px;
}
.adm-photo img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(36,69,112,.12);
  display:block;
}

.adm-preview{
  margin-top:6px;
  padding:12px;
  border-radius:14px;
  border:1px dashed rgba(36,69,112,.22);
  background: rgba(255,255,255,.60);
}
.adm-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.adm-preview-title{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:11px;
  color: rgba(36,69,112,.92);
}
.adm-preview-count{
  font-weight:700;
  color: rgba(15,23,42,.72);
  font-size:11px;
}

.adm-preview-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 980px){
  .adm-preview-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.adm-prev{
  border-radius:14px;
  border:1px solid rgba(36,69,112,.12);
  background: rgba(255,255,255,.78);
  padding:10px;
  display:grid;
  gap:8px;
}
.adm-prev img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(36,69,112,.12);
  display:block;
}
.adm-prev-meta{
  font-size:11px;
  font-weight:700;
  color: rgba(15,23,42,.72);
  word-break: break-word;
}
/* =========================
   ✅ TABLE ADMIN → RESPONSIVE PRO (mobile = cards)
========================= */
.adm-table{
  width:100%;
  border-collapse:separate;     /* mieux pour arrondis + spacing */
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
}

.adm-table th, .adm-table td{
  padding:10px;
  border-bottom:1px solid rgba(36,69,112,.12);
  text-align:left;
  font-size:13px;
  vertical-align:middle;
}

.adm-table th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: rgba(36,69,112,.92);
  white-space:nowrap;
}

/* Desktop: on force un peu les colonnes "actions" pour éviter le chaos */
.adm-table th:last-child,
.adm-table td:last-child{
  width: 220px;
}

.adm-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Boutons actions: évite qu'ils prennent 3 lignes pour rien */
.adm-mini{
  white-space:nowrap;
}

/* ✅ Mobile : chaque ligne devient une carte lisible */
@media (max-width: 720px){
  .adm-card{ padding:14px; }

  .adm-table,
  .adm-table thead,
  .adm-table tbody,
  .adm-table th,
  .adm-table tr,
  .adm-table td{
    display:block;
    width:100%;
  }

  .adm-table thead{
    /* On cache l’en-tête: les labels viennent de data-label */
    position:absolute;
    left:-9999px;
    top:-9999px;
    height:1px;
    width:1px;
    overflow:hidden;
  }

  .adm-table tbody{
    display:grid;
    gap:12px;
  }

  .adm-table tr{
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
    border:1px solid rgba(36,69,112,.12);
    border-radius:16px;
    box-shadow: 0 10px 22px rgba(2,6,23,.10);
    overflow:hidden;
  }

  .adm-table td{
    border-bottom:1px solid rgba(36,69,112,.10);
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }

  .adm-table td:last-child{
    border-bottom:none;
  }

  .adm-table td::before{
    content: attr(data-label);
    font-size:11px;
    font-weight:950;
    letter-spacing:.05em;
    text-transform:uppercase;
    color: rgba(36,69,112,.78);
    flex: 0 0 auto;
    min-width: 92px;
    padding-top:2px;
  }

  /* Valeur */
  .adm-table td > *{
    flex: 1 1 auto;
  }

  /* Colonne actions: on met en grille, fini le débordement */
  .adm-actions{
    justify-content:flex-start;
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
  }

  /* Si tu as des petits boutons ↑ ↓, on les compacte */
  .adm-actions .adm-mini{
    width:100%;
    justify-content:center;
  }

  /* Colonne titre: autorise retour à la ligne sans casser tout */
  .adm-table td[data-label="Titre"]{
    align-items:flex-start;
  }
}