/* ============================================================
   PILOTAGE — Prévisionnel équipe, Reporting commercial, Prévisions fin de chantier
   Re-uses the charte tokens defined in decopierre.css.
   ============================================================ */

/* ---- shared bits ------------------------------------------------------ */
.pilotage-month-picker {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.pilotage-month-picker button {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: 18px; line-height: 1;
}
.pilotage-month-picker button:hover { background: var(--cuivre); color: var(--paper); }
.pilotage-month-picker .label-month {
  padding: 0 10px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  min-width: 130px; text-align: center;
}

/* ---- Section Prévisionnel équipe ------------------------------------- */
.previsionnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.previsionnel-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
}
.previsionnel-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.previsionnel-card-head h3 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 36, "SOFT" 30;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.previsionnel-card-head .meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.previsionnel-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13px;
}
.previsionnel-table th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  padding: 8px 6px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.previsionnel-table th:nth-child(2), .previsionnel-table th:nth-child(3),
.previsionnel-table td:nth-child(2), .previsionnel-table td:nth-child(3) {
  text-align: right;
}
.previsionnel-table tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.previsionnel-table tbody tr:last-child td { border-bottom: none; }
.previsionnel-table tr.empty td {
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  padding: 14px 6px;
}
.previsionnel-table tfoot td {
  padding: 10px 6px 4px;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
}

/* Totals bar at the bottom */
.previsionnel-totals {
  margin-top: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.totals-line {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 14px;
  color: var(--ink-soft);
}
.totals-line .tnum {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.totals-line strong { color: var(--ink); }
.totals-line.big .tnum { font-size: 22px; color: var(--cuivre-deep); }

.objective-bar {
  position: relative;
  background: var(--paper-dark);
  border-radius: 100px;
  height: 32px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.objective-fill {
  position: absolute; inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--mousse) 0%, var(--cuivre) 60%, var(--ocre) 100%);
  transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}
.objective-label {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  mix-blend-mode: difference;
  color: var(--paper);
}
.objective-label strong { font-weight: 700; }

/* ---- Section Reporting / Prévisions fin de chantier ----------------- */
.reporting-table-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  overflow-x: auto;
  margin-top: 8px;
}
.reporting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 760px;
}
.reporting-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-dark);
  white-space: nowrap;
}
.reporting-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  vertical-align: middle;
}
.reporting-table tbody tr:last-child td { border-bottom: none; }
.reporting-table tbody tr:hover { background: var(--bg-alt); }
.reporting-table .col-money, .reporting-table .col-num {
  text-align: right;
}
.reporting-table thead .col-money, .reporting-table thead .col-num {
  text-align: right;
}
.reporting-table tfoot td {
  padding: 14px;
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  background: var(--bg-alt);
}
.reporting-table tr.empty td {
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  padding: 22px;
}

.reporting-avatar {
  display: inline-flex;
  width: 28px; height: 28px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--paper);
  margin-right: 10px;
  vertical-align: middle;
}
.reporting-name { font-weight: 600; vertical-align: middle; }

.reporting-pct {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.reporting-pct.ok    { background: rgba(107, 126, 85, 0.18); color: var(--mousse-deep); }
.reporting-pct.warn  { background: rgba(176, 90, 44, 0.16);  color: var(--cuivre-deep); }
.reporting-pct.alert { background: rgba(139, 46, 31, 0.18);  color: var(--rouille); }

.pill-ready {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  background: rgba(107, 126, 85, 0.16);
  color: var(--mousse-deep);
  font-weight: 600;
}

.reporting-money-ok   { color: var(--mousse-deep); font-weight: 600; }
.reporting-money-warn { color: var(--cuivre-deep); font-weight: 600; }

/* Prévisions fin de chantier — specifics */
.previsions-table .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
}
.previsions-table tr.is-synthetic td { background: rgba(220, 220, 220, 0.10); font-style: italic; color: var(--ink-soft); }
.previsions-table tr.is-synthetic .mono { color: var(--ink-mute); }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-pill-ok    { background: rgba(107, 126, 85, 0.18); color: var(--mousse-deep); }
.status-pill-warn  { background: rgba(176, 90, 44, 0.18);  color: var(--cuivre-deep); }
.status-pill-mute  { background: rgba(140, 131, 120, 0.18); color: var(--ink-soft);   }

/* =========================================================================
   PLANNING PRÉVISIONNEL — bandeau "à positionner" + 12 colonnes mois
   ========================================================================= */
.prev-pool {
  margin-top: 6px;
  background: var(--paper);
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: background .15s, border-color .15s;
}
.prev-pool.is-empty { background: var(--bg-alt); }

.prev-pool-pending {
  margin-top: 10px;
  background: rgba(176, 90, 44, 0.06);
  border-color: var(--cuivre);
  border-style: solid;
}
.prev-pool-pending .eyebrow {
  color: var(--cuivre-deep);
}
.prev-card-pending {
  border: 1px solid var(--cuivre);
  background: var(--paper);
  box-shadow: 0 4px 14px -6px rgba(176, 90, 44, 0.4);
  position: relative;
  min-width: 200px;
  cursor: pointer;
}
.prev-card-pending::after {
  content: '⏳';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 12px;
  opacity: 0.6;
}
.prev-card-pending:hover {
  border-color: var(--cuivre-deep);
  transform: translateY(-1px);
}
.prev-pool-title {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 12px;
}
.prev-pool-count {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.prev-pool-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.prev-pool-empty {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  padding: 8px;
}

.prev-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: grab;
  user-select: none;
  transition: box-shadow .12s, transform .12s, border-color .12s;
  box-shadow: var(--shadow-soft);
}
.prev-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
  border-color: var(--cuivre);
}
.prev-card:active { cursor: grabbing; }
.prev-card-pool { min-width: 180px; }
.prev-card-col  { margin-bottom: 8px; }

.prev-card-client {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36, "SOFT" 30;
}
.prev-card-meta {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.prev-card-amount {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--cuivre-deep);
}

.prev-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(12, minmax(160px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
}
.prev-col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px 14px;
  display: flex; flex-direction: column;
  min-height: 220px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.prev-col.is-drag-over {
  background: rgba(176, 90, 44, 0.06);
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px rgba(176, 90, 44, 0.12);
}
.prev-col.is-full {
  background: rgba(107, 126, 85, 0.06);
  border-color: var(--mousse);
}
.prev-col-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.prev-col-month {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 36, "SOFT" 30;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.prev-col-year {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.prev-col-progress { margin-bottom: 10px; }
.prev-col-bar {
  height: 6px;
  border-radius: 100px;
  background: var(--paper-dark);
  overflow: hidden;
}
.prev-col-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cuivre), var(--ocre));
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.prev-col.is-full .prev-col-fill {
  background: linear-gradient(90deg, var(--mousse), var(--mousse-deep));
}
.prev-col-numbers {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-soft);
}
.prev-col-realised { font-weight: 700; color: var(--ink); }
.prev-col-target   { color: var(--ink-mute); margin-left: 2px; }

.prev-col-list { flex: 1; display: flex; flex-direction: column; }
.prev-col.is-empty .prev-col-list::before {
  content: '— Glissez un dossier ici —';
  display: block;
  text-align: center;
  color: var(--ink-mute);
  font-size: 11px;
  font-style: italic;
  padding: 20px 6px;
  border: 1px dashed transparent;
  border-radius: 8px;
}
.prev-col.is-drag-over.is-empty .prev-col-list::before {
  border-color: var(--cuivre);
  color: var(--cuivre);
}
.prev-col .prev-card        { padding: 8px 10px; position: relative; }
.prev-col .prev-card-client { font-size: 13px; }
.prev-col .prev-card-amount { font-size: 12px; }
.prev-col .prev-card-meta   { font-size: 10px; }

/* Card en attente de validation — grisée + badge ⏳ */
.prev-card.is-pending {
  opacity: 0.55;
  background: var(--bg-alt);
  border-style: dashed;
  border-color: var(--ink-mute);
}
.prev-card.is-pending:hover {
  opacity: 0.85;
  border-color: var(--cuivre);
}
.prev-card-pending-badge {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 11px;
  opacity: 0.7;
}

.prev-col-pending-count {
  margin-top: 4px;
  font-size: 10px;
  color: var(--cuivre-deep);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Légende globale en haut de la section */
.presta-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  padding: 10px 14px;
  background: var(--paper-dark);
  border-radius: 100px;
  margin: 6px 0 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.presta-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.presta-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Chips activités sous chaque card du planning prévisionnel */
.prev-card-activities {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.presta-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.presta-chip-decopierre { background: rgba(176, 90, 44, 0.12); }
.presta-chip-preparation { background: rgba(110, 127, 140, 0.16); }
.presta-chip-nettoyage  { background: rgba(107, 126, 85, 0.14); }
.presta-chip-hydrofuge  { background: rgba(201, 151, 87, 0.16); }
.presta-chip-label { flex: 1; }
.presta-chip-hours {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-soft);
}

/* Bloc presta dans la modale de validation */
.dpr-presta {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  transition: opacity .15s;
}
.dpr-presta.is-off { opacity: 0.55; }
.dpr-presta .dpr-form-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dpr-presta-decopierre { border-left: 4px solid #B05A2C; }
.dpr-presta-preparation { border-left: 4px solid #6E7F8C; }
.dpr-presta-nettoyage  { border-left: 4px solid #6B7E55; }
.dpr-presta-hydrofuge  { border-left: 4px solid #C99757; }
.presta-tag {
  margin-left: auto;
  background: var(--cuivre);
  color: var(--paper);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
}

.prev-readonly-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  font-style: italic;
}

@media (max-width: 1200px) {
  .prev-grid { grid-template-columns: repeat(12, minmax(140px, 1fr)); }
}
@media (max-width: 900px) {
  .prev-grid { grid-template-columns: repeat(12, 220px); }
}

/* =========================================================================
   FORM MODAL — Consignes travaux & Feuille annexe
   ========================================================================= */
.form-overlay {
  background: rgba(31, 26, 20, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: flex-start;
  padding: 32px 16px;
  overflow-y: auto;
}
.form-shell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 60px 120px -40px rgba(31,26,20,0.55);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 64px);
}
.form-shell-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px;
  padding: 26px 30px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.form-shell-header h2 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.form-shell-header h2 em { font-style: italic; color: var(--cuivre); }
.form-intro {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 460px;
}

.form-shell-body {
  padding: 22px 30px;
  overflow-y: auto;
  flex: 1;
}

.dpr-form-group {
  background: var(--paper-dark);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px 18px;
  margin-bottom: 16px;
}
.dpr-form-group-title {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cuivre-deep);
  margin-bottom: 12px;
}

.dpr-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.dpr-form-group input[type="text"],
.dpr-form-group input[type="number"],
.dpr-form-group input[type="date"],
.dpr-form-group textarea,
.dpr-form-group select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.dpr-form-group textarea {
  resize: vertical;
  font-family: 'Outfit', sans-serif;
  line-height: 1.5;
}
.dpr-form-group input:focus,
.dpr-form-group textarea:focus,
.dpr-form-group select:focus {
  outline: none;
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px rgba(176,90,44,0.15);
}
.dpr-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dpr-form-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--paper);
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 2px solid var(--cuivre);
}
.dpr-checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 500;
}
.dpr-checkbox-line input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--cuivre);
  flex-shrink: 0;
  margin-top: 2px;
}

.form-shell-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 18px 30px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
  border-radius: 0 0 18px 18px;
}

/* =========================================================================
   TABLEAU DES SAISONS — prévisionnel, juste avant la grille 12 mois.

   Certains chantiers sont vendus « pour un printemps », sans date arrêtée.
   Ils se posent ici, et le responsable planning les fait glisser vers un mois.
   Une couleur par saison, pour distinguer le tableau de la grille mensuelle.
   ========================================================================= */
.saison-board {
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
}
.saison-board__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.saison-board__hint { font-size: 12px; color: var(--ink-soft); }

.saison-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.saison-col {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 150px;
  background: var(--paper);
  border-top: 3px solid var(--saison-teinte, var(--line));
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.saison-col[data-saison="1"] { --saison-teinte: #7E9B63; }  /* printemps */
.saison-col[data-saison="2"] { --saison-teinte: #C8963E; }  /* été */
.saison-col[data-saison="3"] { --saison-teinte: #B05A2C; }  /* automne */
.saison-col[data-saison="4"] { --saison-teinte: #5E7C8B; }  /* hiver */
.saison-col.is-empty { background: var(--bg-alt); }
.saison-col.is-drag-over {
  background: rgba(176, 90, 44, 0.06);
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px rgba(176, 90, 44, 0.12);
}
.saison-col__head { display: flex; flex-direction: column; gap: 2px; }
.saison-col__label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--saison-teinte, var(--ink));
}
.saison-col__mois { font-size: 11px; color: var(--ink-mute); letter-spacing: .04em; }
.saison-col__total { font-size: 14px; font-weight: 600; color: var(--ink); }
.saison-col__pending {
  display: block; font-size: 11px; font-weight: 500; color: var(--ink-soft);
}
.saison-col__cards { display: flex; flex-direction: column; gap: 8px; }
.saison-col__empty { font-size: 12px; color: var(--ink-mute); }

/* -------------------------------------------------------------------------
   Colonne « À planifier » : filtre par mois prévisionnel.
   ------------------------------------------------------------------------- */
.planning-sidebar-filtre {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px 10px;
}
.planning-sidebar-filtre select {
  flex: 1 1 auto; min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit; font-size: 12.5px;
}
.planning-sidebar-filtre__reset {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink-soft);
  cursor: pointer; line-height: 1;
}
.planning-sidebar-filtre__reset:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.planning-sidebar-attente {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(176, 90, 44, 0.07);
  border: 1px solid rgba(176, 90, 44, 0.25);
  font-size: 11.5px; line-height: 1.45;
  color: var(--cuivre-deep);
}
.planning-sidebar-hors-filtre {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  font-size: 11.5px; line-height: 1.45;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   « Vendu pour » : mois précis ou saison, dans les formulaires dossier.
   ------------------------------------------------------------------------- */
.vendu-pour { display: flex; gap: 8px; flex-wrap: wrap; }
/* Spécificité volontaire : .form-field label impose des capitales, illisibles
   sur une pastille de choix. */
.form-field .vendu-pour__choix,
.vendu-pour__choix {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px; letter-spacing: 0; text-transform: none;
  color: var(--ink); cursor: pointer;
}
.form-field .vendu-pour__choix:has(input:checked),
.vendu-pour__choix:has(input:checked) {
  border-color: var(--cuivre);
  background: rgba(176, 90, 44, 0.07);
  color: var(--cuivre-deep);
  font-weight: 600;
}
.vendu-pour__choix input { accent-color: var(--cuivre); margin: 0; }
.vendu-pour__aide { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }

/* -------------------------------------------------------------------------
   Planning prévisionnel : hauteur bornée.

   Avec une trentaine de chantiers dans un mois, la colonne mesurait plusieurs
   écrans et poussait tout le reste de la page vers le bas. La grille garde une
   hauteur fixe, chaque colonne défile pour elle-même, et son en-tête — mois,
   réalisé, objectif — reste visible pendant qu'on descend.
   ------------------------------------------------------------------------- */
.prev-grid {
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* L'en-tête de chaque mois se fige en haut de la zone qui défile. */
.prev-col-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  padding-top: 2px;
}
/* Même traitement pour la zone « sans mois » et le tableau des saisons, qui
   gonflent eux aussi dès qu'on y accumule des dossiers. */
.prev-pool-cards { max-height: 170px; overflow-y: auto; overscroll-behavior: contain; }
.saison-col__cards { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 720px) {
  .prev-grid { max-height: 70vh; }
  .prev-pool-cards { max-height: 220px; }
  .saison-col__cards { max-height: 260px; }
}

/* =========================================================================
   TÂCHE TERMINÉE — l'équipe coche « Terminer » sur le chantier ; le planning
   doit le dire d'un coup d'œil, dans les trois vues. Vert mousse, hachures
   et coche : lisible même sur la couleur d'équipe de la vue mois.
   ========================================================================= */
.gantt-bar-hour[data-statut="fait"]{
  border-left-color:#5E7A4E;
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(94,122,78,.16) 6px 9px);
}
.gantt-bar-hour[data-statut="fait"] .bar-client::before{content:"✓ ";color:#5E7A4E;font-weight:700}
.gantt-bar-hour[data-statut="en_cours"]{box-shadow:inset 0 0 0 1px var(--cuivre)}
/* L'enchaînement déborde de la journée de l'équipe : on le signale au bord droit. */
.gantt-bar-hour[data-deborde="oui"]{border-right:3px solid #B3402E}

.gantt-cell-mois[data-fait="oui"]{
  background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.42) 5px 8px);
}
.gantt-cell-mois[data-fait="oui"]::after{
  content:"✓";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12px;line-height:1;
  text-shadow:0 1px 2px rgba(31,26,20,.45);
  pointer-events:none;
}

/* =========================================================================
   HAUTEURS BORNÉES — le planning et le tableau des prévisions dépassaient
   plusieurs écrans dès qu'il y avait beaucoup de chantiers. On fixe une
   hauteur et on fait défiler à l'intérieur ; l'en-tête reste visible.
   ========================================================================= */
.planning-board-v2,
.planning-board-jour,
.planning-board-mois {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.planning-board-v2 .planning-head,
.planning-board-jour .planning-head,
.planning-board-mois .planning-head {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

/* Tableau long (prévisions fin de chantier) : même principe, en-tête figé. */
.reporting-table-wrap.est-defilante {
  max-height: 55vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.reporting-table-wrap.est-defilante thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-alt);
  box-shadow: 0 1px 0 var(--line);
}

@media (max-width: 720px) {
  .planning-board-v2,
  .planning-board-jour,
  .planning-board-mois { max-height: 70vh; }
  .reporting-table-wrap.est-defilante { max-height: 65vh; }
}

/* -------------------------------------------------------------------------
   Modales « carte » : envoi de la feuille annexe, détail d'une photo,
   création d'équipe, modification des infos d'un dossier.

   Ces quatre modales réutilisent la structure .modal-head / .modal-body /
   .modal-footer du panneau latéral, mais centrées dans .form-overlay. Le
   conteneur .modal-card n'avait aucune règle : la carte n'avait donc ni fond
   ni largeur, et le formulaire s'affichait à même le voile sombre — libellés
   illisibles et bouton de fermeture invisible.
   ------------------------------------------------------------------------- */
.modal-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 60px 120px -40px rgba(31, 26, 20, 0.55);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 64px);
  overflow: hidden;
}
.form-card { max-width: 720px; }
.modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px;
  padding: 26px 30px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h2 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
}
.modal-head h2 em { font-style: italic; color: var(--cuivre); }
.modal-head .modal-close { flex: 0 0 auto; }
.modal-sub {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 460px;
}
.modal-card .modal-body { padding: 22px 30px; gap: 18px; }
.modal-card .modal-footer { border-radius: 0 0 18px 18px; }

.piece-row.needs-form .piece-check {
  border-color: var(--cuivre);
  color: var(--cuivre);
}

@media (max-width: 720px) {
  .form-shell { border-radius: 14px; }
  .form-shell-header { flex-direction: column; padding: 20px 18px 14px; }
  .form-shell-body { padding: 18px; }
  .form-shell-footer { padding: 14px 18px; }
  .dpr-form-row-2 { grid-template-columns: 1fr; }
}

/* =========================================================================
   RING COMMERCIAL — second anneau plus petit sur les cards dossier
   ========================================================================= */
.rings-stack {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ring.ring-commercial {
  width: 40px;
  height: 40px;
}
.ring.ring-commercial::before {
  inset: 4px;
}
.ring-commercial-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: 'Outfit', sans-serif !important;
  font-size: 7px !important;
  font-variation-settings: normal !important;
}
.ring-commercial-content .ring-mini-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cuivre-deep);
  text-transform: uppercase;
}
.ring-commercial-content .ring-mini-pct {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}

/* =========================================================================
   PLANNING ÉQUIPES V2 — sidebar à planifier + grille équipes × jours
   ========================================================================= */
.planning-v2 {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  margin-top: 8px;
  min-width: 0;
}
.planning-v2 > .planning-board {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1100px) {
  .planning-v2 { grid-template-columns: 1fr; }
  .planning-sidebar { position: static; max-height: 260px; }
}

/* Force inner grids to be scrollable */
.planning-board-v2,
.planning-board-jour,
.planning-board-mois {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.planning-board-v2 .planning-head,
.planning-board-jour .planning-head,
.planning-board-mois .planning-head {
  min-width: max-content;
}
.planning-board-v2 .gantt-row-v2,
.planning-board-jour .gantt-row-jour,
.planning-board-mois .gantt-row-mois {
  min-width: max-content;
}

.planning-sidebar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 14px;
  align-self: flex-start;
  position: sticky;
  top: 80px;
  max-height: 70vh;
  overflow-y: auto;
}
.planning-sidebar-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.planning-sidebar-count {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.planning-sidebar-list { display: flex; flex-direction: column; gap: 6px; }
.planning-act {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-mute);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  user-select: none;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.planning-act:hover { transform: translateX(2px); box-shadow: var(--shadow-soft); }
.planning-act:active { cursor: grabbing; }
.planning-act.act-decopierre { border-left-color: #B05A2C; }
.planning-act.act-preparation { border-left-color: #6E7F8C; }
.planning-act.act-nettoyage  { border-left-color: #6B7E55; }
.planning-act.act-hydrofuge  { border-left-color: #C99757; }
.planning-act.act-sav        { border-left-color: #8B2E1F; background: rgba(139,46,31,0.05); }

/* CTA "Positionner" dans la sidebar (flèche cuivre) */
.planning-act-cta {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cuivre);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
  margin-left: auto;
}
.planning-act-cta:hover { background: var(--cuivre-deep); transform: translateX(2px); }
.planning-act.act-sav .planning-act-cta { background: #8B2E1F; }
.planning-act.act-sav .planning-act-cta:hover { background: #6a2417; }

/* CTA "Positionner" dans la section SAV (04) */
.sav-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.btn-sav-position {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 100px !important;
  background: #8B2E1F !important;
  border-color: #8B2E1F !important;
  color: var(--paper) !important;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn-sav-position:hover { background: #6a2417 !important; transform: translateY(-1px); }
.sav-status-ok {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mousse-deep);
  text-transform: uppercase;
  background: rgba(107, 126, 85, 0.18);
  padding: 5px 12px;
  border-radius: 100px;
}

/* Section SAV pleine largeur (sans mobile-wrap) */
.sav-panel-full {
  width: 100%;
  margin-top: 8px;
}

/* Logo image (header + footer) */
.logo-mark-img {
  width: auto !important;
  height: 44px !important;
  display: flex; align-items: center;
}
.logo-mark-img img {
  height: 100%;
  width: auto;
  display: block;
}

/* === Header compact mobile === */
@media (max-width: 720px) {
  .header-inner {
    padding: 8px 14px !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
  }
  .logo-mark-img { height: 32px !important; }
  .logo-text { display: none !important; }                       /* masque "L'atelier de suivi" */
  .role-switcher { display: none !important; }                    /* role non modifiable sur tactile */
  .agence-pill { display: none !important; }                      /* nom agence masqué */
  .header-right { gap: 6px !important; }
  .header-right > .reset-btn { display: none !important; }        /* masque le ? et reset démo */
  /* User pill : on garde avatar + logout, on masque le nom */
  .header-right > div[style*="border:1px solid"] {
    padding: 2px !important;
    border: none !important;
    background: transparent !important;
    gap: 4px !important;
  }
  .header-right > div[style*="border:1px solid"] > span { display: none !important; }
  .header-right .user-avatar { width: 32px !important; height: 32px !important; font-size: 11px !important; }
}
/* =========================================================================
   MODALE ANNOTATION PHOTO — canvas + toolbar
   ========================================================================= */
.annot-overlay {
  background: rgba(31, 26, 20, 0.92);
  align-items: stretch;
  padding: 0;
  flex-direction: column;
}
.annot-shell {
  width: 100%;
  height: 100vh;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  border-radius: 0;
  max-width: none;
}
.annot-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.annot-header h2 {
  font-family: 'Fraunces', serif;
  color: var(--paper);
  font-size: 22px;
  font-weight: 500;
}
.annot-header h2 em { color: #C99757; font-style: italic; }
.annot-header .tuto-close { background: rgba(255,255,255,0.1); color: var(--paper); }

.annot-toolbar {
  display: flex; justify-content: center; align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.annot-tools, .annot-colors, .annot-actions {
  display: inline-flex;
  gap: 6px;
}
.annot-tool {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--paper);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.annot-tool:hover { background: rgba(255,255,255,0.15); }
.annot-tool.active { background: var(--cuivre); color: var(--paper); }

.annot-color {
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .15s;
}
.annot-color:hover { transform: scale(1.1); }
.annot-color.active { border-color: var(--paper); transform: scale(1.15); }

.annot-undo, .annot-clear {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--paper);
  font-size: 18px;
  cursor: pointer;
  transition: background .15s;
}
.annot-undo:hover { background: rgba(176, 90, 44, 0.5); }
.annot-clear:hover { background: rgba(139, 46, 31, 0.5); }

.annot-canvas-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, #1a1610 0 20px, #15110b 20px 40px);
  overflow: auto;
  padding: 20px;
}
.annot-canvas {
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: crosshair;
  touch-action: none;
}

.annot-shell .form-shell-footer {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  padding: 12px 24px;
}

/* Bouton caméra sur les pièces gallery */
.piece-camera-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--cuivre-deep);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 14px;
  transition: background .15s, transform .15s;
}
.piece-camera-btn:hover { background: var(--cuivre); color: var(--paper); transform: scale(1.05); }

/* Pièce de type texte (choix de la pierre) : saisie directe dans la ligne.
   Variante mobile en fin de fichier. */
.piece-text-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.piece-text-input {
  min-width: 0;
  width: 240px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
}
.piece-text-input:focus {
  outline: none;
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cuivre) 18%, transparent);
}
.piece-text-input:disabled { opacity: .55; cursor: not-allowed; }

.footer-logo {
  width: auto !important;
  max-width: 220px;
  height: auto !important;
  max-height: 56px;
  display: block;
  object-fit: contain;
  margin-bottom: 4px;
  align-self: flex-start;
}
.planning-act-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.planning-act-info {
  display: flex; flex-direction: column;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}
.planning-act-client {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.planning-act-meta {
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.planning-sidebar-empty {
  text-align: center;
  padding: 14px;
  font-size: 12px;
  color: var(--mousse-deep);
  font-style: italic;
}

/* Grille v2 — strictement 14 colonnes égales. box-sizing border-box pour que
   le border-left ne casse pas la largeur des cellules (sinon décalage progressif
   d'un pixel par cellule visible sur les fond weekend). */
.planning-board-v2 .planning-head-dates-14,
.gantt-row-v2 .gantt-track-v2 {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  min-width: 840px; /* 14 × 60px — garantit scroll horizontal sur mobile */
}
.planning-board-v2 .planning-head-dates-14 > *,
.gantt-row-v2 .gantt-track-v2 > * {
  box-sizing: border-box;
  min-width: 0;
}
.gantt-row-v2 .gantt-track-v2 {
  height: 64px;
  position: relative;
}
.gantt-cell-v2 {
  position: relative;
  border-right: 1px solid var(--line-soft);
  transition: background .12s;
}
.gantt-cell-v2.we { background: var(--bg-alt); }
.gantt-cell-v2.is-drag-over { background: rgba(176, 90, 44, 0.12); }

.gantt-bar-v2 {
  position: absolute;
  top: 4px; bottom: 4px; left: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .12s, transform .12s;
}
.gantt-bar-v2:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.gantt-bar-v2 .bar-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.gantt-bar-v2 .bar-client { font-weight: 600; color: var(--ink); }
.gantt-bar-v2 .bar-meta   { font-size: 10px; color: var(--ink-soft); }
.gantt-bar-v2.bar-decopierre { border-left: 3px solid #B05A2C; }
.gantt-bar-v2.bar-nettoyage  { border-left: 3px solid #6B7E55; }
.gantt-bar-v2.bar-hydrofuge  { border-left: 3px solid #C99757; }

/* === Empêche tout scroll horizontal global (sans casser le max-width: 1480px du main) === */
body { overflow-x: hidden; } /* sur body seulement : posé aussi sur html, il faisait de body un conteneur de défilement et cassait le header sticky et le verrou de scroll des modales */

/* Conteneurs des sections planning : ne débordent pas du viewport */
#planning, #planning-previsionnel, #previsionnel { overflow-x: clip; }
#planning .section-head { flex-wrap: wrap; gap: 12px; }

/* Petits écrans : on resserre */
@media (max-width: 720px) {
  .planning-controls { width: 100%; justify-content: space-between; }
  .planning-viewswitch button { padding: 5px 10px; font-size: 11px; }
  .equipe-cell { min-width: 110px !important; padding: 8px 10px !important; }
  .equipe-cell .info .name { font-size: 12px; }
  .day-head .day-num { font-size: 13px; }
  .day-head .day-name { font-size: 9px; }
  .gantt-mini-bar { font-size: 9px; padding: 3px 5px; }
  .gantt-mini-bar .mini-bar-client { font-size: 9px; }
  .hour-head { font-size: 9px; padding: 8px 0; }
  .gantt-bar-hour { font-size: 9px; padding: 3px 6px; }
  .gantt-bar-hour .bar-meta { display: none; }
  /* SAV panel mobile */
  .sav-panel { padding: 12px; }
  .sav-item { flex-wrap: wrap; gap: 8px; }
  .sav-thumb { width: 56px; height: 56px; }
  /* Planning prévisionnel : colonnes plus étroites sur mobile */
  .prev-grid { grid-template-columns: repeat(12, 140px) !important; }
}

/* --- Vue Semaine empilée : mini-bars verticales dans la cellule --- */
.planning-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.planning-viewswitch {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.planning-viewswitch button {
  padding: 5px 14px;
  border-radius: 100px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.planning-viewswitch button:hover { color: var(--ink); }
.planning-viewswitch button.active {
  background: var(--ink);
  color: var(--paper);
}

.gantt-cell-stack {
  position: relative;
  overflow: hidden;     /* le contenu ne doit JAMAIS pousser la cellule */
  height: 100%;
  min-height: 60px;
  min-width: 0;
  box-sizing: border-box;
  background-clip: padding-box;
}
/* Force le background weekend sur les cellules stack — la classe .we doit gagner */
.gantt-cell-v2.gantt-cell-stack.we,
.gantt-cell-stack.we {
  background-color: var(--bg-alt);
}
.gantt-cell-v2.gantt-cell-stack.is-drag-over {
  background-color: rgba(176, 90, 44, 0.12);
}
.gantt-cell-stack .gantt-mini-bar {
  /* En POSITION ABSOLUTE pour ne pas pousser la cellule en grid.
     top est défini en inline-style depuis Vue (4 + idx * 26). */
  position: absolute;
  left: 3px; right: 3px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .12s, box-shadow .12s;
  overflow: hidden;
  box-sizing: border-box;
}
.gantt-mini-bar > * { min-width: 0; overflow: hidden; }
.gantt-mini-bar .mini-bar-client {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.gantt-cell-stack .gantt-mini-bar:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.gantt-mini-bar.bar-decopierre { border-left: 3px solid #B05A2C; background: rgba(176,90,44,0.06); }
.gantt-mini-bar.bar-preparation { border-left: 3px solid #6E7F8C; background: rgba(110,127,140,0.08); }
.gantt-mini-bar.bar-nettoyage  { border-left: 3px solid #6B7E55; background: rgba(107,126,85,0.06); }
.gantt-mini-bar.bar-hydrofuge  { border-left: 3px solid #C99757; background: rgba(201,151,87,0.08); }
.gantt-mini-bar.bar-sav        { border-left: 3px solid #8B2E1F; background: rgba(139,46,31,0.10); }
.gantt-mini-bar .mini-bar-client { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-mini-bar .mini-bar-hours  { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-soft); flex-shrink: 0; }

/* --- Vue Jour : créneaux horaires --- */
.planning-board-jour { width: 100%; }
.planning-head-hours {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  background: var(--paper-dark);
}
.hour-head {
  text-align: center;
  padding: 12px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.hour-head .hour-num {
  font-weight: 600;
  color: var(--ink);
}

.gantt-row-jour { display: flex; min-height: 66px; }
.gantt-track-jour {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  flex: 1;
  border-bottom: 1px solid var(--line-soft);
}
.gantt-cell-hour {
  border-right: 1px dashed var(--line-soft);
  transition: background .12s;
}
.gantt-cell-hour.is-drag-over { background: rgba(176, 90, 44, .12); box-shadow: inset 0 0 0 2px var(--cuivre); }

.gantt-bar-hour {
  /* top et height sont posés en ligne : un couloir par chantier du jour. */
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.gantt-bar-hour:hover { box-shadow: var(--shadow-card); }
.gantt-bar-hour.bar-decopierre { border-left: 3px solid #B05A2C; }
.gantt-bar-hour.bar-preparation { border-left: 3px solid #6E7F8C; }
.gantt-bar-hour.bar-nettoyage  { border-left: 3px solid #6B7E55; }
.gantt-bar-hour.bar-hydrofuge  { border-left: 3px solid #C99757; }
.gantt-bar-hour.bar-sav        { border-left: 3px solid #8B2E1F; background: rgba(139,46,31,0.06); }
.gantt-bar-hour .bar-dot     { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.gantt-bar-hour .bar-client  { font-weight: 600; color: var(--ink); }
.gantt-bar-hour .bar-meta    { font-size: 10px; color: var(--ink-soft); }

/* --- Vue Mois : compacte, 28-31 colonnes --- */
.planning-board-mois { width: 100%; overflow-x: auto; }
.planning-head-dates-mois { display: grid; }
.day-head-mois {
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid var(--line-soft);
  font-size: 10px;
  background: var(--paper-dark);
}
.day-head-mois.we { background: var(--bg-alt); }
.day-head-mois.today .day-num { color: var(--cuivre); font-weight: 800; }

.gantt-row-mois { display: flex; min-height: 44px; border-bottom: 1px solid var(--line-soft); }
.gantt-track-mois {
  display: grid;
  flex: 1;
}
.gantt-cell-mois {
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  cursor: pointer;
  transition: background .12s;
}
.gantt-cell-mois.we { background: var(--bg-alt); }
.gantt-cell-mois.today { background: rgba(176, 90, 44, 0.06); }
.gantt-cell-mois:hover { background: rgba(176, 90, 44, 0.08); }

/* Case occupée : la case entière porte la couleur de SON ÉQUIPE, posée en
   style en ligne depuis la base. Une ligne du planning = une couleur. */
.gantt-cell-mois.occupee { position: relative; }
/* Survol : éclaircissement discret, et un liseré pour dire « c'est cliquable ». */
.gantt-cell-mois.occupee:hover {
  filter: brightness(1.14);
  box-shadow: inset 0 0 0 2px rgba(251, 248, 242, .55);
}
/* Plusieurs interventions le même jour : on compte. */
.gantt-cell-mois__n {
  font-size: 10px; font-weight: 700; color: var(--paper);
  background: rgba(31, 26, 20, .35); border-radius: 999px;
  padding: 0 5px; line-height: 15px; min-width: 15px; text-align: center;
}

/* Aperçu ouvert au survol d'une case du mois. */
.apercu-mois {
  position: absolute;
  z-index: 60;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(31, 26, 20, .17);
  padding: 13px 15px;
  pointer-events: none;
  animation: apercuMoisEntree .12s ease-out;
}
@keyframes apercuMoisEntree { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.apercu-mois__date {
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-transform: capitalize; line-height: 1.3;
}
.apercu-mois__equipe {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600; margin-bottom: 9px;
}
.apercu-mois__vide { font-size: 12.5px; color: var(--ink-mute); font-style: italic; }
.apercu-mois__item { display: flex; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.apercu-mois__pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 4px; }
.apercu-mois__texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.apercu-mois__texte strong { font-size: 13.5px; color: var(--ink); }
.apercu-mois__texte span { font-size: 12px; color: var(--ink-soft); }
.apercu-mois__ville { color: var(--ink-mute) !important; }
.apercu-mois__statut {
  align-self: flex-start; margin-top: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 1px 8px;
  background: var(--bg-alt); color: var(--ink-mute) !important;
}
.apercu-mois__statut[data-statut="fait"]     { background: rgba(107,126,85,.16);  color: var(--mousse-deep) !important; }
.apercu-mois__statut[data-statut="en_cours"] { background: rgba(176,90,44,.14);   color: var(--cuivre-deep) !important; }

/* =========================================================================
   OBJECTIFS MENSUELS — grille 4×3 de mini-inputs
   ========================================================================= */
.objectifs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .objectifs-grid { grid-template-columns: repeat(2, 1fr); }
}
.objectif-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.objectif-month {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  width: 38px;
  flex-shrink: 0;
}
.objectif-cell input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  text-align: right;
  outline: none;
  min-width: 0;
}
.objectif-cell:focus-within {
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px rgba(176,90,44,0.15);
}
.objectif-unit { color: var(--ink-mute); font-size: 13px; }

.objectifs-total {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-soft);
}
.objectifs-total strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--cuivre-deep);
}

/* =========================================================================
   SIGNATURE MODAL
   ========================================================================= */
.sign-overlay {
  background: rgba(31, 26, 20, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  padding: 24px 16px;
}
.sign-shell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 60px 120px -40px rgba(31,26,20,0.55);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 48px);
}
.sign-shell-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.sign-shell-header h2 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.sign-shell-header h2 em { font-style: italic; color: var(--cuivre); }

.sign-shell-body {
  padding: 20px 28px;
}
.sign-name-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.sign-name-label input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  box-sizing: border-box;
}
.sign-name-label input:focus {
  outline: none;
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px rgba(176,90,44,0.15);
}

.sign-canvas-wrap {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(215,204,184,0.6) 28px 29px),
    #FFFFFF;
  border: 2px dashed var(--cuivre);
  border-radius: 10px;
  height: 220px;
  overflow: hidden;
}
.sign-canvas {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.sign-clear {
  position: absolute;
  top: 10px; right: 10px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .15s, color .15s;
  border: 1px solid var(--line);
}
.sign-clear:hover {
  background: var(--cuivre);
  color: var(--paper);
  border-color: var(--cuivre);
}
.sign-hint {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  pointer-events: none;
}

/* =========================================================================
   TUTO — "Comment ça marche"
   ========================================================================= */
.tuto-overlay {
  background: rgba(31, 26, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: flex-start;
  padding: 40px 20px;
  overflow-y: auto;
}
.tuto-shell {
  background: var(--paper);
  background-image:
    radial-gradient(at 10% 0%,  rgba(201,151,87,0.10) 0%, transparent 50%),
    radial-gradient(at 90% 10%, rgba(176,90,44,0.07)  0%, transparent 50%);
  border: 1px solid var(--line);
  border-radius: 22px;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 60px 120px -40px rgba(31,26,20,0.55);
  padding: 36px 40px 24px;
  position: relative;
}
.tuto-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 30px;
}
.tuto-header h2 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 500;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
  margin-top: 6px;
  letter-spacing: -0.025em;
}
.tuto-header h2 em {
  font-style: italic;
  color: var(--cuivre);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.tuto-intro {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 540px;
}
.tuto-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tuto-close:hover { background: var(--ink); color: var(--paper); }
.tuto-close svg { width: 14px; height: 14px; }

.tuto-rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}
.tuto-rail::before {
  content: '';
  position: absolute;
  left: 30px; top: 16px; bottom: 16px;
  width: 1px;
  background: linear-gradient(to bottom, var(--cuivre) 0%, var(--ocre) 50%, var(--mousse) 100%);
  opacity: 0.5;
}

.tuto-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: flex-start;
  position: relative;
}
.tuto-step-num {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  padding-top: 8px;
}
.tuto-step-num .num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.02em;
  z-index: 1;
  background: var(--paper);
  padding: 0 6px;
}
.tuto-step-num .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cuivre);
  margin-top: 4px;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--paper);
}
.tuto-step.accent-cuivre      .dot { background: var(--cuivre); }
.tuto-step.accent-cuivre-deep .dot { background: var(--cuivre-deep); }
.tuto-step.accent-mousse      .dot { background: var(--mousse); }
.tuto-step.accent-ocre        .dot { background: var(--ocre); }
.tuto-step.accent-ink         .dot { background: var(--ink); }
.tuto-step.accent-rouille     .dot { background: var(--rouille); }

.tuto-step-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px 16px;
  box-shadow: var(--shadow-soft);
}
.tuto-step-head .eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cuivre-deep);
}
.tuto-step-head h3 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 36, "SOFT" 30;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin-top: 4px;
  letter-spacing: -0.015em;
}
.tuto-step-bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.tuto-step-bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.tuto-step-bullets li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
}
.tuto-step-outcome {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--mousse-deep);
  font-weight: 500;
}
.tuto-step-outcome svg { width: 14px; height: 14px; flex-shrink: 0; }

.tuto-footer {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
}
.tuto-killer {
  flex: 1;
  background: var(--bg-alt);
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 3px solid var(--cuivre);
}
.tuto-killer .eyebrow {
  display: block;
  margin-bottom: 6px;
}
.tuto-killer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.tuto-killer strong { color: var(--cuivre-deep); }

@media (max-width: 720px) {
  .tuto-shell { padding: 24px 18px 18px; border-radius: 16px; }
  .tuto-header { flex-direction: column; gap: 12px; }
  .tuto-header h2 { font-size: 32px; }
  .tuto-step { grid-template-columns: 48px 1fr; gap: 12px; }
  .tuto-step-num .num { font-size: 22px; }
  .tuto-rail::before { left: 23px; }
  .tuto-footer { flex-direction: column; align-items: stretch; }
}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* PLANNING — BARRES MULTI-JOURS, STATUT DE RÉALISATION, DÉCALAGE (P1/P3) */
.gantt-cell-stack .gantt-mini-bar[data-start="false"]{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;left:-1px}
.gantt-cell-stack .gantt-mini-bar[data-end="false"]{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;right:-1px}
.gantt-cell-stack .gantt-mini-bar[data-statut="en_cours"]{box-shadow:inset 0 0 0 1px var(--cuivre)}
.gantt-cell-stack .gantt-mini-bar[data-statut="fait"]{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(31,26,20,0.07) 6px 8px);opacity:.8}
.gantt-cell-stack .gantt-mini-bar[data-statut="fait"] .mini-bar-client::before{content:"✓ ";color:var(--mousse,#5E7A4E);font-weight:700}
.gantt-cell-stack .gantt-mini-bar[data-late="true"]{box-shadow:inset 0 0 0 1px #B3402E}
.gantt-cell-stack .gantt-mini-bar[data-late="true"] .mini-bar-client::before{content:"⚠ ";color:#B3402E}
.gantt-cell-stack .gantt-mini-bar[data-we="true"]{background:transparent;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);box-shadow:none;opacity:.55;pointer-events:none}
.gantt-cell-stack .gantt-mini-bar[draggable="true"]{cursor:grab}
.gantt-cell-stack .gantt-mini-bar[draggable="true"]:active{cursor:grabbing}
.gantt-cell-stack .gantt-mini-bar .mini-bar-client{flex:1 1 auto;white-space:nowrap;text-overflow:ellipsis}
.gantt-cell-stack .gantt-mini-bar .mini-bar-hours{flex:0 0 auto}
.mini-bar-shift{flex:0 0 auto;border:0;background:transparent;color:var(--ink-mute);font-size:12px;line-height:1;padding:0 2px;cursor:pointer;border-radius:3px}
.mini-bar-shift:hover{background:rgba(176,90,44,.15);color:var(--cuivre)}
.planning-recent{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;background:rgba(94,122,78,.14);color:#3F5A33;font-size:12px;font-weight:600;cursor:help}
.btn-mini{padding:4px 9px;font-size:11.5px;line-height:1.2;border-radius:6px}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* MES TÂCHES (équipes) */
.taches-list{display:grid;gap:14px;grid-template-columns:1fr}
.tache{display:grid;grid-template-columns:6px 1fr;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))}
.tache__band{grid-row:1 / span 2}
.tache__body{padding:14px 16px 6px}
.tache__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.tache__type{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.tache__statut{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bg-alt,#F2EBE0);color:var(--ink-mute)}
.tache__statut[data-statut="en_cours"]{background:rgba(176,90,44,.14);color:var(--cuivre)}
.tache__statut[data-statut="fait"]{background:rgba(94,122,78,.16);color:#3F5A33}
.tache__late{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(179,64,46,.12);color:#B3402E}
.tache__client{margin:0;font-family:"Fraunces",serif;font-size:20px;line-height:1.15}
.tache__where{margin:2px 0 0;color:var(--ink-mute);font-size:13px}
.tache__when{margin:4px 0 0;font-size:13px}
.tache__done{margin:6px 0 0;font-size:13px;color:#3F5A33}
.tache__actions{grid-column:2;display:flex;gap:8px;flex-wrap:wrap;padding:8px 16px 14px}
.tache__pdf{margin-right:auto}
.tache[data-statut="fait"]{opacity:.72}
@media (min-width:48em){
	.taches-list{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:75em){
	.taches-list{grid-template-columns:repeat(3,1fr)}
}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* DÉTAIL DOSSIER — PRESTATIONS ET HISTORIQUE */
.detail-prestas__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.detail-prestas{display:flex;flex-direction:column;gap:6px}
.detail-presta{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.detail-presta[data-statut="fait"]{background:rgba(94,122,78,.06)}
.detail-presta__dot{width:10px;height:10px;border-radius:50%}
.detail-presta__info{display:flex;flex-direction:column;gap:1px;min-width:0}
.detail-presta__type{font-weight:600;font-size:13px}
.detail-presta__when{font-size:12px;color:var(--ink-mute)}
.detail-presta__done{font-size:12px;color:#3F5A33}
.detail-presta__actions{display:flex;gap:6px}
.detail-mouvements{font-size:12.5px;color:var(--ink-mute)}
.detail-mouvements summary{cursor:pointer;font-weight:600;color:var(--ink)}
.detail-mouvements ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* MODALES DÉCALER / RÉALISATION */
.form-shell--narrow{max-width:520px}
.decalage-jours{display:flex;align-items:center;gap:8px;margin-top:6px}
.decalage-jours input{width:72px;text-align:center}
.decalage-jours span{font-size:13px;color:var(--ink-mute)}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* DÉMONSTRATION (visiteurs) : bandeau, contact ; PARTAGE */
.demo-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 28px;padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:13.5px;line-height:1.4}
.demo-banner__tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--cuivre);color:var(--paper)}
.demo-banner__text{flex:1 1 320px}
.demo-banner__cta{margin-left:auto;color:var(--paper);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.share-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:100px;border:1px solid var(--cuivre);background:transparent;color:var(--cuivre);font:inherit;font-size:12px;font-weight:600;letter-spacing:.05em;cursor:pointer;transition:background .15s,color .15s}
.share-btn:hover{background:var(--cuivre);color:var(--paper)}
.share-btn svg{width:14px;height:14px}
.contact-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))}
.contact-card--done{font-size:15px;line-height:1.6}
.contact-form{display:grid;grid-template-columns:1fr;gap:14px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute)}
.contact-form input,.contact-form textarea{font:inherit;font-size:15px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);background:var(--paper-2,#F3EEE4);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--cuivre);outline-offset:1px}
.contact-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form__actions{display:flex;justify-content:flex-end}
@media (min-width:48em){
	.contact-form{grid-template-columns:1fr 1fr}
	.contact-form__full,.contact-form__actions{grid-column:1 / -1}
}
@media (max-width:45em){
	.share-btn span{display:none}
	.share-btn{padding:8px 10px}
}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* MODALES ÉTROITES : champs sur toute la largeur */
.form-shell--narrow .dpr-form-group label{display:block}
.form-shell--narrow .dpr-form-group input:not([type=checkbox]),.form-shell--narrow .dpr-form-group textarea,.form-shell--narrow .dpr-form-group select{display:block;width:100%;margin-top:6px;box-sizing:border-box}
.form-shell--narrow .dpr-form-group .decalage-jours input{display:inline-block;width:72px;margin-top:0}
.form-shell--narrow .dpr-form-group label.dpr-checkbox-line{display:flex}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* NAVIGATION LATÉRALE (sections du rôle courant) : points fixés à gauche, libellés au survol, burger sur mobile */
.sidenav{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:45}
.sidenav__list{list-style:none;margin:0;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.sidenav__item{margin:0}
.sidenav__link{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:999px;color:var(--ink-mute);text-decoration:none;transition:transform 160ms cubic-bezier(0.23,1,0.32,1)}
.sidenav__link:active{transform:scale(0.97)}
.sidenav__link:focus-visible{outline:2px solid var(--cuivre);outline-offset:2px}
.sidenav__dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--line);box-shadow:0 0 0 2px var(--bg,#F2EBE0);transition:background-color 150ms ease,transform 200ms cubic-bezier(0.23,1,0.32,1)}
.sidenav__label{font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;padding:3px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--line);box-shadow:0 4px 14px -8px rgba(31,26,20,.35);opacity:0;transform:translateX(-6px);transition:opacity 150ms ease,transform 200ms cubic-bezier(0.23,1,0.32,1);pointer-events:none}
.sidenav__link[data-active="true"] .sidenav__dot{background:var(--cuivre);transform:scale(1.4)}
@media (hover:hover) and (pointer:fine){
	.sidenav:hover .sidenav__label{opacity:1;transform:none}
	.sidenav__link:hover .sidenav__dot{background:var(--ink-mute)}
	.sidenav__link:hover .sidenav__label{color:var(--ink)}
	.sidenav__link[data-active="true"] .sidenav__label{color:var(--cuivre)}
}
.sidenav__link:focus-visible .sidenav__label{opacity:1;transform:none}
.sidenav__burger{display:none}
main section[id]{scroll-margin-top:calc(var(--header-h,72px) + 24px)}
@media (max-width:60em){
	.sidenav{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:16px;transform:none}
	.sidenav__burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--ink);cursor:pointer;box-shadow:0 8px 24px -10px rgba(31,26,20,.5);transition:transform 160ms cubic-bezier(0.23,1,0.32,1)}
	.sidenav__burger:active{transform:scale(0.95)}
	.sidenav__burger-bar{display:block;width:18px;height:2px;margin:0 auto;background:var(--paper);border-radius:2px;transition:transform 200ms cubic-bezier(0.23,1,0.32,1),opacity 150ms ease}
	.sidenav[data-open="true"] .sidenav__burger-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
	.sidenav[data-open="true"] .sidenav__burger-bar:nth-child(2){opacity:0}
	.sidenav[data-open="true"] .sidenav__burger-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
	.sidenav__list{position:absolute;left:0;bottom:56px;min-width:200px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px -16px rgba(31,26,20,.45);opacity:0;transform:translateY(6px) scale(0.97);transform-origin:bottom left;pointer-events:none;transition:opacity 150ms ease,transform 200ms cubic-bezier(0.23,1,0.32,1)}
	.sidenav[data-open="true"] .sidenav__list{opacity:1;transform:none;pointer-events:auto}
	.sidenav__link{padding:9px 10px}
	.sidenav__label{opacity:1;transform:none;font-size:14px;color:var(--ink-2,var(--ink));background:transparent;border:0;box-shadow:none;padding:0}
	.sidenav__dot{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
	.sidenav__link,.sidenav__dot,.sidenav__label,.sidenav__list,.sidenav__burger-bar{transition:none}
}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* TRANSITIONS VUE « fade » (overlays) : entrée nette, sortie plus rapide */
.fade-enter-active{transition:opacity 200ms cubic-bezier(0.23,1,0.32,1)}
.fade-leave-active{transition:opacity 140ms ease}
.fade-enter-from,.fade-leave-to{opacity:0}
.fade-leave-active .modal,.fade-leave-active .form-shell{transition:transform 140ms ease,opacity 140ms ease;transform:scale(0.98);opacity:0}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* RETOUR DE PRESSION sur les éléments cliquables ajoutés */
.planning-act-cta,.mini-bar-shift,.tache__actions button,.detail-presta__actions button,.export-btn,.share-btn{transition:transform 160ms cubic-bezier(0.23,1,0.32,1),background-color 150ms ease,color 150ms ease,border-color 150ms ease}
.planning-act-cta:active,.tache__actions button:active,.detail-presta__actions button:active,.share-btn:active{transform:scale(0.97)}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* TACTILE : pas d'effet de survol qui reste collé après un tap */
@media (hover:none){
	.dossier-card:hover{transform:none}
	.hero-quick-card:hover{transform:none}
	.user-avatar:hover{transform:none}
}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* MOUVEMENT RÉDUIT : on garde les fondus, on retire les déplacements */
@media (prefers-reduced-motion:reduce){
	.hero-left,.hero-right{animation:none}
	.modal,.modal.dialog,.toast{animation:fadeOnly 160ms ease both}
	.dossier-card:hover,.hero-quick-card:hover,.btn-primary:active,.btn-secondary:active,.filter-pill:active,.piece-check:active{transform:none}
	.fade-leave-active .modal,.fade-leave-active .form-shell{transform:none}
}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* PIED DU PANNEAU DE DÉTAIL : boutons d'une seule ligne, retour à la ligne entre boutons */
.modal-footer{flex-wrap:wrap;row-gap:12px}
.modal-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:10px;margin-left:auto}
.modal-actions .btn-primary,.modal-actions .btn-secondary{white-space:nowrap;line-height:1.2;padding:10px 16px}
.modal-actions .btn-primary svg,.modal-actions .btn-secondary svg{flex:0 0 auto}
@media (max-width:45em){
	.modal-actions{width:100%;justify-content:stretch}
	.modal-actions .btn-primary,.modal-actions .btn-secondary{flex:1 1 calc(50% - 5px);justify-content:center}
}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* LOGO CLIQUABLE */
.logo-link{text-decoration:none;color:inherit;cursor:pointer;border-radius:8px}
.logo-link:focus-visible{outline:2px solid var(--cuivre);outline-offset:4px}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* PLANNING SEMAINE : barres continues sur toute la durée (au-dessus des cellules) */
.gantt-track-v2[data-dragging="true"] .gantt-bar-span{pointer-events:none}
.gantt-track-jour[data-dragging="true"] .gantt-bar-hour{pointer-events:none}

/* Carte du prévisionnel : où en est ce dossier sur le planning définitif. */
.prev-card-pose{
  margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}
.prev-card-pose[data-etat="a-poser"]{color:var(--cuivre-deep)}
.prev-card-pose[data-etat="pose"]{color:#6B7E55}
.prev-card-pose__alerte{
  padding:1px 6px;border-radius:999px;
  background:rgba(176,90,44,.12);border:1px solid rgba(176,90,44,.35);
  color:var(--cuivre-deep);letter-spacing:.06em;
}

/* L'aperçu au survol d'une case du mois ne doit jamais intercepter un dépôt. */
.apercu-mois{pointer-events:none}

/* Vue mois : une case qui porte une seule intervention se saisit à la souris. */
.gantt-cell-mois.is-prenable{cursor:grab}
.gantt-cell-mois.is-prenable:active{cursor:grabbing}
.gantt-cell-mois.is-drag-over{box-shadow:inset 0 0 0 2px var(--cuivre)}
.gantt-track-jour.is-drag-over{box-shadow:inset 0 0 0 2px var(--cuivre)}
.gantt-bar-span{position:absolute;z-index:2;height:22px;margin-left:2px;display:flex;align-items:center;gap:6px;padding:0 7px;border-radius:5px;font-size:10.5px;background:var(--paper);border:1px solid var(--line);border-left-width:3px;box-sizing:border-box;overflow:hidden;cursor:pointer;box-shadow:0 1px 2px rgba(31,26,20,.06);transition:transform 160ms cubic-bezier(0.23,1,0.32,1),box-shadow 160ms ease}
.gantt-bar-span[draggable="true"]{cursor:grab}
.gantt-bar-span[draggable="true"]:active{cursor:grabbing}
.gantt-bar-span[data-clip-start="true"]{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:dashed}
.gantt-bar-span[data-clip-end="true"]{border-top-right-radius:0;border-bottom-right-radius:0;border-right-style:dashed}
.gantt-bar-span.bar-preparation{border-left-color:#6E7F8C;background:rgba(110,127,140,.08)}
.gantt-bar-span.bar-nettoyage{border-left-color:#6B7E55;background:rgba(107,126,85,.08)}
.gantt-bar-span.bar-decopierre{border-left-color:#B05A2C;background:rgba(176,90,44,.08)}
.gantt-bar-span.bar-hydrofuge{border-left-color:#C99757;background:rgba(201,151,87,.1)}
.gantt-bar-span.bar-sav{border-left-color:#8B2E1F;background:rgba(139,46,31,.08)}
.gantt-bar-span__client{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.gantt-bar-span__hours{position:relative;flex:0 0 auto;color:var(--ink-mute)}
.gantt-bar-span__tools{position:relative;flex:0 0 auto;display:inline-flex;gap:2px}
.gantt-bar-span[data-statut="en_cours"]{box-shadow:inset 0 0 0 1px var(--cuivre)}
.gantt-bar-span[data-statut="fait"]{
  opacity:1;
  border-left-color:#5E7A4E !important;
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(94,122,78,.16) 6px 9px);
}
.gantt-bar-span[data-statut="fait"] .gantt-bar-span__client::before{content:"✓ ";color:#5E7A4E;font-weight:700}
.gantt-bar-span[data-late="true"]{box-shadow:inset 0 0 0 1px #B3402E}
.gantt-bar-span[data-late="true"] .gantt-bar-span__client::before{content:"⚠ ";color:#B3402E}
@media (hover:hover) and (pointer:fine){
	.gantt-bar-span__tools{position:absolute;right:3px;top:50%;transform:translateY(-50%);padding:0 2px 0 6px;background:linear-gradient(90deg,transparent,var(--paper) 30%);opacity:0;transition:opacity 120ms ease}
	.gantt-bar-span:hover .gantt-bar-span__tools,.gantt-bar-span:focus-within .gantt-bar-span__tools{opacity:1}
	.gantt-bar-span:hover{box-shadow:0 4px 12px -6px rgba(31,26,20,.35);transform:translateY(-1px)}
}
/* barre étroite (1 jour) : le nom du client prime sur les heures */
.gantt-bar-span{container-type:inline-size}
@container (max-width:110px){
	.gantt-bar-span__hours{display:none}
}
.gantt-bar-span[data-first="false"]{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:dotted}
.gantt-bar-span[data-last="false"]{border-top-right-radius:0;border-bottom-right-radius:0;border-right-style:dotted}
.gantt-bar-span[data-first="false"] .gantt-bar-span__client{font-weight:500;color:var(--ink-mute)}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* RECETTE 17/09 : modales mobiles, tablette, terrain, finitions */
.form-shell{box-sizing:border-box;width:calc(100% - 24px);max-width:720px}
.form-shell--narrow{max-width:520px}
.form-shell-header{flex-wrap:nowrap}
.form-shell-header .tuto-close{flex:0 0 auto}
@media (max-width:45em){
	.form-shell-header{flex-direction:row;align-items:flex-start}
	.user-name{display:none}
	.tache__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
	.tache__actions .btn-primary{grid-column:1 / -1;justify-content:center}
	.tache__actions .btn-secondary{justify-content:center}
	.tache__pdf{margin-right:0}
	.toast-container{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:12px;left:12px;max-width:none}
	.toast{max-width:100%}
}
/* tablette : le planning défile horizontalement dans son cadre, la sidebar passe au-dessus */
.planning-board-v2,.planning-board-jour,.planning-board-mois{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:75em){
	.planning-v2{grid-template-columns:1fr}
	.planning-sidebar{position:static;max-height:none}
	.planning-sidebar-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
	.header-inner .agence-pill{display:none}
}
.planning-v2[data-compact="true"]{grid-template-columns:1fr}
/* vue Jour : colonne équipes à largeur fixe (elle suivait la longueur des prénoms) */
.planning-board-jour .equipe-cell,.planning-board-jour .planning-head-equipes,.planning-board-mois .equipe-cell,.planning-board-mois .planning-head-equipes{flex:0 0 200px;width:200px;min-width:200px;box-sizing:border-box}
/* formulaires : cases alignées avec leur libellé */
.dpr-checkbox-line{align-items:center}
.dpr-checkbox-line input[type=checkbox]{margin:0;flex:0 0 auto}
/* cartouche « commissions gelées » : froid, pas cuivre */
.hero-quick-card.accent-card{border-color:#6E8CA8;background:linear-gradient(180deg,var(--paper) 0%,rgba(110,140,168,.12) 100%),repeating-linear-gradient(135deg,transparent 0 10px,rgba(110,140,168,.06) 10px 11px)}
.hero-quick-card.accent-card .label{color:#3F5F7C}
.hero-quick-card.accent-card .value{color:#2B4560}
/* titres : crénage de l'apostrophe */
.hero h1,.display{font-kerning:normal;font-feature-settings:"kern" 1}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* HEADER : verre dépoli visible au défilement */
.header{background:rgba(242,235,224,.66);backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);border-bottom:1px solid rgba(31,26,20,.08);box-shadow:0 8px 24px -20px rgba(31,26,20,.3)}
/* après leur entrée, le hero ne garde aucune transformation : sinon Chrome ne floute pas ce qui passe sous le header */
.hero-left,.hero-right{animation-fill-mode:backwards}
@supports not (backdrop-filter:blur(1px)){
	.header{background:rgba(242,235,224,.94)}
}
/* le conteneur .wrap créait un contexte d'empilement (z-index:2) qui empêchait le flou du header de porter sur le hero ;
   le grain de fond passe en z-index:0 : sous tout élément positionné (header, menus, modales), au-dessus du contenu courant */
.wrap{position:static;z-index:auto}
body::before{z-index:0}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* RECETTE 17/09 SOIR : finitions */
.role-switcher--static{width:auto;min-width:0}
.share-btn--guide{text-decoration:none}
.dpr-form-group input[type="email"],.dpr-form-group input[type="tel"]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;box-sizing:border-box}
.dpr-form-group input[type="email"]:focus,.dpr-form-group input[type="tel"]:focus{outline:2px solid var(--cuivre);outline-offset:1px}
.month-picker{display:grid;grid-template-columns:1fr 110px;gap:8px}
.month-picker select{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.section-num--logo{display:flex;align-items:center}
.section-num--logo .svg__logo-leb{width:96px;height:auto;display:block}
.hero-quick-card.accent-card{border-color:#5B7F9E;background:linear-gradient(180deg,rgba(235,242,248,.9) 0%,rgba(110,140,168,.22) 100%),repeating-linear-gradient(135deg,transparent 0 10px,rgba(91,127,158,.08) 10px 11px)}
.hero-quick-card.accent-card .label{color:#35566F}
.hero-quick-card.accent-card .value{color:#243D54}
/* toasts : entrée nette, sortie en glissant vers le bas */
.toast-enter-from{opacity:0;transform:translateY(12px) scale(0.97)}
.toast-leave-active{transition:transform 180ms ease,opacity 180ms ease}
.toast-leave-to{opacity:0;transform:translateY(14px)}
@media (max-width:45em){
	.user-pill{padding:4px!important;gap:6px!important}
	.header-right{gap:8px}
}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* RECETTE 17/09, 3e passe */
.role-switcher--static{justify-self:start;width:max-content;flex:0 0 auto}
/* toasts : plus de keyframe (elle court-circuitait la transition de sortie), entrée et sortie par transition */
.toast{animation:none}
.toast-enter-active{transition:transform 220ms cubic-bezier(0.23,1,0.32,1),opacity 220ms ease}
.toast-move{transition:transform 220ms cubic-bezier(0.23,1,0.32,1)}
/* logo LEB : filet fin avec encoche, centré sur le texte */
.section-num--logo{align-self:center;position:relative;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:transparent}
/* commissions gelées, section 08 : même froid que la cartouche du hero */
.commission-banner{background:linear-gradient(135deg,#1E2A38 0%,#2B4560 100%)}
.commission-banner-amount .num{color:#BFD6EA}
.commission-banner::before{background:radial-gradient(circle,rgb(44 139 176 / 40%) 0%,transparent 70%)}

/* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */
/* MOBILE 18/09 : le logo cède la place au lieu de faire déborder la barre du haut.
   Un débordement horizontal élargit la page, le téléphone dézoome, et les éléments fixés en bas sont coupés. */
@media (max-width:45em){
	.header-inner{grid-template-columns:minmax(0,1fr) auto!important}
	.logo-block{min-width:0}
	.logo-mark-img{flex:1 1 auto;min-width:0;max-width:195px;height:auto!important}
	.logo-mark-img img{width:100%;height:auto;max-height:32px;object-fit:contain;object-position:left center}
	.header-right{flex-shrink:0}
}

/* MOBILE 18/09 (2) : les en-têtes de section ne débordent plus. La colonne de grille en « 1fr » ne rétrécit pas
   sous la largeur de ses contrôles : on l'autorise, les contrôles passent à la ligne, le libellé du sélecteur
   perd sa largeur minimale (posée en style en ligne, d'où le !important). */
@media (max-width:45em){
	.section-head{grid-template-columns:minmax(0,1fr)!important}
	.section-head > *{min-width:0}
	.planning-controls{flex-wrap:wrap;gap:8px}
	.pilotage-month-picker{max-width:100%;gap:4px}
	.pilotage-month-picker .label-month{min-width:0!important;flex:1 1 auto;padding:0 6px;white-space:nowrap}
	.planning-controls .pilotage-month-picker{flex:1 1 auto;justify-content:space-between}
}

/* Filtres SAV : dans la barre d'en-tête, centrés entre le titre et le compteur.
   Variante mobile en fin de fichier. */
.sav-head { gap: 16px; }
.sav-filtres {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}
/* Libellé à côté du champ, et non au-dessus : on tient sur la hauteur de la barre. */
.sav-filtre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  white-space: nowrap;
}
.sav-filtre select {
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-family: inherit; font-size: 12.5px;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  min-width: 118px; cursor: pointer;
}
.sav-filtre select:hover { border-color: var(--cuivre); }
.sav-filtre-reset {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-mute);
  border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sav-filtre-reset:hover { border-color: var(--cuivre); color: var(--cuivre); }
.sav-vide { padding: 18px 0; color: var(--ink-mute); font-style: italic; }
.sav-dept-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-alt); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--ink-mute); letter-spacing: .04em;
}
.sav-description { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 2px 0; }
.sav-contact { font-size: 12px; line-height: 1.5; color: var(--ink-mute); }
.sav-contact a { color: var(--cuivre); text-decoration: none; font-weight: 600; }
.sav-contact a:hover { text-decoration: underline; }

/* Choix du client à la création d'un dossier : nouveau, ou déjà connu. */
.client-choix .client-mode { display: flex; gap: 16px; flex-wrap: wrap; margin: 2px 0 8px; }
.client-mode__opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.client-mode__opt input[disabled] { cursor: not-allowed; }
.client-mode__opt:has(input[disabled]) { opacity: .45; cursor: not-allowed; }
.client-repris { display: block; margin-top: 6px; font-size: 12px; color: var(--mousse-deep); line-height: 1.4; }

/* Vignettes de photos dans la ligne de pièce, et modale de description.
   Variantes mobile en fin de fichier. */
.photo-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.photo-vignette {
  width: 44px; height: 44px; flex: none; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--bg-alt); cursor: pointer; position: relative;
  transition: border-color .15s, transform .15s;
}
.photo-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-vignette:hover { border-color: var(--cuivre); transform: scale(1.06); }
/* Pastille verte : cette photo a au moins une description. */
.photo-vignette.is-decrite::after {
  content: ''; position: absolute; right: 3px; bottom: 3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mousse, #6B7E55); border: 1.5px solid var(--paper);
}
.photo-modal { max-width: 980px; }
.photo-modal__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
.photo-modal__visuel { position: relative; background: var(--bg-alt); border-radius: 12px; overflow: hidden; }
.photo-modal__visuel img { width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.photo-nav--prev { left: 8px; }
.photo-nav--next { right: 8px; }
.photo-modal__champs { display: flex; flex-direction: column; gap: 14px; }
.photo-modal__champs label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.photo-modal__champs textarea {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font-family: inherit; font-size: 13.5px;
  text-transform: none; letter-spacing: 0; resize: vertical;
}
.photo-modal__lien { font-size: 12.5px; color: var(--cuivre); text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------------
   Mobile — pièce de type texte (choix de la pierre).
   En fin de fichier volontairement : la cascade doit gagner sur les
   règles desktop déclarées plus haut.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .piece-text-edit {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
  .piece-text-input { width: 100%; }
}

/* Bouton « créer une équipe » dans l'en-tête Équipes du planning. */
.planning-head-equipes { display: flex; align-items: center; gap: 8px; }
.btn-team-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--cuivre-deep);
  font-size: 15px; line-height: 1; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-team-add:hover { background: var(--cuivre); color: var(--paper); }

@media (max-width: 860px) {
  /* La barre d'en-tête SAV s'empile : titre, filtres, compteur. */
  .sav-head { flex-wrap: wrap; row-gap: 12px; }
  .sav-filtres { order: 3; width: 100%; justify-content: flex-start; gap: 8px; }
  .sav-filtre { flex: 1 1 auto; }
  .sav-filtre select { min-width: 0; flex: 1 1 auto; }
}

/* Bandeau du planning en consultation (commerciaux). */
.planning-lecture-seule {
  margin: 0 0 14px;
  padding: 9px 14px;
  border-left: 3px solid var(--mousse, #6B7E55);
  background: var(--bg-alt);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .photo-modal__body { grid-template-columns: 1fr; }
  .photo-modal__visuel img { max-height: 40vh; }
}

/* Champs de description dans l'éditeur d'annotation photo.
   Variante mobile en fin de fichier. */
.annot-descriptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 18px 4px;
}
.annot-descriptions label { display: flex; flex-direction: column; gap: 5px; }
.annot-descriptions label span {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600;
}
.annot-descriptions textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 13px; resize: vertical; min-height: 54px;
}

@media (max-width: 720px) {
  .annot-descriptions { grid-template-columns: 1fr; gap: 9px; padding: 12px 14px 2px; }
  .annot-descriptions textarea { min-height: 46px; }
}

/* Ligne de ticket SAV — le bouton d'action garde une largeur confortable
   et la carte respire. Variante mobile en fin de fichier. */
.sav-item .btn-sav-position,
.sav-item .sav-status-ok { white-space: nowrap; }
.sav-item .sav-photo-strip { margin-top: 4px; }

@media (max-width: 1180px) {
  /* Écrans intermédiaires : les repères passent SOUS le contenu, mais l'urgence
     et les actions restent à droite. Placement explicite, sinon la grille
     recompose n'importe comment. */
  .sav-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    row-gap: 12px;
  }
  .sav-thumb   { grid-area: 1 / 1 / 3 / 2; align-self: center; }
  .sav-info    { grid-area: 1 / 2 / 2 / 3; }
  .sav-repere  { grid-area: 2 / 2 / 3 / 3; }
  .sav-severity{ grid-area: 1 / 3 / 3 / 4; align-self: center; }
  .sav-cta     { grid-area: 1 / 4 / 3 / 5; align-self: center; }
}
@media (max-width: 860px) {
  /* Téléphone : tout s'empile sous la vignette. */
  .sav-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 16px;
    padding: 18px 16px;
  }
  .sav-thumb    { grid-area: 1 / 1 / 2 / 2; }
  .sav-info     { grid-area: 1 / 2 / 2 / 3; }
  .sav-repere   { grid-area: 2 / 1 / 3 / 3; }
  .sav-severity { grid-area: 3 / 1 / 4 / 3; align-items: flex-start; }
  .sav-cta      { grid-area: 4 / 1 / 5 / 3; min-width: 0; }
  .sav-repere__ligne { grid-template-columns: 56px minmax(0, 1fr); }
  .sav-client { font-size: 17px; }
  .sav-desc { font-size: 14px; }
}

/* Repère « journée 2/3 » sur une barre du planning : les journées d'un même
   chantier se déplacent séparément, il faut savoir laquelle on tient. */
.gantt-bar-span__jour {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(251, 248, 242, .3);
  color: inherit;
}

/* ------------------------------------------------------------------
   Ligne de ticket SAV : colonne « repères » et boutons d'action.
   Variantes mobile en fin de fichier.
   ------------------------------------------------------------------ */

/* Colonne du milieu : où, quand, qui appeler. Elle remplit l'espace qui
   restait vide entre le contenu et les actions. */
.sav-repere { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sav-repere__ligne { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.sav-repere__cle {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute);
}
.sav-repere__val { font-size: 13px; line-height: 1.45; color: var(--ink-soft); min-width: 0; }

/* Les deux actions ont le même gabarit : même hauteur, même largeur, empilées.
   Seule la couleur les distingue. */
.sav-cta { flex-direction: column; align-items: stretch; gap: 8px; min-width: 156px; }
.btn-sav-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 16px !important;
  font-family: inherit;
  font-size: 12.5px !important;
  font-weight: 600;
  border-radius: 100px !important;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .15s, border-color .15s;
}
.btn-sav-action svg { width: 13px; height: 13px; flex: none; }
.btn-sav-action:hover { transform: translateY(-1px); }

/* Positionner : l'action principale, dans le rouille du SAV. */
.btn-sav-position {
  background: #8B2E1F !important;
  border-color: #8B2E1F !important;
  color: var(--paper) !important;
}
.btn-sav-position:hover { background: #6a2417 !important; }

/* Modifier : même gabarit, teinte sourde — c'est une correction, pas l'action du jour. */
.btn-sav-edit {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}
.btn-sav-edit:hover {
  background: var(--bg-alt) !important;
  border-color: var(--ink-soft) !important;
  color: var(--ink) !important;
}

/* ------------------------------------------------------------------
   Mobile — modales « carte ». En fin de fichier volontairement :
   les règles desktop ci-dessus sont déclarées après le bloc mobile
   existant, la cascade doit rester à l'avantage du mobile.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .form-overlay { padding: 16px 12px; }
  .modal-card { border-radius: 14px; max-height: calc(100vh - 32px); }
  .modal-head {
    flex-direction: column-reverse; align-items: stretch;
    gap: 10px; padding: 18px 18px 14px;
  }
  .modal-head .modal-close { align-self: flex-end; }
  .modal-head h2 { font-size: 24px; }
  .modal-card .modal-body { padding: 18px; }
  .modal-card .modal-footer {
    flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 18px;
  }
  .modal-card .modal-actions { justify-content: flex-end; }
  .modal-card .form-grid { grid-template-columns: 1fr; }
  .modal-card .form-field.large { grid-column: span 1; }
  .photo-modal__body { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Mobile — tableau des saisons et filtre « À planifier ».
   En fin de fichier : la cascade doit gagner sur les règles desktop.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .saison-board { padding: 12px; }
  .saison-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .saison-col { min-height: 120px; padding: 10px; }
  .planning-sidebar-filtre { padding: 0 10px 10px; }
}
@media (max-width: 460px) {
  .saison-grid { grid-template-columns: 1fr; }
}