/* =========================
   Variables (fallbacks)
   ========================= */
:root{
  --card-bg: #fff;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.12);
  --brand-green: #7fbf00;
  --brand-green-600: #6aa200;
  --muted: #6b7280;
  --ink: #1f2937;
  --teal-50: #e0f2f1;
  --teal-100: #b2dfdb;
}

/* =========================
   Wrappers / Cards
   ========================= */
.dash-wrap{ max-width:980px; margin:24px auto 48px; padding:0 12px; }

.dash-card{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  margin-bottom:16px;
}

.dash-title{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:0 0 10px;
  font-size:clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem);
  text-align:center;
}

/* =========================
   Inscriptions (liste)
   ========================= */
.active-list{ list-style:none; margin:0; padding:0; }

.active-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px 12px;
  margin:8px 0;
  background:#fff;
}

.active-item .meta{ font-size:1.5rem; color:#374151; }
.active-item .name{ font-weight:800; color:#0f3d33; }
.active-item .sub{ color:#6b7280; font-size:1.4rem; }

/* Pills (status) – single source of truth */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:.28rem .65rem;
  border-radius:999px;
  font-size:1.3rem;
  font-weight:700;
  border:1px solid transparent;
  white-space:nowrap;
}
.pill-wait{ background:#fff7ed; color:#9a3412; border-color:#fdba74; }
.pill-need{ background:#fffbeb; color:#92400e; border-color:#fcd34d; }
.pill-pay { background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.pill-ok  { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }

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

/* Buttons (ghost/solid) */
.btn-ghost, .btn-solid{
  display:inline-block;
  text-decoration:none;
  font-weight:800;
  border-radius:10px;
  padding:.5rem .85rem;
  font-size:1.3rem; /* uniforme */
}
.btn-ghost{ border:1px solid #d1d5db; color:#374151; background:#fff; }
.btn-ghost:hover{ background:#f3f4f6; }
.btn-solid{ background:var(--brand-green); color:#fff; border:0; }
.btn-solid:hover{ background:var(--brand-green-600); color:#fff; }

/* =========================
   Grille de choix (épreuves)
   ========================= */
.grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(12, 1fr);
}
.grid > a{
  grid-column: span 6;
  text-decoration:none;
  border-radius:14px;
  padding:16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition: transform .15s ease;
}
.grid > a:hover{ transform: translateY(-2px); }

.tile{ display:flex; flex-direction:column; gap:2px; color:#0f3d33; }
.tile .tt{ font-weight:900; letter-spacing:.02em; font-size:1.5rem; }
.tile .sub{ color:#6b7280; font-size:1.4rem; }

.tag{
  background:#0ea5a4; color:#fff; font-weight:800;
  border-radius:10px; padding:.35rem .6rem;
  font-size:1.25rem; white-space:nowrap;
}
.tag-dark{ background:#22313f; }
.tag-sec{  background:#1f7a8c; }

@media (max-width:768px){
  .grid > a{ grid-column:1 / -1; padding:18px; }
  .active-item{ padding:12px 14px; }
}

/* =========================
   Encadré d’info (registration-like)
   ========================= */
.note-pps{
  background:#fff;
  border:1px solid #e5e7eb;
  border-left:4px solid var(--brand-green);
  border-radius:12px;
  padding:14px 16px;
  margin:12px auto 16px;
  color:#374151;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  max-width:680px;
  font-size:1.4rem;
}
.note-pps strong{ font-weight:800; }
.note-pps a{ color:#0ea5a4; font-weight:700; text-decoration:none; }
.note-pps a:hover{ text-decoration:underline; }

/* =========================
   Page hero / CTA / countdown
   ========================= */
.page-wrap{ padding-top:24px; padding-bottom:32px; }

.card{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px;
}

.eyebrow{ color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.08em; }

.hero-title{
  font-weight:900;
  font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  text-transform:uppercase;
  margin-bottom:5px;
  font-family: Heroes;
}
.hero-sub{ color:#ED6D44; font-size:25px; margin-bottom:24px; }

.hero-card{
  background: linear-gradient(to bottom right, #f3faf6, #edf6ff);
  padding:24px; display:grid; gap:10px;
}
.hero-card p{ margin:0; color:var(--ink); }
.hero-badges .badge {
	background: #7fbf00;
	color: #fff;
	padding: .7rem .85rem;
	border-radius: .5rem;
	font-weight: 700;
	margin-right: .35rem;
}
.hero-badges .badge.alt{ background:#1f7a8c; color:#fff; }
.hero-badges .badge.warn{ background:#374151; color:#fff; }

.btn-cta{
  border-radius:16px; font-weight:800; padding:14px 22px; font-size:1.05rem;
  background:var(--brand-green); color:#fff; border:none; box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.btn-cta:hover{ background:var(--brand-green-600); color:#fff; }

.flyer-home{ width:100%; height:auto; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.15); }

/* Countdown (full width) */
#countdown-section{ margin:18px 0 26px; }
.countdown-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:768px){ .countdown-grid{ grid-template-columns:1fr 1fr; } }

.countdown-container{
  background: linear-gradient(to bottom right, var(--teal-50), var(--teal-100));
  border-radius: var(--radius);
  padding:16px;
}
.countdown-block{
  background:#fff; border-left:6px solid #009688;
  border-radius:10px; padding:12px 14px; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.countdown-block h3{
  margin:0 0 6px 0; font-size:1rem; color:#046c63;
  display:flex; align-items:center; gap:8px;
}
.countdown{ font-size:1.25rem; font-weight:800; letter-spacing:.03em; }

/* Countdown big */
.countdown-card{
  background: linear-gradient(to bottom right, var(--teal-50), var(--teal-100));
  padding:28px 28px 32px; display:grid; gap:10px;
}
.countdown-card .countdown-header{
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-weight:700; color:#046c63; letter-spacing:.02em;
}
.countdown-card .countdown{
  text-align:center; font-weight:900; font-variant-numeric:tabular-nums;
  line-height:1.05; font-size:clamp(2rem, 4.5vw, 4rem);
  padding:6px 0 2px; color:#003d37; text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.countdown-card .countdown .chip{
  display:inline-block; padding:.15rem .45rem; margin:0 .15rem;
  border-radius:.5rem; background:rgba(255,255,255,.65);
}

/* CTA */
.cta-container{ text-align:center; margin:20px 0 30px; }
.cta-button{
  display:inline-block;
  background: linear-gradient(to bottom right, #58d65c, #32b332);
  color:#fff; font-size:clamp(1.5rem, 2vw, 1.5rem);
  font-weight:700; padding:14px 32px; border-radius:50px;
  text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.2);
  transition: all .25s ease;
}
.cta-button:hover{
  background: linear-gradient(to bottom right, #46c24b, #299b29);
  box-shadow: 0 6px 14px rgba(0,0,0,.25); color:#fff; text-decoration:none;
}

.cta-button-2{
  display:inline-block;
  background: linear-gradient(to bottom right, #5899d6, #1c71bf);
  color:#fff; font-size:clamp(1.5rem, 2vw, 1.5rem);
  font-weight:700; padding:14px 32px; border-radius:50px;
  text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.2);
  transition: all .25s ease;
}
.cta-button-2:hover{
  background: linear-gradient(to bottom right, #1c71bf, #0a569c);
  box-shadow: 0 6px 14px rgba(0,0,0,.25); color:#fff; text-decoration:none;
}

.btn-cta-outline{
  display:inline-block; padding:.45rem .9rem; border-radius:999px;
  border:2px solid var(--brand-green); color:#2c3e50; font-weight:700; text-decoration:none;
}
.btn-cta-outline:hover{ background:var(--brand-green); color:#fff; }

/* =========================
   Infos pratiques (listes)
   ========================= */
.infos-pratiques ul{ list-style:none; padding:0; margin:0; }
.infos-pratiques li{ margin:.4em 0; }
.infos-pratiques li i{ margin-right:8px; }

/* Liste avec colonne icône fixe */
.infos-list{
  list-style:none; margin:0; padding:0; text-align:left;
}
.infos-list > li{
  display:grid; grid-template-columns:32px 1fr; column-gap:10px;
  align-items:start; margin:.55rem 0;
}
.infos-list > li i,
.infos-list > li .fa-stack{
  justify-self:center; font-size:1.25rem; line-height:1;
  width:1.25em; height:1.25em; display:inline-grid; place-items:center;
}
.infos-list > li .fa-stack{ width:1.6em; height:1.6em; }
.infos-list > li .fa-stack .fa-stack-1x{ font-size:.95em; }
.infos-list > li .fa-stack .fa-stack-2x{ font-size:1.2em; }
.infos-list > li .li-text{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:768px){
  .infos-list > li{ grid-template-columns:28px 1fr; column-gap:8px; margin:.5rem 0; }
  .infos-list > li i, .infos-list > li .fa-stack{
    font-size:1.5rem; width:1.35em; height:1.35em;
  }
}

/* =========================
   Auth / Registration styles
   ========================= */
.auth-wrap{ max-width:780px; margin:32px auto 48px; padding:0 12px; }

.auth-card{
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding:24px;
  margin-top:100px;
}
.auth-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 8px; }
.auth-header h1{ margin:0; font-weight:900; letter-spacing:.02em; font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.auth-divider{ height:1px; background:#e5e7eb; border:0; margin:12px 0 18px; }

.auth-card .form-group, .auth-card .form-row, .auth-card .form-control{ width:100%; }
.auth-card label{ font-weight:600; color:#374151; margin-bottom:6px; }
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"]{
  background:#fff; border:1px solid #d1d5db; border-radius:10px;
  padding:.7rem .9rem; font-size:1rem; width:100%;
}
.auth-card input:focus{ outline:none; border-color:var(--brand-green); box-shadow:0 0 0 3px rgba(127,191,0,.2); }

.auth-actions{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.btn-primary-auth{
  background:var(--brand-green); color:#fff; border:0; font-weight:800;
  padding:.8rem 1.2rem; border-radius:12px; cursor:pointer;
}
.btn-primary-auth:hover{ background:var(--brand-green-600); color:#fff; }

.auth-alt{ margin-top:18px; font-size:.95rem; color:#6b7280; }
.auth-alt .link{ color:#0ea5a4; text-decoration:none; font-weight:600; }
.auth-alt .link:hover{ text-decoration:underline; }

.auth-alert{
  background:#f8fafc; border:1px solid #e5e7eb; border-left:4px solid var(--brand-green);
  border-radius:10px; padding:14px 16px; margin:18px auto 0; color:#374151;
}
.auth-alert .title{ font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.auth-alert .title i{ color:#ef4444; }
.auth-alert a{ color:#0ea5a4; font-weight:600; text-decoration:none; }
.auth-alert a:hover{ text-decoration:underline; }

.btn-google{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #d1d5db; background:#fff; color:#374151;
  border-radius:10px; padding:.6rem .9rem; text-decoration:none; font-weight:700;
}
.btn-google:hover{ background:#f3f4f6; }

@media (max-width:640px){
  .auth-card{ padding:16px; }
  .auth-actions{ flex-direction:column; align-items:stretch; }
  .btn-google{ justify-content:center; }
}

/* =========================
   Form shell + sections
   ========================= */
.form-shell{ max-width: 860px; margin: 28px auto 40px; padding: 0 12px; }
.form-card{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 18px;
}
.page-title{
  text-align:center; margin: 2px 0 14px;
  font-weight: 900; letter-spacing:.02em;
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  color:#3b0764;
}

/* Sections */
.section{
  border:1px solid #e5e7eb; border-radius: 12px; background:#fff;
  padding: 12px; margin-bottom: 14px;
}
.section .section-title{
  background:#2f7f7a; color:#fff; font-weight:800;
  border-radius:8px; padding:.5rem .75rem; margin:-6px -6px 10px;
  font-size:1.4rem;
}

/* Form UI */
.form-group{ margin-bottom:12px; }
label{ font-weight:600; color:#374151; margin-bottom:6px; }
.form-control{
  width:100%; padding:.7rem .85rem; font-size:1.4rem;
  border:1px solid #d1d5db; border-radius:10px; background:#fff;
}
.form-control:focus{
  outline:none; border-color:#7fbf00; box-shadow:0 0 0 3px rgba(127,191,0,.2);
}
.has-error .form-control{ border-color:#ef4444; }
.has-error .form-control:focus{ box-shadow:0 0 0 3px rgba(239,68,68,.2); }

/* Inline help/info */
.info-inline{
  background:#fff; border:1px solid #e5e7eb; border-left:4px solid #7fbf00;
  border-radius:12px; padding:10px 12px; color:#374151;
  box-shadow:0 8px 22px rgba(0,0,0,.08); margin: 8px 0 12px;
  font-size:1.4rem;
}
.info-inline a{ color:#0ea5a4; font-weight:700; text-decoration:none; }
.info-inline a:hover{ text-decoration:underline; }

/* Address toggle */
.address-2{ display:none; }
.address-2-link{
  display:inline-block; margin:6px 0 0; color:#0ea5a4; font-weight:700; text-decoration:none;
}
.address-2-link:hover{ text-decoration:underline; }

/* CTA */
.form-actions{ text-align:center; margin-top:14px; }
.btn-primary{
  background:#1f2937; color:#fff; border:0;
  font-weight:800; padding:.8rem 1.2rem; border-radius:12px; cursor:pointer;
}
.btn-primary:hover{ background:#111827; }

/* Radios alignés proprement */
.inline-radios .form-check{ display:inline-block; margin-right:18px; }

/* Submit gradient */
.btn-submit{
  background: linear-gradient(135deg, #0ea5a4, #007a78);
  color: white;
  border: none;
  padding: 12px 26px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.btn-submit i{ margin-right: 8px; transition: transform 0.3s ease; }
.btn-submit:hover{
  background: linear-gradient(135deg, #13c2c2, #08979c);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.btn-submit:hover i{ transform: translateX(4px); }
.btn-submit:active{ transform: translateY(0); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }

.section-main-title{
  background: linear-gradient(90deg, #009688, #4caf50);
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 10px 15px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  letter-spacing: 0.5px;
}

/* === Documents list modern === */
.docs-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.doc-item{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.doc-icon{ display:grid; place-items:center; font-size:2.4rem; }
.doc-meta .doc-name{ font-weight:800; color:#0f3d33; text-decoration:none; }
.doc-meta .doc-name:hover{ text-decoration:underline; }
.doc-meta .doc-sub{ font-size:.9rem; color:#6b7280; margin-top:2px; }
.doc-actions{ display:flex; gap:8px; }
.doc-btn{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:#f3f4f6; color:#374151; text-decoration:none;
  border:1px solid #e5e7eb;
}
.doc-btn:hover{ background:#e5e7eb; }
.doc-btn.danger{ background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.doc-btn.danger:hover{ background:#fee2e2; }

/* === Upload box (no overflow) === */
.upload-box{
  background:#fff; border:1px dashed #cbd5e1;
  border-radius:14px; padding:16px;
  text-align:center;
  max-width: 640px;
  margin: 0 auto;
}
.upload-illustration{ font-size:2rem; color:#0ea5a4; margin-bottom:6px; }
.upload-text{ font-weight:700; color:#0f3d33; }
.upload-input{ margin:10px auto 6px; max-width: 420px; }
.upload-hint{ font-size:.9rem; color:#6b7280; }

/* Mobile love */
@media (max-width: 640px){
  .doc-item{ grid-template-columns: 36px 1fr auto; padding:10px; }
  .upload-input{ max-width:100%; }
}

/* === Upload bleu différencié === */
.upload-box.blue{
  background:#e0f2fe;
  border:1px solid #93c5fd;
  border-radius:14px;
  padding:18px;
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.upload-box.blue .upload-illustration{ font-size:2rem; color:#2563eb; margin-bottom:6px; }
.upload-box.blue .upload-text{ font-weight:700; color:#1e3a8a; margin-bottom:10px; }
.upload-box.blue .upload-input{ margin:10px auto 14px; max-width:420px; }
.upload-box.blue .upload-hint{ font-size:.9rem; color:#1e40af; margin-bottom:12px; }

/* bouton bleu */
.btn-submit.blue{
  background:#2563eb;
  border:none;
  color:#fff;
  font-weight:600;
  padding:8px 18px;
  border-radius:8px;
  cursor:pointer;
  transition:all .2s ease;
}
.btn-submit.blue:hover{ background:#1e40af; }

/* Ligne input + bouton bien alignée — (version finale centrée) */
.upload-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Largeur raisonnable pour l'input fichier */
.upload-file-input{
  max-width: 360px;
  width: 100%;
}

/* Bouton bleu — on force la couleur même si Bootstrap traîne */
.btn-upload,
input[type="submit"].btn-upload{
  background: #2563eb !important;
  border: 1px solid #1e40af !important;
  color: #fff !important;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn-upload:hover,
input[type="submit"].btn-upload:hover{
  background: #1e40af !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.16);
  transform: translateY(-1px);
}

/* Ajustement d’espacement + centrage pour hints génériques */
.upload-hint{
  font-size: .9rem;
  color: #1e40af;
  text-align: center;
  margin-top: 10px;
}

/* Mobile */
@media (max-width: 520px){
  .upload-file-input{ max-width: 100%; }
}

#inscription_mm19_file_FileName {
	margin-top: 42px;
}

.btn-promo,
input[type="submit"].btn-upload{
  background: #aaa !important;
  border: 1px solid #aaa !important;
  color: #fff !important;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  margin-left: 10px;
}
.btn-promo:hover,
input[type="submit"].btn-promo:hover{
  background: #aaa !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.16);
  transform: translateY(-1px);
}

/* Stepper shell */
.stepper {
	--accent: #7fbf00;
	--muted: #9ca3af;
	--ink: #1f2937;
	--done: #10b981;
	--active: #4f46e5;
	background: rgba(255,255,255,.9);
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 10px 12px;
	overflow: hidden;
	max-width: 840px;
	margin: auto;
}

/* Horizontal layout (>=768px) */
.stepper-ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: 0;
  counter-reset: step;
}
.step {
  position:relative; text-align:center; padding:12px 8px;
}
.step:not(:last-child)::after{
  content:""; position:absolute; left:50%; right:-50%; top:28px;
  height:3px; background:#e5e7eb; z-index:0;
}

/* Numbered dots */
.step .dot{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:999px;
  background:#e5e7eb; color:#111827; font-weight:800;
  margin: 0 auto 6px; position:relative; z-index:1;
}
.step .label {
	font-weight: 700;
	font-size: 1.5rem;
	margin-top: 0px;
	padding-top: 0px;
	display: block;
}
/* States */
.step.done .dot{ background: var(--done); color:#fff; }
.step.done .label{ color:#065f46; }
.step.done::after{ background: var(--done); }

.step.active .dot{ background: var(--active); color:#fff; box-shadow:0 0 0 3px rgba(79,70,229,.15); }
.step.active .label{ color:#312e81; }

.step.todo .dot{ background:#e5e7eb; color:#374151; }
.step.todo .label{ color:#6b7280; }

/* Links */
.step a{
  text-decoration:none; color:inherit;
}
.step a:hover .label{ text-decoration:underline; }

/* Mobile: vertical stack */
@media (max-width: 767px){
  .stepper-ul{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .step{
    text-align:left; padding:10px 3px 3px 44px;
  }
  .step::after{ display:block; }
  .step .dot{
    position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; font-size:.9rem;
  }
  .step .label{ font-size: 1.4rem; }
}

/* Mobile only */
@media (max-width: 768px){
  .form-steps{ display:block; }
  .form-steps .step{
    position: relative;            /* indispensable pour ::after */
    padding-bottom: 22px;          /* place pour la flèche */
    margin-bottom: 10px;
  }

/* Classe utilitaire : flèche bas à la place de la barre */
.step::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	transform: translateX(-50%);
	bottom: -12px;
	width: 14px !important;
	height: 14px !important;
	background: no-repeat center/14px 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%2399A3AF'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/></svg>") !important;
}
}

.doc-meta {
  flex: 1 1 auto;
  min-width: 0; /* indispensable si parent en flex */
  display: flex;
  flex-direction: column;
}

/* Le nom de fichier */
.doc-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;        /* clé pour que l'ellipse marche */
  max-width: 100%;     /* évite le débordement */
}

/* Variante deux lignes avec ellipse */
.doc-name--2lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.3;
}

/* Le petit sous-texte */
.doc-sub {
  font-size: 0.85rem;
  color: #666;
}


.card.login {
	max-width: 400px;
	margin: auto;
	margin-top: 100px;
}

.btn-danger-ghost {
	display: inline-block;
	border: 1px solid #fecaca;
	background: #fff;
	color: #b91c1c;
	font-weight: 800;
	border-radius: 10px;
	padding: .4rem .85rem;
	text-decoration: none;
	font-size: 1.4rem;
}
.btn-danger-ghost:hover{
  background:#fef2f2;
}

/* Desktop : ton code existant peut rester tel quel */
.active-item{
  display: grid;
  grid-template-columns: 1fr auto;  /* meta | actions */
  gap: 10px;
}

/* Mobile : on empile et on force l’ordre */
@media (max-width: 768px){
  .active-item{
    grid-template-columns: 1fr;      /* une seule colonne */
    align-items: stretch;
  }
  .active-item .meta{
    grid-column: 1 / -1;             /* pleine largeur */
    grid-row: 1;                     /* au-dessus */
    margin-bottom: 8px;
  }
  .active-item .actions{
    grid-column: 1 / -1;             /* pleine largeur */
    grid-row: 2;                     /* en-dessous */
    justify-self: start;             /* aligne à gauche */
    width: 100%;
    display: flex; gap: 8px; flex-wrap: wrap; /* boutons lisibles */
  }
}