/* ============================================================
   FRN — application (espace membre + administration)
   Feuille unique : pile systeme, aucune police distante.
   Palette relevee sur l'embleme officiel FRN (lion dore sur la
   carte de la RD Congo, anneau rouge et bleu, rubans d'or).
   Base mobile (360 px) ; les media queries elargissent.
   ============================================================ */

:root{
  /* Marque */
  --blue:#0F8FD2; --blue-deep:#0B6BB5; --navy:#063A66; --red:#D8232A; --gold:#F0BC28;
  --ink:#070B14; --ink-2:#0D1421; --ink-3:#161F30;
  --paper:#F4F1E8; --paper-2:#E8E3D5; --paper-3:#DAD4C2; --white:#FFFFFF; --grey:#6B7280;

  /* Variantes accessibles WCAG 2.2 (texte courant >= 4,5:1) */
  --blue-text:#085E93; --blue-light:#2BA8E0; --blue-btn:#0B72C4; --red-btn:#C81E24;
  --red-text:#C81E24; --muted-light:#61646B; --muted-dark:#7C8087; --gold-ink:#7A5F01;
  --fg-2:#2C323C;

  /* Derivees */
  --bg:var(--paper); --fg:var(--fg-2);
  --line:rgba(7,11,20,.13); --line-2:rgba(7,11,20,.24); --line-inv:rgba(255,255,255,.16);
  --ok-text:#0A6B48; --ok-bg:rgba(10,107,72,.09); --warn-bg:rgba(122,95,1,.10);
  --r:10px; --r-sm:7px; --r-lg:14px;
  --gap:.9rem; --maxw:1200px;
  --sh-1:0 1px 2px rgba(7,11,20,.05), 0 10px 22px -16px rgba(7,11,20,.35);
  --sh-2:0 18px 40px -26px rgba(7,11,20,.55);
  --z-nav:30; --z-head:40; --z-skip:100;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:1rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
img,svg{max-width:100%; display:block}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,pre{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
table{border-collapse:collapse}
a{color:var(--blue-text); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--gold); color:var(--ink)}
strong,b{font-weight:700}

/* ---------- ACCESSIBILITE ---------- */
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:3px;
  box-shadow:0 0 0 5px rgba(7,11,20,.55)}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold)}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:var(--z-skip);
  background:var(--ink); color:#fff; padding:.7rem 1rem; font-weight:700;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0; top:0; text-decoration:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- UTILITAIRES ---------- */
.muted{color:var(--muted-light)}
.stack{display:flex; flex-direction:column; gap:var(--gap); min-width:0}
.row{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-width:0}
.grid-2,.grid-3{display:grid; gap:var(--gap); min-width:0}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.is-right{text-align:right}
.is-center{text-align:center}
.money{font-variant-numeric:tabular-nums; font-weight:700; overflow-wrap:anywhere}
.money--neg{color:var(--red-text)}
.hidden{display:none !important}

/* ---------- CHARPENTE ---------- */
.app{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg);
}
.app-header{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .9rem;
  padding:.65rem .9rem; background:var(--ink); color:var(--paper);
  border-bottom:2px solid var(--blue-deep); position:relative; z-index:var(--z-head);
}
.app-header__right{
  display:flex; align-items:center; gap:.5rem; margin-left:auto; flex:none;
}
.app-brand{
  display:flex; align-items:center; gap:.55rem; min-width:0; flex:0 1 auto;
  color:var(--paper); text-decoration:none;
}
.app-brand:hover{text-decoration:none}
.app-brand img{
  width:36px; height:36px; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(240,188,40,.55), 0 0 0 4px rgba(240,188,40,.10);
}
.app-brand__text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.app-brand__text strong{font-size:1.02rem; letter-spacing:.06em}
.app-brand__sub{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.app-user{display:flex; align-items:center; gap:.45rem; min-width:0}
.app-user__avatar{
  width:32px; height:32px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue-deep),var(--navy));
  border:1px solid rgba(240,188,40,.55);
  color:#fff; font-size:.74rem; font-weight:800; letter-spacing:.02em;
}
.app-user__text{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.app-user__text strong{font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-user__role{font-size:.68rem; color:var(--muted-dark); letter-spacing:.04em; text-transform:uppercase}
.app-user__out{flex:none; margin:0}
.app-lang{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; min-height:32px; padding:.3rem .4rem;
  color:rgba(255,255,255,.68); font-size:.74rem; font-weight:800; letter-spacing:.08em;
  border-radius:var(--r-sm); text-decoration:none;
}
.app-lang:hover{color:#fff; text-decoration:none; background:rgba(255,255,255,.10)}
.app-lang::after{content:''; position:absolute; inset:-6px 0}

/* ---------- NAVIGATION ---------- */
.app-nav{
  display:flex; gap:.25rem; overflow-x:auto; overscroll-behavior-x:contain;
  min-width:0; padding:.35rem .6rem; background:var(--ink-2);
  border-bottom:1px solid var(--line-inv);
  position:sticky; top:0; z-index:var(--z-nav);
  scrollbar-width:none; -ms-overflow-style:none;
}
.app-nav::-webkit-scrollbar{display:none}
.app-nav__item{
  flex:none; display:inline-flex; align-items:center; min-height:44px; padding:.5rem .75rem;
  color:rgba(255,255,255,.74); font-size:.9rem; font-weight:600; white-space:nowrap;
  border-radius:var(--r-sm); text-decoration:none;
}
.app-nav__item:hover{background:rgba(255,255,255,.10); color:var(--blue-light); text-decoration:none}
.app-nav__item.is-active{background:var(--blue-btn); color:#fff}

/* ---------- CONTENU ---------- */
.app-main{
  flex:1 1 auto; width:100%; max-width:var(--maxw);
  padding:1rem .9rem 2rem; min-width:0;
}
.app-main__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:.6rem .9rem; margin-bottom:1rem;
}
.app-main__actions{display:flex; flex-wrap:wrap; gap:.5rem}
.app-title{
  font-size:1.4rem; line-height:1.16; font-weight:800; letter-spacing:-.015em;
  color:var(--ink);
}
.app-subtitle{margin-top:.25rem; font-size:.92rem; color:var(--muted-light); max-width:72ch}
.fil{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  margin-bottom:.7rem; font-size:.78rem; color:var(--muted-light);
}
.fil a{color:var(--blue-text); text-decoration:underline}
.app-footer{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem .8rem;
  padding:.9rem; border-top:1px solid var(--line); background:var(--paper-2);
  color:var(--muted-light); font-size:.78rem;
}

/* ---------- CARTES ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); overflow:hidden; margin-bottom:var(--gap); min-width:0;
}
.card--accent{border-top:3px solid var(--blue)}
.card--accent .card__head{background:rgba(15,143,210,.07)}
.card--muted{background:var(--paper-2); box-shadow:none}
.card__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.4rem .8rem; padding:.8rem .95rem; border-bottom:1px solid var(--line);
  background:var(--paper);
}
.card__title{font-size:1.02rem; font-weight:700; line-height:1.25; color:var(--ink)}
.card__subtitle{margin-top:.15rem; font-size:.82rem; color:var(--muted-light)}
.card__action{display:flex; flex-wrap:wrap; gap:.45rem}
.card__body{padding:.95rem; min-width:0}
.card__foot{
  padding:.65rem .95rem; border-top:1px solid var(--line); background:var(--paper);
  font-size:.82rem; color:var(--muted-light);
}
.card__body > * + *{margin-top:.7rem}

/* ---------- KPI ---------- */
.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:.65rem; margin-bottom:var(--gap);
}
.kpi{
  display:flex; flex-direction:column; gap:.1rem; min-width:0; padding:.75rem .85rem;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); color:inherit; text-decoration:none;
}
a.kpi:hover{border-color:var(--blue-text); text-decoration:none; box-shadow:var(--sh-2)}
.kpi--alert{border-color:var(--red-btn); background:linear-gradient(180deg,rgba(216,35,42,.07),var(--white) 70%)}
.kpi__label{font-size:.76rem; font-weight:600; color:var(--muted-light)}
.kpi__value{
  font-size:clamp(1.2rem,4.4vw,1.65rem); font-weight:800; line-height:1.15;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.kpi__detail{font-size:.75rem; color:var(--muted-light)}

/* ---------- TABLEAUX ---------- */
.table-wrap{
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1);
  margin-bottom:var(--gap); background-color:var(--white);
  /* ombres de bord : la table defile, les degrades restent aux marges */
  background-image:
    linear-gradient(90deg,var(--white) 30%,rgba(255,255,255,0)),
    linear-gradient(90deg,rgba(255,255,255,0),var(--white) 70%),
    radial-gradient(farthest-side at 0 50%,rgba(7,11,20,.16),rgba(7,11,20,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(7,11,20,.16),rgba(7,11,20,0));
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,13px 100%,13px 100%;
  background-attachment:local,local,scroll,scroll;
}
.table{width:100%; min-width:480px; font-size:.88rem}
.table th,.table td{
  padding:.55rem .65rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); overflow-wrap:anywhere;
}
.table thead th{
  background:var(--paper); font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-light); white-space:nowrap;
}
.table tbody tr:last-child td{border-bottom:0}
/* Actions d'une cellule : deux boutons côte à côte, qui se replient
   sur une seule colonne si la place manque. */
.cell-actions{display:flex; gap:.4rem; flex-wrap:wrap; align-items:flex-start}
.cell-actions form{margin:0}
.table tbody tr:hover{background:rgba(15,143,210,.06)}
.table--compact{min-width:400px; font-size:.82rem}
.table--compact th,.table--compact td{padding:.38rem .5rem}

/* ---------- FORMULAIRES ---------- */
.field{display:flex; flex-direction:column; gap:.25rem; margin-bottom:.8rem; min-width:0}
.field__label{font-size:.84rem; font-weight:700; color:var(--fg-2)}
.field__hint{font-size:.77rem; color:var(--muted-light)}
.field__error{font-size:.79rem; font-weight:600; color:var(--red-text)}
.input,.select,.textarea{
  width:100%; min-height:44px; padding:.55rem .65rem; font-size:.95rem;
  color:var(--ink); background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-sm); appearance:none; -webkit-appearance:none;
}
.input::placeholder,.textarea::placeholder{color:#8A8E95}
.input:hover,.select:hover,.textarea:hover{border-color:#8A8E95}
.textarea{min-height:96px; resize:vertical; line-height:1.5}
select.input,.select{
  padding-right:2rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230F8FD2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .65rem center;
}
.field--error .input,.field--error .select,.field--error .textarea{
  border-color:var(--red-btn); background:rgba(216,35,42,.03);
}
.field--error .field__label{color:var(--red-text)}
input.input[type=checkbox],input.input[type=radio]{
  width:auto; min-height:auto; margin-right:.4rem; accent-color:var(--blue-btn);
}
.form-grid{display:grid; grid-template-columns:1fr; gap:0 .85rem; min-width:0}
.filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem;
  padding:.75rem; margin-bottom:var(--gap);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
}
.filters__group{display:flex; flex-direction:column; gap:.2rem; flex:1 1 150px; min-width:0}
.filters__group > label{font-size:.73rem; font-weight:700; color:var(--muted-light)}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:44px; padding:.55rem .95rem; font-size:.9rem; font-weight:700;
  line-height:1.2; text-align:center; text-decoration:none;
  border:1px solid transparent; border-radius:var(--r-sm); background:var(--paper-2);
  color:var(--fg-2); cursor:pointer;
  transition:background-color .15s linear,border-color .15s linear,color .15s linear;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--blue-btn); color:#fff}
.btn--primary:hover{background:#0A5FA3}
.btn--secondary{background:var(--white); color:var(--blue-text); border-color:rgba(8,94,147,.42)}
.btn--secondary:hover{background:rgba(15,143,210,.09)}
.btn--danger{background:var(--red-btn); color:#fff}
.btn--danger:hover{background:#A81A20}
.btn--ghost{background:transparent; color:var(--fg-2); border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(7,11,20,.05)}
.btn--sm{min-height:36px; padding:.35rem .65rem; font-size:.8rem; position:relative}
.btn--sm::after{content:''; position:absolute; inset:-4px 0}
.btn--block{width:100%}
.app-header .btn--ghost{color:var(--paper); border-color:rgba(255,255,255,.34)}
.app-header .btn--ghost:hover{background:rgba(255,255,255,.14)}
[disabled],.btn[aria-disabled=true]{opacity:.5; cursor:not-allowed}

/* ---------- BADGES ET ALERTES ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.3rem; padding:.1rem .5rem;
  font-size:.73rem; font-weight:700; line-height:1.6; white-space:nowrap;
  border:1px solid transparent; border-radius:999px;
}
.badge--ok{background:var(--ok-bg); color:var(--ok-text); border-color:rgba(10,107,72,.34)}
.badge--warn{background:var(--warn-bg); color:var(--gold-ink); border-color:rgba(122,95,1,.34)}
.badge--bad{background:rgba(200,30,36,.09); color:var(--red-text); border-color:rgba(200,30,36,.34)}
.badge--info{background:rgba(8,94,147,.09); color:var(--blue-text); border-color:rgba(8,94,147,.30)}
.badge--muted{background:rgba(107,114,128,.13); color:var(--muted-light); border-color:rgba(107,114,128,.28)}
.alert{
  display:flex; flex-direction:column; gap:.2rem; padding:.75rem .9rem;
  margin-bottom:var(--gap); font-size:.88rem;
  border:1px solid; border-left-width:4px; border-radius:var(--r);
}
.alert__title{font-weight:700}
.alert--ok{background:var(--ok-bg); border-color:var(--ok-text); color:#07472F}
.alert--warn{background:var(--warn-bg); border-color:var(--gold-ink); color:#5C4600}
.alert--bad{background:rgba(200,30,36,.08); border-color:var(--red-btn); color:#8E161A}
.alert--info{background:rgba(8,94,147,.08); border-color:var(--blue-text); color:#064C75}

/* ---------- DIVERS ---------- */
.empty{
  padding:1.5rem 1rem; margin-bottom:var(--gap); text-align:center;
  font-size:.9rem; color:var(--muted-light);
  background:var(--paper-2); border:1px dashed var(--line-2); border-radius:var(--r);
}
.defs{margin:0}
.defs__row{
  display:grid; grid-template-columns:minmax(100px,.42fr) 1fr; gap:.15rem .7rem;
  padding:.45rem 0; border-bottom:1px solid var(--line);
}
.defs__row:last-child{border-bottom:0}
.defs dt{font-size:.8rem; font-weight:600; color:var(--muted-light)}
.defs dd{margin:0; font-size:.9rem; overflow-wrap:anywhere}
.pagination{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:.7rem 0}
.pagination__item{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; min-height:40px; padding:.3rem .6rem;
  font-size:.88rem; font-weight:700; text-decoration:none; color:var(--fg-2);
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.pagination__item::after{content:''; position:absolute; inset:-2px 0}
.pagination__item:hover{border-color:var(--blue-text); color:var(--blue-text); text-decoration:none}
.pagination__item.is-active{background:var(--blue-btn); border-color:var(--blue-btn); color:#fff}
.pagination__item.is-disabled{background:var(--paper-2); color:var(--muted-light); opacity:.6; cursor:not-allowed}
.pagination__state{padding:.3rem .5rem; font-size:.82rem; color:var(--muted-light)}
.bar{height:8px; background:var(--paper-3); border-radius:999px; overflow:hidden; margin:.3rem 0}
.bar__fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--blue-deep))}
.steps{margin:0; padding:0}
.step{
  position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto;
  gap:.55rem; align-items:start; padding:.4rem 0; font-size:.9rem;
}
.step::before{
  content:''; position:absolute; left:10px; top:1.6rem; bottom:-.4rem;
  width:2px; background:var(--paper-3);
}
.step:last-child::before{display:none}
.step__marker{
  position:relative; width:22px; height:22px; border-radius:50%;
  background:var(--white); border:2px solid var(--paper-3);
}
.step.is-done .step__marker{background:var(--blue-btn); border-color:var(--blue-btn)}
.step.is-done .step__marker::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.step.is-current .step__marker{border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,188,40,.25)}
.step__label{min-width:0; font-weight:600; overflow-wrap:anywhere}
.step.is-current .step__label{color:var(--blue-text)}
.step__date{font-size:.78rem; color:var(--muted-light); white-space:nowrap}

/* ---------- CARTE DE MEMBRE ---------- */
.member-card{
  position:relative; max-width:430px; overflow:hidden;
  background:var(--white); border:1px solid var(--paper-3); border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
/* liseré d'or : la carte valide se distingue sans lecture du tampon */
.member-card.is-valid{box-shadow:var(--sh-2), 0 0 0 1px rgba(240,188,40,.55)}
.member-card.is-invalid{border-color:rgba(200,30,36,.45)}
.member-card__top{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .7rem;
  padding:.85rem 1rem 1.05rem; color:#fff;
  /* le bandeau s'arrete a --blue-deep : le texte blanc garde 5,5:1
     sur toute la largeur (sur --blue, il ne passerait plus) */
  background:linear-gradient(135deg,var(--navy) 0%,var(--blue-deep) 100%);
}
/* rubans d'or et anneau rouge et bleu de l'embleme */
.member-card__top::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg,
    var(--red) 0 20%, var(--gold) 20% 32%, var(--blue) 32% 68%,
    var(--gold) 68% 80%, var(--red) 80% 100%);
}
.member-card.is-invalid .member-card__top{
  background:linear-gradient(135deg,#2C3038 0%,#4A3A3D 60%,#6B3134 100%);
}
.member-card__org{font-size:.7rem; font-weight:800; letter-spacing:.2em; color:var(--gold)}
.member-card__kind{font-size:.86rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.member-card__stamp{
  margin-left:auto; padding:.1rem .5rem; border:2px solid rgba(255,255,255,.55);
  border-radius:4px; color:rgba(255,255,255,.9);
  font-size:.66rem; font-weight:800; letter-spacing:.12em; transform:rotate(-8deg);
}
.member-card__stamp.is-valid{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.member-card__body{display:flex; align-items:center; gap:.9rem; padding:.95rem 1rem}
.member-card__identity{flex:1 1 auto; min-width:0}
.member-card__name{
  font-size:1.12rem; font-weight:800; line-height:1.2; color:var(--ink);
  overflow-wrap:anywhere;
}
.member-card__quality{margin-top:.1rem; font-size:.8rem; font-weight:600; color:var(--blue-text)}
.member-card__num{margin-top:.45rem; font-size:.78rem; color:var(--muted-light); overflow-wrap:anywhere}
.member-card__num strong{color:var(--ink); font-family:var(--mono); letter-spacing:.01em}
.member-card__section{margin-top:.15rem; font-size:.78rem; color:var(--muted-light); overflow-wrap:anywhere}
.member-card__qr{flex:none}
.member-card__qr img{
  width:96px; height:96px; padding:4px; background:#fff;
  border:1px solid var(--paper-3); border-radius:8px;
}
.member-card__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.15rem .8rem;
  padding:.55rem 1rem; background:var(--paper); border-top:1px solid var(--paper-3);
  font-size:.75rem; color:var(--muted-light);
}

/* ---------- QUITTANCE ---------- */
.receipt{
  max-width:620px; margin:0 auto; padding:1.2rem;
  background:var(--white); border:1px solid var(--paper-3);
  border-radius:var(--r); box-shadow:var(--sh-1);
}
.receipt__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  gap:.5rem 1rem; padding-bottom:.7rem; margin-bottom:.85rem;
  border-bottom:2px solid var(--ink);
}
.receipt__title{font-size:1rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.receipt__amount{
  font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.receipt__rows{display:grid; gap:.3rem; margin-bottom:.9rem}
.receipt__rows > div{
  display:flex; justify-content:space-between; gap:.8rem; padding-bottom:.25rem;
  border-bottom:1px dotted var(--paper-3); font-size:.86rem; overflow-wrap:anywhere;
}
.receipt__rows dt,.receipt__rows dd{margin:0}
.receipt__foot{
  padding-top:.7rem; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--muted-light); text-align:center;
}

/* ---------- ELARGISSEMENTS ---------- */
@media (min-width:560px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:720px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-main{padding:1.4rem 1.4rem 2.5rem}
  .app-title{font-size:1.7rem}
  .app-header{padding:.7rem 1.4rem}
  .app-main__head{margin-bottom:1.2rem}
}
@media (min-width:900px){
  .app{
    display:grid; grid-template-columns:250px minmax(0,1fr);
    grid-template-rows:auto 1fr auto; min-height:100vh;
  }
  .app-header{grid-column:1 / -1}
  .app-nav{
    grid-column:1; grid-row:2; position:sticky; top:0; align-self:start;
    height:100%; max-height:100vh; overflow-y:auto; overflow-x:hidden;
    flex-direction:column; gap:.15rem;
    padding:.6rem; border-bottom:0; border-right:1px solid var(--line-inv);
  }
  .app-nav__item{border-radius:var(--r-sm); padding:.55rem .7rem}
  .app-main{padding:1.5rem 1.8rem 3rem}
  .app-footer{grid-column:1 / -1; grid-row:3; padding:1rem 1.8rem}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card__body{padding:1.1rem}

  /* Les pages SANS navigation — connexion, creation de compte — n'ont
     pas de colonne laterale. Sans cette regle, leur contenu tombe
     dans la colonne de 250 px reservee au menu, et le formulaire se
     retrouve presse dans quelques dizaines de pixels. Ici, la page
     occupe toute la largeur et la carte est centree. */
  .app--solo{grid-template-columns:minmax(0,1fr)}
  .app--solo .app-main{
    grid-column:1; justify-self:center; width:100%; max-width:46rem;
  }
}
@media (min-width:1200px){
  .app-main{padding:1.8rem 2.2rem 3rem}
}

/* ---------- IMPRESSION (quittance) ---------- */
@media print{
  .app-header,.app-nav,.app-footer,.app-main__actions,.skip-link{display:none !important}
  .app{display:block; background:#fff}
  .app-main{padding:0; max-width:none}
  .receipt{box-shadow:none; border:0; max-width:none; padding:0}
  .card{box-shadow:none; border-color:#999}
}