/* =========================================================
   APP SANTÉ – STYLE B FINAL PREMIUM
   Mobile-first • Desktop optimisé • App native feel
   ========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
 background:
    radial-gradient(1800px 1000px at 20% 20%, rgba(37,99,235,.35), transparent 65%),
    radial-gradient(1600px 900px at 80% 30%, rgba(16,185,129,.35), transparent 65%),
    linear-gradient(180deg, #eaf4ff 0%, #eefbf6 100%);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #111827;
}

/* =========================================================
   STRUCTURE APP (Dashboards)
   ========================================================= */
.as-app {
  display: flex;
  gap: 28px;
  min-height: 100vh;
  padding: 24px;
}

/* =========================================================
   SIDEBAR (DESKTOP)
   ========================================================= */
/* =========================================================
   SIDEBAR — PREMIUM GREEN → BLUE GRADIENT
   ========================================================= */

.as-nav {
  width: 260px;

  background: linear-gradient(
    180deg,
    #d8f3ea 0%,
    #cdebf5 100%
  );

  border-radius: 26px;
  padding: 22px 18px;

  /* Contour premium solide */
  border: 2px solid #9bd8c8;

  /* Ombre luxe douce */
  box-shadow:
    0 25px 60px rgba(16,185,129,.18),
    0 10px 25px rgba(37,99,235,.15);

  color: #083344;
}



/* Brand */
.as-brand {
  font-weight: 900;
  font-size: 19px;
  margin-bottom: 22px;
  letter-spacing: -0.5px;
  color: #ffffff;
}

/* Items */
.as-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 16px;
  margin-bottom: 8px;

  text-decoration: none;
  color: #065f46;
  font-weight: 700;

  transition: all .25s ease;
}


.as-nav-item:hover {
  background: linear-gradient(
    90deg,
    rgba(16,185,129,.18),
    rgba(37,99,235,.18)
  );
  transform: translateX(6px);
  color: #0c4a6e;
}



.as-nav-item.is-active {
  background: linear-gradient(
    90deg,
    #10b981,
    #3b82f6
  );

  color: white;
  font-weight: 800;

  box-shadow:
    0 12px 30px rgba(16,185,129,.35),
    0 8px 25px rgba(37,99,235,.35);
}
.as-nav::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  background: radial-gradient(
    600px 200px at 0% 0%,
    rgba(255,255,255,.35),
    transparent 60%
  );
  pointer-events:none;
}


/* =========================================================
   CONTENU PRINCIPAL
   ========================================================= */
.as-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */
.as-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.as-kicker { font-size: 13px; color: #6b7280; }

.as-title {
  font-size: 26px;
  font-weight: 800;
  margin: 2px 0 0;
}

/* ---------- Boutons (Dashboard) ---------- */
.as-btn {
  border: none;
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
}

.as-btn-primary {
  background: #2563eb;
  color: #ffffff;
}
.as-btn-primary:hover { background: #1d4ed8; }

/* =========================================================
   GRID & CARTES
   ========================================================= */
.as-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.as-card {
  position: relative;
  background: #ffffff;

  border-radius: 22px;
  padding: 24px;

  border: 1px solid rgba(0,0,0,0.06);

  /* Ombre multi-layer beaucoup plus visible */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.05),
    0 15px 35px rgba(0, 40, 60, 0.12),
    0 35px 80px rgba(0, 80, 60, 0.15);

  transition: all 0.35s ease;
}

/* Liseré lumineux métallique */
.as-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.5px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.9),
    rgba(0,160,140,0.45),
    rgba(0,110,200,0.45),
    rgba(255,255,255,0.8)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}
.as-card:hover::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background: radial-gradient(
    600px 200px at 20% 0%,
    rgba(0,160,140,0.18),
    transparent 70%
  );
  pointer-events:none;
}

.as-card-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.as-muted { color: #6b7280; font-size: 15px; }

.as-card-actions { margin-top: 10px; }

.as-link{
  font-weight: 700;
  text-decoration: none;
  color: #0f766e;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.as-link::after{
  content: "→";
  font-size: 14px;
  transition: transform .2s ease;
}

.as-link:hover::after{
  transform: translateX(4px);
}

.as-card:hover {
  transform: translateY(-8px);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.08),
    0 25px 60px rgba(0, 100, 80, 0.25),
    0 50px 120px rgba(0, 150, 120, 0.18);
}



/* ---------- Cartes cliquables ---------- */
.as-cardlink { display: block; text-decoration: none; color: inherit; }

.as-card.is-clickable {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.as-card.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
}

/* ---------- Progress ---------- */
.as-progress {
  height: 10px;
  background: #e5e7eb;
  border-radius: 999px;
  margin: 12px 0 8px;
  overflow: hidden;
}
.as-progress-bar {
  height: 100%;
  background: #2563eb;
  border-radius: 999px;
}

/* =========================================================
   BOTTOM TAB BAR – APP NATIVE (MOBILE)
   ========================================================= */
.as-bottomtabs { display: none; }

@media (max-width: 980px) {
  .as-app {
    display: block;
    padding-bottom: 110px;
  }

  .as-nav { display: none; }

  .as-grid { grid-template-columns: 1fr; }

  .as-bottomtabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    padding: 10px 6px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(0,0,0,.06);
    z-index: 9999;
  }

  .as-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    text-decoration: none;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
  }

  .as-tab-icon { font-size: 20px; line-height: 1; }

  .as-tab.is-active { color: #2563eb; }
  .as-tab.is-active .as-tab-icon { transform: scale(1.08); }
}

/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */
@media (min-width: 1200px) {
  .as-app {
    max-width: 1800px;
    margin: 0 auto;
    padding: 32px 48px;
  }

  .as-nav {
    position: sticky;
    top: 32px;
    align-self: flex-start;
  }

  .as-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }
}

@media (min-width: 1600px) {
  .as-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================
   MASQUER LE THÈME WORDPRESS (APP ONLY)
   ========================================================= */
.appsante-app header,
.appsante-app footer,
.appsante-app .site-header,
.appsante-app .site-footer,
.appsante-app .main-navigation,
.appsante-app .wp-block-navigation,
.appsante-app .wp-block-site-logo,
.appsante-app .wp-block-site-title,
.appsante-app .wp-site-blocks > header,
.appsante-app .wp-site-blocks > footer {
  display: none !important;
}

.appsante-app #page,
.appsante-app #content,
.appsante-app main,
.appsante-app .wp-site-blocks,
.appsante-app .site,
.appsante-app .site-content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   FORM BUILDER → STYLE B (FRONT)
   ========================================================= */
.appsante-front-form input,
.appsante-front-form select,
.appsante-front-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  font-size: 16px; /* important pour seniors */
  background: #fff;
}

.appsante-front-form label {
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}

.appsante-front-form .appsante-btn-primary {
  margin-top: 12px;
  border-radius: 16px;
  padding: 14px 20px;
  font-weight: 800;
}

/* =========================================================
   FICHE SANTÉ — ALLERGIES (card accent)
   ========================================================= */
#as-allergies .as-card { border-left: 4px solid #ef4444; }
#as-allergies h2 { font-size: 20px; font-weight: 800; }
#as-allergies .as-muted { font-size: 15px; }

/* =========================================================
   MEDICAL WIZARD — PREMIUM (App-like)
   NOTE: Ceci remplace les anciens blocs du wizard (doublons)
   ========================================================= */

/* App-level typography & theme-safety */
.as-wizard, .as-wizard *{
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text",
               Inter, Segoe UI, Roboto, Arial, sans-serif;
}

/* Container */
.as-wizard{
  width: min(980px, 100%);
  margin: 14px auto;
  padding: 16px 14px 120px;
}

/* Header */
.as-wz-head{
  display:flex;
  gap:12px;
  align-items:center;
  margin: 0 0 10px;
}

.as-back{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.as-wz-meta{ display:flex; flex-direction:column; gap:2px; }

.as-wz-title{
  font-weight:800;
  font-size:15px;
  opacity:.85;
}

.as-step{
  font-size:13px;
  opacity:.55;
}

/* Progress */
.as-bar{
  height:10px;
  background: rgba(15,23,42,.08);
  border-radius:999px;
  overflow:hidden;
  margin: 10px 0 16px;
}
.as-bar span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

/* Screen card */
.as-screen{
  background:#fff;
  border-radius:24px;
  padding:18px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
}

/* Title */
.as-screen h2{
  font-size:22px;
  line-height:1.2;
  margin: 0 0 14px;
  letter-spacing:-.3px;
}

/* Blocks & labels */
.as-block{ margin: 12px 0; }

.as-label{
  font-weight:800;
  font-size:14px;
  opacity:.85;
  margin: 12px 0 8px;
}

/* Inputs */
.as-input,
.as-text{
  width:100%;
  border-radius:16px;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  outline:none;
  font-size:15px;
}

.as-text{ min-height: 90px; resize: vertical; }

/* Radios -> pills */
.as-radio{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.as-radio label{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.as-radio input{ width:16px; height:16px; }

/* Checklist chips */
.as-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 6px;
}

.as-check{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
  user-select:none;
}

.as-check input{ width:16px;height:16px; }

.as-check.is-checked{
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.10);
}

/* “Aucune de ces réponses” style */
.as-none{
  border-style:dashed;
  opacity:.9;
}

/* Sticky CTA */
.as-actions{
  position: sticky;
  bottom: 14px;
  margin-top: 18px;
  display:flex;
  justify-content:flex-end;
  padding-top: 8px;
}

.as-wz-btn{
  border:none;
  border-radius:16px;
  padding: 12px 16px;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  box-shadow: 0 18px 40px rgba(37,99,235,.22);
}

/* Mobile */
@media (max-width: 760px){
  .as-wizard{
    margin: 10px auto;
    padding: 12px 12px 130px;
  }

  .as-screen{ padding: 16px; border-radius: 22px; }

  .as-screen h2{ font-size: 20px; }

  .as-actions{ justify-content: stretch; }

  .as-wz-btn{ width: 100%; }
}
/* ==============================
   APP SANTÉ – MEDICAL WIZARD WOW
   ============================== */

.as-wizard{
  max-width: 420px;
  margin: 16px auto;
  padding: 0 12px 120px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
}

.as-screen{
  background:#fff;
  border-radius:28px;
  padding:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.as-wz-head{
  display:flex;
  gap:12px;
  align-items:center;
}

.as-back{
  width:44px;height:44px;
  border-radius:14px;
  border:none;
  background:#f1f5f9;
  font-size:18px;
}

.as-wz-title{font-weight:800;font-size:15px;}
.as-step{font-size:12px;color:#64748b;}

.as-bar{
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  margin:14px 0 20px;
}
.as-bar span{
  height:100%;
  display:block;
  background:linear-gradient(90deg,#3b82f6,#2563eb);
  border-radius:999px;
}

h2{
  font-size:22px;
  margin-bottom:14px;
}

.as-label{
  font-weight:700;
  margin-bottom:8px;
}

.as-radio{
  display:flex;
  gap:12px;
}
.as-radio label{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
}

.as-text{
  width:100%;
  min-height:90px;
  border-radius:16px;
  padding:12px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
}

.as-range{
  width:100%;
}

.as-actions{
  position:sticky;
  bottom:16px;
}
.as-nav-ico{
  display:inline-flex;
  width:28px;
  justify-content:center;
  margin-right:10px;
  font-size:18px;
  line-height:1;
}
.as-nav-label{ vertical-align:middle; }
/* MODE APP SANTÉ — masquer thème WP */
.appsante-app header,
.appsante-app footer,
.appsante-app .site-header,
.appsante-app .site-footer,
.appsante-app .main-navigation,
.appsante-app .wp-block-navigation,
.appsante-app .wp-site-blocks > header,
.appsante-app .wp-site-blocks > footer {
  display: none !important;
}

/* Neutraliser le wrapper du thème */
.appsante-app #page,
.appsante-app #content,
.appsante-app main,
.appsante-app .wp-site-blocks,
.appsante-app .site,
.appsante-app .site-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
/* MODE APP SANTÉ — masquer thème WP (BODY CLASS REQUIRED) */
body.appsante-app header,
body.appsante-app footer,
body.appsante-app #masthead,
body.appsante-app #colophon,
body.appsante-app .site-header,
body.appsante-app .site-footer,
body.appsante-app .main-navigation,
body.appsante-app .wp-block-navigation,
body.appsante-app .wp-site-blocks > header,
body.appsante-app .wp-site-blocks > footer,

/* Astra / Kadence / Divi (très communs) */
body.appsante-app .ast-header,
body.appsante-app .ast-footer-wrap,
body.appsante-app .kadence-header,
body.appsante-app .kadence-footer,
body.appsante-app #et-main-area > header,
body.appsante-app #main-header,
body.appsante-app #top-header,
body.appsante-app #et-footer-nav,
body.appsante-app #main-footer {
  display: none !important;
}

body.appsante-app #page,
body.appsante-app #content,
body.appsante-app main,
body.appsante-app .wp-site-blocks,
body.appsante-app .site,
body.appsante-app .site-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
/* ==========================
   DOCUMENTS — UI PREMIUM
   ========================== */
.as-toolbar{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

.as-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  min-width: min(520px, 100%);
}

.as-search-input{
  border:none;
  outline:none;
  font-size: 15px;
  width:100%;
  background: transparent;
}

.as-filters{ display:flex; gap:10px; flex-wrap:wrap; }

.as-chip{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:999px;
  padding: 10px 12px;
  font-weight:800;
  font-size: 13px;
  cursor:pointer;
}
.as-chip.is-active{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.10);
  color:#1d4ed8;
}

.as-docs-table{
  background:#fff;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
}
.as-docs-row{
  display:grid;
  grid-template-columns: 1.6fr .6fr .6fr .5fr .7fr;
  gap: 12px;
  padding: 14px 16px;
  align-items:center;
  border-top: 1px solid rgba(0,0,0,.06);
}
.as-docs-head{
  border-top:none;
  background: rgba(15,23,42,.03);
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.70);
}

.as-docs-title{ display:flex; gap:12px; align-items:flex-start; }
.as-doc-ico{ font-size: 22px; line-height: 1; margin-top: 2px; }
.as-doc-name{ font-weight: 900; }
.as-doc-sub{ font-size: 13px; margin-top: 2px; }

.as-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,.20);
}

.as-docs-actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
}

.as-iconbtn{
  border:none;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px 10px;
  cursor:pointer;
  font-size: 15px;
  line-height:1;
  transition: transform .12s ease, background .12s ease;
}
.as-iconbtn:hover{ transform: translateY(-1px); background: rgba(37,99,235,.08); }
.as-iconbtn.is-danger:hover{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.22); }

.as-empty{
  text-align:center;
  padding: 32px 22px;
}
.as-empty-ico{ font-size: 34px; margin-bottom: 10px; }
.as-footnote{ margin-top: 12px; }

/* Modal */
.as-noscroll{ overflow:hidden; }
.as-modalbackdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 99999;
}
.as-modalbackdrop.is-open{ display:flex; }
.as-modal{
  width: min(920px, 100%);
  background:#fff;
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.25);
  overflow:hidden;
}
.as-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.as-modal-title{ font-weight: 900; font-size: 18px; margin-top: 2px; }
.as-modal-body{ padding: 16px; }
.as-modal-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(15,23,42,.02);
}
.as-btn-ghost{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
}

/* Stepper */
.as-stepcard{ display:none; }
.as-stepcard.is-active{ display:block; }
.as-step-title{ font-weight: 900; margin-bottom: 12px; }
.as-typegrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.as-typecard{
  text-align:left;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  padding: 14px;
  cursor:pointer;
}
.as-typecard.is-selected{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.06);
}
.as-type-ico{ font-size: 22px; }
.as-type-name{ font-weight: 900; margin-top: 8px; }
.as-type-sub{ font-size: 13px; color: #6b7280; margin-top: 2px; }

.as-uploadpanel{
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: 18px;
  padding: 14px;
  background: rgba(15,23,42,.02);
}
.as-uploadactions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.as-filebtn{ display:inline-flex; align-items:center; gap:8px; }
.as-preview{ margin-top: 12px; }
.as-preview-box{
  border-radius: 18px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  padding: 12px;
  margin-top: 8px;
}
/* 👁️ QUICK FIND: [AS-DOCS-PREVIEW-LIMIT] */
.as-preview-box{ max-height: 340px; overflow:auto; }
.as-preview-media img{ width:100%; height:auto; max-height: 260px; object-fit: contain; display:block; }

@media (max-width: 520px){
  .as-preview-box{ max-height: 240px; }
  .as-preview-media img{ max-height: 160px; }
}

.as-note{ margin-top: 10px; }

/* Camera overlay (UI only Phase 1) */
.as-cam{
  position: fixed;
  inset: 0;
  background: #0b1220;
  display:none;
  flex-direction: column;
  z-index: 999999;
}
.as-cam.is-open{ display:flex; }
.as-cam-top, .as-cam-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  color:#fff;
}
.as-cam-stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  padding: 14px;
}
.as-cam-feed{
  width: min(520px, 100%);
  aspect-ratio: 9/16;
  background: rgba(255,255,255,.06);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  position: relative;
}
.as-cam-placeholder{
  color: rgba(255,255,255,.75);
  display:flex;
  height:100%;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

/* ID Card Capture Mask */
.as-idmask{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.as-idmask-hole{
  width: min(420px, 88%);
  aspect-ratio: 1.585/1;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.85);
}
.as-idmask-label{
  position:absolute;
  bottom: 18px;
  color:#fff;
  font-weight: 900;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 12px;
  border-radius: 999px;
}

@media (max-width: 980px){
  .as-docs-row{
    grid-template-columns: 1.4fr .5fr .6fr;
  }
  .as-docs-row .as-docs-cell:nth-child(4){ display:none; } /* taille */
  .as-docs-row .as-docs-cell:nth-child(5){ grid-column: 3; } /* actions */
  .as-typegrid{ grid-template-columns: 1fr; }
  .as-search{ min-width: 100%; }
}
.as-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#e53935;
  color:#fff;
  line-height:1;
}
/* =========================================================
   APP SANTÉ — AUTH (Login/Register) — PREMIUM UI
   👁️ QUICK FIND: [AS-AUTH-CSS]
   ========================================================= */

.appsante-auth,
.appsante-auth * { box-sizing: border-box; }

.appsante-auth{
  min-height: calc(100vh - 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 14px;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.00));
}

.appsante-auth-shell{
  width: min(520px, 100%);
}

.appsante-auth-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
}

.appsante-auth-brand{
  text-align: center;
  margin-bottom: 14px;
}

.appsante-auth-logo{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-block;
  object-fit: cover;
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}

.appsante-auth-logo--fallback{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #0f172a;
}

.appsante-auth-title{
  margin: 12px 0 6px;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.6px;
  font-weight: 900;
  color: #0f172a;
}

.appsante-auth-subtitle{
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(15,23,42,.72);
}

.appsante-login-error,
.appsante-login-success{
  margin: 12px 0 10px;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
}

.appsante-login-error{
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);
  color: #991b1b;
}

.appsante-login-success{
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.22);
  color: #065f46;
}

.appsante-auth-divider{
  position: relative;
  text-align: center;
  margin: 14px 0 12px;
}

.appsante-auth-divider:before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:1px;
  background: rgba(15,23,42,.10);
}

.appsante-auth-divider span{
  position: relative;
  display: inline-block;
  padding: 0 10px;
  background: #fff;
  color: rgba(15,23,42,.55);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.appsante-field{
  margin: 12px 0;
}

.appsante-field label{
  display:block;
  margin-bottom: 6px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.82);
}

.appsante-field input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  outline: none;
  font-size: 15px;
}

.appsante-field input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
  background: #fff;
}

.appsante-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}

.appsante-check{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(15,23,42,.72);
}

.appsante-check input{ width: 16px; height: 16px; }

.appsante-link{
  color: #2563eb;
  font-weight: 900;
  text-decoration: none;
}

.appsante-link:hover{ text-decoration: underline; }

.appsante-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  cursor: pointer;
  font-weight: 900;
  text-decoration: none;
  user-select: none;
}

.appsante-btn-primary{
  background: linear-gradient(180deg, rgba(37,99,235,1), rgba(29,78,216,1));
  border: 0;
  color: #fff;
  box-shadow: 0 18px 40px rgba(37,99,235,.22);
}

.appsante-btn-primary:hover{
  filter: brightness(0.98);
}

.appsante-btn-google{
  background: #fff;
  color: #0f172a;
}

.appsante-btn-google:hover{
  background: rgba(15,23,42,.02);
}

.appsante-btn-google-icon{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    conic-gradient(#ea4335 0 90deg, #fbbc05 90deg 180deg, #34a853 180deg 270deg, #4285f4 270deg 360deg);
  box-shadow: 0 6px 16px rgba(15,23,42,.12);
}

.appsante-auth-foot{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appsante-auth-foot-line{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 800;
  color: rgba(15,23,42,.70);
  font-size: 13px;
}

.appsante-dot{ opacity: .45; }

.appsante-auth-note{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(15,23,42,.55);
  text-align: center;
}

@media (max-width: 520px){
  .appsante-auth-card{ padding: 18px; border-radius: 20px; }
  .appsante-auth-title{ font-size: 26px; }
}

/* FIX HARD — Bottom tabs toujours visibles en mobile */
.as-bottomtabs,
.as-bottomtabs.as-tabbar{
  display:none;
}

@media (max-width: 980px){
  .as-bottomtabs,
  .as-bottomtabs.as-tabbar{
    display:flex !important;
  }

  /* évite que le contenu passe sous la tabbar */
  .as-main{ padding-bottom: 110px !important; }
}
/* =========================================================
   APP SANTÉ — FALLBACK MENU MOBILE (pages sans .as-app)
   ========================================================= */
   /* 👁️ QUICK FIND: [AS-SUIVI-MOBILE-FIRST] */

@media (max-width: 768px) {

  .appsante-suivi-grid {
    display: block !important;
  }

  .appsante-suivi-card {
    width: 100%;
    margin: 0 0 16px 0;
    border-radius: 16px;
  }

  .appsante-suivi-card h3 {
    font-size: 18px;
  }

  #appsanteSuiviChartWrap {
    display: none;
    margin-top: 16px;
  }

  .as-btn-primary {
    width: 100%;
    height: 52px;
    font-size: 16px;
  }

  .appsante-history .history-row {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 980px) {

  /* Cas normal (déjà présent chez toi) */
  .as-app {
    padding-bottom: 110px;
  }

  /* ✅ FALLBACK GLOBAL
     Si une page patient n’a PAS le wrapper .as-app
     (ex: factures, billets, documents, shortcodes simples)
  */
  body.appsante-app {
    padding-bottom: 110px;
  }

}