/* Outils common styles extracted from calculatrice and tracker pages
   Consolidated and deduplicated */
:root{
  --blue:#1a56db;
  --blue-dark:#1340a4;
  --blue-light:#e8efff;
  --green:#16a34a;
  --green-light:#dcfce7;
  --orange:#f59e0b;
  --orange-light:#fffbeb;
  --red:#dc2626;
  --red-light:#fef2f2;
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-400:#9ca3af;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --gray-900:#111827;
  --radius:12px;
  --shadow:0 4px 24px rgba(0,0,0,0.08);
}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--gray-800);background:#fff;margin:0;line-height:1.6;padding:0 0 48px}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:24px}
.layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.layout.two-col{grid-template-columns:2fr 1fr;gap:20px}

/* Hero */
.hero{background:linear-gradient(160deg,#f0f5ff 0%,#fff 50%,#f0fdf4 100%);color:var(--gray-900);padding:36px 28px;border-radius:16px;margin-bottom:24px;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:10px}
.hero p{font-size:1rem;color:var(--gray-600)}

/* Cards */
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:var(--shadow);border:1px solid var(--gray-100)}
.card h2{margin-bottom:16px;font-size:1.1rem}
.card h3{font-size:1rem;font-weight:700;color:var(--gray-900);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card h3 .badge{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:0.7rem;font-weight:800;width:20px;height:20px;border-radius:50%;flex-shrink:0}

/* Resume / summary boxes */
.resume{display:flex;flex-direction:row;gap:12px;align-items:stretch;margin-bottom:24px}
.resume .summary-box{flex:1;padding:16px;border-radius:10px;margin-bottom:12px}
.summary-box h3{font-size:0.8rem;text-transform:uppercase;color:var(--gray-600);margin-bottom:8px}
.summary-box .value{font-size:28px;font-weight:800}
.red{background:#fff5f5;color:var(--red)}
.green{background:var(--green-light);color:var(--green)}
.gold{background:#fffbeb;color:#92400e}
.dark{background:linear-gradient(160deg,#0f172a,#020617);color:#fff}

/* Forms */
label{display:block;margin-bottom:8px;font-weight:600;color:var(--gray-700)}
input,select,textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--gray-200);font-size:1rem}
.trip{border:1px solid var(--gray-200);border-radius:10px;padding:14px;margin-bottom:14px;background:#fff}
.trip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.remove{margin-top:10px;background:transparent;border:none;color:var(--red);font-weight:700;cursor:pointer}
.btn{background:var(--blue);color:#fff;border:none;padding:12px 16px;border-radius:10px;font-weight:700;cursor:pointer}
.btn:hover{background:var(--blue-dark)}

/* Breadcrumb */
.breadcrumb{max-width:760px;margin:88px auto 0;padding:16px 24px 0;font-size:0.82rem;color:var(--gray-400)}
.breadcrumb a{color:var(--gray-400);text-decoration:none}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb span{margin:0 6px}

/* Stats and charts */
.stat{padding:12px;border-radius:10px;margin-bottom:10px;background:var(--gray-50)}
.list{max-height:320px;overflow:auto}
canvas{width:100%;height:180px;display:block}

/* Tracker: steps, timeline, lists */
.step-row{display:grid;grid-template-columns:1fr 170px auto;gap:10px;align-items:end;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.step-row .step-num{font-size:0.7rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.step-row .custom-inp{display:none;margin-top:6px}
.step-remove{background:none;border:1px solid var(--gray-200);border-radius:8px;padding:9px 11px;cursor:pointer;color:var(--red);font-size:0.9rem;line-height:1;align-self:end;transition:background 0.15s}
.step-remove:hover{background:var(--red-light);border-color:var(--red)}
.btn-add-step{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:var(--blue-light);color:var(--blue);border:1.5px dashed var(--blue);border-radius:10px;padding:10px;font-weight:700;font-size:0.9rem;cursor:pointer;margin-top:4px}
.btn-add-step:hover{background:#d4e4ff}
.btn-submit{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:13px 24px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;margin-top:16px}
.btn-submit:hover{background:var(--blue-dark)}

.stat-box{border-radius:10px;padding:14px 16px;margin-bottom:10px}
.stat-box .lbl{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.stat-box .val{font-size:1.9rem;font-weight:800;line-height:1}
.stat-box .sub{font-size:0.74rem;margin-top:4px;opacity:0.75}
.box-blue{background:var(--blue-light);color:var(--blue)}
.box-green{background:var(--green-light);color:var(--green)}
.box-orange{background:var(--orange-light);color:#92400e}

.timeline{position:relative;padding-left:26px}
.timeline::before{content:'';position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--gray-200)}
.tl-item{position:relative;margin-bottom:14px}
.tl-dot{position:absolute;left:-22px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.tl-dot.done{background:var(--green);box-shadow:0 0 0 2px var(--green)}
.tl-dot.pending{background:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.tl-content{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:10px 14px}
.tl-title{font-weight:700;font-size:0.88rem;color:var(--gray-900)}
.tl-date{font-size:0.8rem;color:var(--gray-600);margin-top:2px}
.tl-delay{display:inline-block;margin-top:5px;font-size:0.72rem;font-weight:700;padding:2px 8px;border-radius:50px}
.delay-green{background:var(--green-light);color:var(--green)}
.delay-orange{background:var(--orange-light);color:var(--orange)}

.saved-entry{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:10px 14px;margin-bottom:8px;font-size:0.85rem}
.saved-entry strong{color:var(--gray-900)}
.saved-entry .meta{color:var(--gray-400);font-size:0.77rem;margin-top:2px}
.saved-entry .step-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.step-tag{font-size:0.7rem;font-weight:600;padding:2px 8px;border-radius:50px;background:var(--blue-light);color:var(--blue)}
.btn-voir{background:none;border:none;color:var(--blue);font-weight:700;font-size:0.8rem;cursor:pointer;padding:0;flex-shrink:0}
.empty{color:var(--gray-400);font-size:0.85rem;font-style:italic}
.btn-danger{background:#e53e3e;color:#fff;padding:8px 14px;border-radius:8px;border:none;cursor:pointer;font-weight:700;font-size:0.85rem;margin-top:10px}

/* Utilities */
.hidden{display:none}
.no-mb{margin-bottom:0}
.muted-sm{font-size:0.85rem;color:var(--gray-600);margin-bottom:16px}
.meta-note{font-size:0.72rem;color:var(--gray-400);margin-top:4px}
.flex-between{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.form-row{margin-bottom:25px}
.note{margin-top:10px;color:#6b7280;line-height:1.5}
.note.large{margin-top:20px;opacity:0.85;line-height:1.6}
.eligibility-date{font-size:36px;font-weight:800;margin-top:10px}
.muted{color:var(--gray-600);opacity:0.9}

/* Responsive tweaks */
@media (max-width:900px){
  .nav-links{display:none}
  .hamburger{display:block}
  .trip-grid{grid-template-columns:1fr}
  .resume{flex-direction:column}
  .layout{grid-template-columns:1fr}
}