/* ============================================================================
   ACCUEIL « LE POULS » — version équipes
   ----------------------------------------------------------------------------
   Trois niveaux de lecture empilés : moi · mon bureau · mon équipe.
   L'animation dit que la donnée a bougé ; elle reste brève, sans rebond, et
   cède devant `prefers-reduced-motion`.
   ========================================================================== */

/* ---- barre de contexte (maquette seulement) ---- */

.pl{max-width:1440px;margin:0 auto;padding:0 30px 100px}

/* Bandeau haut sur deux colonnes : le message occupe la gauche, mes chiffres la
   droite. Sans cela la page reste une colonne étroite dans un écran large. */
.pl-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;align-items:center;padding:40px 0 34px}
@media (max-width:1020px){.pl-top{grid-template-columns:1fr;gap:26px;padding-bottom:26px}}

/* Deux colonnes pour les blocs de personnes et de bureaux. */
.pl-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
  gap:24px;align-items:start;margin-bottom:38px}

@keyframes plIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
.pl-in{opacity:0;animation:plIn .58s cubic-bezier(.2,.75,.3,1) forwards;
  animation-delay:calc(var(--i,0)*75ms)}
@media (prefers-reduced-motion:reduce){
  .pl-in{animation:none;opacity:1}
  .pl-bar i,.pl-col span,.ring .fg{transition:none !important}
}

/* ---- accueil ---- */
.pl-hello{padding:0}
.pl-hello .k{font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--bleu);margin-bottom:13px}
.pl-hello h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:48px;font-weight:400;
  line-height:1.16;letter-spacing:-.9px}
.pl-hello h1 b{font-weight:600}
.pl-hello h1 em{font-style:italic;color:var(--bleu)}
.pl-hello .calm{font-size:14px;color:var(--text-2);margin-top:16px;max-width:58ch;line-height:1.62}

/* ---- section ---- */
.pl-sec{margin-bottom:38px}
.pl-sh{display:flex;align-items:baseline;gap:11px;margin-bottom:16px;flex-wrap:wrap}
.pl-sh h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600}
.pl-sh .s{font-size:12.8px;color:var(--text-3)}
.pl-sh .r{margin-left:auto;font-size:11.5px;color:var(--text-3);font-style:italic}

/* ---- mon mois : anneau + chiffres + rythme ---- */
.pl-me{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px 30px;box-shadow:var(--shadow)}
@media (max-width:760px){.pl-me{grid-template-columns:1fr;gap:20px}}
.pl-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 26px}
.pl-f .l{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text-3)}
.pl-f .v{font-family:'Cormorant Garamond',Georgia,serif;font-size:33px;font-weight:600;
  line-height:1.05;margin-top:5px;font-variant-numeric:tabular-nums}
.pl-f .dl{font-size:11.5px;font-weight:600;margin-top:1px;display:flex;align-items:center;gap:3px}
.pl-f .dl.up{color:var(--ok)}
.pl-f .dl.flat{color:var(--text-3)}
.pl-f .dl svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.6}
.pl-f.alert .v{color:var(--alert)}

/* ---- rythme du mois ---- */
.pl-rh{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px 26px 18px;box-shadow:var(--shadow)}
.pl-lg{display:flex;gap:14px;font-size:11.5px;color:var(--text-2);margin-left:auto}
.pl-lg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.pl-chart{display:flex;align-items:flex-end;gap:3px;height:118px}
.pl-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  position:relative;min-width:0}
.pl-col span{display:block;border-radius:2px;height:0;transition:height .68s cubic-bezier(.25,.8,.3,1)}
.pl-col .done{background:color-mix(in srgb,var(--ok) 60%,transparent)}
.pl-col .todo{background:color-mix(in srgb,var(--alert) 42%,transparent)}
.pl-col .fut {background:color-mix(in srgb,var(--bleu) 30%,transparent)}
.pl-col:hover span{filter:brightness(1.14)}
.pl-col.today::after{content:'';position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--bleu)}
.pl-days{display:flex;gap:3px;margin-top:16px}
.pl-days span{flex:1;text-align:center;font-size:9.5px;color:var(--text-3);min-width:0;
  font-variant-numeric:tabular-nums;overflow:hidden}
.pl-days span.hi{color:var(--bleu);font-weight:700}

/* ---- rangées de personnes / de bureaux ---- */
.pl-rows{display:flex;flex-direction:column;gap:2px}
.pl-row{display:flex;align-items:center;gap:16px;padding:12px 18px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);transition:border-color .13s}
.pl-row:hover{border-color:var(--border-2)}
.pl-row .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-size:10.5px;font-weight:700;color:#fff}
.pl-row .nm{min-width:0;flex:1;font-size:14px;font-weight:600}
.pl-row .nm small{display:block;font-weight:400;font-size:11.5px;color:var(--text-3);margin-top:1px}
.pl-bar{flex:0 0 88px;height:6px;border-radius:4px;background:var(--border);overflow:hidden;min-width:90px}
.pl-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--c,var(--bleu));
  transition:width .85s cubic-bezier(.25,.8,.3,1)}
.pl-row .pc{font-size:13.5px;font-weight:600;min-width:44px;text-align:right;
  font-variant-numeric:tabular-nums}
.pl-row .ct{font-size:11.5px;color:var(--text-3);min-width:62px;text-align:right}
.pl-row.chef{border-color:color-mix(in srgb,var(--c) 34%,var(--border))}
.pl-row .badge{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}

/* ---- agrégat d'équipe ---- */
.pl-team{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 8%,var(--surface)),var(--surface) 68%);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 28px}
@media (max-width:720px){.pl-team{grid-template-columns:1fr}}
.pl-team h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:600;line-height:1.15}
.pl-team p{font-size:13.4px;color:var(--text-2);margin-top:6px;line-height:1.55;max-width:60ch}
.pl-team .big{height:8px;border-radius:5px;background:var(--border);overflow:hidden;margin-top:15px}
.pl-team .big i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 45%,#fff));
  transition:width 1.05s cubic-bezier(.25,.8,.3,1)}
.pl-av{display:flex;margin-top:13px}
.pl-av span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;font-weight:700;color:#fff;border:2px solid var(--surface);margin-left:-8px}
.pl-av span:first-child{margin-left:0}
.pl-av .more{background:var(--border-2);color:var(--text-2)}

/* ---- raccourcis outils ---- */
.pl-chips{display:flex;gap:9px;flex-wrap:wrap}
.pl-chip{display:flex;align-items:center;gap:9px;padding:9px 15px 9px 11px;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow);
  font-size:13.5px;font-weight:500;transition:border-color .13s,transform .13s}
.pl-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 40%,var(--border))}
.pl-chip .g{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--c) var(--tint),transparent)}
.pl-chip .g svg{width:15px;height:15px;stroke:var(--c);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pl-hidden{font-size:11.8px;color:var(--text-3);font-style:italic;margin-top:10px}

/* ---- état serein ---- */
.pl-calm{display:flex;align-items:center;gap:16px;padding:20px 24px;
  border:1px dashed color-mix(in srgb,var(--ok) 32%,transparent);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--ok) 5%,transparent)}
.pl-calm svg{width:28px;height:28px;stroke:var(--ok);fill:none;stroke-width:1.6;flex-shrink:0}
.pl-calm b{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:600;display:block}
.pl-calm span{font-size:13px;color:var(--text-2)}

/* ---- panneau de paramétrage (administrateur) ---- */
.pl-adm{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.pl-adm-h{padding:18px 22px 15px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--warn) 7%,var(--surface))}
.pl-adm-h h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600}
.pl-adm-h p{font-size:12.8px;color:var(--text-2);margin-top:5px;line-height:1.55;max-width:72ch}
.pl-adm-w{overflow-x:auto}
.pl-adm table{width:100%;border-collapse:collapse;font-size:12.8px;min-width:560px}
.pl-adm th{text-align:center;padding:10px 12px;font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border);
  white-space:nowrap;background:var(--surface-2)}
.pl-adm th:first-child{text-align:left}
.pl-adm td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:center}
.pl-adm td:first-child{text-align:left;font-weight:500}
.pl-adm tr:last-child td{border-bottom:none}
.pl-adm input{width:16px;height:16px;accent-color:var(--bleu);cursor:pointer}
.pl-adm .all{font-size:11px;color:var(--text-3);font-style:italic}

/* ============================================================================
   PANNEAU PAR PERSONNE — tiroir latéral
   ========================================================================== */
.pl-row.clic{cursor:pointer}
.pl-row.clic:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--border));
  transform:translateX(2px);transition:transform .13s,border-color .13s}

.dr-ov{position:fixed;inset:0;background:rgba(17,26,51,.42);opacity:0;pointer-events:none;
  transition:opacity .24s;z-index:200;backdrop-filter:blur(2px)}
.dr-ov.on{opacity:1;pointer-events:auto}
.dr{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);
  border-left:1px solid var(--border-2);box-shadow:-16px 0 44px rgba(17,26,51,.2);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.85,.3,1);
  z-index:201;display:flex;flex-direction:column}
.dr.on{transform:none}
@media (prefers-reduced-motion:reduce){.dr,.dr-ov{transition:none}}

.dr-h{padding:22px 26px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 10%,var(--surface)),var(--surface) 70%)}
.dr-h .top{display:flex;align-items:flex-start;gap:14px}
.dr-h .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.dr-h h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600;line-height:1.1}
.dr-h .sub{font-size:12.5px;color:var(--text-2);margin-top:3px}
.dr-x{margin-left:auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  color:var(--text-3);flex-shrink:0}
.dr-x:hover{background:var(--bg);color:var(--text)}
.dr-x svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.dr-stat{display:flex;gap:22px;margin-top:16px}
.dr-stat div .v{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-weight:600;line-height:1}
.dr-stat div .l{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-3);margin-top:3px}

.dr-f{display:flex;gap:6px;padding:14px 26px;border-bottom:1px solid var(--border);
  flex-wrap:wrap;background:var(--surface-2)}
.dr-f button{padding:6px 13px;border-radius:20px;font-size:12.5px;font-weight:500;
  border:1px solid var(--border);color:var(--text-2);background:var(--surface);white-space:nowrap}
.dr-f button:hover{border-color:var(--border-2);color:var(--text)}
.dr-f button.on{background:var(--marine);color:#fff;border-color:transparent;font-weight:600}
html[data-theme="dark"] .dr-f button.on{background:var(--bleu)}
.dr-f button .n{opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}

.dr-b{flex:1;overflow-y:auto;padding:6px 26px 26px}
.dr-t{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.dr-t:last-child{border-bottom:none}
.dr-t.fait{opacity:.45}
.dr-t.fait .nm{text-decoration:line-through}
.dr-box{width:17px;height:17px;border-radius:5px;border:1.6px solid var(--border-2);flex-shrink:0;
  display:grid;place-items:center}
.dr-box svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:3;opacity:0}
.dr-t.fait .dr-box{background:var(--ok);border-color:var(--ok)}
.dr-t.fait .dr-box svg{opacity:1}
.dr-tag{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2.5px 6px;
  border-radius:5px;flex-shrink:0;min-width:52px;text-align:center;
  background:color-mix(in srgb,var(--tc) 15%,transparent);color:var(--tc)}
.dr-t .nm{flex:1;min-width:0;font-size:13.4px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dr-t .nm small{color:var(--text-3);font-weight:400;margin-left:7px}
.dr-t .d{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.dr-empty{padding:44px 10px;text-align:center;color:var(--text-3);font-size:13px}

/* ============================================================================
   VARIANTE DE CHARTE « VIF »
   ----------------------------------------------------------------------------
   La page paraissait fade — mais le défaut n'était pas le manque de saturation,
   c'était le manque de CONTRASTE. Tout était clair sur clair, et les couleurs de
   données étaient posées à 40 % d'opacité, donc grises.

   Le luxe ne se joue pas dans la pâleur : Hermès n'est pas beige sur beige, c'est
   un orange plein sur un brun profond. Peu de couleurs, mais employées à pleine
   force, en petite quantité, sur des neutres sombres.

   D'où trois ajouts, sans toucher à l'identité marine :
     · des SURFACES SOMBRES pour les blocs clés — le clair adjacent s'en trouve
       éclairé
     · un ACCENT CHAUD à pleine saturation (or), réservé à la progression
     · des COULEURS DE DONNÉES vives — l'interface reste sobre, la donnée parle
   ========================================================================== */

html[data-look="vif"]{
  --or-vif:#D9A441; --vert-vif:#10B981; --corail:#F97362; --azur:#4DA3F5;
}

/* bloc d'accueil sur fond marine */
html[data-look="vif"] .pl-top{position:relative;padding:52px 34px;margin:26px 0 34px;
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--marine) 0%,#24365F 55%,#2B4272 100%)}
html[data-look="vif"] .pl-top::after{
  content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--or-vif) 24%,transparent),transparent 68%)}
html[data-look="vif"] .pl-hello{color:#F2F5FB;position:relative;z-index:1}
html[data-look="vif"] .pl-hello .k{color:var(--or-vif)}
html[data-look="vif"] .pl-hello h1{color:#F2F5FB}
html[data-look="vif"] .pl-hello h1 em{color:var(--or-vif)}
html[data-look="vif"] .pl-hello .calm{color:rgba(242,245,251,.72)}

/* mon mois : carte sombre, chiffres or */
html[data-look="vif"] .pl-me{background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.14);box-shadow:none;position:relative;z-index:1}
html[data-look="vif"] .pl-me .pl-f .l{color:rgba(242,245,251,.5)}
html[data-look="vif"] .pl-me .pl-f .v{color:#F2F5FB}
html[data-look="vif"] .pl-me .pl-f.alert .v{color:var(--corail)}
html[data-look="vif"] .pl-me .ring .bg{stroke:rgba(255,255,255,.13)}
html[data-look="vif"] .pl-me .ring .fg{stroke:var(--or-vif)}
html[data-look="vif"] .pl-me .ring .mid b{color:#F2F5FB}
html[data-look="vif"] .pl-me .ring .mid span{color:rgba(242,245,251,.5)}
html[data-look="vif"] .pl-me .dl.up{color:var(--vert-vif)}

/* données vives : c'est là que la saturation est légitime */
html[data-look="vif"] .pl-col .done{background:var(--vert-vif)}
html[data-look="vif"] .pl-col .todo{background:var(--corail)}
html[data-look="vif"] .pl-col .fut {background:color-mix(in srgb,var(--azur) 62%,transparent)}
html[data-look="vif"] .pl-bar i{background:var(--vert-vif)}
html[data-look="vif"] .pl-team{
  background:linear-gradient(140deg,#16233F,#213256);border-color:#2C3F6B;color:#F2F5FB}
html[data-look="vif"] .pl-team h3{color:#F2F5FB}
html[data-look="vif"] .pl-team p{color:rgba(242,245,251,.74)}
html[data-look="vif"] .pl-team .big{background:rgba(255,255,255,.12)}
html[data-look="vif"] .pl-team .big i{background:linear-gradient(90deg,var(--or-vif),#EFC46B)}
html[data-look="vif"] .pl-team .ring .bg{stroke:rgba(255,255,255,.13)}
html[data-look="vif"] .pl-team .ring .fg{stroke:var(--or-vif)}
html[data-look="vif"] .pl-team .ring .mid b{color:#F2F5FB}
html[data-look="vif"] .pl-team .ring .mid span{color:rgba(242,245,251,.5)}
html[data-look="vif"] .pl-team .pl-av span{border-color:#1B2A52}

/* titres plus affirmés */
html[data-look="vif"] .pl-sh h2{letter-spacing:-.4px}
html[data-look="vif"] .pl-hello h1{font-size:54px}

/* accent chaud sur les repères de rythme */
html[data-look="vif"] .pl-col.today::after{background:var(--or-vif);width:6px;height:6px}
html[data-look="vif"] .pl-days span.hi{color:var(--or-vif)}

/* sélecteur de charte */
.look{display:flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;overflow:hidden;margin-left:6px}
.look button{padding:0 12px;height:29px;font-size:12px;font-weight:500;color:rgba(255,255,255,.62)}
.look button.on{background:rgba(255,255,255,.9);color:var(--marine);font-weight:600}