/* =============================================================
   PORTAIL MODES D'EMPLOI — Design tokens & composants de base
   v1.0 — Direction graphique validée (juillet 2026)
   Cabinet Vétérinaire (Au Furet)

   Feuille de référence UNIQUE. Tout nouvel écran doit importer ce
   fichier et n'utiliser QUE ces variables et classes (préfixe --pmb / .pmb-).
   Aucune couleur ni taille "en dur" dans les écrans : on passe par les tokens.
   ============================================================= */

:root{
  /* ---- Couleurs de marque ---- */
  --pmb-green:#1e6a52;         /* vert principal : bandeau, boutons, accents  */
  --pmb-green-dark:#0f5a43;    /* survol / texte d'onglet actif                */
  --pmb-green-light:#227355;   /* dégradé du bandeau                           */
  --pmb-green-050:#dff0e8;     /* fond vert très clair : avatars, puces        */

  /* ---- Surfaces & fonds ---- */
  --pmb-bg:#efeee9;            /* fond de l'application (gris chaud)            */
  --pmb-surface:#ffffff;       /* cartes, champs, feuilles de dialogue         */
  --pmb-surface-alt:#eef2f0;   /* tuile d'icône, zones neutres                 */
  --pmb-border:#e7e6df;
  --pmb-border-strong:#d7d9d2;

  /* ---- Texte ---- */
  --pmb-ink:#20302a;           /* titres, texte principal                      */
  --pmb-ink-2:#3a4a42;         /* texte courant secondaire                     */
  --pmb-muted:#5e6b64;         /* méta, sous-titres — contraste AA (5.6:1)     */
  --pmb-muted-2:#6d766f;       /* chevrons, placeholders — AA (4.7:1)          */
  --pmb-on-green:#ffffff;      /* texte sur fond vert                          */

  /* ---- Accent pilote / information douce ---- */
  --pmb-cream:#f6ecd3;         /* bandeau "version pilote"                     */
  --pmb-brown:#8a6a2f;

  /* ---- États sémantiques (puces, badges, alertes) ---- */
  --pmb-critical:#e0483d;      /* rouge  — critique / urgent                   */
  --pmb-warning:#efa42a;       /* ambre  — attention / à valider               */
  --pmb-info:#2f6fd0;          /* bleu   — information                         */
  --pmb-success:#1c7a54;       /* vert   — succès / points / validé            */
  --pmb-ia:#6d4bd4;            /* violet — généré / assisté par IA             */
  --pmb-ia-bg:#efeafd;

  /* ---- Typographie ---- */
  --pmb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pmb-fs-h1:26px;            /* titre accueil                                */
  --pmb-fs-h1-sec:21px;        /* titre écran secondaire                       */
  --pmb-fs-h2:19px;            /* titre de fiche / dialogue                    */
  --pmb-fs-h3:17px;            /* titre de carte                               */
  --pmb-fs-body:15px;          /* texte courant                                */
  --pmb-fs-meta:14px;          /* sous-titre / méta de carte                   */
  --pmb-fs-small:13px;
  --pmb-fs-eyebrow:12px;       /* bandeau identité                             */
  --pmb-fs-label:13px;         /* étiquette de section                         */
  --pmb-fw-regular:400; --pmb-fw-medium:600; --pmb-fw-bold:700; --pmb-fw-black:800;
  --pmb-lh-tight:1.25; --pmb-lh-base:1.4; --pmb-lh-loose:1.55;

  /* ---- Espacement (échelle base 4 px) ---- */
  --pmb-sp-1:4px; --pmb-sp-2:8px; --pmb-sp-3:12px; --pmb-sp-4:16px;
  --pmb-sp-5:22px; --pmb-sp-6:26px; --pmb-sp-7:34px;

  /* ---- Rayons d'arrondi ---- */
  --pmb-r-sm:10px;   /* tuiles d'icône, petits éléments   */
  --pmb-r-md:14px;   /* boutons, champs                   */
  --pmb-r-lg:16px;   /* cartes                            */
  --pmb-r-xl:22px;   /* feuilles / dialogues              */
  --pmb-r-pill:999px;/* badges, puces d'onglet            */

  /* ---- Ombres ---- */
  --pmb-shadow:0 2px 10px rgba(20,40,30,.06);      /* cartes            */
  --pmb-shadow-lg:0 12px 40px rgba(15,25,20,.18);  /* dialogues         */

  /* ---- Transitions ---- */
  --pmb-t-fast:.08s ease;                      /* retour tactile         */
  --pmb-t-base:.2s ease;                       /* survols, fondus        */
  --pmb-t-sheet:.26s cubic-bezier(.4,0,.2,1);  /* feuilles / tiroirs     */

  /* ---- Gabarit ---- */
  --pmb-tap:44px;              /* cible tactile minimale                       */
  --pmb-maxw:1120px;           /* largeur de contenu max sur ordinateur        */
}

/* =============================================================
   BASE
   ============================================================= */
.pmb, .pmb-app{
  font-family:var(--pmb-font);
  color:var(--pmb-ink);
  background:var(--pmb-bg);
  font-size:var(--pmb-fs-body);
  line-height:var(--pmb-lh-base);
  -webkit-font-smoothing:antialiased;
}
.pmb *{box-sizing:border-box}

/* =============================================================
   1. BANDEAU SUPÉRIEUR
   Zones : [identité permanente] · [titre de page] · [sous-titre] · [actions]
   ============================================================= */
.pmb-header{
  background:linear-gradient(135deg,var(--pmb-green),var(--pmb-green-light));
  color:var(--pmb-on-green);
  padding:var(--pmb-sp-5) var(--pmb-sp-4);
  display:flex; align-items:flex-start; gap:var(--pmb-sp-3);
}
.pmb-header.pmb-header--sec{padding:18px var(--pmb-sp-4);}
.pmb-header__main{flex:1; min-width:0;}
.pmb-eyebrow{                     /* identité TOUJOURS présente */
  font-size:var(--pmb-fs-eyebrow); font-weight:var(--pmb-fw-black);
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.9); margin-bottom:7px;
  display:flex; align-items:center; gap:6px;
}
.pmb-header h1{margin:0; font-size:var(--pmb-fs-h1); font-weight:var(--pmb-fw-black); letter-spacing:-.3px;}
.pmb-header--sec h1{font-size:var(--pmb-fs-h1-sec);}
.pmb-header__sub{margin-top:5px; font-size:var(--pmb-fs-body); color:#d7ece2; font-weight:var(--pmb-fw-medium);}
.pmb-header__actions{display:flex; gap:var(--pmb-sp-2); flex-shrink:0;}
.pmb-iconbtn{                     /* action carrée du bandeau (recherche…) */
  width:52px; height:52px; border-radius:var(--pmb-r-md);
  background:rgba(255,255,255,.16); border:0; color:#fff; font-size:22px;
  display:grid; place-items:center; cursor:pointer; transition:background var(--pmb-t-base);
}
.pmb-iconbtn:hover{background:rgba(255,255,255,.26);}

/* Bandeau "version pilote" (optionnel, sous le header) */
.pmb-pilot{background:var(--pmb-cream); color:var(--pmb-brown); text-align:center;
  padding:11px var(--pmb-sp-4); font-weight:var(--pmb-fw-bold); font-size:var(--pmb-fs-meta);}
.pmb-pilot a{color:var(--pmb-brown); font-weight:var(--pmb-fw-black); text-decoration:underline;}

/* =============================================================
   2. STRUCTURE DE PAGE
   ============================================================= */
.pmb-content{padding:18px var(--pmb-sp-4) var(--pmb-sp-6);}
.pmb-section-label{font-size:var(--pmb-fs-label); font-weight:var(--pmb-fw-bold);
  letter-spacing:.06em; text-transform:uppercase; color:var(--pmb-muted);
  margin:var(--pmb-sp-6) 2px var(--pmb-sp-3);}

/* =============================================================
   3. TYPOGRAPHIE — hiérarchie
   ============================================================= */
.pmb-h1{font-size:var(--pmb-fs-h1); font-weight:var(--pmb-fw-black); line-height:var(--pmb-lh-tight); margin:0;}
.pmb-h2{font-size:var(--pmb-fs-h2); font-weight:var(--pmb-fw-black); line-height:var(--pmb-lh-tight); margin:0;}
.pmb-h3{font-size:var(--pmb-fs-h3); font-weight:var(--pmb-fw-bold); line-height:var(--pmb-lh-tight); margin:0;}
.pmb-body{font-size:var(--pmb-fs-body); line-height:var(--pmb-lh-loose);}
.pmb-meta{font-size:var(--pmb-fs-meta); color:var(--pmb-muted);}
.pmb-small{font-size:var(--pmb-fs-small); color:var(--pmb-muted);}

/* =============================================================
   4. CARTES & ÉLÉMENTS DE LISTE
   ============================================================= */
.pmb-card{background:var(--pmb-surface); border-radius:var(--pmb-r-lg);
  box-shadow:var(--pmb-shadow); padding:var(--pmb-sp-4);}

.pmb-item{                       /* carte-ligne standard (style "tâche") */
  background:var(--pmb-surface); border-radius:var(--pmb-r-lg); box-shadow:var(--pmb-shadow);
  padding:var(--pmb-sp-4) 15px; display:flex; align-items:center; gap:13px;
  cursor:pointer; transition:transform var(--pmb-t-fast); min-height:72px;
}
.pmb-item:active{transform:scale(.985);}
.pmb-item__tile{width:42px; height:42px; border-radius:12px; background:var(--pmb-surface-alt);
  display:grid; place-items:center; font-size:21px; flex-shrink:0;}
.pmb-item__body{flex:1; min-width:0;}
.pmb-item__body h3{margin:0; font-size:var(--pmb-fs-h3); font-weight:var(--pmb-fw-bold); line-height:var(--pmb-lh-tight);}
.pmb-item__body p{margin:3px 0 0; font-size:var(--pmb-fs-meta); color:var(--pmb-muted); line-height:1.3;}
.pmb-item__end{flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:5px;}
.pmb-chevron{color:var(--pmb-muted-2); font-size:22px; font-weight:var(--pmb-fw-bold);}

/* Puce d'état */
.pmb-dot{width:13px; height:13px; border-radius:var(--pmb-r-pill); flex-shrink:0;}
.pmb-dot--critical{background:var(--pmb-critical);}
.pmb-dot--warning{background:var(--pmb-warning);}
.pmb-dot--success{background:var(--pmb-success);}
.pmb-dot--info{background:var(--pmb-info);}

/* Avatar (initiales) */
.pmb-avatar{width:42px; height:42px; border-radius:var(--pmb-r-pill); flex-shrink:0;
  display:grid; place-items:center; font-size:15px; font-weight:var(--pmb-fw-black);
  background:var(--pmb-green-050); color:var(--pmb-green);}

/* Tuile de module (grille) */
.pmb-module{background:var(--pmb-surface); border-radius:var(--pmb-r-lg); box-shadow:var(--pmb-shadow);
  padding:18px 15px; cursor:pointer; transition:transform var(--pmb-t-fast);}
.pmb-module:active{transform:scale(.98);}
.pmb-module__icon{font-size:26px;}
.pmb-module h4{margin:9px 0 2px; font-size:var(--pmb-fs-h3); font-weight:var(--pmb-fw-bold);}
.pmb-module p{margin:0; font-size:var(--pmb-fs-small); color:var(--pmb-muted);}

/* Statistique */
.pmb-stat{background:var(--pmb-surface); border-radius:var(--pmb-r-lg); box-shadow:var(--pmb-shadow);
  padding:16px 10px; text-align:center;}
.pmb-stat__n{font-size:30px; font-weight:var(--pmb-fw-black); color:var(--pmb-green);}
.pmb-stat__l{font-size:var(--pmb-fs-small); color:var(--pmb-muted); margin-top:2px; line-height:1.2;}

/* =============================================================
   5. BADGES
   ============================================================= */
.pmb-badge{font-size:11px; font-weight:var(--pmb-fw-bold); padding:3px 9px;
  border-radius:var(--pmb-r-pill); white-space:nowrap; display:inline-block;}
.pmb-badge--cat{background:var(--pmb-surface-alt); color:var(--pmb-ink-2);}
.pmb-badge--ia{background:var(--pmb-ia-bg); color:var(--pmb-ia);}
.pmb-badge--success{background:rgba(28,122,84,.12); color:var(--pmb-success);}
.pmb-badge--warning{background:rgba(239,164,42,.15); color:#b9791a;}
/* Ligne clé / valeur (fiches, dialogues) */
.pmb-row{display:flex; justify-content:space-between; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--pmb-border); font-size:var(--pmb-fs-body);}
.pmb-row:last-child{border:0;}
.pmb-row .k{color:var(--pmb-muted);}
.pmb-row .v{color:var(--pmb-ink); font-weight:var(--pmb-fw-bold); text-align:right;}

/* Encart d'information (par défaut : contexte IA/violet) */
.pmb-note{background:var(--pmb-ia-bg); color:#4c3aa0; border-radius:var(--pmb-r-md);
  padding:13px 15px; font-size:var(--pmb-fs-small); line-height:1.5;}

/* Étapes numérotées (guides rapides, opérations) */
.pmb-steps{margin:0; padding:0; list-style:none; counter-reset:step;}
.pmb-steps li{counter-increment:step; position:relative; padding:9px 0 9px 36px;
  border-bottom:1px solid var(--pmb-border); font-size:var(--pmb-fs-body); line-height:1.4;}
.pmb-steps li:last-child{border:0;}
.pmb-steps li::before{content:counter(step); position:absolute; left:0; top:8px;
  width:24px; height:24px; border-radius:var(--pmb-r-pill); background:var(--pmb-green);
  color:#fff; font-size:12px; font-weight:var(--pmb-fw-bold); display:grid; place-items:center;}

/* =============================================================
   6. BOUTONS
   ============================================================= */
.pmb-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--pmb-green); color:var(--pmb-on-green); border:0;
  border-radius:var(--pmb-r-md); padding:13px 18px; font-family:var(--pmb-font);
  font-size:var(--pmb-fs-body); font-weight:var(--pmb-fw-bold); cursor:pointer;
  transition:background var(--pmb-t-base), transform var(--pmb-t-fast); min-height:var(--pmb-tap);}
.pmb-btn:hover{background:var(--pmb-green-dark);}
.pmb-btn:active{transform:scale(.985);}
.pmb-btn--block{width:100%; padding:15px; font-size:16px;}
.pmb-btn--ghost{background:var(--pmb-surface); color:var(--pmb-ink); border:1px solid var(--pmb-border);}
.pmb-btn--ghost:hover{background:#fff; border-color:var(--pmb-border-strong);}
.pmb-btn--sm{padding:9px 14px; font-size:var(--pmb-fs-small);}
.pmb-btn[disabled]{opacity:.5; cursor:not-allowed;}

/* =============================================================
   7. CHAMPS DE RECHERCHE & FORMULAIRES
   ============================================================= */
.pmb-search{position:relative;}
.pmb-search input{width:100%; background:var(--pmb-surface); border:1px solid var(--pmb-border);
  border-radius:var(--pmb-r-md); padding:13px 14px 13px 42px; font-size:16px; /* 16px = pas de zoom iOS */
  color:var(--pmb-ink); outline:none; box-shadow:var(--pmb-shadow); font-family:var(--pmb-font);}
.pmb-search input::placeholder{color:var(--pmb-muted-2);}
.pmb-search input:focus{border-color:var(--pmb-green); box-shadow:0 0 0 3px rgba(30,106,82,.14);}
.pmb-search__icon{position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--pmb-muted-2); font-size:16px;}
.pmb-field{width:100%; background:var(--pmb-surface); border:1px solid var(--pmb-border);
  border-radius:var(--pmb-r-md); padding:12px 14px; font-size:16px; color:var(--pmb-ink);
  outline:none; font-family:var(--pmb-font);}
.pmb-field:focus{border-color:var(--pmb-green); box-shadow:0 0 0 3px rgba(30,106,82,.14);}
.pmb-label{display:block; font-size:var(--pmb-fs-small); color:var(--pmb-muted);
  margin:14px 0 5px; font-weight:var(--pmb-fw-medium);}

/* =============================================================
   8. LISTES (responsive) & TABLEAUX
   Mobile = pile ; Tablette = 2 colonnes ; Ordinateur = grille fluide
   ============================================================= */
.pmb-cardlist{display:flex; flex-direction:column; gap:var(--pmb-sp-3);}
@media(min-width:600px){
  .pmb-cardlist{display:grid; grid-template-columns:1fr 1fr; gap:13px;}
}
@media(min-width:1024px){
  .pmb-cardlist{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
}
.pmb-modules{display:grid; grid-template-columns:1fr 1fr; gap:var(--pmb-sp-3);}
@media(min-width:600px){.pmb-modules{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.pmb-modules{grid-template-columns:repeat(4,1fr);}}
.pmb-stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px;}

/* Tableau (écrans denses sur ordinateur) */
.pmb-table{width:100%; border-collapse:collapse; background:var(--pmb-surface);
  border-radius:var(--pmb-r-lg); overflow:hidden; box-shadow:var(--pmb-shadow); font-size:var(--pmb-fs-meta);}
.pmb-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--pmb-muted); font-weight:var(--pmb-fw-bold); padding:12px 14px; background:#faf9f6;
  border-bottom:1px solid var(--pmb-border);}
.pmb-table td{padding:12px 14px; border-bottom:1px solid var(--pmb-border); color:var(--pmb-ink);}
.pmb-table tr:last-child td{border-bottom:0;}
.pmb-table tbody tr:hover{background:#faf9f6;}

/* =============================================================
   9. FENÊTRES DE DIALOGUE
   Mobile = feuille glissée du bas ; Tablette/Ordinateur = fenêtre centrée
   ============================================================= */
.pmb-overlay{position:fixed; inset:0; background:rgba(15,25,20,.4);
  opacity:0; pointer-events:none; transition:opacity var(--pmb-t-base); z-index:70;}
.pmb-overlay.is-open{opacity:1; pointer-events:auto;}
.pmb-sheet{position:fixed; left:0; right:0; bottom:0; background:var(--pmb-bg);
  border-radius:var(--pmb-r-xl) var(--pmb-r-xl) 0 0; z-index:71; max-height:86%;
  transform:translateY(100%); transition:transform var(--pmb-t-sheet);
  display:flex; flex-direction:column; box-shadow:var(--pmb-shadow-lg);}
.pmb-sheet.is-open{transform:none;}
.pmb-sheet__grip{width:40px; height:5px; border-radius:var(--pmb-r-pill); background:#cfd4d0; margin:10px auto 4px;}
.pmb-sheet__head{padding:8px var(--pmb-sp-5) var(--pmb-sp-4); border-bottom:1px solid var(--pmb-border);
  display:flex; gap:13px; align-items:center;}
.pmb-sheet__body{padding:var(--pmb-sp-4) var(--pmb-sp-5) var(--pmb-sp-6); overflow-y:auto;}
@media(min-width:768px){
  .pmb-sheet{left:50%; right:auto; bottom:26px; width:min(600px,86%);
    transform:translateX(-50%) translateY(120%); border-radius:var(--pmb-r-xl); max-height:80%;}
  .pmb-sheet.is-open{transform:translateX(-50%);}
}

/* =============================================================
   10. BARRE D'ONGLETS (mobile / tablette)
   ============================================================= */
.pmb-tabs{display:flex; background:#fff; border-top:1px solid #ececec;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));}
.pmb-tab{flex:1; background:0; border:0; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:4px 0; color:var(--pmb-muted); font-size:11px; font-weight:var(--pmb-fw-medium);
  cursor:pointer; font-family:var(--pmb-font);}
.pmb-tab__icon{font-size:23px; line-height:1;}
.pmb-tab.is-active{color:var(--pmb-green-dark); font-weight:var(--pmb-fw-black);}

/* =============================================================
   11. NAVIGATION LATÉRALE (ordinateur ≥ 1024px)
   ============================================================= */
.pmb-sidebar{display:none;}
@media(min-width:1024px){
  .pmb-sidebar{display:flex; flex-direction:column; width:248px; flex-shrink:0;
    background:#fff; border-right:1px solid var(--pmb-border); padding:var(--pmb-sp-3);}
  .pmb-tabs{display:none;}          /* la navigation passe sur le côté */
}

/* =============================================================
   12. UTILITAIRES
   ============================================================= */
.pmb-shell{max-width:var(--pmb-maxw); margin:0 auto;}

/* Focus clavier visible sur tout élément interactif */
.pmb-item:focus-visible, .pmb-module:focus-visible, .pmb-stat:focus-visible,
.pmb-btn:focus-visible, .pmb-tab:focus-visible, .pmb-iconbtn:focus-visible,
.pmb [role="button"]:focus-visible, .pmb a:focus-visible, .pmb input:focus-visible{
  outline:3px solid var(--pmb-green); outline-offset:2px; border-radius:var(--pmb-r-sm);
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}