/* ============================================================
   PRECICARE 3.1 — Design system moderne · mobile-first
   Thème Précieux Care (teal/orange) + mode sombre
   Objectif : zéro débordement horizontal sur mobile.
   ============================================================ */

:root{
  --pcc-bg:var(--cream,#FBF7F1);
  --pcc-card:#fff;
  --pcc-line:rgba(16,17,13,.08);
  --pcc-line-2:rgba(16,17,13,.04);
  --pcc-ink:var(--ink,#16110D);
  --pcc-ink2:var(--ink-2,#6b6259);
  --pcc-teal:var(--teal,#055F60);
  --pcc-teal2:var(--teal-2,#0B8C8F);
  --pcc-or:var(--orange,#FF6000);
  --pcc-or2:var(--orange-2,#FF914D);
  --pcc-serif:var(--serif,'Khand',sans-serif);
  --pcc-radius:18px;
  --pcc-shadow:0 1px 3px rgba(14,26,26,.05), 0 12px 32px -12px rgba(14,26,26,.12);
  --pcc-shadow-lg:0 24px 60px -24px rgba(14,26,26,.28);
}
html.dark{
  --pcc-bg:#0d1413; --pcc-card:#151d1c; --pcc-line:rgba(255,255,255,.09);
  --pcc-line-2:rgba(255,255,255,.05); --pcc-ink:#e9efeb; --pcc-ink2:#8fa09b;
  --pcc-shadow:0 1px 3px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.5);
}

/* ── Reset anti-débordement (clé du problème mobile) ── */
*{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; }
body{ background:var(--pcc-bg); color:var(--pcc-ink); margin:0;
  -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img,canvas,svg,table{ max-width:100%; }

/* ══════════════════════ SHELL ══════════════════════ */
.pcc-shell{ display:grid; grid-template-columns:264px minmax(0,1fr); min-height:100vh; }

/* ── Sidebar ── */
.pcc-side{ background:linear-gradient(180deg,#0e1a1a,#0b1615 60%,#0d1210);
  color:#fff; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  padding:1.2rem 1rem; overflow-y:auto; z-index:60; }
html.dark .pcc-side{ background:linear-gradient(180deg,#080d0c,#0a100f); }
.pcc-brand{ color:#fff; font-family:var(--pcc-serif); font-weight:700; font-size:1.35rem;
  display:flex; align-items:center; gap:.55rem; margin-bottom:1rem; letter-spacing:.01em; }
.pcc-brand span{ width:36px; height:36px; border-radius:11px;
  background:linear-gradient(135deg,var(--pcc-or),var(--pcc-or2)); display:grid; place-items:center;
  font-size:1.1rem; box-shadow:0 6px 16px -4px rgba(255,96,0,.6); }
.pcc-brand small{ color:var(--pcc-or2); font-size:.68rem; font-weight:600; }
.pcc-camp{ background:linear-gradient(135deg,rgba(255,96,0,.18),rgba(255,145,77,.08));
  border:1px solid rgba(255,96,0,.3); border-radius:12px; padding:.6rem .8rem; font-size:.8rem;
  margin-bottom:1.1rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pcc-camp small{ display:block; width:100%; opacity:.65; font-size:.68rem; }

.pcc-side nav{ display:flex; flex-direction:column; gap:.18rem; }
.pcc-side nav a{ display:flex; align-items:center; gap:.8rem; padding:.68rem .9rem; border-radius:12px;
  color:rgba(255,255,255,.72); font-size:.9rem; font-weight:500; position:relative;
  transition:background .18s,color .18s,transform .1s; }
.pcc-side nav a i:first-child{ font-size:1.05rem; width:20px; text-align:center; flex-shrink:0; }
.pcc-side nav a span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcc-side nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.pcc-side nav a:active{ transform:scale(.98); }
.pcc-side nav a.on{ background:linear-gradient(135deg,var(--pcc-teal),var(--pcc-teal2));
  color:#fff; box-shadow:0 8px 20px -8px rgba(11,140,143,.7); }
.pcc-side nav a .bdg{ position:absolute; right:.7rem; background:var(--pcc-or); color:#fff;
  font-style:normal; font-size:.62rem; font-weight:700; padding:1px 7px; border-radius:10px; }
.pcc-out{ margin-top:auto; display:flex; gap:.8rem; align-items:center; padding:.68rem .9rem;
  border-radius:12px; color:rgba(255,255,255,.68); transition:.18s; }
.pcc-out:hover{ background:rgba(192,57,43,.18); color:#fff; }

/* ── Main ── */
.pcc-main{ padding:clamp(1rem,2.5vw,2.1rem); min-width:0; max-width:100%; }
.pcc-top{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.pcc-top h1{ font-family:var(--pcc-serif); font-weight:600; font-size:clamp(1.35rem,3vw,1.9rem);
  color:var(--pcc-ink); margin:0; line-height:1.1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; }
.pcc-burger{ display:none; background:var(--pcc-card); border:1px solid var(--pcc-line);
  border-radius:12px; width:44px; height:44px; font-size:1.4rem; cursor:pointer; color:var(--pcc-ink);
  flex-shrink:0; align-items:center; justify-content:center; }
.pcc-user{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.pcc-darkbtn{ background:var(--pcc-card); border:1px solid var(--pcc-line); border-radius:12px;
  width:42px; height:42px; cursor:pointer; color:var(--pcc-ink); font-size:1.05rem; flex-shrink:0; }
.pcc-av{ width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--pcc-or),var(--pcc-or2)); color:#fff; display:grid;
  place-items:center; font-weight:700; font-family:var(--pcc-serif); flex-shrink:0; }
.pcc-id b{ display:block; font-size:.88rem; color:var(--pcc-ink); line-height:1.2; }
.pcc-id small{ color:var(--pcc-teal); font-size:.76rem; }

/* ── Overlay mobile ── */
.pcc-scrim{ display:none; position:fixed; inset:0; background:rgba(8,14,13,.5);
  backdrop-filter:blur(2px); z-index:55; }
.pcc-side.open ~ .pcc-scrim,.pcc-scrim.show{ display:block; }

/* ══════════════════════ MOBILE ══════════════════════ */
@media(max-width:900px){
  .pcc-shell{ grid-template-columns:1fr; }
  .pcc-side{ position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.22,1,.36,1); width:min(280px,84vw); box-shadow:var(--pcc-shadow-lg); }
  .pcc-side.open{ transform:none; }
  .pcc-burger{ display:inline-flex; }
  .pcc-id{ display:none; }               /* gagner de la place */
}
@media(max-width:520px){
  .pcc-main{ padding:.9rem; }
  .pcc-top{ margin-bottom:1.1rem; }
}

/* ══════════════════════ COMPOSANTS ══════════════════════ */
.pcc-card{ background:var(--pcc-card); border:1px solid var(--pcc-line);
  border-radius:var(--pcc-radius); padding:clamp(1rem,2.5vw,1.5rem); box-shadow:var(--pcc-shadow);
  min-width:0; }

/* Grilles auto-responsives : plus besoin de casser à un breakpoint fixe.
   auto-fit + minmax = les colonnes se replient toutes seules sans déborder. */
.pcc-grid{ display:grid; gap:clamp(.8rem,2vw,1.1rem); min-width:0; }
.pcc-grid.c2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.pcc-grid.c3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.pcc-grid.c4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr)); }
.pcc-grid > *{ min-width:0; }

/* Statistiques */
.pcc-stat{ text-align:left; }
.pcc-stat b{ font-family:var(--pcc-serif); font-size:clamp(1.7rem,5vw,2.1rem); line-height:1;
  color:var(--pcc-teal); display:block; }
.pcc-stat span{ font-size:.8rem; color:var(--pcc-ink2); }
html.dark .pcc-stat b{ color:var(--pcc-teal2); }

/* ── Tables : wrapper scrollable pour ne JAMAIS pousser la page ── */
.pcc-tblwrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:12px; }
.pcc-tbl{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:0; }
.pcc-tbl th{ text-align:left; padding:.7rem .85rem; border-bottom:2px solid var(--pcc-line);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--pcc-ink2);
  white-space:nowrap; }
.pcc-tbl td{ padding:.7rem .85rem; border-bottom:1px solid var(--pcc-line-2); color:var(--pcc-ink);
  vertical-align:middle; }
.pcc-tbl tr:last-child td{ border-bottom:none; }
.pcc-tbl tbody tr{ transition:background .12s; }
.pcc-tbl tbody tr:hover{ background:var(--pcc-line-2); }

/* Sur mobile, autoriser le retour à la ligne dans les cellules larges */
@media(max-width:640px){
  .pcc-tbl{ font-size:.84rem; }
  .pcc-tbl th,.pcc-tbl td{ padding:.6rem .6rem; }
  .pcc-tbl td.wrap{ white-space:normal; word-break:break-word; }
}

/* ── Formulaires ── */
.pcc-field{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.pcc-field label{ font-size:.8rem; font-weight:600; color:var(--pcc-ink2); }
.input{ width:100%; max-width:100%; padding:.7rem .85rem; border:1px solid var(--pcc-line);
  border-radius:11px; background:var(--pcc-card); color:var(--pcc-ink); font-size:.95rem;
  font-family:inherit; transition:border-color .18s,box-shadow .18s; }
.input:focus{ outline:none; border-color:var(--pcc-or);
  box-shadow:0 0 0 3px rgba(255,96,0,.12); }
html.dark .input{ background:#0f1716; }
select.input{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6259' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.2rem; }

/* ── Boutons ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.2rem; border:none; border-radius:12px; font-family:var(--pcc-serif);
  font-weight:600; font-size:1rem; cursor:pointer; text-decoration:none; transition:transform .12s,box-shadow .2s,background .2s;
  line-height:1; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:linear-gradient(135deg,var(--pcc-or),#e85600); color:#fff;
  box-shadow:0 8px 22px -8px rgba(255,96,0,.6); }
.btn-primary:hover{ box-shadow:0 12px 30px -8px rgba(255,96,0,.75); color:#fff; }
.btn-teal{ background:linear-gradient(135deg,var(--pcc-teal),var(--pcc-teal2)); color:#fff; }
.btn-ghost{ background:var(--pcc-card); border:1px solid var(--pcc-line); color:var(--pcc-ink); }
.btn-ghost:hover{ border-color:var(--pcc-or); color:var(--pcc-or); }
.btn-sm{ padding:.5rem .85rem; font-size:.88rem; border-radius:10px; }
.btn-lg{ padding:.9rem 1.6rem; font-size:1.1rem; width:100%; }
@media(min-width:521px){ .btn-lg{ width:auto; } }

/* ── Flash / alertes ── */
.pcc-flash{ padding:.85rem 1.1rem; border-radius:12px; margin-bottom:1rem; font-size:.9rem;
  display:flex; align-items:center; gap:.6rem; }
.pcc-flash.success,.pcc-flash.info{ background:rgba(11,140,143,.1); color:var(--pcc-teal);
  border:1px solid rgba(11,140,143,.25); }
.pcc-flash.error{ background:rgba(192,57,43,.09); color:#c0392b; border:1px solid rgba(192,57,43,.25); }
html.dark .pcc-flash.success,html.dark .pcc-flash.info{ color:var(--pcc-teal2); }

/* ── Badges priorité ── */
.pcc-badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700;
  padding:.25rem .7rem; border-radius:20px; white-space:nowrap; }
.pcc-badge.urgence{ background:rgba(192,57,43,.14); color:#c0392b; }
.pcc-badge.prioritaire{ background:rgba(230,126,34,.16); color:#c46a12; }
.pcc-badge.standard{ background:rgba(11,140,143,.14); color:var(--pcc-teal); }

/* ── Section titres ── */
.pcc-card h3{ font-family:var(--pcc-serif); font-weight:600; font-size:1.15rem;
  color:var(--pcc-ink); margin:0 0 .8rem; }

/* ══════════════════════ GATE (login) ══════════════════════ */
.pcc-gate{ min-height:100vh; display:grid; place-items:center; padding:1.2rem;
  background:radial-gradient(120% 120% at 0% 0%, #0b8c8f 0%, #055F60 50%, #073e3f 100%);
  position:relative; overflow:hidden; }
.pcc-gate::before{ content:""; position:absolute; top:-15%; right:-10%; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,96,0,.3),transparent 65%); }
.pcc-gate .box{ position:relative; z-index:2; background:#fff; border-radius:24px;
  padding:clamp(1.6rem,5vw,2.4rem); max-width:430px; width:100%; box-shadow:var(--pcc-shadow-lg); }

/* Utilitaires */
.pcc-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }