/* ==========================================================================
   AQUAGEST — Système de design « Profondeur d'eau »
   App native pour pisciculteurs · UEMOA/CEMAC
   Direction : instrument de bassin, couches d'eau, verre dépoli, ressorts.
   ========================================================================== */

/* ---- 1. Jetons de design ------------------------------------------------ */
:root{
  /* Profondeurs d'eau — l'identité vient du bassin vu du dessus */
  --abyss:      #06232b;   /* fond profond */
  --deep:       #0b3a45;   /* teal profond */
  --lagoon:     #0f6d76;   /* teal signature marque */
  --shallow:    #24a5a0;   /* eau peu profonde */
  --surface:    #5fd0c4;   /* reflet de surface */
  --foam:       #d6f2ec;   /* écume claire */

  /* Sable chaud — actions & chaleur (contraste avec l'eau froide) */
  --sand:       #e8a13c;   /* ambre sable — action principale */
  --sand-deep:  #c9822a;
  --clay:       #d5613e;   /* argile — accents secondaires */

  /* Neutres — lisibles en plein soleil */
  --ink:        #08262d;   /* texte principal, presque noir teinté */
  --ink-2:      #3f5c62;   /* texte secondaire */
  --ink-3:      #7d9599;   /* texte tertiaire / placeholder */
  --paper:      #f4f8f7;   /* fond appli */
  --card:       #ffffff;   /* cartes */
  --line:       #e0eae8;   /* traits fins */
  --line-2:     #eef4f2;

  /* États vitaux (santé du bassin) */
  --vital-ok:   #1f9d6b;
  --vital-ok-bg:#e6f6ee;
  --vital-warn: #d9962a;
  --vital-warn-bg:#fbf1dd;
  --vital-bad:  #d1442f;
  --vital-bad-bg:#fbe7e2;

  /* Rayons — plus généreux = plus « app » */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Ombres — douces, colorées par l'eau, jamais grises et dures */
  --sh-1: 0 1px 2px rgba(8,38,45,.05), 0 2px 8px rgba(8,38,45,.04);
  --sh-2: 0 4px 14px rgba(11,58,69,.10), 0 2px 6px rgba(11,58,69,.06);
  --sh-3: 0 12px 34px rgba(11,58,69,.16), 0 6px 14px rgba(11,58,69,.08);
  --sh-float: 0 18px 50px -12px rgba(15,109,118,.45);

  /* Ressorts d'animation */
  --spring: cubic-bezier(.34,1.56,.64,1);
  --ease:   cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --tabbar-h: 72px;
  --maxw: 480px;

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Sora", system-ui, sans-serif;
}

/* ---- 2. Reset & base ---------------------------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  font-size:15px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Fond « eau en profondeur » subtil, statique et mat */
body.app-bg{
  background:
    radial-gradient(120% 60% at 50% -10%, #eafaf6 0%, transparent 55%),
    radial-gradient(90% 50% at 100% 0%, #e5f5f2 0%, transparent 50%),
    var(--paper);
  background-attachment:fixed;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:16px; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
:focus-visible{ outline:2px solid var(--lagoon); outline-offset:2px; }

/* ---- 3. Ossature app (écran mobile centré) ------------------------------ */
.app{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100dvh;
  position:relative;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
}
.screen{ padding:0 18px; }
.screen-pad-top{ padding-top:14px; }

/* ---- 4. En-tête app dépoli --------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;
  background:rgba(244,248,247,.72);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.topbar h1{
  font-family:var(--font-display);
  font-size:19px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:1px;
}
.topbar-back{
  width:40px; height:40px; border-radius:var(--r-pill);
  background:var(--card); box-shadow:var(--sh-1);
  display:grid; place-items:center; flex:none;
  transition:transform .2s var(--spring);
}
.topbar-back:active{ transform:scale(.9); }
.topbar-back svg{ width:20px; height:20px; stroke:var(--ink); stroke-width:2.2; fill:none; }

/* Pastille avatar / marque */
.brandmark{
  width:42px; height:42px; border-radius:14px; flex:none;
  background:linear-gradient(145deg, var(--shallow), var(--lagoon) 60%, var(--deep));
  display:grid; place-items:center; box-shadow:var(--sh-2);
  position:relative; overflow:hidden;
}
.brandmark svg{ width:24px; height:24px; }
.brandmark::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.35), transparent 45%);
}

/* Puce d'état d'abonnement */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:.01em;
  background:var(--card); box-shadow:var(--sh-1);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; }
.chip.ok .dot{ background:var(--vital-ok); box-shadow:0 0 0 3px var(--vital-ok-bg); }
.chip.warn .dot{ background:var(--vital-warn); box-shadow:0 0 0 3px var(--vital-warn-bg); }
.chip.bad .dot{ background:var(--vital-bad); box-shadow:0 0 0 3px var(--vital-bad-bg); }
.chip.admin{ background:var(--ink); color:#fff; }
.chip.admin .dot{ background:var(--sand); box-shadow:none; }

/* ---- 5. Titres de section ---------------------------------------------- */
.sec{ margin:26px 0 14px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sec-title{ font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:-.01em; }
.sec-sub{ font-size:12px; color:var(--ink-3); font-weight:600; }
.sec-link{ font-size:13px; font-weight:700; color:var(--lagoon); }

/* ---- 6. Cartes ---------------------------------------------------------- */
.card{
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:18px;
}
.card + .card{ margin-top:12px; }
.card-row{ display:flex; align-items:center; gap:14px; }
.card-title{ font-family:var(--font-display); font-size:16px; font-weight:700; }
.muted{ color:var(--ink-2); }
.tiny{ font-size:12px; color:var(--ink-3); }

/* ---- 7. Bannière héro tableau de bord (la signature) -------------------- */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(150deg, var(--lagoon) 0%, var(--deep) 55%, var(--abyss) 100%);
  color:#fff; padding:22px 22px 24px;
  box-shadow:var(--sh-float);
}
/* Vagues animées de la signature */
.hero .waves{ position:absolute; left:0; right:0; bottom:-2px; height:70px; opacity:.5; }
.hero .waves path{ animation:drift 9s linear infinite; }
.hero .waves path:nth-child(2){ animation-duration:13s; opacity:.6; }
.hero .waves path:nth-child(3){ animation-duration:17s; opacity:.4; }
@keyframes drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.hero-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.hero h2{ font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.02em; margin:4px 0 2px; position:relative; }
.hero .hero-meta{ font-size:13px; opacity:.85; position:relative; }
.hero-stats{ display:flex; gap:22px; margin-top:18px; position:relative; }
.hero-stat .n{ font-family:var(--font-num); font-size:28px; font-weight:800; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.hero-stat .l{ font-size:11px; opacity:.8; margin-top:5px; font-weight:600; letter-spacing:.02em; }

/* ---- 8. Jauges qualité d'eau (instrument) ------------------------------ */
.gauges{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gauge{
  background:var(--card); border-radius:var(--r-lg); padding:16px 12px 14px;
  box-shadow:var(--sh-1); text-align:center; position:relative; overflow:hidden;
}
.gauge-ring{ position:relative; width:74px; height:74px; margin:0 auto 8px; }
.gauge-ring svg{ transform:rotate(-90deg); }
.gauge-ring .track{ stroke:var(--line); }
.gauge-ring .fill{ stroke-linecap:round; transition:stroke-dashoffset 1.1s var(--ease-out); }
.gauge-val{
  position:absolute; inset:0; display:grid; place-content:center;
  font-family:var(--font-num); font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.gauge-val .num{ font-size:22px; line-height:1; }
.gauge-val .unit{ font-size:9px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; }
.gauge-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.gauge.s-ok .fill{ stroke:var(--vital-ok); }
.gauge.s-warn .fill{ stroke:var(--vital-warn); }
.gauge.s-bad .fill{ stroke:var(--vital-bad); }
.gauge.s-bad{ background:var(--vital-bad-bg); }
.gauge.s-warn{ background:var(--vital-warn-bg); }

/* ---- 9. Statistiques compactes ----------------------------------------- */
.statgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat{
  background:var(--card); border-radius:var(--r-lg); padding:16px 14px;
  box-shadow:var(--sh-1);
}
.stat .n{ font-family:var(--font-num); font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.stat .n small{ font-size:14px; font-weight:700; color:var(--ink-3); }
.stat .l{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; }
.stat.accent{ background:linear-gradient(150deg,#fff, #f0faf8); }

/* ---- 10. Alertes vitales ------------------------------------------------ */
.vital{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--r-md); font-size:14px; font-weight:500;
  animation:rise .5s var(--ease-out) both;
}
.vital .vi{ width:20px; height:20px; flex:none; margin-top:1px; }
.vital.ok{ background:var(--vital-ok-bg); color:#0f5c3d; }
.vital.warn{ background:var(--vital-warn-bg); color:#7a5410; }
.vital.bad{ background:var(--vital-bad-bg); color:#8a2417; }
.vital strong{ font-weight:800; }

/* ---- 11. Liste (bassins, historique) ----------------------------------- */
.tile{
  background:var(--card); border-radius:var(--r-lg); padding:16px;
  box-shadow:var(--sh-1); display:flex; align-items:center; gap:14px;
  transition:transform .2s var(--spring), box-shadow .2s var(--ease);
  animation:rise .45s var(--ease-out) both;
}
.tile:active{ transform:scale(.985); box-shadow:var(--sh-2); }
.tile + .tile{ margin-top:10px; }
.tile-ico{
  width:46px; height:46px; border-radius:14px; flex:none;
  display:grid; place-items:center; background:var(--foam); color:var(--lagoon);
}
.tile-ico svg{ width:24px; height:24px; }
.tile-body{ flex:1; min-width:0; }
.tile-body .t{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.tile-body .s{ font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.tile-end{ text-align:right; flex:none; }
.tile-end .n{ font-family:var(--font-num); font-weight:800; font-size:17px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tile-end .u{ font-size:11px; color:var(--ink-3); font-weight:600; }

/* Barre de progression (mortalité) */
.bar{ height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:10px; }
.bar > i{ display:block; height:100%; border-radius:99px; transition:width 1s var(--ease-out); }
.bar.ok > i{ background:var(--vital-ok); }
.bar.warn > i{ background:var(--vital-warn); }
.bar.bad > i{ background:var(--vital-bad); }

/* ---- 12. Badges --------------------------------------------------------- */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:800; letter-spacing:.02em; }
.badge.ok{ background:var(--vital-ok-bg); color:#137a4f; }
.badge.warn{ background:var(--vital-warn-bg); color:#916312; }
.badge.bad{ background:var(--vital-bad-bg); color:#a3301f; }
.badge.neutral{ background:var(--line-2); color:var(--ink-2); }
.badge.food{ background:#eaf1fb; color:#2a5ca3; }
.badge.op{ background:#f3ecfb; color:#6b3ca3; }

/* ---- 13. Boutons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:16px 20px; border-radius:var(--r-md);
  font-family:var(--font-display); font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  background:var(--ink); color:#fff; box-shadow:var(--sh-2);
  transition:transform .18s var(--spring), box-shadow .2s var(--ease), filter .2s;
}
.btn svg{ width:20px; height:20px; }
.btn:active{ transform:scale(.96); }
.btn.primary{ background:linear-gradient(140deg, var(--sand), var(--sand-deep)); color:#3a2405; box-shadow:0 8px 22px -6px rgba(232,161,60,.6); }
.btn.aqua{ background:linear-gradient(140deg, var(--shallow), var(--lagoon)); color:#fff; box-shadow:0 8px 22px -6px rgba(15,109,118,.55); }
.btn.ghost{ background:var(--card); color:var(--ink); box-shadow:var(--sh-1); }
.btn.ghost:active{ background:var(--line-2); }
.btn.danger{ background:var(--vital-bad-bg); color:var(--vital-bad); box-shadow:none; }
.btn.sm{ width:auto; padding:10px 16px; font-size:13.5px; border-radius:var(--r-pill); }
.btn[disabled]{ opacity:.55; pointer-events:none; }
.btn-loading{ position:relative; color:transparent !important; }
.btn-loading::after{
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite;
}
.btn.primary.btn-loading::after{ border-color:rgba(58,36,5,.3); border-top-color:#3a2405; }

/* Bouton d'action flottant */
.fab{
  position:fixed; z-index:35; right:calc(50% - var(--maxw)/2 + 18px);
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  width:58px; height:58px; border-radius:20px;
  background:linear-gradient(140deg, var(--sand), var(--sand-deep));
  color:#3a2405; display:grid; place-items:center; box-shadow:0 14px 30px -8px rgba(232,161,60,.7);
  transition:transform .22s var(--spring);
  animation:pop .5s var(--spring) both;
}
@media(max-width:520px){ .fab{ right:18px; } }
.fab:active{ transform:scale(.88) rotate(90deg); }
.fab svg{ width:26px; height:26px; stroke-width:2.6; }

/* ---- 14. Formulaires ---------------------------------------------------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:7px; padding-left:2px; }
.field .hint{ font-weight:500; color:var(--ink-3); }
.control{
  position:relative; display:flex; align-items:center;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r-md); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.control:focus-within{ border-color:var(--lagoon); box-shadow:0 0 0 4px rgba(15,109,118,.1); }
.control .lead{ padding-left:15px; color:var(--ink-3); display:grid; place-items:center; }
.control .lead svg{ width:19px; height:19px; }
.control input, .control select, .control textarea{
  width:100%; border:none; background:none; outline:none;
  padding:15px 15px; color:var(--ink); border-radius:var(--r-md);
}
.control input::placeholder, .control textarea::placeholder{ color:var(--ink-3); }
.control select{ appearance:none; -webkit-appearance:none; padding-right:42px; }
.control .caret{ position:absolute; right:15px; pointer-events:none; color:var(--ink-3); }
.control textarea{ resize:vertical; min-height:84px; }
.control .toggle-pw{ padding:0 15px; color:var(--ink-3); }
.control.with-lead input{ padding-left:8px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row-2 .field{ margin-bottom:16px; }

/* Sélecteur segmenté (type de dépense, etc.) */
.segment{ display:flex; background:var(--line-2); border-radius:var(--r-md); padding:4px; gap:4px; }
.segment input{ position:absolute; opacity:0; pointer-events:none; }
.segment label{
  flex:1; text-align:center; padding:11px 8px; border-radius:12px; margin:0;
  font-size:13.5px; font-weight:700; color:var(--ink-2);
  transition:all .25s var(--spring);
}
.segment input:checked + label{ background:var(--card); color:var(--lagoon); box-shadow:var(--sh-1); }

/* Puces de sélection (opérateurs mobile money) */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill-opt input{ position:absolute; opacity:0; }
.pill-opt label{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:var(--r-pill);
  background:var(--card); box-shadow:var(--sh-1); font-size:13px; font-weight:700; color:var(--ink-2);
  transition:all .2s var(--spring); border:1.5px solid transparent;
}
.pill-opt input:checked + label{ border-color:var(--lagoon); color:var(--lagoon); background:var(--foam); }

/* ---- 15. Notifications (toast + inline) -------------------------------- */
.notice{
  display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:var(--r-md);
  font-size:14px; font-weight:600; margin-bottom:14px; animation:rise .4s var(--ease-out) both;
}
.notice svg{ width:20px; height:20px; flex:none; }
.notice.good{ background:var(--vital-ok-bg); color:#0f5c3d; }
.notice.bad{ background:var(--vital-bad-bg); color:#8a2417; }
.notice.info{ background:var(--foam); color:var(--deep); }

.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px);
  transform:translate(-50%, 20px); z-index:60;
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r-pill);
  font-size:14px; font-weight:700; box-shadow:var(--sh-3);
  display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none;
  transition:all .35s var(--spring); max-width:90%;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast svg{ width:18px; height:18px; }

/* ---- 16. Barre d'onglets flottante ------------------------------------- */
.tabbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 12px); z-index:50;
  width:min(var(--maxw), calc(100% - 24px));
  height:var(--tabbar-h);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:26px; box-shadow:var(--sh-3);
  display:flex; align-items:stretch; padding:8px;
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--ink-3); font-size:10.5px; font-weight:700; letter-spacing:.01em;
  border-radius:18px; position:relative; transition:color .25s var(--ease);
}
.tabbar a svg{ width:23px; height:23px; stroke:currentColor; stroke-width:2; fill:none; transition:transform .3s var(--spring); }
.tabbar a.active{ color:var(--lagoon); }
.tabbar a.active svg{ transform:translateY(-2px) scale(1.08); }
.tabbar a.active::before{
  content:""; position:absolute; inset:6px 10px; border-radius:16px;
  background:var(--foam); z-index:-1; animation:pop .35s var(--spring) both;
}
.tabbar a.center-add{ flex:none; width:54px; }
.tabbar a.center-add .plus{
  width:48px; height:48px; border-radius:16px; margin-bottom:-2px;
  background:linear-gradient(140deg, var(--shallow), var(--lagoon));
  display:grid; place-items:center; box-shadow:0 8px 18px -6px rgba(15,109,118,.6);
}
.tabbar a.center-add .plus svg{ stroke:#fff; stroke-width:2.6; transform:none; }
.tabbar a.center-add.active::before{ display:none; }

/* ---- 17. Bottom sheet (modale native) ---------------------------------- */
.sheet-scrim{
  position:fixed; inset:0; z-index:70; background:rgba(6,35,43,.5);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.sheet-scrim.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:50%; transform:translate(-50%, 100%); z-index:71;
  bottom:0; width:min(var(--maxw), 100%);
  background:var(--card); border-radius:26px 26px 0 0;
  padding:10px 20px calc(env(safe-area-inset-bottom) + 24px);
  box-shadow:0 -10px 40px rgba(6,35,43,.2);
  transition:transform .4s var(--ease-out); max-height:88dvh; overflow-y:auto;
}
.sheet.open{ transform:translate(-50%, 0); }
.sheet .grip{ width:40px; height:5px; border-radius:99px; background:var(--line); margin:0 auto 14px; }
.sheet h3{ font-family:var(--font-display); font-size:19px; font-weight:800; margin-bottom:4px; }

/* ---- 18. États vides & skeletons --------------------------------------- */
.empty{ text-align:center; padding:44px 24px; }
.empty-ill{ width:96px; height:96px; margin:0 auto 18px; opacity:.9; }
.empty h3{ font-family:var(--font-display); font-size:17px; font-weight:800; margin-bottom:6px; }
.empty p{ color:var(--ink-2); font-size:14px; max-width:280px; margin:0 auto 20px; }
.skel{ background:linear-gradient(100deg,var(--line-2) 30%, #fff 50%, var(--line-2) 70%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px; }

/* ---- 19. Auth (onboarding immersif) ------------------------------------ */
.auth-wrap{ min-height:100dvh; display:flex; flex-direction:column; }
.auth-hero{
  position:relative; overflow:hidden; color:#fff;
  padding:calc(env(safe-area-inset-top) + 44px) 26px 54px;
  background:linear-gradient(160deg, var(--shallow) 0%, var(--lagoon) 45%, var(--abyss) 100%);
  border-radius:0 0 34px 34px;
}
.auth-hero .waves{ position:absolute; left:0; right:0; bottom:-1px; height:80px; opacity:.45; }
.auth-hero .waves path{ animation:drift 11s linear infinite; }
.auth-logo{ display:flex; align-items:center; gap:11px; margin-bottom:26px; position:relative; }
.auth-logo .brandmark{ width:44px; height:44px; }
.auth-logo b{ font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.02em; }
.auth-hero h1{ font-family:var(--font-display); font-size:29px; font-weight:800; letter-spacing:-.03em; line-height:1.1; position:relative; }
.auth-hero p{ margin-top:10px; opacity:.9; font-size:15px; max-width:300px; position:relative; }
.auth-card{ flex:1; padding:26px 22px calc(env(safe-area-inset-bottom) + 26px); margin-top:-20px; position:relative; z-index:2; }
.auth-card-inner{ background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-3); padding:24px 20px; animation:rise .5s var(--ease-out) both; }
.auth-switch{ text-align:center; margin-top:20px; font-size:14px; color:var(--ink-2); font-weight:500; }
.auth-switch a{ color:var(--lagoon); font-weight:800; }
.auth-alt{ text-align:right; margin-top:-6px; margin-bottom:8px; }
.auth-alt a{ font-size:13px; color:var(--lagoon); font-weight:700; }

/* Barre de force du mot de passe */
.pw-strength{ display:flex; gap:5px; margin-top:9px; }
.pw-strength i{ flex:1; height:4px; border-radius:99px; background:var(--line); transition:background .3s; }
.pw-strength.s1 i:nth-child(1){ background:var(--vital-bad); }
.pw-strength.s2 i:nth-child(-n+2){ background:var(--vital-warn); }
.pw-strength.s3 i:nth-child(-n+3){ background:var(--shallow); }
.pw-strength.s4 i{ background:var(--vital-ok); }

/* ---- 20. Admin (tableau de bord de pilotage) --------------------------- */
.admin-hero{
  background:linear-gradient(150deg, var(--ink) 0%, var(--deep) 100%);
  color:#fff; border-radius:var(--r-xl); padding:22px; box-shadow:var(--sh-3);
  position:relative; overflow:hidden;
}
.admin-hero .glow{ position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,var(--sand) 0%,transparent 70%); opacity:.25; top:-80px; right:-60px; }
.admin-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kpi{ background:var(--card); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-1); }
.kpi .n{ font-family:var(--font-num); font-size:24px; font-weight:800; letter-spacing:-.03em; }
.kpi .l{ font-size:11.5px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:5px; }
.kpi .n.money small{ font-size:13px; color:var(--ink-3); }

.admin-tabs{ display:flex; gap:6px; background:var(--line-2); padding:5px; border-radius:var(--r-md); margin:18px 0; }
.admin-tabs a{ flex:1; text-align:center; padding:10px; border-radius:11px; font-size:13px; font-weight:700; color:var(--ink-2); }
.admin-tabs a.active{ background:var(--card); color:var(--lagoon); box-shadow:var(--sh-1); }

.data-row{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-2); }
.data-row:last-child{ border-bottom:none; }
.data-av{ width:40px; height:40px; border-radius:12px; background:var(--foam); color:var(--lagoon); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; flex:none; }
.data-main{ flex:1; min-width:0; }
.data-main .t{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.data-main .s{ font-size:12px; color:var(--ink-3); }

/* ---- 21. Divers --------------------------------------------------------- */
.divider{ height:1px; background:var(--line-2); margin:18px 0; }
.center{ text-align:center; }
.mt-s{ margin-top:10px; } .mt-m{ margin-top:18px; } .mt-l{ margin-top:26px; }
.list-menu{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.list-menu a, .list-menu button{ display:flex; align-items:center; gap:14px; padding:16px 18px; width:100%; text-align:left; border-bottom:1px solid var(--line-2); transition:background .15s; }
.list-menu a:last-child, .list-menu button:last-child{ border-bottom:none; }
.list-menu a:active, .list-menu button:active{ background:var(--line-2); }
.list-menu .mi{ width:38px; height:38px; border-radius:11px; background:var(--foam); color:var(--lagoon); display:grid; place-items:center; flex:none; }
.list-menu .mt{ flex:1; font-weight:700; font-size:14.5px; }
.list-menu .ms{ font-size:12px; color:var(--ink-3); }
.list-menu .chev{ color:var(--ink-3); }

/* ---- 22. Animations clés ------------------------------------------------ */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes shimmer{ to{ background-position:-200% 0; } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes pop{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

/* Séquence d'entrée en cascade */
.stagger > *{ animation:rise .5s var(--ease-out) both; }
.stagger > *:nth-child(1){ animation-delay:.04s; }
.stagger > *:nth-child(2){ animation-delay:.10s; }
.stagger > *:nth-child(3){ animation-delay:.16s; }
.stagger > *:nth-child(4){ animation-delay:.22s; }
.stagger > *:nth-child(5){ animation-delay:.28s; }
.stagger > *:nth-child(6){ animation-delay:.34s; }
.stagger > *:nth-child(7){ animation-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .hero .waves path, .auth-hero .waves path{ animation:none; }
}

/* ---- Lien public partageable (admin > offres) ------------------------- */
.lien-box{
  display:flex; align-items:center; gap:5px; margin-top:8px;
}
.lien-box input{
  flex:1; min-width:0;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--line-2);
  font-size:11px; font-weight:600; color:var(--ink-2);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
}
.lien-copy{
  flex:none; width:30px; height:30px;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--lagoon);
  cursor:pointer; text-decoration:none;
  transition:background .14s, transform .12s;
}
.lien-copy:active{ transform:scale(.9); }
.lien-copy:hover{ background:var(--foam); }

/* ---- Case à cocher ---------------------------------------------------- */
.check{
  display:flex; align-items:center; gap:10px;
  margin-top:4px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--ink);
}
.check input{ width:19px; height:19px; accent-color:var(--lagoon); flex:none; }

/* ---- Cartes d'offre (abonnement.php) ---------------------------------- */
.offre-c{
  position:relative;
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:var(--r-l);
  padding:15px;
  margin-bottom:10px;
  box-shadow:var(--sh-s);
}
.offre-c.pop{ border-color:var(--sand); box-shadow:0 8px 24px -12px rgba(232,161,60,.5); }
.offre-c.cr{ background:linear-gradient(160deg,#fffaf2,#fff); }
.offre-tag{
  position:absolute; top:-9px; right:14px;
  background:var(--sand); color:#3a2405;
  font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:4px 9px; border-radius:99px;
}
.offre-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.offre-n{ font-family:var(--font-display); font-size:16px; font-weight:700; }
.offre-p{
  font-family:var(--font-display); font-size:22px; font-weight:800;
  letter-spacing:-.6px; white-space:nowrap; color:var(--deep);
}
.offre-p span{ font-size:11px; font-weight:600; margin-left:3px; color:var(--ink-2); }
.offre-d{
  display:flex; align-items:center; gap:6px;
  margin:11px 0 13px; padding-top:11px;
  border-top:1px dashed var(--line);
  font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.btn.sand{
  background:linear-gradient(135deg,var(--sand),var(--clay));
  color:#fff; box-shadow:0 8px 20px -8px rgba(213,97,62,.55);
}