/* =========================================================
Portail Pharma - Design system original
Palette : indigo profond + corail (distincte de tout tiers)
========================================================= */
:root{
--indigo-900:#1b1f4b;
--indigo-800:#262c67;
--indigo-700:#333b85;
--indigo-100:#eceafd;
--corail:#ff6b5e;
--corail-dark:#e8503f;
--menthe:#1fb6a8;
--menthe-dark:#159084;
--gris-50:#f6f7fb;
--gris-100:#eef0f6;
--gris-200:#dfe2ec;
--gris-400:#9aa0b4;
--gris-600:#5b6178;
--gris-800:#2c2f42;
--blanc:#ffffff;
--radius:14px;
--radius-sm:8px;
--ombre:0 4px 20px rgba(27,31,75,0.08);
--ombre-lg:0 12px 40px rgba(27,31,75,0.14);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
margin:0;
font-family:'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background:var(--gris-50);
color:var(--gris-800);
font-size:15px;
line-height:1.5;
overflow-x:hidden;
}
a{color:var(--indigo-700); text-decoration:none;}
a:hover{color:var(--corail-dark);}
h1,h2,h3,h4{font-family:'Segoe UI Semibold', 'Segoe UI', sans-serif; color:var(--indigo-900); margin-top:0;}
img{max-width:100%;}
/* ---------- Layout general (portail connecte) ---------- */
.pp-layout{display:flex; min-height:100vh;}
.pp-sidebar{
width:250px; background:linear-gradient(180deg,var(--indigo-900),var(--indigo-800));
color:#dfe1ff; flex-shrink:0; display:flex; flex-direction:column;
position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
}
.pp-sidebar .pp-brand{
padding:24px 22px; font-size:20px; font-weight:700; color:#fff;
border-bottom:1px solid rgba(255,255,255,0.08);
display:flex; align-items:center; gap:10px;
}
.pp-sidebar .pp-brand .pp-logo-dot{width:12px;height:12px;border-radius:50%;background:var(--corail);}
.pp-brand-tel{
padding:10px 22px 14px; font-size:13px; color:#c7cbf5;
border-bottom:1px solid rgba(255,255,255,0.08);
display:flex; align-items:center; gap:8px;
}
.pp-brand-tel a{color:#c7cbf5;}
.pp-brand-tel a:hover{color:#fff;}
.pp-nav{flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:2px;}
.pp-nav a{
color:#c7cbf5; padding:11px 14px; border-radius:var(--radius-sm); font-size:14.5px;
display:flex; align-items:center; gap:10px; transition:.15s;
}
.pp-nav a:hover{background:rgba(255,255,255,0.06); color:#fff;}
.pp-nav a.active{background:var(--corail); color:#fff; font-weight:600;}
.pp-nav .pp-nav-icon{width:18px; text-align:center;}
.pp-sidebar-footer{padding:16px 20px; border-top:1px solid rgba(255,255,255,0.08); font-size:13px; color:#9aa0d8;}
.pp-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.pp-topbar{
background:#fff; border-bottom:1px solid var(--gris-200); padding:14px 28px;
display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10;
gap:12px;
}
.pp-topbar h1{font-size:19px; margin:0;}
.pp-topbar .pp-user{display:flex; align-items:center; gap:14px; font-size:14px; color:var(--gris-600);}
.pp-topbar .pp-user a{color:var(--corail-dark); font-weight:600;}
.pp-content{padding:26px 28px; flex:1;}
/* ---------- Menu mobile (CSS pur, sans JS) ----------
Marquage attendu :
... ...
Le checkbox et le label .pp-menu-btn peuvent etre places n'importe ou dans ,
mais AVANT .pp-layout dans le DOM pour que le selecteur ~ fonctionne. */
.pp-menu-checkbox{display:none;}
.pp-menu-btn{
display:none; flex-direction:column; justify-content:center; gap:4px;
width:38px; height:38px; border-radius:var(--radius-sm); border:1.5px solid var(--gris-200);
background:#fff; cursor:pointer; flex-shrink:0;
}
.pp-menu-btn span{display:block; width:18px; height:2px; background:var(--indigo-900); margin:0 auto;}
.pp-sidebar-close{display:none;}
.pp-sidebar-overlay{display:none;}
/* ---------- Cartes / boites ---------- */
.pp-card{background:#fff; border-radius:var(--radius); box-shadow:var(--ombre); padding:22px; margin-bottom:20px;}
.pp-card h2{font-size:17px; margin-bottom:14px;}
.pp-grid{display:grid; gap:18px;}
.pp-grid-4{grid-template-columns:repeat(4,1fr);}
.pp-grid-3{grid-template-columns:repeat(3,1fr);}
.pp-grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.pp-grid-4{grid-template-columns:repeat(2,1fr);} .pp-grid-3{grid-template-columns:repeat(2,1fr);}}
/* ---------- Tablette / mobile : 900px ---------- */
@media(max-width:900px){
.pp-sidebar{
position:fixed; top:0; left:0; bottom:0; z-index:100;
transform:translateX(-100%); transition:transform .25s ease;
box-shadow:var(--ombre-lg); width:250px; max-width:82vw;
}
.pp-menu-checkbox:checked ~ .pp-layout .pp-sidebar{transform:translateX(0);}
.pp-sidebar-close{
display:block; margin-left:auto; color:#fff; font-size:22px; line-height:1;
background:none; border:none; cursor:pointer; padding:4px 8px;
}
.pp-sidebar .pp-brand{justify-content:space-between;}
.pp-menu-btn{display:flex;}
.pp-sidebar-overlay{
display:none; position:fixed; inset:0; background:rgba(27,31,75,0.45); z-index:99;
}
.pp-menu-checkbox:checked ~ .pp-layout .pp-sidebar-overlay{display:block;}
.pp-topbar{padding:12px 16px;}
.pp-topbar h1{font-size:17px;}
.pp-content{padding:18px 16px;}
}
/* ---------- Mobile : 700px ---------- */
@media(max-width:700px){
.pp-grid-4,.pp-grid-3,.pp-grid-2{grid-template-columns:1fr;}
.pp-topbar{flex-wrap:wrap;}
.pp-topbar .pp-user{font-size:13px; gap:10px; flex-wrap:wrap;}
.pp-form-row{flex-direction:column; gap:0;}
.pp-filters{flex-direction:column;}
.pp-filters input,.pp-filters select{width:100%;}
.pp-card{padding:16px;}
.btn{padding:11px 16px; font-size:14.5px;}
.btn-block-mobile{width:100%;}
.pp-auth-box{padding:30px 22px;}
/* Tableaux : conteneur scrollable horizontalement.
Marquage attendu : */
.pp-table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius);}
.pp-table-wrap .pp-table{min-width:560px;}
}
/* ---------- Tres petits ecrans : 420px ---------- */
@media(max-width:420px){
.pp-auth-box{padding:24px 18px; border-radius:14px;}
.pp-produit-img{height:100px; font-size:26px;}
.pp-stat .pp-stat-value{font-size:22px;}
}
.pp-stat{background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--ombre); border-left:4px solid var(--menthe);}
.pp-stat.alerte{border-left-color:var(--corail);}
.pp-stat .pp-stat-label{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--gris-400); font-weight:600;}
.pp-stat .pp-stat-value{font-size:26px; font-weight:700; color:var(--indigo-900); margin-top:6px;}
/* ---------- Boutons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
padding:10px 18px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
border:none; cursor:pointer; text-decoration:none; transition:.15s;
}
.btn-primary{background:var(--corail); color:#fff;}
.btn-primary:hover{background:var(--corail-dark); color:#fff;}
.btn-secondary{background:var(--indigo-100); color:var(--indigo-800);}
.btn-secondary:hover{background:#dfe0fa;}
.btn-outline{background:transparent; border:1.5px solid var(--gris-200); color:var(--gris-800);}
.btn-outline:hover{border-color:var(--corail); color:var(--corail-dark);}
.btn-success{background:var(--menthe); color:#fff;}
.btn-success:hover{background:var(--menthe-dark);}
.btn-danger{background:#e8503f; color:#fff;}
.btn-sm{padding:6px 12px; font-size:13px;}
.btn-block{width:100%;}
/* ---------- Formulaires ---------- */
.pp-form-group{margin-bottom:16px;}
.pp-form-group label{display:block; font-size:13.5px; font-weight:600; color:var(--gris-800); margin-bottom:6px;}
.pp-form-group input, .pp-form-group select, .pp-form-group textarea{
width:100%; padding:10px 13px; border:1.5px solid var(--gris-200); border-radius:var(--radius-sm);
font-size:14.5px; font-family:inherit; background:#fff;
}
.pp-form-group input:focus, .pp-form-group select:focus, .pp-form-group textarea:focus{
outline:none; border-color:var(--corail);
}
.pp-form-row{display:flex; gap:16px;}
.pp-form-row > *{flex:1;}
/* ---------- Tableaux ---------- */
.pp-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden;}
.pp-table th{
background:var(--gris-100); text-align:left; padding:12px 16px; font-size:12.5px;
text-transform:uppercase; letter-spacing:.03em; color:var(--gris-600); font-weight:700;
}
.pp-table td{padding:13px 16px; border-top:1px solid var(--gris-100); font-size:14.5px; vertical-align:middle;}
.pp-table tr:hover td{background:var(--gris-50);}
/* ---------- Badges ---------- */
.badge{display:inline-block; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:700;}
.badge-warning{background:#fff2d6; color:#94660a;}
.badge-info{background:#dbe6ff; color:#1e4fa8;}
.badge-primary{background:#e2ddfd; color:#4b2fc9;}
.badge-success{background:#d8f5ea; color:#127a52;}
.badge-danger{background:#fde1de; color:#c23b2b;}
.badge-secondary{background:var(--gris-100); color:var(--gris-600);}
/* ---------- Alertes flash ---------- */
.pp-alert{padding:13px 18px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:14px; font-weight:500;}
.pp-alert-succes{background:#d8f5ea; color:#0e6b48; border-left:4px solid var(--menthe);}
.pp-alert-erreur{background:#fde1de; color:#a52d1f; border-left:4px solid var(--corail-dark);}
/* ---------- Pages d'authentification (plein ecran) ---------- */
.pp-auth-page{
min-height:100vh; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--indigo-900),var(--indigo-700) 60%, var(--corail));
padding:20px;
}
.pp-auth-box{background:#fff; border-radius:18px; padding:40px 38px; width:100%; max-width:420px; box-shadow:var(--ombre-lg);}
.pp-auth-box.large{max-width:520px;}
.pp-auth-logo{text-align:center; margin-bottom:26px;}
.pp-auth-logo .pp-brand-name{font-size:22px; font-weight:800; color:var(--indigo-900);}
.pp-auth-logo .pp-brand-name span{color:var(--corail);}
.pp-auth-logo p{color:var(--gris-400); font-size:13.5px; margin:4px 0 0;}
.pp-auth-links{text-align:center; margin-top:18px; font-size:13.5px; color:var(--gris-600);}
/* ---------- Catalogue produits (grille) ---------- */
.pp-produit-card{background:#fff; border-radius:var(--radius); box-shadow:var(--ombre); overflow:hidden; display:flex; flex-direction:column;}
.pp-produit-img{height:130px; background:var(--indigo-100); display:flex; align-items:center; justify-content:center; font-size:34px; color:var(--indigo-700);}
.pp-produit-body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.pp-produit-cat{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--menthe-dark); font-weight:700;}
.pp-produit-nom{font-size:15px; font-weight:700; color:var(--indigo-900);}
.pp-produit-prix{font-size:17px; font-weight:800; color:var(--corail-dark); margin-top:auto;}
.pp-produit-stock{font-size:12.5px; color:var(--gris-400);}
/* ---------- Timeline suivi livraison ---------- */
.pp-timeline{list-style:none; margin:0; padding:0;}
.pp-timeline li{position:relative; padding:0 0 24px 34px; border-left:2px solid var(--gris-200);}
.pp-timeline li:last-child{border-color:transparent; padding-bottom:0;}
.pp-timeline li::before{
content:''; position:absolute; left:-7px; top:0; width:14px; height:14px; border-radius:50%;
background:var(--menthe); border:3px solid #fff; box-shadow:0 0 0 2px var(--menthe);
}
.pp-timeline .pp-timeline-date{font-size:12px; color:var(--gris-400); margin-bottom:2px;}
.pp-timeline .pp-timeline-label{font-weight:600; color:var(--gris-800);}
/* ---------- Divers ---------- */
.pp-empty{text-align:center; padding:50px 20px; color:var(--gris-400);}
.pp-flex-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.pp-muted{color:var(--gris-400); font-size:13px;}
.pp-mb-0{margin-bottom:0;}
.pp-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.pp-filters input, .pp-filters select{padding:9px 12px; border:1.5px solid var(--gris-200); border-radius:var(--radius-sm); font-size:14px;}
.pp-pill-methode{
display:flex; align-items:center; gap:10px; padding:14px; border:1.5px solid var(--gris-200);
border-radius:var(--radius-sm); cursor:pointer; margin-bottom:10px;
}
.pp-pill-methode input{width:auto;}
.pp-pill-methode:has(input:checked){border-color:var(--corail); background:#fff5f4;}