/* ==========================================================================
   Match & Party — Unified Platform Stylesheet
   Brand look from main site (dark cacao + gold)
   Fonts: Cinzel (titles) + Poppins (body)
   ========================================================================== */

/* --------------------------------------------------
   Root Theme Variables
-------------------------------------------------- */
:root{
  /* Brand */
  --brand-bg: #282118;                 /* cacao */
  --brand-bg-2: #1f1a13;               /* darker */
  --brand-light: #EAE0D5;              /* light section bg */
  --brand-text: #F3F4F6;               /* on dark */
  --brand-text-dark: #1B1B1B;          /* on light/gold */
  --brand-gold: #C0A062;

  /* UI */
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.12);
  --glass: rgba(0,0,0,.32);
  --radius: 16px;
  --shadow: 0 10px 40px rgba(0,0,0,.35);

  /* Accents (status) */
  --ok: #22C55E;
  --warn: #EAB308;
  --danger: #EF4444;

  /* Typography */
  --font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-head: 'Cinzel', Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------
   Base
-------------------------------------------------- */
html{ scroll-behavior: smooth; }
*,*::before,*::after{ box-sizing: border-box; }

html,body{ height:100%; }
body.mp-body,
body.mp-has-fixed-header{
  font-family: var(--font-body);
  background: var(--brand-bg);
  color: var(--brand-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--brand-gold); text-decoration: none; }
a:hover{ opacity:.9; }

/* Media */
img,video{ max-width:100%; height:auto; display:block; border-radius: 12px; }

/* --------------------------------------------------
   Page layout
-------------------------------------------------- */
.wrap{ max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width:768px){ .wrap{ padding-inline: 3rem; } }

.mp-main{ padding: 1.5rem 0 2.5rem; }
@media (min-width:768px){ .mp-main{ padding: 2.25rem 0 3.25rem; } }

/* Sections, tones & separators (match main site) */
.section-wrap{ position: relative; isolation: isolate; }
.section-wrap[data-tone="dark"]{ background: var(--brand-bg); }
.section-wrap[data-tone="darker"]{ background: var(--brand-bg-2); }
.section-wrap[data-tone="light"]{ background: var(--brand-light); color: #282118; }
.section-inner{ max-width:72rem; margin-inline:auto; padding:3rem 1.5rem; }
@media (min-width:768px){ .section-inner{ padding:4rem 3rem; } }

.sep-top{ border-top: 1px solid var(--line); }
.sep-bottom{ border-bottom: 1px solid var(--line); }
.elevate{
  background: var(--glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
}

/* --------------------------------------------------
   Typography
-------------------------------------------------- */
.hero-title, .section-title, .event-title, .title{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}

.hero-title{
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height:1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.section-title{
  font-size: clamp(2rem, 7vw, 2.4rem);
  line-height:1.2;
  margin-bottom:.6rem;
}
.section-title.section-underline::after{
  content:""; display:block; width:80px; height:4px; margin-top:.6rem;
  background: var(--brand-gold); border-radius:9999px;
}

.hero-sub{ color: rgba(255,255,255,.78); }
.text-glow{ text-shadow: 0 1px 6px rgba(0,0,0,.55); }

.muted{ color: rgba(255,255,255,.7); }
.small{ font-size:.88rem; }

/* --------------------------------------------------
   Buttons
-------------------------------------------------- */
.btn{
  --pad-x: 1rem;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.6rem var(--pad-x);
  border-radius:12px;
  border:1px solid var(--line);
  background: transparent;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none;
}
.btn:hover{ background: rgba(255,255,255,.06); }

/* Keep primary buttons gold on hover/focus/active */
.btn-primary{
  background: var(--brand-gold);
  border: none;
  color: var(--brand-text-dark); /* black label */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--brand-gold);   /* stay gold */
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: var(--brand-text-dark);   /* keep text readable */
}
.btn-primary:active{
  filter: brightness(0.98);
  transform: translateY(0);
}

.btn-ghost{
  border-color: var(--brand-gold);
  color: var(--brand-gold);
}
.btn-ghost:hover{ background: rgba(192,160,98,.15); }

.btn-accent{
  background: rgba(192,160,98,.18);
  border-color: var(--brand-gold);
  color: #fff;
}
.btn-solid-light{
  background: rgba(255,255,255,.10);
  border-color: var(--line);
  color:#fff;
}
.button-text-black{ color:#000 !important; } /* for gold CTAs with black label */

/* Special generator button (admin/new_event) */
.btn-gen{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem; border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px dashed var(--line);
  color:#fff; cursor:pointer;
}
.btn-gen__icon{ font-size:1rem; }

/* --------------------------------------------------
   Cards & surfaces
-------------------------------------------------- */
.card{
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
}
.card-narrow{ max-width: 560px; margin-inline:auto; }

/* --------------------------------------------------
   Breadcrumb & Subnav (admin/event detail)
-------------------------------------------------- */
.nav-bc{
  background: var(--brand-bg-2);
  border-bottom:1px solid var(--line);
  color: rgba(255,255,255,.8);
  font-size:.95rem;
}
.nav-bc .nav-link{ color: rgba(255,255,255,.8); }
.nav-bc .nav-link:hover{ color:#fff; }
.nav-bc .you{ color:#fff; font-weight:600; }
.nav-bc .sep{ opacity:.6; margin:0 .5rem; }

.subnav{
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-bottom:.75rem;
}
.subnav-link{
  display:inline-flex; align-items:center;
  padding:.45rem .75rem; border-radius:10px;
  border:1px solid var(--line);
  color: rgba(255,255,255,.85);
  text-decoration:none;
}
.subnav-link:hover{ background: rgba(255,255,255,.06); }
.subnav-link.is-active{
  border-color: var(--brand-gold);
  color:#fff;
  box-shadow: inset 0 0 0 1px var(--brand-gold);
}

/* --------------------------------------------------
   Events grid (home + admin)
-------------------------------------------------- */
.events-grid{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.event-card{
  background: rgba(0,0,0,.24);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.event-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border-color: var(--line-strong);
}
.event-card .media{ aspect-ratio: 16/9; overflow:hidden; }
.event-card .media img,
.event-card .media video{ width:100%; height:100%; object-fit:cover; border-radius:0; }

.event-title{
  font-family: var(--font-head);
  font-size:1.35rem;
  font-weight:700;
  margin:.9rem 1rem .3rem;
  color:#fff;
}

/* Chips */
.chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:0 1rem 1rem;
}
.chip{
  padding:.3rem .65rem;
  font-size:.85rem; font-weight:600;
  border-radius:9999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:#fff;
}
.chip.ok{ background: rgba(34,197,94,.15); border-color:#22c55e55; color:#9AE6B4; }
.chip.soon{ background: rgba(234,179,8,.15); border-color:#eab30855; color:#FDE68A; }
.chip.locked{ background: rgba(239,68,68,.15); border-color:#ef444455; color:#FCA5A5; }

/* Buttons row */
.btn-row{ display:flex; gap:.6rem; padding:0 1rem 1.1rem; }

/* “Complet” badge */
.badge-soldout{
  position:absolute; top:12px; left:12px;
  background:#DC2626; color:#fff;
  font-weight:800; font-size:12px; letter-spacing:.08em;
  padding:6px 10px; border-radius:9999px; text-transform:uppercase;
}

/* --------------------------------------------------
   Forms
-------------------------------------------------- */
.form{ display:flex; flex-direction:column; gap:.9rem; }
.label{ font-weight:600; font-size:.95rem; margin-bottom:4px; }
.input, select, textarea{
  width:100%; padding:.6rem .8rem;
  border-radius:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color:#fff; font-family:inherit; font-size:1rem;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.input:focus, select:focus, textarea:focus{
  outline:none; border-color: var(--brand-gold);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(192,160,98,.25);
}
.inline{ display:flex; gap:.6rem; align-items:center; }
.help{ color:rgba(255,255,255,.7); font-size:.85rem; }

/* Form badges (slug status) */
.badge{
  display:inline-block; padding:3px 8px; border-radius:8px;
  border:1px solid var(--line); color:rgba(255,255,255,.8); background: rgba(255,255,255,.06);
  font-size:.82rem;
}
.badge.neutral{ color:rgba(255,255,255,.8); }
.badge.free{ color: var(--ok); border-color:#22c55e55; }
.badge.taken{ color: var(--danger); border-color:#ef444455; }
.badge.error{ color: #f97316; border-color:#f9731655; }

/* Rows */
.row2, .row3{ display:grid; gap:1rem; }
.row2{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.row3{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* --------------------------------------------------
   Dashboard tiles
-------------------------------------------------- */
.grid{
  display: grid;
  gap: 1rem;
  margin: 0;           /* remove UL margin */
  padding-left: 0;     /* remove UL padding (default indent) */
  list-style: none;    /* remove bullets */
}

/* Safety: ensure tiles never show list markers */
.grid li,
.tile{ list-style: none; }

.tile{
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1rem 1.2rem;
}
.tile-head{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:700; color: var(--brand-gold);
  margin-bottom:.5rem;
}
.tile .label{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.03em;
  color:rgba(255,255,255,.7);
}
.tile .name{ font-size:1.1rem; font-weight:700; }

/* --------------------------------------------------
   Alerts / Errors
-------------------------------------------------- */
.err{
  background: rgba(239,68,68,.15);
  border:1px solid rgba(239,68,68,.4);
  color:#fca5a5; border-radius:10px; padding:.85rem 1rem; text-align:center;
}
.err-emoji{ font-size:3rem; }
.err-title{
  font-family: var(--font-head);
  font-size:1.9rem; margin:.6rem 0; color:#fff;
}
.err-msg{ color:rgba(255,255,255,.8); }

/* --------------------------------------------------
   Progress bars (compat mobile)
-------------------------------------------------- */
.progress-track{
  height:8px; border-radius:9999px; overflow:hidden;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.progress-men{ height:100%; background: linear-gradient(90deg,#5C78FF,#5873C4); }
.progress-women{ height:100%; background: linear-gradient(90deg,#E67898,#C26684); }
.stats-head{ color: rgba(255,255,255,.8); font-size:11px; }

/* --------------------------------------------------
   Video helpers (9:16)
-------------------------------------------------- */
.video-9x16{
  width:100%; max-width:600px; margin-inline:auto;
  border-radius:12px; overflow:hidden;
}
.video-9x16 video,
.video-9x16 iframe{
  width:100%; height:auto; aspect-ratio:9/16; display:block; border:0;
}
.video-9x16 video{ object-fit:cover; background:#000; }
.video-9x16 iframe{ transform: scale(1.04); transform-origin:center; }
@media (max-width:480px){ .video-9xx16{ max-width:100%; } } /* note: keep as provided */

/* --------------------------------------------------
   FAQ details (if used)
-------------------------------------------------- */
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary{ cursor:pointer; }
.faq-item summary:after{ content:'+'; float:right; font-size:1.5em; line-height:1; }
.faq-item[open] summary:after{ content:'−'; }

/* --------------------------------------------------
   Hero video overlay helper
-------------------------------------------------- */
.hero-video-bg{
  position:absolute; top:50%; left:50%;
  width:100%; height:100%; object-fit:cover;
  transform: translate(-50%,-50%); z-index:-1;
}
.overlay-strong{ position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.55)); z-index:0; }

/* --------------------------------------------------
   Utilities
-------------------------------------------------- */
.hstack{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.center{ text-align:center; }
.mt{ margin-top:.6rem; }
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.92rem; padding:2px 6px; border-radius:6px;
  background: rgba(255,255,255,.08); color:#fff;
}

/* --------------------------------------------------
   Responsive tweaks
-------------------------------------------------- */
@media (max-width:768px){
  .card{ padding:1.2rem 1.4rem; }
  .hero-title{ font-size: clamp(2.2rem, 8vw, 2.6rem); }
  .events-grid{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------
   Nice little entrance
-------------------------------------------------- */
@keyframes fadeInUp{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform: translateY(0);} }
.card, .event-card, .tile{ animation: fadeInUp .5s ease both; }

/* --------------------------------------------------
   Header/footer link harmony (optional small touches)
-------------------------------------------------- */
/* Make active links gold if needed outside header.css */
.nav-link.active, .nav-link.is-active{ color: var(--brand-gold); font-weight:700; }
.lang-switcher a.active{ color: var(--brand-gold); font-weight:700; }


/* --- Contact hero: no blur on content or background --- */
.page-contact .hero-no-blur .card{ backdrop-filter:none; }
.page-contact .hero-no-blur .elevate{ backdrop-filter:none; }
.page-contact .hero-no-blur img{ filter:none !important; }   /* ensure no accidental blur */


/* --- Contact form heading --- */
.page-contact #contact-form .contact-title{
  color:#000;
  font-size: clamp(2.8rem, 6vw, 3.4rem);
  line-height:1.05;
}

/* --- Force two equal columns for the first row on wider screens --- */
@media (min-width: 640px){
  .row-fixed-2{ grid-template-columns: 1fr 1fr !important; }
}

/* --- Inputs on the light section: solid border, white fields --- */
.page-contact #contact-form .form .input,
.page-contact #contact-form select,
.page-contact #contact-form textarea{
  background:#fff;
  color:#282118;
  border:1.5px solid #00000033;      /* visible line around inputs */
  border-radius:12px;
  box-shadow:none;
}

.page-contact #contact-form .form .input:focus,
.page-contact #contact-form select:focus,
.page-contact #contact-form textarea:focus{
  border-color:#000;
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
  background:#fff;
}

/* --- Infos rapides: clean white panel like the mockup --- */
.page-contact .quick-info{
  background:#ffffff;                 /* solid white panel */
  color:#282118;
  border:1px solid #E8E1D7;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  backdrop-filter:none;               /* no glass/blur */
}

.page-contact .quick-title{
  margin:0 0 .5rem;
  font-weight:800;
  font-size:1.3rem;
  color:#282118;
}

.page-contact .quick-list{
  list-style:none; padding-left:0; margin:0;
  display:grid; gap:.45rem; font-size:.97rem; color:#2a241b;
}
.page-contact .quick-list li::before{
  content:"•"; margin-right:.55rem; color:#282118; font-weight:700;
}

.page-contact .quick-newsletter{
  margin-top:1rem; padding:1rem;
  background:#fff;
  border:1px solid #E8E1D7;
  border-radius:12px;
}
.page-contact .quick-newsletter-title{ font-weight:700; margin:0 0 .25rem; }
.page-contact .quick-note{ margin:.25rem 0 .7rem; color:#4b4236; font-size:.92rem; }

.page-contact .quick-contact{ margin-top:1rem; padding:1rem; border:1px solid #E8E1D7; border-radius:12px; background:#fff; }
.page-contact .quick-contact-title{ font-weight:700; margin:0 0 .25rem; color:#282118; }
.page-contact .quick-contact-email a{ font-weight:700; color:#282118; text-decoration:underline; }

html, body { margin:0; padding:0; }   /* add this once */

/* Remove rounding on the full-bleed hero image (and its overlay just in case) */
.page-contact [aria-label="Contact — Hero"] img{ border-radius:0 !important; }
.page-contact [aria-label="Contact — Hero"] .overlay-strong{ border-radius:0; }

/* Visible inputs on light backgrounds (register + matchmaking cards) */
.section-wrap[data-tone="light"] .card-light input,
.section-wrap[data-tone="light"] .card-light select,
.section-wrap[data-tone="light"] .card-light textarea,
.section-wrap[data-tone="light"] .input,
.section-wrap[data-tone="light"] select,
.section-wrap[data-tone="light"] textarea{
  background:#fff !important;
  color:#282118 !important;
  border:1.5px solid rgba(40,33,24,.25) !important; /* visible contour */
  border-radius:12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);               /* subtle lift */
}

/* Focus state: darker border + soft focus ring */
.section-wrap[data-tone="light"] .card-light input:focus,
.section-wrap[data-tone="light"] .card-light select:focus,
.section-wrap[data-tone="light"] .card-light textarea:focus,
.section-wrap[data-tone="light"] .input:focus,
.section-wrap[data-tone="light"] select:focus,
.section-wrap[data-tone="light"] textarea:focus{
  outline:none;
  border-color:#282118 !important;
  box-shadow: 0 0 0 3px rgba(40,33,24,.12);
  background:#fff;
}

/* Placeholder + autofill tweaks for contrast */
.section-wrap[data-tone="light"] ::placeholder{ color:#7c746c; opacity:1; }
.section-wrap[data-tone="light"] input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 30px #fff inset !important;
  -webkit-text-fill-color:#282118 !important;
  caret-color:#282118;
}

/* Uniform gallery tiles */
.gallery{
  display:grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px){
  .gallery{ grid-template-columns: repeat(3, 1fr); }
}

/* Make every tile the same size via aspect ratio */
.gallery img{
  width: 100%;
  aspect-ratio: 4 / 3;              /* pick 16/9, 4/3, or 1/1 */
  height: auto;                      /* height is derived from aspect-ratio */
  object-fit: cover;                 /* crop to fill the box */
  object-position: center;
  border-radius: 12px;
  display: block;

  /* optional: keep your tint/hover */
  filter: sepia(60%);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.gallery img:hover{
  filter: sepia(0%);
  transform: translateY(-2px);
}

/* Action row: wrap nicely */
.row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* On small phones: stack buttons full width for easy tapping */
@media (max-width: 480px){
  .row .btn { flex: 1 1 100%; }
}

/* Long slugs inside <code> shouldn't overflow cards */
.events-grid code { overflow-wrap: anywhere; word-break: break-word; }

/* Slightly smaller card paddings on very small phones */
@media (max-width: 400px){
  .card { padding: 1rem 1.1rem; }
}

/* Slug line: allow wrap on small screens */
#slugAutoWrap { display:flex; gap:.6rem; flex-wrap:wrap; }
#slugAutoWrap .input { flex:1 1 220px; min-width:0; }   /* input can shrink */
#slugStatus { white-space:nowrap; }                      /* keep badge on one line */
#btnEditSlug { flex:0 0 auto; }

/* Bottom actions: stack on phones */
.actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
@media (max-width: 520px){
  .actions .btn-gen,
  .actions .btn-primary,
  .actions .btn { flex:1 1 100%; }   /* full-width tap targets */
}

/* Form controls: guard against overflow on tiny devices */
.input, select, textarea { min-width:0; }     /* prevents overflow from long placeholders */

@media (max-width:400px){
  .btn-gen__text { font-size:.95rem; }
  .card { padding:1rem 1.1rem; }
}

/* --- Fil d’Ariane: passe à la ligne proprement sur mobile --- */
.nav-bc .wrap { display:flex; gap:.5rem; flex-wrap:wrap; }
.nav-bc code, .nav-bc .you { overflow-wrap:anywhere; }

/* --- Subnav: scroll horizontal doux si trop d’onglets --- */
.subnav{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.subnav::-webkit-scrollbar{ display:none; }  /* facultatif */

/* --- Ligne de badges sous le titre: évite l’écrasement --- */
.hero .hstack .badge{ white-space:nowrap; }
@media (max-width:520px){
  .hero .hstack{ gap:.4rem; }
  .hero .hstack .badge{ font-size:.8rem; padding:2px 6px; }
}

/* --- Histogramme: labels plus étroits sur mobile --- */
@media (max-width:520px){
  .hlabel{ width:80px !important; flex:0 0 80px !important; font-size:.9rem; }
  .hval{ width:38px !important; flex:0 0 38px !important; font-size:.9rem; }
  .hbar{ height:12px !important; }
}

/* --- Bloc "Infos & paramètres": actions en ligne qui s’empilent sur mobile --- */
.info-list .hstack{ flex-wrap:wrap; }
@media (max-width:520px){
  .info-list .hstack .btn,
  .info-list .hstack form{ flex:1 1 100%; }
  .info-list .hstack form .btn{ width:100%; } /* boutons des <form> inline */
}

/* --- Inputs & sélecteurs: garde le contrôle dans la largeur --- */
.input, select, textarea{ min-width:0; } /* évite le débordement de placeholder long */

/* --- Sections de formulaire: affiner l’espacement sur très petit écran --- */
@media (max-width:400px){
  .card{ padding:1rem 1.1rem; }
}

/* --- Aperçus média: garantit la largeur et le rognage corrects --- */
#section-visibility img, #section-visibility video{
  width:100%; height:auto; display:block; border-radius:12px; object-fit:cover;
}

/* --- Boutons d’enregistrement en pied de formulaire: pleine largeur si étroit --- */
@media (max-width:520px){
  #section-media form .hstack .btn,
  #section-visibility form .hstack .btn,
  #section-params form .hstack .btn{
    flex:1 1 100%;
  }
}

/* --- Modal suppression: scrollable et confortable sur petits écrans --- */
#deleteModal .card{
  max-width:520px; width:92%;
  max-height:90vh; overflow:auto;   /* scroll interne si besoin */
}
#deleteModal .modal-backdrop{ touch-action:none; } /* évite le scroll arrière-plan */

/* Equal-size admin action buttons */
.btn-row.equal{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: .75rem;
}

@media (max-width: 920px){
  .btn-row.equal{
    grid-template-columns: repeat(2, 1fr); /* stack to 2x2 on smaller screens */
  }
}

@media (max-width: 520px){
  .btn-row.equal{
    grid-template-columns: 1fr; /* full width on phones */
  }
}

/* Make the actual clickable controls fill their grid cell */
.btn-row.equal .btn{
  width: 100%;
  justify-content: center;    /* center icon+text */
  white-space: nowrap;        /* keep one line */
}

/* Ensure forms themselves don't constrain width */
.btn-row.equal form{ width: 100%; }

/* ——— Make all action buttons look identical ——— */

/* 1) Normalize typography across <a> and <button> */
.btn-row.equal .btn,
.btn-row.equal a.btn,
.btn-row.equal button.btn {
  font-family: "Poppins", -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;         /* pick one size and keep it everywhere */
  line-height: 1.2;
  font-weight: 700;        /* same weight for all variants */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  display: inline-flex;    /* align icon/text consistently */
  align-items: center;
  justify-content: center;
  gap: .5rem;

  width: 100%;             /* fill the grid cell */
  min-height: 56px;        /* equal visual height */
  padding: 14px 18px;      /* consistent padding */
  white-space: nowrap;
}

/* 2) Prevent variant classes from changing the font size/weight */
.btn-row.equal .btn.btn-accent,
.btn-row.equal .btn.btn-solid-light {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* 3) Forms shouldn’t constrain width */
.btn-row.equal form { width: 100%; }