/* Paolia — couche « moderne et épurée ».
   Chargée après v5.css : elle n'ajoute que des surcharges douces (rayons, ombres, espacements, transitions)
   et réutilise les variables existantes, donc le mode sombre et la palette Ouest Hygiène restent intacts.
   Supprimer ce fichier et ses deux références (index.html, sw.js) suffit à revenir à l'état précédent. */

:root {
  --r: 14px;
  --ombre-1: 0 1px 2px rgba(48,73,111,.05);
  --ombre-2: 0 2px 4px rgba(48,73,111,.04), 0 12px 32px rgba(48,73,111,.07);
  --shadow: var(--ombre-1);
  --duree: .16s;
  --courbe: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ombre-2: 0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4) } }
:root[data-theme="dark"] { --ombre-2: 0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4) }

body { line-height: 1.55; text-rendering: optimizeLegibility }
h1 { font-size: 1.55rem; letter-spacing: -.025em }
.muted, .small { text-wrap: pretty }

/* Cartes : bordure fine, ombre douce, relief au survol seulement si la carte est cliquable */
.card { padding: 1.15rem 1.25rem; border-color: var(--line-2); box-shadow: var(--ombre-1); transition: box-shadow var(--duree) var(--courbe), border-color var(--duree) var(--courbe) }
.card + .card { margin-top: 1rem }
a.card:hover, .card[role="button"]:hover, .card[tabindex]:hover { box-shadow: var(--ombre-2); border-color: var(--line) }

/* Indicateurs : plus d'air, chiffres plus lisibles */
.kpis { gap: .85rem; margin-bottom: 1.1rem }
.kpi { padding: .9rem 1.05rem; border-color: var(--line-2); box-shadow: var(--ombre-1) }
.kpi .l { text-transform: none; letter-spacing: 0; font-weight: 550 }
.kpi .v { font-size: 1.6rem; letter-spacing: -.03em }
.kpi.accent { background: linear-gradient(135deg, var(--oh-bleu), var(--oh-bleu-2)); box-shadow: 0 6px 18px rgba(0,62,231,.22) }

/* Boutons : tactiles, retour visuel net */
.btn { border-radius: 10px; min-height: 36px; font-weight: 600; transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe) }
.btn:active { transform: translateY(1px) }
.btn:not(.sec):not(.ghost):not(.danger):hover { box-shadow: 0 4px 14px rgba(0,62,231,.25) }
@media (pointer: coarse) { .btn, .tabs button, .nav a { min-height: 44px } }

/* Navigation latérale : état actif discret, survol fluide */
.nav a { border-radius: 10px; transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe) }
.nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--oh-vert), 0 4px 14px rgba(0,62,231,.35) }

/* Onglets : soulignement plus net */
.tabs { border-bottom-color: var(--line-2); gap: .35rem }
.tabs button { border-radius: 8px 8px 0 0; transition: color var(--duree) var(--courbe), background var(--duree) var(--courbe) }
.tabs button:hover { background: var(--panel-2); color: var(--ink) }
.tabs button[aria-selected="true"] { border-bottom-width: 3px }

/* Pastilles et filtres */
.chip-f { transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe) }
.chip-f:hover { border-color: var(--accent) }
.niv { letter-spacing: .005em }

/* Listes et carte : survol plus doux */
.carte-liste { border-color: var(--line-2); border-radius: var(--r) }
.carte-liste .it { transition: background var(--duree) var(--courbe) }
.carte-fiche, .carte-outils .card, .carte-vide { box-shadow: var(--ombre-2) }

/* Tableaux : lignes aérées, sans quadrillage lourd */
table { border-collapse: separate; border-spacing: 0 }
tbody tr { transition: background var(--duree) var(--courbe) }
tbody tr:hover { background: var(--panel-2) }

/* Champs de saisie */
input, select, textarea { border-radius: 9px; transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe) }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) }

/* Entrée en douceur du contenu */
@media (prefers-reduced-motion: no-preference) {
  .main > * { animation: apparition .22s var(--courbe) both }
  @keyframes apparition { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important } }

/* Barres de défilement fines */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent }

/* Bandeau de démonstration : le sélecteur d'environnement réutilise .segments (fond clair) mais v5.css y met du texte blanc.
   On le rend translucide sur le fond sombre du bandeau pour retrouver un contraste suffisant. */
.bandeau-demo .env-demo { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: 3px 3px 3px .7rem; align-items: center }
.bandeau-demo .env-demo .texte { color: #fff; font-weight: 600 }
.bandeau-demo .env-demo button { background: transparent; color: #fff; border-color: transparent }
.bandeau-demo .env-demo button:hover { background: rgba(255,255,255,.16) }
.bandeau-demo .env-demo button[aria-pressed="true"] { background: var(--oh-vert); color: var(--oh-nuit); border-color: var(--oh-vert) }

/* Planning du jour (accueil manager et directeur régional) */
.jour-bloc { margin-bottom: 1rem }
.jour-ech { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem }
.jour-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem }
.jour-liste li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .6rem; align-items: baseline; padding: .4rem .6rem; border-radius: 10px; background: var(--panel-2); border-left: 4px solid var(--fc, var(--accent)) }
.jour-liste li.fait { opacity: .88 } .jour-liste .jour-h { font-weight: 650; font-variant-numeric: tabular-nums }
@media (max-width: 560px) { .jour-liste li { grid-template-columns: 1fr; gap: 0 } }

/* Matrice urgent / important */
.matrice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem }
.quad { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; background: var(--panel-2); min-height: 96px }
.quad.faire { border-left: 4px solid var(--niv-rouge) } .quad.planifier { border-left: 4px solid var(--accent) } .quad.deleguer { border-left: 4px solid var(--niv-orange) } .quad.surveiller { border-left: 4px solid var(--muted) }
.quad-s { padding: .2rem 0; border-top: 1px dashed var(--line-2) }
@media (max-width: 700px) { .matrice { grid-template-columns: 1fr } }

/* Prospections sur la carte : losange coloré + glyphe (la couleur n'est jamais seule) */
.marqueur-prosp { width: 22px; height: 22px; background: var(--c, #2750C8); border: 2px solid #fff; border-radius: 5px; transform: rotate(45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); display: grid; place-items: center }
.marqueur-prosp span { transform: rotate(-45deg); color: #fff; font: 700 12px/1 var(--sans) }

/* Zone choisie par jour dans l'en-tête du planning */
.pl-zj { display: block; width: 100%; margin-top: .2rem; font-size: .72rem; padding: .1rem .25rem; min-height: 24px; border-radius: 6px }

/* Recherche de client dans la création d'un rendez-vous */
.pl-res { display: grid; gap: 2px; margin-top: .25rem; max-height: 220px; overflow-y: auto }
.pl-opt { display: grid; text-align: left; gap: 0; padding: .4rem .6rem; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe) }
.pl-opt:hover, .pl-opt:focus-visible { background: var(--accent-soft); border-color: var(--accent) }
.pl-choisi { margin-top: .3rem }

/* Comptes rendus d'appel (onglets Télévente et ADV du responsable secteur) */
.rs-appel h2 { margin-bottom: .4rem }
.rs-l { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .6rem; padding: .3rem 0; border-top: 1px solid var(--line-2); font-size: .88rem }
.rs-l > span:first-child { padding-top: .1rem }
@media (max-width: 640px) { .rs-l { grid-template-columns: 1fr; gap: .1rem } }

/* ---------- Cartes des secteurs : légende colorée, étiquettes, détail ---------- */
.leg { display: grid; gap: .35rem } .leg-groupe { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--slate); font-weight: 750; margin: .5rem 0 .1rem }
.leg-it { display: grid; grid-template-columns: auto minmax(0, 1fr) 46px; gap: .6rem; align-items: center; text-align: left; padding: .45rem .6rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); border-left: 5px solid var(--c); transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), background var(--duree) var(--courbe) }
.leg-it:hover { transform: translateX(3px); box-shadow: var(--ombre-2) } .leg-it.sel { background: color-mix(in srgb, var(--c) 12%, var(--panel)); border-color: var(--c) }
.leg-pastille { width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 750 .74rem var(--sans); flex: none; box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 45%, transparent) }
.leg-txt { display: grid; min-width: 0 } .leg-txt b { font-size: .88rem } .leg-txt small { font-size: .72rem; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.leg-barre { height: 6px; border-radius: 99px; background: var(--grey-soft); overflow: hidden } .leg-barre i { display: block; height: 100%; background: var(--c); border-radius: 99px }
.sect-label { transform: translate(-50%, -50%); display: flex; align-items: center; gap: .35rem; background: #fff; color: #1B2840; border: 2px solid var(--c); border-radius: 999px; padding: 2px 9px 2px 2px; box-shadow: 0 3px 10px rgba(48,73,111,.28); white-space: nowrap; pointer-events: auto }
.sect-label i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 750 .68rem var(--sans) }
.sect-label span { display: grid; line-height: 1.1; font: 700 .76rem var(--sans) } .sect-label small { font: 500 .62rem var(--sans); color: #55627C }
.sect-label.hidden { display: none !important }
.zoom-bas .sect-label { padding: 2px; gap: 0 } .zoom-bas .sect-label span { display: none }
.tip-secteur { font: 600 .78rem var(--sans); border-radius: 10px; border: 0; box-shadow: 0 6px 18px rgba(48,73,111,.25) }
.detail-t { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem } .detail-t b { font-size: 1.02rem }
.detail-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem } .detail-kpis div { background: var(--panel-2); border-radius: 10px; padding: .4rem .5rem; display: grid }
.detail-kpis b { font-size: 1.15rem; letter-spacing: -.02em } .detail-kpis span { font-size: .66rem; color: var(--slate) }
.pt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--line) } .pt.vu { background: #10B981 } .pt.non { background: #F97316 } .pt.pro { background: #fff; border: 2px solid #475569 }
.carte-secteurs { height: calc(100vh - 160px) }

/* ---------- Connexion : sobre, dans la continuité du reste du logiciel (palette Ouest Hygiène, Inter, une seule animation) ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: var(--bg) }
.login .marque { position: sticky; top: 0; height: 100vh; padding: 2.4rem 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; background: var(--oh-nuit); color: #fff; align-self: stretch; top: auto }
.marque-haut { display: flex; align-items: center; gap: .8rem }
.login .marque .marque-haut img { width: 44px; height: 44px; border-radius: 10px; display: block }
.login .marque h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.02em; font-weight: 700; color: #fff }
.marque-centre { display: grid; gap: 1.6rem; max-width: 460px }
.login .marque .accroche { margin: 0; font-size: 2rem; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; color: #fff; max-width: 15em; text-wrap: balance }
/* Logo Paolia sous l'accroche : blanc sur fond nuit ; seule l'aiguille bouge, une fois, à l'ouverture (le reste reste immobile). */
.logo-paolia { position: relative; width: min(340px, 100%); aspect-ratio: 2400 / 675 }
.login .marque .logo-paolia img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; display: block; user-select: none; pointer-events: none }
.lc-aiguille { transform-origin: 49.74% 36.03% }
.marque-bas { margin: 0; font-size: .82rem; color: #9fb0d9 }
.login .panneau { background: var(--bg); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.1rem; padding: 2.4rem clamp(1rem, 4vw, 3rem) }
.login .panneau .card { width: min(520px, 100%); padding: 1.5rem 1.6rem; border-radius: var(--r); box-shadow: none; border: 1px solid var(--line) }
.login .panneau .card h2 { font-size: 1.15rem }
#fc .btn { width: 100%; min-height: 42px }
.demo-roles { display: grid; grid-template-columns: 1fr; gap: .4rem; margin-top: .8rem }
.demo-role { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); text-align: left; transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe) }
.demo-role:hover, .demo-role:focus-visible { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; transform: none }
.demo-role .ic { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent) }
.demo-role .t { display: grid; line-height: 1.25 } .demo-role .t b { font-size: .92rem; color: var(--ink) } .demo-role .t span { font-size: .82rem; color: var(--slate) }
@media (prefers-reduced-motion: no-preference) {
  .lc-base { animation: apparait .8s ease-out both }
  .lc-aiguille { animation: balayage 1.7s cubic-bezier(.22, .8, .24, 1) .35s both }
  @keyframes apparait { from { opacity: 0 } to { opacity: 1 } }
  @keyframes balayage { from { transform: rotate(-95deg); opacity: 0 } 12% { opacity: 1 } to { transform: rotate(0) } }
}
@media (max-width: 900px) { .login { grid-template-columns: 1fr } .login .marque { position: static; height: auto; min-height: 0; padding: 1.4rem 1.2rem; gap: 1rem } .login .marque .accroche { font-size: 1.35rem } .logo-paolia, .marque-bas { display: none } .marque-centre { gap: 0 } }

/* ---------- Mes priorités : cartes à classer et matrice d'Eisenhower personnelle ---------- */
.pliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem }
.pwrap { display: grid; grid-template-columns: minmax(290px, 350px) minmax(0, 1fr); gap: .8rem; align-items: start }
.pwrap .pclasser { position: sticky; top: .6rem; max-height: calc(100vh - 1.4rem); overflow-y: auto; margin-top: .8rem }
.pwrap .pclasser .pliste { grid-template-columns: 1fr }
@media (max-width: 1100px) { .pwrap { grid-template-columns: 1fr } .pwrap .pclasser { position: static; max-height: 380px } }
.pcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; display: grid; gap: .3rem; cursor: grab; transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe) }
.pcard:hover { border-color: var(--accent); box-shadow: var(--ombre-1) } .pcard.glisse { opacity: .45 } .pcard.fait { opacity: .6; cursor: default } .pcard.fait .pcard-t b { text-decoration: line-through }
.pcard-t { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap } .pcard-t b { font-size: .9rem }
.pcard-d { font-size: .8rem; color: var(--slate); overflow-wrap: anywhere }
.pcard-m { display: flex; gap: .3rem; flex-wrap: wrap } .pcard-m:empty { display: none }
.chip.retard { background: var(--red-soft); color: var(--red) } .chip.sugg { background: var(--accent-soft); color: var(--accent) }
.pcard-a { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap }
.pcard-a select { width: auto; min-height: 30px; font-size: .78rem; padding: .1rem .4rem; flex: 1 1 130px; max-width: 190px }
.pmat { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1fr); gap: .6rem }
.pmat-ent { text-align: center; font-weight: 700; font-size: .86rem; color: var(--ink-2) }
.pmat-lig { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .86rem; color: var(--ink-2); writing-mode: horizontal-tb; text-align: center }
.pcase { min-height: 150px; border: 1px solid var(--line); border-top: 4px solid var(--c, var(--accent)); border-radius: 12px; background: var(--panel-2); padding: .6rem; display: grid; align-content: start; gap: .5rem; transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe) }
.pcase.faire { --c: var(--niv-rouge) } .pcase.planifier { --c: var(--accent) } .pcase.deleguer { --c: var(--niv-orange) } .pcase.eliminer { --c: var(--muted) }
.pcase-t { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap } .pcase-t b { font-size: .95rem } .pcase-n { margin-left: auto; font-weight: 700; font-size: .8rem; color: var(--slate) }
.pcase-c { display: grid; gap: .45rem } .pcase-vide { margin: 0; padding: .6rem 0; text-align: center }
.depot { background: var(--accent-soft) !important; border-color: var(--accent) !important }
@media (max-width: 860px) { .pmat { grid-template-columns: 1fr } .pmat-ent, .pmat-lig { display: none } }


/* Impression : pas d'effets */
@media print { .card, .kpi { box-shadow: none; animation: none } }