/* ─────────────────────────────────────────────────────────────
   Cours particuliers
   Les tokens et les composants sont repris de templates/index.html
   (la page de garde), pas de components.css qui habille les pages de
   cours : c'est la DA de la landing que Jordi a validee.
   ───────────────────────────────────────────────────────────── */

:root{
  --blue:#5FAAD9; --blue-h:#4A8FB8; --blue-d:#3D7A9B;
  --teal:#78BFB8; --coral:#F25C5C; --coral-h:#DE4646;
  --gold:#F2BE5C; --gold-h:#E8AC38;
  --ink:#1B2A38; --ink-2:#22374A; --ink-3:#2c3e50;
  --bg:#F5FAFC; --surface:#FFFFFF; --surface-2:#EAF3F8;
  --text:#1B2A38; --muted:#51677A; --border:rgba(27,42,56,.14);
  --shadow:0 10px 30px rgba(27,42,56,.10);
  --shadow-lg:0 24px 60px rgba(27,42,56,.16);
  --radius:1.25rem;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --teal-soft:rgba(120,191,184,.16);
  --coral-soft:rgba(242,92,92,.14);
  --gold-soft:rgba(242,190,92,.20);
  --blue-soft:rgba(95,170,217,.14);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:1rem; line-height:1.65}
h1,h2,h3,h4{margin:0; line-height:1.25; letter-spacing:-.02em; text-wrap:balance; color:var(--text)}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,select,textarea{font:inherit; color:var(--text)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:.4rem}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

.container{max-width:72rem; margin-inline:auto; padding-inline:1.5rem}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── Boutons (identiques a index.html) ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:0; border-radius:999px; padding:.8rem 1.5rem;
  font:inherit; font-weight:700; font-size:1rem; text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-cp{background:var(--blue-d); color:#fff; box-shadow:0 8px 22px rgba(61,122,155,.30)}
.btn-cp:hover{background:#33667f}
.btn-blue{background:var(--blue); color:#fff; box-shadow:0 8px 22px rgba(95,170,217,.32)}
.btn-blue:hover{background:var(--blue-h)}
.btn-hero{background:#fff; color:#1B2A38; box-shadow:0 10px 26px rgba(13,25,34,.28)}
.btn-hero:hover{background:#F2F8FB}
.btn-ghost{background:transparent; color:var(--text); border:2px solid var(--border); padding:.7rem 1.3rem}
.btn-ghost:hover{border-color:var(--blue)}
.btn-sm{padding:.55rem 1.1rem; font-size:.88rem}
.btn-wide{width:100%; justify-content:center}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none}
.btn[disabled]:hover{transform:none}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:50%; color:var(--ink); text-decoration:none; transition:background .15s,color .15s}
.icon-btn:hover{background:rgba(127,127,127,.14); color:var(--blue-d)}
.icon-btn svg{width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.7}

/* ── Barre du haut ── */
.topnav{
  position:sticky; top:0; z-index:50; background:var(--bg);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--border);
}
.topnav-inner{display:flex; align-items:center; gap:1.25rem; padding-block:.85rem}
.brand{display:inline-flex; align-items:baseline; gap:.15rem; font-weight:800; font-size:1.45rem; letter-spacing:-.03em; text-decoration:none; color:var(--text)}
.brand .dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--coral); display:inline-block; transform:translateY(-.1rem)}
.topnav-lead{display:flex; align-items:center; margin-right:auto; min-width:0; margin-left:.4rem}
.topnav-cta{display:flex; gap:.7rem; align-items:center; justify-content:flex-end}
.topnav-link{text-decoration:none; font-weight:600; font-size:.95rem; color:var(--muted); transition:color .15s}
.topnav-link:hover{color:var(--text)}
.lang-switch{display:inline-flex; gap:.05rem; align-items:center}
.lang-switch .lang-opt{font-size:.75rem; font-weight:700; padding:.2rem .45rem; border-radius:6px; text-decoration:none; color:var(--text); opacity:.5; transition:opacity .15s, background .15s}
.lang-switch .lang-opt:hover{opacity:1}
.lang-switch .lang-opt.is-active{opacity:1; background:rgba(127,127,127,.2)}
@media (max-width:62rem){.topnav-lead{display:none}}
@media (max-width:44rem){
  .topnav-cta .topnav-link{display:none}
  .topnav-cta .topnav-link--courses{display:inline}
  .topnav-cta .btn{padding:.55rem .9rem; font-size:.82rem}
  .brand{font-size:1.2rem}
}

/* ── Messages flash ── */
.flashes{display:flex; flex-direction:column; gap:.6rem; padding-top:1.2rem}
.flash{padding:.85rem 1.1rem; border-radius:1rem; font-size:.92rem; font-weight:600}
.flash--success{background:var(--teal-soft); color:#3E857E; border:1px solid rgba(120,191,184,.4)}
.flash--danger{background:var(--coral-soft); color:var(--coral-h); border:1px solid rgba(242,92,92,.35)}
.flash--warning{background:var(--gold-soft); color:#8A6512; border:1px solid rgba(242,190,92,.4)}
.flash--info{background:var(--blue-soft); color:var(--blue-d); border:1px solid rgba(95,170,217,.35)}

/* ── Sections ── */
.section{padding-block:4.5rem}
.section + .section{border-top:1px solid var(--border)}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-d)}
.section h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; margin-top:.6rem}
.lede{color:var(--muted); max-width:60ch; margin-top:.7rem; font-size:1.05rem}

/* ── Les 5 etapes ── */
.steps{display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); margin-top:2.2rem}
.step-n{width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue-d); font-size:.9rem; font-weight:800; margin-bottom:.8rem}
.step h3{font-size:1.02rem; font-weight:700; margin-bottom:.4rem}
.step p{font-size:.92rem; color:var(--muted); line-height:1.6}

/* ── Selecteur ── */
.picker{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-top:2rem; overflow:hidden}
.q{padding:1.7rem 1.9rem; border-top:1px solid var(--border)}
.q:first-child{border-top:0}
.q[hidden]{display:none!important}
.q-head{display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem; flex-wrap:wrap}
.q-n{width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--blue); color:#fff; font-size:.72rem; font-weight:800}
.q-head h3{font-size:1.15rem; font-weight:700}
.q-sub{font-size:.85rem; color:var(--muted); margin-left:auto}
.opts{display:flex; gap:.55rem; flex-wrap:wrap}
.opt{padding:.6rem 1.2rem; border:2px solid var(--border); border-radius:999px; background:var(--surface); font-size:.92rem; font-weight:600; color:var(--muted); transition:border-color .15s,color .15s,background .15s}
.opt:hover{border-color:var(--blue); color:var(--text)}
.opt[aria-pressed="true"],.opt.is-on{border-color:var(--blue); background:var(--blue-soft); color:var(--blue-d); font-weight:700}
label.opt{display:inline-flex; align-items:center; cursor:pointer; user-select:none}
.opt.sm{padding:.45rem 1rem; font-size:.86rem}
.subq{margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid var(--border)}
.subq-label{font-size:.85rem; font-weight:700; color:var(--text); margin-bottom:.7rem; display:block}
.field{width:100%; max-width:26rem; padding:.65rem .85rem; font-size:.95rem; background:var(--surface); border:2px solid var(--border); border-radius:.85rem}
.field:focus{border-color:var(--blue); outline:none}
.radio-cards{display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); max-width:38rem}
.rcard{text-align:left; padding:1rem 1.1rem; border:2px solid var(--border); border-radius:1rem; background:var(--surface); transition:border-color .15s,background .15s,box-shadow .18s}
.rcard:hover{border-color:var(--blue); box-shadow:var(--shadow)}
.rcard[aria-pressed="true"]{border-color:var(--blue); background:var(--blue-soft)}
.rcard b{display:block; font-size:1rem; font-weight:700; margin-bottom:.15rem}
.rcard span{font-size:.84rem; color:var(--muted); line-height:1.45}

.prog{padding:1.8rem 1.9rem; background:linear-gradient(135deg,var(--blue) 0%,var(--teal) 100%); color:#fff; display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap}
.prog-badge{width:3.6rem; height:3.6rem; border-radius:50%; flex:none; display:grid; place-items:center; font-size:1.6rem; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3)}
.prog-body{flex:1; min-width:12rem}
.prog-eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; opacity:.85}
.prog-body h3{font-size:1.35rem; font-weight:800; color:#fff; margin:.25rem 0 .15rem}
.prog-meta{font-size:.95rem; opacity:.93}

/* ── Garanties et recrutement ── */
.guarantees{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:2rem}
.guar{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow)}
.guar-ico{width:2.3rem; height:2.3rem; border-radius:.8rem; display:grid; place-items:center; background:var(--teal-soft); color:#3E857E; font-size:1.05rem; font-weight:700; margin-bottom:.8rem}
.guar h3{font-size:1rem; font-weight:700; margin-bottom:.35rem}
.guar p{font-size:.9rem; color:var(--muted); line-height:1.6}
.recruit{display:flex; gap:1.7rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:2rem 2.2rem; border-radius:var(--radius); margin-bottom:4rem; background:var(--surface-2); border:1px solid var(--border); box-shadow:var(--shadow)}
.recruit h3{font-size:1.25rem; font-weight:800; margin-bottom:.4rem}
.recruit p{font-size:.95rem; max-width:50ch; color:var(--muted)}
.recruit .btn{background:var(--blue-d); color:#fff; box-shadow:0 8px 22px rgba(61,122,155,.30)}
.recruit .btn:hover{background:#33667f}

/* ── Tarifs ── */
.price-cards{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); margin-top:2rem}
.price-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem 1.4rem; text-align:center; box-shadow:var(--shadow)}
.price-card h3{font-size:1.05rem; font-weight:700; color:var(--muted); margin-bottom:.6rem}
.price-card b{display:block; font-size:2.6rem; font-weight:800; color:var(--blue-d); line-height:1}
.price-card span{font-size:.85rem; color:var(--muted)}
.price-list{list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-direction:column; gap:.7rem; max-width:46rem}
.price-list li{font-size:.95rem; color:var(--muted); padding-left:1.4rem; position:relative}
.price-list li::before{content:"·"; position:absolute; left:.4rem; color:var(--blue); font-weight:800}

/* ── Demande : checklist ── */
.demande{display:grid; gap:1.6rem; grid-template-columns:minmax(0,1fr) 20rem; padding:2.4rem 0 4rem; align-items:start}
@media(max-width:58rem){.demande{grid-template-columns:1fr}}
.dm-head{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.3rem}
.dm-head h1{font-size:1.6rem; font-weight:800}
.ref{font-size:.8rem; font-weight:700; color:var(--blue-d); padding:.15rem .7rem; border-radius:999px; background:var(--blue-soft)}
.dm-sub{color:var(--muted); font-size:.95rem; margin-bottom:1.3rem}
.alert{display:flex; align-items:center; gap:.7rem; padding:.85rem 1.1rem; border-radius:1rem; background:var(--coral-soft); color:var(--coral-h); border:1px solid rgba(242,92,92,.3); font-size:.92rem; font-weight:600; margin-bottom:1rem}
.alert.done{background:var(--teal-soft); color:#3E857E; border-color:rgba(120,191,184,.4)}
.list{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.row{display:flex; align-items:center; gap:.9rem; width:100%; text-align:left; padding:.95rem 1.3rem; border-top:1px solid var(--border); transition:background .15s}
.row:first-child{border-top:0}
.row:hover{background:var(--surface-2)}
.dot-st{width:1.35rem; height:1.35rem; border-radius:50%; flex:none; display:grid; place-items:center; font-size:.7rem; font-weight:800; color:#fff}
.dot-st.todo{background:var(--coral)}
.dot-st.ok{background:var(--teal)}
.dot-st.opt{background:transparent; color:var(--muted); border:2px dashed var(--border)}
.row-txt{flex:1; min-width:0}
.row-txt b{display:block; font-weight:700; font-size:.95rem}
.row-txt span{display:block; font-size:.83rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tag{font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .6rem; border-radius:999px; flex:none}
.tag.req{background:var(--coral-soft); color:var(--coral-h)}
.tag.optional{background:var(--surface-2); color:var(--muted)}
.chev{color:var(--muted); flex:none; font-size:1.1rem}

.rail{position:sticky; top:5.5rem; display:flex; flex-direction:column; gap:1rem}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow)}
.panel h3{font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem}
.rate{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; padding:.35rem 0}
.rate span{font-size:.88rem; color:var(--muted)}
.rate b{font-size:1.15rem; font-weight:700; text-align:right}
.rate-note{font-size:.8rem; color:var(--muted); margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--border); line-height:1.55}
.terms{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem}
.terms li{font-size:.85rem; color:var(--muted); padding-left:1.3rem; position:relative; line-height:1.5}
.terms li::before{content:"\2713"; position:absolute; left:0; color:var(--teal); font-weight:800}
.btn-sub{display:block; text-align:center; font-size:.8rem; color:var(--muted); margin-top:.6rem}
.advisor{display:flex; align-items:center; gap:.85rem}
.avatar{width:2.8rem; height:2.8rem; border-radius:50%; flex:none; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue) 0%,var(--teal) 100%); color:#fff; font-size:.95rem; font-weight:700}
.advisor b{display:block; font-size:.95rem; font-weight:700}
.advisor span{display:block; font-size:.82rem; color:var(--muted)}

/* ── Fiches depliables (une section de la checklist) ── */
.sheet{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:1rem; overflow:hidden}
.sheet > summary{list-style:none; cursor:pointer; padding:0}
.sheet > summary::-webkit-details-marker{display:none}
.sheet[open] .chev{transform:rotate(90deg)}
.chev{display:inline-block; transition:transform .18s}
.sheet-body{padding:1.5rem; border-top:1px solid var(--border)}
.sheet-foot{display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.5rem; border-top:1px solid var(--border); background:var(--surface-2)}

.fgrid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.f{display:flex; flex-direction:column; gap:.35rem}
.f.full{grid-column:1/-1}
.f label{font-size:.83rem; font-weight:700}
.f .hint{font-size:.76rem; color:var(--muted); font-weight:400; line-height:1.5}
.f input,.f select,.f textarea{padding:.6rem .8rem; font-size:.92rem; background:var(--surface); border:2px solid var(--border); border-radius:.75rem; width:100%}
.f textarea{min-height:5.5rem; resize:vertical; font-family:inherit}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue); outline:none}
.f input[readonly]{background:var(--surface-2); color:var(--muted)}
.f input:invalid:not(:placeholder-shown){border-color:var(--coral); background:var(--coral-soft)}
.req-star{color:var(--coral); font-style:normal; font-weight:800; margin-left:.15rem}
.inline-unit{display:flex; align-items:center; gap:.6rem}
.inline-unit input{max-width:7rem; padding:.6rem .8rem; font-size:.92rem; background:var(--surface); color:var(--text); border:2px solid var(--border); border-radius:.75rem}
.inline-unit span{font-size:.92rem; color:var(--muted); white-space:nowrap}
.note{display:flex; gap:.6rem; font-size:.85rem; color:var(--blue-d); background:var(--blue-soft); padding:.65rem .85rem; border-radius:.8rem; line-height:1.5}
.checks{display:flex; flex-direction:column; gap:.55rem; margin-top:.2rem}
.check{display:flex; gap:.65rem; align-items:flex-start; font-size:.9rem; line-height:1.5; cursor:pointer}
.check input{margin-top:.2rem; accent-color:var(--blue); width:1rem; height:1rem; flex:none}
.sub-h{font-size:.92rem; font-weight:700; margin:0 0 .6rem}
.sub-block{margin-bottom:1.4rem}
.sub-block:last-child{margin-bottom:0}
.rgpd{font-size:.76rem; color:var(--muted); line-height:1.55; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--border)}

/* ── Grille de disponibilites ── */
.avail{overflow-x:auto; margin-top:.6rem; border:1px solid var(--border); border-radius:1rem}
table.grid{border-collapse:collapse; width:100%; min-width:27rem; font-size:.66rem}
table.grid th{padding:.45rem .25rem; font-weight:700; color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--border)}
table.grid td{padding:0; border:1px solid var(--border)}
table.grid th.h{text-align:right; padding-right:.5rem}
.slot{width:100%; height:1.15rem; display:block; background:transparent; transition:background .12s}
.slot:hover{background:var(--blue-soft)}
.slot[aria-pressed="true"],.slot.is-on{background:var(--teal)}
label.slot{cursor:pointer}

/* ── Mes cours ── */
.filters{display:flex; gap:.5rem; margin:1.6rem 0 1.3rem; flex-wrap:wrap}
.cards{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); padding-bottom:4rem}
.card{border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; background:var(--surface); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.9rem}
.card.draft{border-style:dashed; background:var(--surface-2); box-shadow:none}
.card.live{border-color:var(--teal)}
.card-top{display:flex; align-items:flex-start; gap:.75rem}
.card-top h3{font-size:1.05rem; font-weight:700; flex:1}
.card-kind{font-size:.8rem; color:var(--muted); margin-top:.1rem}
.card-sub{display:flex; align-items:center; gap:.75rem}
.card-sub b{font-size:.98rem; font-weight:700; display:block}
.card-sub span{font-size:.8rem; color:var(--muted)}
.price-strip{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; padding:.7rem .95rem; border-radius:1rem; background:var(--blue-soft)}
.price-strip b{font-size:1.2rem; font-weight:800; color:var(--blue-d)}
.price-strip span{font-size:.8rem; color:var(--muted)}
.track{display:flex; gap:.3rem}
.track-seg{flex:1; text-align:center; padding:.45rem .25rem; border-radius:.7rem; font-size:.7rem; font-weight:700; background:var(--surface-2); color:var(--muted)}
.track-seg.on{background:linear-gradient(90deg,var(--teal),var(--blue)); color:#fff}
.track-seg.done{background:var(--teal-soft); color:#3E857E}
.card-note{display:flex; gap:.5rem; font-size:.82rem; color:var(--muted); line-height:1.5}
.card .btn{margin-top:auto}
.empty{padding:3rem 1.5rem; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius)}

/* ── Paiement ── */
.pay-opt{display:block; width:100%; text-align:left; padding:1.1rem 1.2rem; border-radius:1rem; border:2px solid var(--border); background:var(--surface); margin-bottom:.75rem; cursor:pointer}
.pay-opt:hover{border-color:var(--blue)}
.pay-opt input{position:absolute; opacity:0; pointer-events:none}
.pay-opt:has(input:checked){border-color:var(--blue); background:var(--blue-soft)}
.pay-opt b{display:block; font-size:1.02rem; font-weight:700; margin-bottom:.3rem}
.pay-opt .calc{display:block; font-size:.9rem; font-weight:700; color:var(--blue-d); font-variant-numeric:tabular-nums}
.pay-opt p{font-size:.85rem; color:var(--muted); line-height:1.55; margin-top:.3rem}
.warn{display:flex; gap:.7rem; padding:.95rem 1.1rem; border-radius:1rem; margin-top:.4rem; background:var(--coral-soft); border:1px solid rgba(242,92,92,.3); color:var(--coral-h); font-size:.88rem; line-height:1.55; font-weight:600}

/* ── Admin ── */
.admin{padding:2.4rem 0}
.admin:last-child{padding-bottom:4rem}
.admin-grid{display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr) 18.5rem; align-items:start}
@media(max-width:58rem){.admin-grid{grid-template-columns:1fr}}
.tbl-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; flex-wrap:wrap}
.tbl-note{font-size:.8rem; color:var(--muted); margin-top:.7rem; line-height:1.55}
.tbl-wrap{overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
table.data{border-collapse:collapse; width:100%; min-width:38rem; font-size:.9rem}
table.data th{text-align:left; padding:.8rem 1rem; font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap}
table.data td{padding:.75rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data .num{text-align:right; white-space:nowrap; font-weight:700; font-variant-numeric:tabular-nums}
table.data a{color:var(--blue-d); text-decoration:none; font-weight:600}
table.data a:hover{text-decoration:underline}
.pill{display:inline-block; padding:.15rem .7rem; border-radius:999px; font-size:.73rem; font-weight:700; white-space:nowrap}
.pill.ok{background:var(--teal-soft); color:#3E857E}
.pill.wait{background:var(--gold-soft); color:#8A6512}
.pill.late{background:var(--coral-soft); color:var(--coral-h)}
.acts{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center}
.mini{padding:.3rem .75rem; border-radius:999px; font-size:.78rem; font-weight:600; border:2px solid var(--border); color:var(--muted); background:var(--surface); white-space:nowrap; text-decoration:none; display:inline-block}
.mini:hover{border-color:var(--blue); color:var(--blue-d)}
.mini.go{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700}
.mini.go:hover{background:var(--blue-h); color:#fff}
.cell-date{display:flex; flex-direction:column; gap:.25rem}
.cell-h{display:flex; align-items:center; gap:.3rem}
.cell-h span{color:var(--muted); font-size:.82rem}
table.data input[type=date],table.data input[type=time],table.data input[type=number]{
  padding:.3rem .5rem; font-size:.82rem; background:var(--surface); color:var(--text);
  border:1.5px solid var(--border); border-radius:.5rem; font-family:inherit;
}
table.data input[type=date]{min-width:8.5rem}
table.data input[type=time]{min-width:5.5rem}
table.data input[type=number]{width:4.2rem; text-align:right}
table.data input:focus{border-color:var(--blue); outline:none}
.total{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.1rem 1.4rem; margin-top:1rem; border-radius:var(--radius); background:linear-gradient(135deg,var(--blue) 0%,var(--teal) 100%); color:#fff}
.total span{font-size:.88rem; opacity:.93}
.total b{font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums}
.bar{height:.5rem; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:.4rem}
.bar > div{height:100%; background:linear-gradient(90deg,var(--teal),var(--blue))}

/* ── Suppression d'une demande : bouton rouge et pop-up de confirmation ── */
.btn-danger{background:var(--coral); color:#fff; box-shadow:0 8px 22px rgba(242,92,92,.30)}
.btn-danger:hover{background:var(--coral-h)}
.panel--danger{border-color:rgba(242,92,92,.35)}
.panel--danger h3{color:var(--coral-h)}

/* <dialog> natif : le navigateur gere l'overlay, le focus et la touche Echap. */
.confirm{
  border:0; border-radius:var(--radius); padding:1.6rem; max-width:30rem; width:calc(100% - 2rem);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg);
}
.confirm::backdrop{background:rgba(13,25,34,.55)}
.confirm h3{font-size:1.2rem; font-weight:800; margin-bottom:.6rem}
.confirm p{font-size:.92rem; color:var(--muted); line-height:1.6}
.confirm-list{margin:.9rem 0 0; padding-left:1.2rem; font-size:.88rem; color:var(--muted)}
.confirm-list li{margin-bottom:.2rem}
.confirm .warn{margin-top:1rem}
.confirm-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.4rem}