/* =========================
   RDR2 – add-ligne.css
   (cuir / laiton / parchemin / saloon)
========================= */
:root{
  --bg-0:#070604;
  --bg-1:#0c0906;
  --bg-2:#14100b;

  --panel-0:#15110c;
  --panel-1:#1d170f;

  --paper:#f2e5c9;
  --paper-soft:#e3d2b0;
  --paper-muted:#cbb58c;

  --gold:#c7a04e;
  --gold-strong:#e2c37a;
  --gold-line:rgba(199,160,78,.46);
  --gold-line-soft:rgba(199,160,78,.22);

  --wine:#6e2323;
  --wine-soft:rgba(110,35,35,.12);

  --shadow:0 18px 40px rgba(0,0,0,.62);
  --shadow-2:0 10px 18px rgba(0,0,0,.42);
  --radius:18px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  padding: 22px 16px 90px;
  color: var(--paper);
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(199,160,78,.10), transparent 60%),
    radial-gradient(900px 650px at 82% 88%, rgba(110,35,35,.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--bg-0), var(--bg-2));
  font-family:"Crimson Text", serif;
}

/* ✅ CENTRAGE GLOBAL */
.page-wrap{
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
}

/* =========================
   TITRE
========================= */
h1{
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(199,160,78,.12), transparent 60%),
    linear-gradient(180deg, rgba(18,14,10,.82), rgba(28,22,16,.86));
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow);
  font-family: "Almendra SC", "Cinzel", serif;
  letter-spacing: .6px;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
}

/* =========================
   PANEL PRINCIPAL
========================= */
.panel{
  border-radius: var(--radius);
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(199,160,78,.10), transparent 60%),
    radial-gradient(900px 320px at 86% 100%, rgba(110,35,35,.08), transparent 62%),
    linear-gradient(180deg, rgba(19,15,11,.78), rgba(28,22,16,.86));
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow);
  padding: 14px;
  position: relative;
}

.panel::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: calc(var(--radius) - 8px);
  border: 1px solid var(--gold-line-soft);
  pointer-events:none;
}

.form-block{
  padding: 6px 2px 0;
}

/* =========================
   TEXTES
========================= */
h2{
  margin: 14px 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background:
    radial-gradient(800px 220px at 20% 0%, rgba(199,160,78,.08), transparent 60%),
    rgba(9,7,5,.38);
  border: 1px solid var(--gold-line-soft);
  color: var(--paper-soft);
  font-weight: 600;
  line-height: 1.45;
  font-size: 18px;
}
h2 strong{ color: var(--paper); }

/* =========================
   FORM
========================= */
label{
  display:block;
  margin: 14px 0 6px;
  font-family:"Cinzel", serif;
  letter-spacing: .25px;
  color: var(--paper-soft);
}

input[type="text"],
input[type="number"]{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(199,160,78,.34);
  background:
    radial-gradient(600px 120px at 30% 0%, rgba(199,160,78,.07), transparent 62%),
    rgba(9,7,5,.62);
  color: var(--paper);
  outline:none;
  font-family: "Crimson Text", serif;
  font-size: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}

input::placeholder{ color: rgba(203,181,140,.72); }

input:focus{
  border-color: rgba(226,195,122,.78);
  box-shadow: 0 0 0 3px rgba(199,160,78,.20);
}

/* Erreurs */
.input-error{
  border-color: rgba(200,70,70,.95) !important;
  box-shadow: 0 0 0 3px rgba(200,70,70,.22) !important;
}

/* =========================
   LISTE DE GARES
========================= */
#garesContainer{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(199,160,78,.09), transparent 60%),
    rgba(8,7,5,.36);
  border: 1px solid var(--gold-line-soft);
  position: relative;
}

.gare-entry{
  display:grid;
  grid-template-columns: 1.4fr .9fr 48px;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(8,7,5,.42);
  border: 1px solid rgba(199,160,78,.18);
  margin-bottom: 10px;
}

.gare-entry:last-child{ margin-bottom:0; }

.gare-entry input[type="text"],
.gare-entry input[type="number"]{
  margin:0;
}

/* Mobile */
@media (max-width: 720px){
  .gare-entry{ grid-template-columns: 1fr; }
  .btn-supprimer{ justify-self: end; }
}

/* =========================
   BOUTONS
========================= */
.actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 720px){
  .actions{ grid-template-columns: 1fr; }
}

button{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(199,160,78,.40);
  background:
    radial-gradient(700px 140px at 50% 0%, rgba(199,160,78,.10), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  cursor:pointer;
  font-size: 16px;
  color: var(--paper);
  font-family: "Cinzel", serif;
  letter-spacing: .25px;
  box-shadow: var(--shadow-2);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

button:hover{
  transform: translateY(-1px);
  background:
    radial-gradient(700px 140px at 50% 0%, rgba(110,35,35,.16), transparent 64%),
    linear-gradient(180deg, rgba(199,160,78,.16), rgba(255,255,255,.02));
  border-color: rgba(226,195,122,.84);
  box-shadow: 0 14px 26px rgba(0,0,0,.55);
}

button:active{ transform: translateY(0); }

/* Bouton supprimer */
.btn-supprimer{
  width: 48px;
  height: 48px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid rgba(200,70,70,.55);
  background:
    radial-gradient(120px 120px at 50% 0%, rgba(200,70,70,.22), transparent 65%),
    rgba(20,10,10,.55);
  color: var(--paper);
  font-weight: 800;
  font-family: "Cinzel", serif;
  box-shadow: 0 12px 20px rgba(0,0,0,.45);
}

.btn-supprimer:hover{
  border-color: rgba(200,70,70,.85);
  background:
    radial-gradient(120px 120px at 50% 0%, rgba(200,70,70,.30), transparent 65%),
    rgba(30,12,12,.70);
}

/* =========================
   MESSAGE
========================= */
#message{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--gold-line-soft);
  background:
    radial-gradient(700px 140px at 50% 0%, rgba(199,160,78,.08), transparent 64%),
    rgba(9,7,5,.52);
  color: var(--paper);
  font-family: "Cinzel", serif;
  letter-spacing: .2px;
  min-height: 22px;
}

/* =========================
   FOOTER
========================= */
.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  text-align:center;
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(199,160,78,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,8,6,.92), rgba(18,14,10,.92));
  border-top: 1px solid var(--gold-line);
  color: var(--paper-muted);
  font-family: "Crimson Text", serif;
  box-shadow: 0 -12px 26px rgba(0,0,0,.55);
}

.footer strong{ color: var(--paper); }
.footer-icon{ color: var(--gold-strong); }

/* Sélection texte */
::selection{
  background: rgba(199,160,78,.28);
  color: var(--paper);
}