:root{ --ink:#1B3A4B; --teal:#0D7377; --teal-deep:#0A5A5D; --mint:#32E0C4; --paper:#FFFFFF; --paper-dim:#F4F8F8; --line:#E1E8E8; --line-strong:#C7D4D4; --teal-tint:#E3F3F3; --mint-tint:#E5FBF6; --text-soft:#5B6E70; --risk-low:#2F7D52; --risk-low-tint:#E8F3EC; --risk-mod:#B8862B; --risk-mod-tint:#FBF1E1; --risk-high:#C44536; --risk-high-tint:#FCEAE7; --font-display:'Fraunces', serif; --font-body:'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace; /* Spacing scale */ --sp-xs:8px; --sp-sm:14px; --sp-md:22px; --sp-lg:32px; --sp-xl:48px; } /* ── Reset ── */ *{margin:0;padding:0;box-sizing:border-box;} body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased; /* prevent horizontal overflow on all devices */ overflow-x:hidden; } a{color:inherit;} img,svg{max-width:100%;} /* ── App wrapper ── */ .app{ max-width:1180px; margin:0 auto; padding:0 clamp(14px, 4vw, 28px) 80px; } /* ══════════════════════════════════════ TOPBAR ══════════════════════════════════════ */ .topbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px 0 14px; border-bottom:1px solid var(--line); margin-bottom:28px; } .logo{height:clamp(36px,5vw,48px);display:block;} .topbar-right{display:flex;align-items:center;} .proto-tag{ font-family:var(--font-mono); font-size:clamp(9px,2vw,11px); letter-spacing:.03em; color:var(--teal-deep); background:var(--teal-tint); border:1px solid #BFE0E0; padding:5px 10px; border-radius:5px; font-weight:500; white-space:nowrap; } /* ══════════════════════════════════════ DISCLAIMER ══════════════════════════════════════ */ .disclaimer{ display:flex; gap:12px; align-items:flex-start; background:var(--ink); color:#fff; border-radius:10px; padding:clamp(10px,3vw,14px) clamp(12px,4vw,18px); margin-bottom:clamp(22px,4vw,36px); } .disclaimer svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--mint);} .disclaimer p{font-size:clamp(12px,2.5vw,13px);line-height:1.55;color:#D9E4E4;} .disclaimer strong{color:#fff;font-weight:600;} /* ══════════════════════════════════════ PAGE TITLE ══════════════════════════════════════ */ .page-title{ font-family:var(--font-display); font-size:clamp(20px,4vw,27px); font-weight:600; letter-spacing:-0.01em; margin-bottom:8px; line-height:1.2; } .page-subtitle{ font-size:clamp(13px,2.5vw,14px); color:var(--text-soft); margin-bottom:16px; max-width:560px; } /* ══════════════════════════════════════ INPUT CARD ══════════════════════════════════════ */ .input-card{ border:1px solid var(--line); border-radius:14px; padding:clamp(16px,4vw,24px); background:var(--paper-dim); margin-bottom:clamp(28px,5vw,44px); } .input-grid{ display:grid; grid-template-columns:1fr 56px 1fr; gap:16px; align-items:end; } .field{display:flex;flex-direction:column;gap:8px;position:relative;} .field label{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-soft); } .autocomplete-wrap{position:relative;} .field input{ width:100%; font-family:var(--font-body); font-size:clamp(14px,3vw,14.5px); font-weight:500; padding:clamp(11px,2.5vw,13px) 14px; border:1.5px solid var(--line-strong); border-radius:9px; background:var(--paper); color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; /* prevent zoom on iOS */ font-size:max(16px, 14px); } .field input:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,115,119,0.12); } .swap-col{display:flex;align-items:center;justify-content:center;height:46px;} .swap-btn{ width:38px;height:38px;border-radius:50%; border:1px solid var(--line-strong); background:var(--paper); display:flex;align-items:center;justify-content:center; cursor:pointer; transition:border-color .15s, transform .25s; /* touch target minimum 44px */ min-width:44px;min-height:44px; } .swap-btn:hover{border-color:var(--teal);transform:rotate(180deg);} .swap-btn svg{width:16px;height:16px;color:var(--teal-deep);} .suggestions{ position:absolute; top:calc(100% + 4px); left:0;right:0; background:var(--paper); border:1px solid var(--line-strong); border-radius:9px; box-shadow:0 8px 24px rgba(27,58,75,0.12); z-index:20; overflow:hidden; display:none; /* max-height for long lists on mobile */ max-height:220px; overflow-y:auto; } .suggestions.open{display:block;} .suggestion-item{ padding:clamp(10px,2vw,9px) 14px; font-size:clamp(13px,3vw,13.5px); cursor:pointer; transition:background .1s; /* larger touch target */ min-height:44px; display:flex; align-items:center; } .suggestion-item:hover,.suggestion-item.active{background:var(--teal-tint);} .input-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:12px; flex-wrap:wrap; } .sample-pairs{display:flex;gap:8px;flex-wrap:wrap;flex:1;} .sample-chip{ font-family:var(--font-mono); font-size:clamp(10px,2vw,11px); padding:6px 10px; border-radius:6px; border:1px solid var(--line-strong); background:var(--paper); cursor:pointer; color:var(--text-soft); transition:all .15s; min-height:36px; display:flex; align-items:center; } .sample-chip:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-tint);} .analyze-btn{ font-family:var(--font-body); font-weight:600; font-size:clamp(13px,3vw,14px); color:#fff; background:var(--ink); border:none; padding:clamp(11px,2.5vw,13px) clamp(18px,4vw,26px); border-radius:9px; cursor:pointer; display:flex;align-items:center;justify-content:center;gap:9px; transition:background .15s; white-space:nowrap; min-height:48px; } .analyze-btn:hover{background:var(--teal-deep);} .analyze-btn:disabled{opacity:.6;cursor:default;} .analyze-btn svg{width:15px;height:15px;flex-shrink:0;} .error-banner{ margin-top:14px; padding:12px 16px; background:var(--risk-high-tint); border:1px solid #F0C9C2; border-radius:9px; color:#8C3327; font-size:clamp(12.5px,3vw,13.5px); line-height:1.5; } /* ══════════════════════════════════════ RESULTS ══════════════════════════════════════ */ .results{display:flex;flex-direction:column;gap:clamp(22px,4vw,36px);} .section-title{ font-family:var(--font-display); font-size:clamp(16px,3.5vw,19px); font-weight:600; margin-bottom:14px; } /* result hero */ .result-hero{ display:grid; grid-template-columns:220px 1fr; gap:clamp(20px,4vw,36px); border:1px solid var(--line); border-radius:16px; padding:clamp(20px,4vw,32px); position:relative; overflow:hidden; } .result-hero::before{ content:""; position:absolute; top:0;left:0;bottom:0; width:4px; } .result-hero.risk-low::before{background:var(--risk-low);} .result-hero.risk-modere::before{background:var(--risk-mod);} .result-hero.risk-eleve::before{background:var(--risk-high);} .gauge-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;} .gauge-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);} .result-main{display:flex;flex-direction:column;gap:16px;} .result-pair{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .drug-pill{ font-family:var(--font-mono); font-size:clamp(11.5px,2.5vw,13px); font-weight:600; padding:6px 12px; border-radius:7px; background:var(--ink); color:#fff; word-break:break-all; } .result-pair .x{color:var(--text-soft);font-size:13px;} .risk-badge{ display:inline-flex;align-items:center;gap:7px; font-size:clamp(12px,2.5vw,13px);font-weight:600; padding:7px 14px; border-radius:99px; width:fit-content; text-transform:capitalize; } .risk-badge.low{background:var(--risk-low-tint);color:var(--risk-low);} .risk-badge.modere{background:var(--risk-mod-tint);color:var(--risk-mod);} .risk-badge.eleve{background:var(--risk-high-tint);color:var(--risk-high);} .risk-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;} .result-headline{ font-family:var(--font-display); font-size:clamp(17px,4vw,22px); font-weight:600; letter-spacing:-0.01em; line-height:1.35; } .result-headline em{font-style:normal;font-weight:700;} .result-headline em.low{color:var(--risk-low);} .result-headline em.modere{color:var(--risk-mod);} .result-headline em.eleve{color:var(--risk-high);} .confidence-row{ display:flex;align-items:center;gap:12px; padding-top:8px; border-top:1px solid var(--line); flex-wrap:wrap; } .confidence-label{font-size:12px;color:var(--text-soft);font-weight:500;white-space:nowrap;} .confidence-bar{flex:1;min-width:80px;height:6px;background:var(--line);border-radius:99px;overflow:hidden;} .confidence-fill{height:100%;background:var(--teal);border-radius:99px;} .confidence-value{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--teal-deep);} /* molecules */ .mol-row{display:flex;gap:16px;margin-top:6px;flex-wrap:wrap;} .mol-card{ flex:1; min-width:120px; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--paper-dim); text-align:center; } .mol-card svg{max-width:100%;width:100%;height:auto;display:block;margin:0 auto;} .mol-card .mol-label{font-size:11.5px;color:var(--text-soft);margin-top:4px;font-weight:500;} /* grid 2 cards */ .grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;} .card{ border:1px solid var(--line); border-radius:14px; padding:clamp(16px,3vw,22px); background:var(--paper); } .card h3{ font-family:var(--font-display); font-size:clamp(14px,3vw,16px); font-weight:600; margin-bottom:14px; } /* reasons */ .reason-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);} .reason-item:last-child{border-bottom:none;padding-bottom:0;} .reason-icon{ width:28px;height:28px;border-radius:7px; background:var(--teal-tint); color:var(--teal-deep); display:flex;align-items:center;justify-content:center; flex-shrink:0; } .reason-icon svg{width:14px;height:14px;} .reason-text .t{font-size:clamp(12.5px,3vw,13.5px);font-weight:600;margin-bottom:2px;} .reason-text .d{font-size:clamp(11.5px,2.5vw,12.5px);color:var(--text-soft);line-height:1.5;} /* feature bars */ .feat-row{display:flex;align-items:center;gap:8px;padding:8px 0;} .feat-name{ font-family:var(--font-mono); font-size:clamp(10px,2vw,11.5px); /* fluid width instead of fixed */ width:clamp(90px,20vw,150px); flex-shrink:0; color:var(--ink); word-break:break-word; line-height:1.3; } .feat-track{flex:1;height:16px;background:var(--paper-dim);border-radius:4px;min-width:40px;} .feat-fill{height:100%;border-radius:4px;} .feat-fill.pos{background:var(--risk-high);} .feat-fill.neg{background:var(--teal);} .feat-val{font-family:var(--font-mono);font-size:11px;font-weight:600;width:44px;text-align:right;flex-shrink:0;} .mol-note{ margin-top:14px; padding:12px 14px; background:var(--paper-dim); border-radius:9px; font-size:clamp(11.5px,2.5vw,12px); color:var(--text-soft); line-height:1.6; } .mol-note strong{color:var(--ink);} .frag-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;} .frag-chip{ font-family:var(--font-mono); font-size:clamp(10.5px,2vw,11.5px); padding:5px 10px; border-radius:7px; background:var(--mint-tint); border:1px solid #B7EEDF; color:var(--teal-deep); } /* side effects */ .se-tags{display:flex;flex-wrap:wrap;gap:8px;} .se-tag{ font-size:clamp(11.5px,2.5vw,12.5px); padding:7px 12px; border-radius:8px; background:var(--risk-mod-tint); color:#8A6213; font-weight:500; border:1px solid #EFE0BD; } /* clinical ranking */ .rank-row{display:flex;align-items:center;gap:8px;padding:7px 0;} .rank-name{ font-size:clamp(11.5px,2.5vw,12.5px); font-weight:500; /* fluid width */ width:clamp(110px,25vw,200px); flex-shrink:0; line-height:1.3; } .rank-track{flex:1;height:8px;background:var(--paper-dim);border-radius:99px;min-width:30px;} .rank-fill{height:100%;background:var(--mint);border-radius:99px;} .rank-val{font-family:var(--font-mono);font-size:11px;width:40px;text-align:right;color:var(--text-soft);flex-shrink:0;} /* pharmacist sheet */ .sheet-card{ border:1.5px dashed var(--line-strong); border-radius:14px; padding:clamp(16px,4vw,24px); background:var(--paper-dim); } .sheet-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; gap:14px; flex-wrap:wrap; } .sheet-header h3{font-family:var(--font-display);font-size:clamp(15px,3.5vw,18px);font-weight:600;} .sheet-header .sub{font-size:12px;color:var(--text-soft);margin-top:4px;} .export-btn{ font-family:var(--font-body); font-size:13px;font-weight:600; color:var(--teal-deep); background:var(--paper); border:1.5px solid var(--teal); padding:9px 16px; border-radius:8px; cursor:pointer; display:flex;align-items:center;gap:7px; transition:background .15s; white-space:nowrap; min-height:44px; } .export-btn:hover{background:var(--teal-tint);} .export-btn svg{width:14px;height:14px;} .sheet-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:12px;} .sheet-stat{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:clamp(10px,3vw,14px); } .sheet-stat .label{ font-size:clamp(9.5px,2vw,10.5px); text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); font-weight:600; margin-bottom:6px; line-height:1.3; } .sheet-stat .value{ font-family:var(--font-display); font-size:clamp(15px,3.5vw,18px); font-weight:600; } .sheet-stat .value.risk-level{text-transform:capitalize;} .sheet-stat .value.low{color:var(--risk-low);} .sheet-stat .value.modere{color:var(--risk-mod);} .sheet-stat .value.eleve{color:var(--risk-high);} /* footer */ .footer{ border-top:1px solid var(--line); padding-top:18px; margin-top:36px; display:flex; justify-content:space-between; align-items:center; font-size:clamp(10.5px,2vw,11.5px); color:var(--text-soft); flex-wrap:wrap; gap:10px; } .footer .left{display:flex;gap:14px;flex-wrap:wrap;} /* loading */ .loading-row{display:flex;align-items:center;gap:10px;color:var(--text-soft);font-size:13.5px;padding:20px 0;} .spinner{ width:16px;height:16px;border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--teal); animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg);}} /* ══════════════════════════════════════ RESPONSIVE — Tablette (≤ 860px) ══════════════════════════════════════ */ @media (max-width:860px){ .input-grid{grid-template-columns:1fr;} .swap-col{ display:flex; height:auto; justify-content:flex-start; } .swap-btn{transform:rotate(90deg);} .swap-btn:hover{transform:rotate(270deg);} .result-hero{grid-template-columns:1fr;} .gauge-col{flex-direction:row;justify-content:flex-start;gap:16px;} .grid-2{grid-template-columns:1fr;} .sheet-grid{grid-template-columns:repeat(2,1fr);} .mol-row{flex-direction:column;} .mol-card{min-width:unset;} } /* ══════════════════════════════════════ RESPONSIVE — Mobile (≤ 600px) ══════════════════════════════════════ */ @media (max-width:600px){ .app{padding:0 14px 60px;} /* Topbar */ .topbar{padding:14px 0 12px;} .proto-tag{font-size:9.5px;padding:4px 8px;} /* Title */ .page-title{font-size:20px;} /* Input */ .input-card{padding:14px;border-radius:12px;} .swap-col{display:none;} .input-footer{flex-direction:column;align-items:stretch;gap:10px;} .sample-pairs{order:2;} .analyze-btn{ width:100%; justify-content:center; order:1; font-size:15px; padding:14px; } .sample-chip{font-size:10px;padding:5px 8px;} /* Results */ .result-hero{padding:16px 14px;border-radius:12px;} .section-title{font-size:16px;} .gauge-col{flex-direction:row;gap:12px;flex-wrap:wrap;} /* Cards */ .card{padding:14px;border-radius:12px;} .sheet-card{padding:14px;border-radius:12px;} /* Feature bars — collapse label above bar */ .feat-row{flex-wrap:wrap;gap:6px;} .feat-name{width:100%;font-size:10.5px;} .feat-track{min-width:0;} .feat-val{width:auto;} /* Rank rows */ .rank-row{flex-wrap:wrap;} .rank-name{width:100%;font-size:12px;} .rank-track{min-width:0;} /* Sheet grid → 2 cols */ .sheet-grid{grid-template-columns:1fr 1fr;gap:10px;} .sheet-header{flex-direction:column;align-items:stretch;} .export-btn{width:100%;justify-content:center;} /* Confidence */ .confidence-row{flex-wrap:wrap;gap:8px;} .confidence-bar{min-width:100%;order:3;} /* Footer */ .footer{flex-direction:column;align-items:flex-start;gap:6px;} } /* ══════════════════════════════════════ RESPONSIVE — Très petit mobile (≤ 380px) ══════════════════════════════════════ */ @media (max-width:380px){ .app{padding:0 10px 50px;} .page-title{font-size:18px;} .sheet-grid{grid-template-columns:1fr;} .drug-pill{font-size:11px;padding:5px 8px;} .result-headline{font-size:16px;} .proto-tag{display:none;} } /* ══════════════════════════════════════ ACCESSIBILITÉ ══════════════════════════════════════ */ :focus-visible{outline:2px solid var(--teal);outline-offset:2px;} /* Touch : agrandir zones cliquables */ @media (pointer:coarse){ .suggestion-item{min-height:48px;} .sample-chip{min-height:40px;} .swap-btn{min-width:48px;min-height:48px;} .analyze-btn{min-height:52px;} .export-btn{min-height:48px;} } @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important;} } /* ══════════════════════════════════════ PRINT — Fiche pharmacien A4 ══════════════════════════════════════ */ .print-header{display:none;} .print-footer{display:none;} @media print{ @page{size:A4;margin:16mm 14mm;} body{background:#fff;} .app{max-width:100%;padding:0;margin:0;} .topbar,.disclaimer,.page-title,.page-subtitle, .input-card,.suggestions,.error-banner,.export-btn,.footer{ display:none !important; } button,.swap-btn{display:none !important;} .print-header{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; padding-bottom:14px; margin-bottom:18px; border-bottom:2px solid var(--ink); page-break-after:avoid; page-break-inside:avoid; } .print-logo{height:34px;} .print-header-text{flex:1;min-width:220px;} .print-header-text h1{ font-family:var(--font-display); font-size:18px;font-weight:600;color:var(--ink); } .print-meta{font-size:10.5px;color:var(--text-soft);margin-top:2px;} .print-pair{ font-family:var(--font-mono);font-size:12px;font-weight:600; color:var(--ink);display:flex;align-items:center;gap:8px; } .print-x{color:var(--text-soft);} .print-risk-badge{ font-size:11px;font-weight:700;padding:5px 11px; border-radius:99px;text-transform:capitalize; border:1.3px solid currentColor; } .print-risk-badge.risk-low{color:var(--risk-low);} .print-risk-badge.risk-modere{color:var(--risk-mod);} .print-risk-badge.risk-eleve{color:var(--risk-high);} .print-footer{ display:block;margin-top:22px;padding-top:12px; border-top:1px solid var(--line-strong); font-size:10px;line-height:1.5;color:var(--text-soft); } .print-footer strong{color:var(--ink);} .results{gap:16px;} .section-title{font-size:14.5px;margin-top:4px;margin-bottom:8px;page-break-after:avoid;} section{page-break-inside:avoid;} .result-hero,.card,.sheet-card,.mol-card{ border:1px solid #B9C4C4 !important; box-shadow:none !important; page-break-inside:avoid; } .result-hero{ padding:18px;gap:20px; grid-template-columns:140px 1fr !important; } .sheet-card{border-style:solid !important;background:#fff !important;} .card{padding:16px;} /* Réimposer la mise en page large pour A4 */ .gauge-col{flex-direction:column !important;} .mol-row{flex-direction:row !important;} .grid-2{grid-template-columns:1fr 1fr !important;} .sheet-grid{grid-template-columns:repeat(4,1fr) !important;} .feat-row{flex-wrap:nowrap !important;} .feat-name{width:150px !important;} .rank-row{flex-wrap:nowrap !important;} .rank-name{width:200px !important;} .confidence-row{flex-wrap:nowrap !important;} .confidence-bar{min-width:auto !important;order:unset !important;} .gauge-col svg{width:120px;height:120px;} .risk-badge,.print-risk-badge,.feat-fill,.confidence-fill, .rank-fill,.se-tag,.result-hero::before{ -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; } .reason-item,.feat-row,.rank-row{page-break-inside:avoid;} a{color:inherit;text-decoration:none;} }