/* ==========================================================================
   Suivi BIOSYNEX — feuille de style partagée de la maquette v2
   Base de travail visuelle, indépendante de toute techno serveur.
   ========================================================================== */

:root{
  /* Identité BIOSYNEX */
  --brand: #f39200;
  --brand-hover: #d97f00;
  --bleu: #1c3f60;

  /* Neutres / structure */
  --bg: #f6f7fb;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --gris-fond: #eef1f4;
  --gris-bordure: #d6dbe1;
  --sel: #eef2ff;

  /* Erreur / info */
  --erreur: #c0392b;
  --erreur-bg: #fdecea;
  --erreur-border: #f5c6c1;

  /* Statut logistique de la commande (dimension 1, mutuellement exclusifs) —
     recue (commande AmeliPro pas encore transformée en BL, voir CLAUDE.md
     point ouvert 10) -> preparation -> expediee -> livree */
  --recue: #6b7280;
  --livree: #22c55e;
  --preparation: #3b82f6;
  --expediee: #f59e0b;

  /* "Demande en cours" (dimension 2, indépendante du statut logistique —
     une commande livrée peut très bien avoir une demande en cours) */
  --demande: #7c3aed;

  /* Statut d'un ticket / demande (page Mes demandes) */
  --ticket-ouvert: #3b82f6;
  --ticket-encours: #f59e0b;
  --ticket-resolu: #22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--ink);
}

a{color:inherit}

/* --------------------------------------------------------------------
   Page de connexion
   -------------------------------------------------------------------- */
body.page-connexion-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
}
.page-connexion{
  display:flex;align-items:stretch;justify-content:center;gap:2.5rem;
  width:100%;max-width:900px;padding:1.5rem;
}
.carte-connexion{
  background:#fff;border-radius:10px;box-shadow:0 4px 18px rgba(28,63,96,.15);
  width:100%;max-width:420px;padding:2.2rem 2.4rem 2rem;flex-shrink:0;
}
.carte-connexion__entete{text-align:center;margin-bottom:1.4rem}
.carte-connexion__logo{font-size:1.3rem;font-weight:700;color:var(--bleu)}
.carte-connexion__logo span{color:var(--brand)}
.carte-connexion__sous-titre{margin-top:.6rem;font-size:.95rem;color:#4a5b6c}

.champ{margin-bottom:1.1rem}
.champ label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.champ input{width:100%;padding:.6rem .75rem;border:1px solid var(--gris-bordure);border-radius:6px;font-size:.95rem}
.champ input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(243,146,0,.15)}

.case-recaptcha{
  display:flex;align-items:center;gap:.6rem;border:1px solid var(--gris-bordure);
  border-radius:6px;padding:.7rem .8rem;background:#fafbfc;margin-bottom:1.1rem;font-size:.85rem;color:#4a5b6c;
}
.case-recaptcha input{width:18px;height:18px}

.bouton-connexion{
  width:100%;background:var(--brand);color:#fff;border:none;border-radius:6px;
  padding:.7rem;font-size:1rem;font-weight:600;cursor:pointer;margin-top:.4rem;
}
.bouton-connexion:hover{background:var(--brand-hover)}

.mention-legale{margin-top:1.4rem;font-size:.75rem;color:#7a8a99;text-align:center}

/* Cadre calé sur la hauteur de la carte de connexion (flex stretch) —
   l'image est en position absolue dans ce cadre (retirée du flux normal)
   pour éviter toute dépendance circulaire entre la hauteur du cadre et la
   taille intrinsèque de l'image, puis redimensionnée avec object-fit:contain
   pour conserver ses proportions d'origine sans jamais la recadrer. */
.visuel-produit{position:relative;flex:0 0 340px;border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(28,63,96,.15)}
.visuel-produit img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}

@media (max-width:760px){
  .page-connexion{flex-direction:column;gap:1.5rem}
  .visuel-produit{order:-1;flex-basis:auto;width:100%;max-width:260px;height:200px}
}

/* --------------------------------------------------------------------
   Page d'accueil (tuiles)
   -------------------------------------------------------------------- */
body.page-centree-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}

/* Deux cadres empilés (même notion que sur la page Connexion : le visuel
   dans son propre cadre, séparé du contenu — mais ici l'un AU-DESSUS de
   l'autre, pas côte à côte). */
.page-accueil-rangee{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:1.5rem;
  width:100%;max-width:600px;padding:1.5rem;
}
.cadre-bandeau{background:#fff;border-radius:10px;box-shadow:0 4px 18px rgba(28,63,96,.15);overflow:hidden}
.cadre-bandeau img{display:block;width:100%;height:auto}

.page-bienvenue{
  text-align:center;background:#fff;border-radius:10px;box-shadow:0 4px 18px rgba(28,63,96,.15);
  padding:2.5rem 3rem;width:100%;
}
.page-bienvenue h1{color:var(--bleu);margin-bottom:.4rem}

.grille-tuiles{display:inline-grid;grid-template-columns:repeat(2,220px);gap:1rem;margin:2rem 0 1.6rem}
.tuile{
  display:flex;align-items:center;justify-content:center;min-height:110px;padding:1.2rem 1rem;
  background:var(--gris-fond);border:1px solid var(--gris-bordure);border-radius:10px;color:var(--bleu);
  font-weight:600;font-size:1rem;text-align:center;text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.tuile:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(243,146,0,.18);transform:translateY(-2px)}
.tuile.tuile-secondaire{background:#fff;border-style:dashed}

.grille-ressources{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;margin:1.6rem 0}
.carte-ressource{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--gris-bordure);border-radius:10px;
  box-shadow:0 4px 18px rgba(28,63,96,.1);padding:1.2rem 1.2rem 1.4rem;
}
.carte-ressource__titre{margin:0 0 .5rem;font-size:1.05rem;color:var(--bleu)}
.carte-ressource__description{margin:0 0 1.1rem;color:var(--muted);font-size:.9rem}
.carte-ressource__logo{
  display:block;padding:14px;background:var(--gris-fond);border:1px solid var(--gris-bordure);
  border-radius:10px;text-decoration:none;transition:border-color .15s,box-shadow .15s;
}
.carte-ressource__logo:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(243,146,0,.18)}
.carte-ressource__logo img{display:block;width:100%;height:140px;object-fit:contain;background:#fff;border-radius:6px}

/* --------------------------------------------------------------------
   Ossature commune des pages applicatives — 3 volets
   -------------------------------------------------------------------- */
.app{display:grid;grid-template-columns:270px 1fr 420px;gap:20px;min-height:100vh;padding:20px}
.sidebar,.main,.detail{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.sidebar{padding:20px;align-self:start;position:sticky;top:20px}
.brand{display:block;font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:20px;text-decoration:none}
.brand span{color:var(--brand)}
.caisse-libelle{font-weight:600;color:var(--bleu);line-height:1.3;margin:-8px 0 4px}
.menu h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 8px}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none;font-size:14px}
.menu a.menu-titre{display:block;padding:0;text-decoration:none;color:inherit}
.menu a.menu-titre h2{margin:16px 0 8px}
.menu a.active{background:#eef2ff;font-weight:600}
.menu a:hover{background:#f8fafc}
.logout{margin-top:30px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;padding:10px;border-radius:10px;background:#fff2ec;color:#ef4444;font-weight:600;text-decoration:none;font-size:14px}

.main{padding:20px}
.detail{padding:20px;display:flex;flex-direction:column}
.detail h3{margin:0 0 16px 0}
.detail h4{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:20px 0 8px;padding-top:14px;border-top:1px solid var(--line);
}

.title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.title h2{margin:0;font-size:22px}

.legend{display:flex;gap:14px;align-items:center;margin-left:auto;flex-wrap:wrap}
.legend .pill-legende{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:999px;background:#94a3b8;display:inline-block}
.dot.recue{background:var(--recue)}
.dot.livree{background:var(--livree)}
.dot.preparation{background:var(--preparation)}
.dot.expediee{background:var(--expediee)}
.dot.demande{background:var(--demande)}

.banner-info{background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;border-radius:10px;padding:.7rem 1rem;font-size:13px;margin:10px 0}
.message-erreur{background:var(--erreur-bg);color:var(--erreur);border:1px solid var(--erreur-border);border-radius:6px;padding:.6rem .8rem;font-size:.9rem;margin-top:16px}
.message-info{color:var(--muted);margin-top:10px;font-size:14px}

/* Barre d'outils / recherche / filtres */
.toolbar{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{flex:1 1 260px;display:flex;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}
.search input{border:0;outline:0;width:100%;font-size:14px;background:transparent}
.bouton-recherche{border:1px solid var(--line);background:var(--brand);color:#fff;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer}
.bouton-effacer{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 16px;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.bouton-effacer:hover{background:#f8fafc}

.section-label{font-weight:600;font-size:14px;margin-top:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:#f1f5f9;font-size:12px;color:var(--ink);text-decoration:none;cursor:pointer}
.chip.chip-actif{background:#e0f2fe;color:#0f172a;border-color:#bae6fd;font-weight:600}

/* Onglets type de bénéficiaire (page Factures) */
.type-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.type-tab{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.type-tab.type-tab-actif{background:var(--bleu);color:#fff;border-color:var(--bleu)}

/* Tableaux */
table{width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:10px}
thead th{font-size:12px;color:var(--muted);text-align:left;padding:4px 10px;font-weight:600}
tbody tr{background:#fff;border:1px solid var(--line)}
tbody tr td{padding:12px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
tbody tr td:first-child{border-left:1px solid var(--line);border-radius:10px 0 0 10px}
tbody tr td:last-child{border-right:1px solid var(--line);border-radius:0 10px 10px 0}
tbody tr.cliquable{cursor:pointer}
tbody tr.cliquable:hover{background:#fcfcff}
tbody tr.selected{background:var(--sel);outline:2px solid #e0e7ff}
/* Colonne "#" : numero de ligne volontairement hors du cadre blanc de la
   ligne (validé le 02/09/2026, étendu à tous les tableaux) — le cadre
   (fond blanc + bordure), porté par défaut par tr, est retiré du tr et
   reporté sur les cellules à partir de la 2e ; la 1ere cellule reste sur
   le fond de page, y compris au survol/à la sélection d'une ligne. */
.avec-numero tbody tr{background:transparent;border:none}
.avec-numero tbody tr td:not(:first-child){background:#fff}
.avec-numero tbody tr.cliquable:hover td:not(:first-child){background:#fcfcff}
.avec-numero tbody tr.selected td:not(:first-child){background:var(--sel)}
.avec-numero tbody tr td:first-child{background:transparent;border:none;border-radius:0;color:var(--muted);text-align:center;font-size:12px}
.avec-numero tbody tr td:nth-child(2){border-left:1px solid var(--line);border-radius:10px 0 0 10px}
.cellule-muted{color:var(--muted)}

/* Badges de statut */
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}
.badge .dot{width:8px;height:8px}
.badge.recue{background:#f3f4f6;color:#374151}
.badge.livree{background:#ecfdf5;color:#065f46}
.badge.preparation{background:#eff6ff;color:#1e3a8a}
.badge.expediee{background:#fffbeb;color:#92400e}
.badge.demande{background:#f5f3ff;color:#5b21b6}
.badge.ticket-ouvert{background:#eff6ff;color:#1e3a8a}
.badge.ticket-encours{background:#fffbeb;color:#92400e}
.badge.ticket-resolu{background:#ecfdf5;color:#065f46}
.badge.cp-en_attente{background:#f5f3ff;color:#5b21b6}
.badge.cp-annulee{background:var(--erreur-bg);color:var(--erreur)}
.badge.cp-validee{background:#ecfdf5;color:#065f46}

/* Champs établissement (Commande ponctuelle) verrouillés tant qu'aucune
   recherche FINESS n'a été faite ou après une correspondance trouvée. */
.champ-etablissement[readonly]{background:var(--gris-fond);color:var(--muted)}

/* Bouton icône (tableaux) — remplace un lien texte "Consulter" par un petit
   pictogramme cliquable, avec info-bulle via title/aria-label. */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;background:var(--gris-fond);border:1px solid var(--gris-bordure);
  color:var(--bleu);transition:background .15s,border-color .15s,color .15s;
}
.icon-btn:hover{background:#eef2ff;border-color:var(--brand);color:var(--brand)}

/* Pagination "Page N" sans total (choix assumé pour la performance) */
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px;color:var(--muted)}
.pagination .liens{display:flex;gap:8px}
.pagination a{color:var(--ink);text-decoration:none;padding:6px 12px;border:1px solid var(--line);border-radius:8px}
.pagination a.desactive{pointer-events:none;opacity:.4}

/* Détail / fiche (volet droit) */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.kv:first-of-type{border-top:0}
.kv .k{font-size:12px;color:var(--muted)}
.kv .v{font-weight:600}

/* Boutons du volet Commandes réunis sous .bouton-lien/.bouton-lien-secondaire
   (même système que le volet Factures, voir plus bas) — juste un
   empilement en colonne avec un espacement régulier. */
.actions-detail{margin-top:16px;display:grid;gap:12px}

/* Formulaires (Commande Ponctuelle, Mon Profil, Mes demandes) */
fieldset{border:1px solid var(--line);border-radius:12px;padding:16px;margin:0}
legend{padding:0 8px;color:var(--brand);font-weight:700;font-size:14px}
.grille-champs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grille-champs .pleine-largeur{grid-column:1 / -1}
.champ-libre label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.champ-libre input, .champ-libre textarea, .champ-libre select{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;
}
.champ-libre textarea{resize:vertical}
.champ-libre input[readonly]{background:var(--gris-fond);color:var(--muted)}

.checkbox-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.checkbox-list label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;font-size:13px;cursor:pointer}

.rangee-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:14px}
.rangee-actions.centre{justify-content:center}
.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:#11182711;font-weight:600;cursor:pointer;font-size:14px}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.bouton-lien{display:inline-block;margin-top:10px;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:var(--brand);color:#fff;font-weight:600;text-decoration:none;text-align:center}
.bouton-lien-secondaire{display:block;background:#fff;color:var(--brand)}
.bouton-lien.desactive{cursor:not-allowed;opacity:.5;pointer-events:none}

@media (max-width:1200px){
  .app{grid-template-columns:1fr;gap:14px}
  .sidebar{position:static}
  .detail{order:3}
  .sidebar{order:1}
  .main{order:2}
}