/* =====================================================================
   LeoPlan · section 4 du thème : Plan de travail, Feuilles de service,
   Vue d'ensemble (et préparation des Repérages)
   ---------------------------------------------------------------------
   À ajouter À LA FIN de leoplan-theme.css (ou à charger juste après).
   Utilise les jetons --lp-* du thème. Écran seulement : l'impression
   passe par les PDF (leoplan-pdf-planning.js).
   ===================================================================== */

:root{
  /* Code couleur des bandes, version écran (thème sombre).
     Même convention que le PDF : INT JOUR blanc, EXT JOUR jaune,
     INT NUIT bleu, EXT NUIT vert. */
  --lp-strip-int-jour:#E9E4DA;
  --lp-strip-ext-jour:#E3C35A;
  --lp-strip-int-nuit:#8E9FE0;
  --lp-strip-ext-nuit:#6DB088;
  --lp-strip-texte-code:#141414;   /* texte posé sur la case de code */
  --lp-alerte:#E3B85C;             /* écart au-dessus de la cible, etc. */
}

@media screen{

  /* ---------- 4.1 Bandes (une séquence) ----------
     <li class="lp-strip" data-strip="ext-nuit" tabindex="0">
       <span class="lp-strip-code">EXT · NUIT</span>
       <span class="lp-strip-num">1</span>
       <span class="lp-strip-decor lp-script">FORÊT</span>
       <span class="lp-strip-mention">Souvenir</span>
       <span class="lp-strip-roles">Léa, Julie</span>
       <span class="lp-strip-plans">1 plan</span>
       <span class="lp-strip-duree">0:03</span>
     </li>                                                              */
  .lp-strip{
    --lp-strip-c:var(--lp-muted);
    list-style:none;margin:0;
    display:grid;align-items:center;gap:12px;
    grid-template-columns:92px 36px minmax(110px,1.1fr) 92px minmax(140px,1.6fr) 64px 52px;
    min-height:44px;padding-right:14px;
    background:color-mix(in srgb,var(--lp-strip-c) 10%,var(--lp-panel));
    border:1px solid color-mix(in srgb,var(--lp-strip-c) 24%,var(--lp-border));
    border-radius:6px;color:var(--lp-text);font-size:14px;
    transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
  }
  .lp-strip[data-strip="int-jour"]{--lp-strip-c:var(--lp-strip-int-jour)}
  .lp-strip[data-strip="ext-jour"]{--lp-strip-c:var(--lp-strip-ext-jour)}
  .lp-strip[data-strip="int-nuit"]{--lp-strip-c:var(--lp-strip-int-nuit)}
  .lp-strip[data-strip="ext-nuit"]{--lp-strip-c:var(--lp-strip-ext-nuit)}
  .lp-strip:hover{border-color:color-mix(in srgb,var(--lp-strip-c) 50%,var(--lp-border))}
  .lp-strip:focus-visible{outline:2px solid var(--lp-accent-text);outline-offset:2px}

  .lp-strip-code{
    align-self:stretch;display:flex;align-items:center;justify-content:center;
    background:var(--lp-strip-c);color:var(--lp-strip-texte-code);
    font-size:11px;font-weight:500;letter-spacing:.06em;white-space:nowrap;
    border-radius:5px 0 0 5px;
  }
  .lp-strip-num{font-weight:600;font-variant-numeric:tabular-nums}
  .lp-strip-decor{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lp-strip-decor.lp-script{font-size:14px}   /* le thème réduit lp-script à 12 px pour le texte du scénario */
  .lp-strip-mention{font-style:italic;color:var(--lp-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lp-strip-roles{color:var(--lp-text-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lp-strip-plans,.lp-strip-duree{text-align:right;color:var(--lp-text-2);font-size:13px;font-variant-numeric:tabular-nums}
  .lp-strip-duree{color:var(--lp-text)}

  /* État « saisie » : la bande est attrapée (glisser-déposer, si retenu).
     Poser data-etat="saisie" sur la bande pendant le déplacement. */
  .lp-strip[data-etat="saisie"]{
    position:relative;z-index:2;cursor:grabbing;
    background:color-mix(in srgb,var(--lp-strip-c) 16%,var(--lp-raised));
    border-color:var(--lp-accent-text);
    box-shadow:0 0 0 1px var(--lp-accent-text),0 14px 30px rgb(0 0 0/.55);
    transform:scale(1.012);
  }
  /* Emplacement où la bande va tomber */
  .lp-strip-depot{
    list-style:none;min-height:44px;border-radius:6px;
    border:1.5px dashed var(--lp-accent-text);background:rgb(32 137 168/.08);
  }
  /* Poignée (premier enfant de la bande), affichée seulement si le glisser-déposer
     est retenu : poser data-glisser="oui" sur .lp-plan-travail */
  .lp-strip-poignee{display:none}
  .lp-plan-travail[data-glisser="oui"] .lp-strip{grid-template-columns:20px 92px 36px minmax(110px,1.1fr) 92px minmax(140px,1.6fr) 64px 52px;padding-left:0}
  .lp-plan-travail[data-glisser="oui"] .lp-strip-poignee{display:flex;justify-content:center;color:var(--lp-muted);cursor:grab}
  .lp-plan-travail[data-glisser="oui"] .lp-strip-code{border-radius:0}

  /* ---------- 4.2 Onglet Plan de travail ---------- */
  .lp-plan-travail{display:flex;flex-direction:column;gap:16px}
  .lp-pt-legende{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--lp-text-2)}
  .lp-pt-cle{
    display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:4px;
    font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--lp-strip-texte-code);
  }
  .lp-pt-cle[data-strip="int-jour"]{background:var(--lp-strip-int-jour)}
  .lp-pt-cle[data-strip="ext-jour"]{background:var(--lp-strip-ext-jour)}
  .lp-pt-cle[data-strip="int-nuit"]{background:var(--lp-strip-int-nuit)}
  .lp-pt-cle[data-strip="ext-nuit"]{background:var(--lp-strip-ext-nuit)}

  .lp-pt-colonnes{
    display:grid;gap:12px;padding:0 14px 0 0;
    grid-template-columns:92px 36px minmax(110px,1.1fr) 92px minmax(140px,1.6fr) 64px 52px;
    font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-muted);
  }
  .lp-pt-colonnes > :first-child{text-align:center}
  .lp-pt-colonnes > :nth-last-child(-n+2){text-align:right}

  .lp-pt-jour{background:var(--lp-panel);border:1px solid var(--lp-border);border-radius:8px;overflow:hidden}
  .lp-pt-jour[data-cible="oui"]{border-color:var(--lp-accent-text)}
  .lp-pt-jour-entete{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
    padding:12px 16px;background:var(--lp-raised);border-bottom:1px solid var(--lp-border);
  }
  .lp-pt-jour-num{font-size:15px;font-weight:600}
  .lp-pt-jour-date{font-size:14px}
  .lp-pt-jour-infos{font-size:13px;color:var(--lp-text-2)}
  .lp-pt-jour-total{margin-left:auto;font-size:13px;color:var(--lp-text-2);font-variant-numeric:tabular-nums}
  .lp-pt-bandes{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px}
  .lp-pt-vide{margin:0;padding:18px 16px;font-size:13px;color:var(--lp-muted);text-align:center}
  .lp-pt-banque{background:transparent;border-style:dashed}
  .lp-pt-banque .lp-pt-jour-entete{background:transparent}

  /* ---------- 4.3 Onglet Feuilles de service ---------- */
  .lp-feuilles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
  .lp-fs-carte{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--lp-panel);border:1px solid var(--lp-border);border-radius:8px}
  .lp-fs-entete{display:flex;align-items:baseline;gap:10px}
  .lp-fs-jour{font-size:15px;font-weight:600}
  .lp-fs-date{font-size:14px;color:var(--lp-text-2)}
  .lp-fs-etat{margin-left:auto;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--lp-raised);color:var(--lp-text-2)}
  .lp-fs-carte[data-etat="prete"] .lp-fs-etat{background:var(--lp-accent-tint);color:var(--lp-accent-text)}
  .lp-fs-horaires{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}
  .lp-fs-horaires > div{background:var(--lp-field);border:1px solid var(--lp-border);border-radius:6px;padding:6px 8px}
  .lp-fs-horaires dt{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-muted)}
  .lp-fs-horaires dd{margin:2px 0 0;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
  .lp-fs-horaires .lp-fs-pat dd{color:var(--lp-accent-text)}
  .lp-fs-lieux{margin:0;font-size:13px;color:var(--lp-text-2)}
  .lp-fs-seqs{display:flex;flex-wrap:wrap;gap:4px}
  .lp-fs-actions{display:flex;gap:8px;justify-content:flex-end}

  /* ---------- 4.4 Onglet Vue d'ensemble ---------- */
  .lp-overview{display:flex;flex-direction:column;gap:20px}
  .lp-ov-titre{margin:0;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-muted)}

  .lp-ov-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
  .lp-ov-chiffre{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--lp-panel);border:1px solid var(--lp-border);border-radius:8px}
  .lp-ov-valeur{font-size:28px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
  .lp-ov-libelle{font-size:13px}
  .lp-ov-detail{font-size:12px;color:var(--lp-muted)}
  .lp-ov-chiffre[data-alerte] .lp-ov-detail{color:var(--lp-alerte)}

  /* Frise du macro-planning : une semaine par ligne, sept colonnes */
  .lp-ov-frise{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr));gap:4px;align-items:stretch}
  .lp-ov-jsem{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-muted);text-align:center;padding-bottom:2px}
  .lp-ov-semaine{font-size:11px;color:var(--lp-muted);padding:6px 8px 0 0;white-space:nowrap;font-variant-numeric:tabular-nums}
  .lp-ov-jour{
    display:flex;flex-direction:column;gap:2px;min-height:60px;padding:6px 8px;
    border-radius:6px;background:var(--lp-field);border:1px solid var(--lp-border);font-size:12px;color:var(--lp-muted);
  }
  .lp-ov-jour-num{font-weight:600;font-variant-numeric:tabular-nums}
  .lp-ov-jour-tag{font-size:11px;font-weight:500}
  .lp-ov-jour[data-phase="prepa"]{background:var(--lp-raised);border-color:var(--lp-border-strong);color:var(--lp-text)}
  .lp-ov-jour[data-phase="reperages"]{background:rgb(32 137 168/.08);border:1px dashed var(--lp-accent-text);color:var(--lp-text)}
  .lp-ov-jour[data-phase="tournage"]{background:var(--lp-accent-fill);border-color:var(--lp-accent-fill);color:#FFFFFF}
  .lp-ov-jour[data-aujourdhui]{box-shadow:inset 0 0 0 2px var(--lp-text)}
  .lp-ov-jour[data-hors-periode]{visibility:hidden}

  .lp-ov-legende{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--lp-text-2)}
  .lp-ov-legende span{display:inline-flex;align-items:center;gap:6px}
  .lp-ov-legende i{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--lp-field);border:1px solid var(--lp-border)}
  .lp-ov-legende i[data-phase="prepa"]{background:var(--lp-raised);border-color:var(--lp-border-strong)}
  .lp-ov-legende i[data-phase="reperages"]{background:rgb(32 137 168/.08);border:1px dashed var(--lp-accent-text)}
  .lp-ov-legende i[data-phase="tournage"]{background:var(--lp-accent-fill);border-color:var(--lp-accent-fill)}
  .lp-ov-legende i[data-aujourdhui]{box-shadow:inset 0 0 0 2px var(--lp-text)}

  /* Liste des journées : une ligne par jour de prépa, de repérage ou de tournage */
  .lp-ov-liste{margin:0;padding:0;list-style:none;background:var(--lp-panel);border:1px solid var(--lp-border);border-radius:8px;overflow:hidden}
  .lp-ov-ligne{
    display:grid;align-items:center;gap:6px 16px;padding:12px 16px;
    grid-template-columns:120px 132px minmax(140px,1fr) minmax(150px,1.1fr) minmax(150px,1fr);
  }
  .lp-ov-ligne + .lp-ov-ligne{border-top:1px solid var(--lp-border)}
  .lp-ov-date{font-weight:500;font-variant-numeric:tabular-nums}
  .lp-ov-phase{justify-self:start;font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--lp-raised);color:var(--lp-text-2)}
  .lp-ov-ligne[data-phase="reperages"] .lp-ov-phase{background:transparent;border:1px dashed var(--lp-accent-text);color:var(--lp-accent-text)}
  .lp-ov-ligne[data-phase="tournage"] .lp-ov-phase{background:var(--lp-accent-tint);color:var(--lp-accent-text)}
  .lp-ov-lieu{font-size:13px}
  .lp-ov-seqs{display:flex;flex-wrap:wrap;gap:4px}
  .lp-ov-roles{font-size:13px;color:var(--lp-text-2)}
  .lp-ov-vide{color:var(--lp-muted);font-size:13px}

  /* Mini-bande : numéro de séquence sur sa couleur de code (vue d'ensemble, feuilles) */
  .lp-seq-pastille{
    --lp-strip-c:var(--lp-muted);
    display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 6px;
    border-radius:4px;background:var(--lp-strip-c);color:var(--lp-strip-texte-code);
    font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  }
  .lp-seq-pastille[data-strip="int-jour"]{--lp-strip-c:var(--lp-strip-int-jour)}
  .lp-seq-pastille[data-strip="ext-jour"]{--lp-strip-c:var(--lp-strip-ext-jour)}
  .lp-seq-pastille[data-strip="int-nuit"]{--lp-strip-c:var(--lp-strip-int-nuit)}
  .lp-seq-pastille[data-strip="ext-nuit"]{--lp-strip-c:var(--lp-strip-ext-nuit)}

  /* ---------- 4.5 Écrans plus étroits ---------- */
  @media (max-width:900px){
    .lp-strip,.lp-plan-travail[data-glisser="oui"] .lp-strip{grid-template-columns:84px 32px minmax(0,1fr) 52px;row-gap:2px;padding-block:0}
    .lp-strip-code{grid-column:1;grid-row:1 / span 2;margin-block:-1px}
    .lp-strip-num{grid-column:2;grid-row:1;padding-top:8px}
    .lp-strip-decor{grid-column:3;grid-row:1;padding-top:8px}
    .lp-strip-duree{grid-column:4;grid-row:1;padding-top:8px}
    .lp-strip-roles{grid-column:2 / -1;grid-row:2;padding-bottom:8px}
    .lp-strip-mention,.lp-strip-plans,.lp-plan-travail[data-glisser="oui"] .lp-strip-poignee{display:none}
    .lp-pt-colonnes{display:none}
    .lp-ov-ligne{grid-template-columns:1fr 1fr}
    .lp-ov-lieu,.lp-ov-seqs,.lp-ov-roles{grid-column:1 / -1}
  }

  @media (prefers-reduced-motion:reduce){
    .lp-strip{transition:none}
    .lp-strip[data-etat="saisie"]{transform:none}
  }
}