/* ==========================================================================
   My Doctor — Design tokens (web)
   Source : lib/core/theme/app_theme.dart (AppColors) + specs.md
   ========================================================================== */
@font-face{font-family:"Poppins";src:url("../assets/fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("../assets/fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("../assets/fonts/Poppins-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  /* Marque */
  --blue:#0070D2; --blue-600:color-mix(in oklab,var(--blue) 80%,#000); --blue-50:color-mix(in oklab,var(--blue) 8%,#fff); --blue-100:color-mix(in oklab,var(--blue) 16%,#fff);
  --teal:#00A896; --teal-strong:#007A6C; --teal-600:color-mix(in oklab,var(--teal) 78%,#000); --teal-50:color-mix(in oklab,var(--teal) 9%,#fff);
  --red:#EB5757;  --red-600:#C93C3C; --red-50:#FEF2F2;
  --navy:#0F2A4A;
  --amber:#B45309; --amber-50:#FFF7ED;
  /* Neutres */
  --ink:#0F172A; --ink-2:#334155; --ink-3:#475569; --muted:#5B6B80; --muted-2:#5E6E83; /* ≥ 4,5:1 sur blanc ET sur sable */
  --line:#E2E8F0; --line-2:#CBD5E1;
  --bg:#FFFFFF; --bg-soft:#F8FAFC; --bg-mute:#F1F5F9; --sand:#F7F5F0;
  /* Typo */
  --font:"Poppins", ui-sans-serif, system-ui, sans-serif;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px;
  --fs-2xl:28px; --fs-3xl:36px; --fs-4xl:48px; --fs-5xl:60px;
  /* Espacement (multiplié par la densité) */
  --d:1;
  --s1:calc(4px*var(--d)); --s2:calc(8px*var(--d)); --s3:calc(12px*var(--d)); --s4:calc(16px*var(--d));
  --s5:calc(20px*var(--d)); --s6:calc(24px*var(--d)); --s8:calc(32px*var(--d)); --s10:calc(40px*var(--d));
  --s12:calc(48px*var(--d)); --s16:calc(64px*var(--d)); --s20:calc(80px*var(--d)); --s24:calc(112px*var(--d));
  /* Rayons */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-full:999px;
  /* Ombres */
  --sh-1:0 1px 2px rgba(15,42,74,.06), 0 1px 1px rgba(15,42,74,.04);
  --sh-2:0 8px 24px rgba(15,42,74,.07);
  --sh-3:0 24px 60px rgba(15,42,74,.12);
  --focus:0 0 0 3px #fff, 0 0 0 5px var(--blue);
  --ease:cubic-bezier(.22,1,.36,1); --ease-out:var(--ease); /* une seule courbe (brief motion) */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink-2);background:var(--bg);font-size:var(--fs-md);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--navy);margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
img{max-width:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}

/* ---------- Layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s6)}
.section{padding:var(--s24) 0}
.section.soft{background:var(--bg-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-600)}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
.h-display{font-size:clamp(34px,5.2vw,var(--fs-5xl));font-weight:700}
.h-section{font-size:clamp(28px,3.2vw,40px)}
.lead{font-size:var(--fs-lg);color:var(--ink-3);max-width:62ch}
.sec-head{display:grid;gap:var(--s4);margin-bottom:var(--s12);max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- Boutons ---------- */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 22px;border-radius:var(--r-full);border:1.5px solid transparent;font-weight:600;font-size:15px;white-space:nowrap;transition:background .18s var(--ease),color .18s,border-color .18s,transform .18s,box-shadow .18s;text-decoration:none!important}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-600)}
.btn-teal{background:var(--teal-strong);color:#fff} /* 5,25:1 (au lieu de 2,98:1) */
.btn-teal:hover{background:var(--teal-600)}
.btn-outline{border-color:var(--line-2);color:var(--navy);background:#fff}
.btn-outline:hover{border-color:var(--navy)}
.btn-ghost{color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--bg-mute)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--blue-50)}
.btn-danger{background:var(--red-600);color:#fff} /* 5,01:1 (au lieu de 3,48:1) */
.btn-danger:hover{background:var(--red-600)}
.btn-sm{--h:38px;padding:0 14px;font-size:14px}
.btn-lg{--h:56px;padding:0 28px;font-size:16px}
.btn-icon{width:var(--h);padding:0}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- Champs ---------- */
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:500;color:var(--navy)}
.field .hint{font-size:13px;color:var(--muted)}
.field .err{font-size:13px;color:var(--red-600);display:flex;gap:6px;align-items:center}
.input{height:48px;border:1.5px solid var(--line-2);border-radius:var(--r-md);padding:0 14px;background:#fff;color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
textarea.input{height:auto;padding:12px 14px;min-height:96px;resize:vertical}
.input:hover{border-color:var(--muted-2)}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.input[aria-invalid="true"]{border-color:var(--red)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-3)}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue)}

/* ---------- Cartes / badges ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1)}
.card-pad{padding:var(--s6)}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-full);font-size:12px;font-weight:600;white-space:nowrap}
.b-blue{background:var(--blue-50);color:var(--blue-600)}
.b-teal{background:var(--teal-50);color:var(--teal-600)}
.b-red{background:var(--red-50);color:var(--red-600)}
.b-amber{background:var(--amber-50);color:var(--amber)}
.b-gray{background:var(--bg-mute);color:var(--ink-3)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}

/* ---------- Tableaux ---------- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:12px 16px;background:var(--bg-soft);border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr:hover{background:var(--bg-soft)}

/* ---------- Alertes ---------- */
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);font-size:14px;line-height:1.5}
.alert svg{flex:none;margin-top:1px}
.a-info{background:var(--blue-50);color:#0B3F75}
.a-ok{background:var(--teal-50);color:#05564D}
.a-warn{background:var(--amber-50);color:#7C3A06}
.a-err{background:var(--red-50);color:#8F1F1F}

/* ---------- Skeleton ---------- */
.sk{background:linear-gradient(90deg,var(--bg-mute) 0%,#E9EEF4 50%,var(--bg-mute) 100%);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:8px}
@keyframes sh{to{background-position:-200% 0}}

/* ---------- Modale / toasts ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:grid;place-items:center;z-index:120;padding:16px;animation:fade .15s}
.modal{background:#fff;border-radius:var(--r-2xl);box-shadow:var(--sh-3);width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;animation:pop .2s var(--ease)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:150}
.toast{background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r-md);box-shadow:var(--sh-3);font-size:14px;display:flex;gap:10px;align-items:center;animation:pop .2s}

/* Démo */
.demo-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);background:var(--amber-50);border:1px dashed #F5C99A;padding:3px 8px;border-radius:6px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}