/* ------------------------------------------------------------------
   Facette · onglet « Hammer stratégie » (07/11/2026)
   Que des variables de styles.css ; le thème clair est redit en bas
   (lignes html[data-theme="clair"]) pour ne pas dépendre de
   theme-clair.py. Même squelette que origine.css.
   ------------------------------------------------------------------ */

#vue-hammer{--ha-violet:#8B66FA;--ha-vert:#1FA884;--ha-orange:#FF9A3D;--ha-rose:#F4467E;--ha-bleu:#3D86F0;padding:0 var(--marge,16px) 24px}
#vue-hammer .ha-barre{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-end;justify-content:space-between;margin:6px 0 14px}
#vue-hammer .ha-titre{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,28px);letter-spacing:-0.01em}
#vue-hammer .ha-sous{color:var(--texte-doux);font-size:14px;margin-top:2px;max-width:760px}
#vue-hammer .ha-periodes{display:flex;flex-wrap:wrap;gap:6px}
#vue-hammer .ha-choix{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
#vue-hammer .ha-dates{margin:0}
#vue-hammer .ha-dates input{color-scheme:dark}
#vue-hammer .ha-dates--actif input{border-color:rgba(255,154,61,.55)}
#vue-hammer .ha-avis{flex-basis:100%;font-size:12.5px;color:var(--ha-orange)}
#vue-hammer .ha-titre-campagne{font-family:var(--display);font-weight:700;font-size:18px;margin:18px 0 8px}

/* ---- le bandeau d'état ---- */
#vue-hammer .ha-etat-bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:11px 14px;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte);margin-bottom:12px;font-size:14px}
#vue-hammer .ha-etat-bandeau i{font-style:normal;color:var(--texte-doux);font-size:13px}
#vue-hammer .ha-etat-bandeau b{font-weight:600;color:var(--ha-rose)}
#vue-hammer .ha-etat-bandeau--vert{border-color:rgba(31,168,132,.45)}
#vue-hammer .ha-etat-bandeau--bleu{border-color:rgba(61,134,240,.45)}
#vue-hammer .ha-etat-bandeau--orange,#vue-hammer .ha-etat-bandeau--rose{border-color:rgba(244,70,126,.45)}

/* ---- les tuiles ---- */
#vue-hammer .ha-tuiles{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}
#vue-hammer .ha-tuile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte);min-width:0}
#vue-hammer .ha-tuile-etiquette{font-size:12px;color:var(--texte-faible);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
#vue-hammer .ha-tuile-valeur{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.8vw,36px);letter-spacing:-0.02em;line-height:1.1;overflow-wrap:anywhere}
#vue-hammer .ha-tuile-valeur small{font-size:14px;font-weight:600;color:var(--texte-doux);letter-spacing:0}
#vue-hammer .ha-tuile-detail{font-size:12.5px;color:var(--texte-doux)}
#vue-hammer .ha-tuile-chiffres{font-size:13.5px;font-weight:600;margin-top:2px}
#vue-hammer .ha-doux{color:var(--texte-faible);font-weight:500}
#vue-hammer .ha-tuile--violet{border-color:rgba(139,102,250,.50);background:linear-gradient(160deg,rgba(139,102,250,.18),var(--carte) 65%)}
#vue-hammer .ha-tuile--vert{border-color:rgba(31,168,132,.50);background:linear-gradient(160deg,rgba(31,168,132,.18),var(--carte) 65%)}
#vue-hammer .ha-tuile--orange{border-color:rgba(255,154,61,.45);background:linear-gradient(160deg,rgba(255,154,61,.14),var(--carte) 65%)}

/* ---- les cartes et tableaux ---- */
#vue-hammer .ha-carte{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);padding:16px 17px;margin-bottom:14px;min-width:0}
#vue-hammer .ha-carte h3{font-family:var(--display);font-size:17px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
#vue-hammer .ha-brouillon h3{margin-bottom:6px}
#vue-hammer .ha-brouillon p{font-size:14px;color:var(--texte-doux);max-width:720px;margin:0 0 6px}
#vue-hammer .ha-compte{font-family:var(--corps);font-size:12.5px;font-weight:600;color:var(--texte-doux);border:1px solid var(--trait-fort);border-radius:999px;padding:1px 9px}
#vue-hammer .ha-table-defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
#vue-hammer .ha-table{width:100%;border-collapse:collapse;font-size:14px}
#vue-hammer .ha-table th,#vue-hammer .ha-table td{text-align:left;padding:8px 10px;border-top:1px solid var(--trait);white-space:nowrap;vertical-align:middle}
#vue-hammer .ha-table thead th{border-top:0;font-size:12px;color:var(--texte-faible);text-transform:uppercase;letter-spacing:.05em;font-weight:600;white-space:normal;line-height:1.25;vertical-align:bottom}
#vue-hammer .ha-table tbody th{font-weight:600}
#vue-hammer .ha-table .ha-num{text-align:right;font-variant-numeric:tabular-nums}
#vue-hammer .ha-table td i{font-style:normal;color:var(--texte-faible);font-size:12.5px;margin-left:4px}
#vue-hammer .ha-table .ha-numero{font-family:var(--mono);color:var(--texte-doux);font-size:13px}
#vue-hammer .ha-table .ha-vignette{padding-top:5px;padding-bottom:5px;width:52px}
#vue-hammer .ha-table .ha-nom{white-space:normal;min-width:150px;max-width:260px;line-height:1.3}
#vue-hammer .ha-table .ha-nom b{font-weight:600;text-transform:capitalize}
#vue-hammer .ha-table .ha-nom i{display:block;margin:2px 0 0}
#vue-hammer .ha-table .ha-depasse{color:var(--ha-orange);font-weight:700}
#vue-hammer .ha-table--jours th,#vue-hammer .ha-table--jours td{padding:7px 10px}
#vue-hammer .ha-table--jours tbody th{font-weight:500;text-transform:capitalize}
#vue-hammer .ha-etat{display:inline-block;font-size:12.5px;font-weight:600;border-radius:999px;padding:2px 10px;border:1px solid var(--trait-fort);white-space:nowrap}
#vue-hammer .ha-etat--vert{border-color:rgba(31,168,132,.55);background:rgba(31,168,132,.14)}
#vue-hammer .ha-etat--bleu{border-color:rgba(61,134,240,.55);background:rgba(61,134,240,.14)}
#vue-hammer .ha-etat--orange{border-color:rgba(255,154,61,.55);background:rgba(255,154,61,.14)}
#vue-hammer .ha-etat--rose{border-color:rgba(244,70,126,.55);background:rgba(244,70,126,.14)}
#vue-hammer .ha-etat--gris{color:var(--texte-doux)}
#vue-hammer .ha-note{font-size:12.5px;color:var(--texte-faible);margin-top:8px;line-height:1.45}
#vue-hammer .ha-vide{color:var(--texte-doux);font-size:14px}
#vue-hammer .ha-calcul summary{cursor:pointer;font-weight:600}
#vue-hammer .ha-calcul ul{margin:10px 0 0 18px;font-size:13.5px;color:var(--texte-doux);display:grid;gap:6px;line-height:1.45}
#vue-hammer .ha-calcul b{color:var(--texte)}
#vue-hammer .alerte{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ---- téléphone d'abord ---- */
@media (max-width:900px){#vue-hammer .ha-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  #vue-hammer .ha-tuiles{grid-template-columns:minmax(0,1fr)}
  #vue-hammer .ha-table th,#vue-hammer .ha-table td{padding:8px 7px;font-size:13px}
  #vue-hammer .ha-table .ha-nom{min-width:120px}
}

/* ---- fond clair ---- */
html[data-theme="clair"] #vue-hammer{--ha-violet:#6E3AF7;--ha-vert:#0F8A6A;--ha-orange:#C76A00;--ha-rose:#C7265C;--ha-bleu:#1F62C9}
html[data-theme="clair"] #vue-hammer .ha-tuile--violet{background:linear-gradient(160deg,rgba(110,58,247,.10),var(--carte) 65%)}
html[data-theme="clair"] #vue-hammer .ha-tuile--vert{background:linear-gradient(160deg,rgba(15,138,106,.10),var(--carte) 65%)}
html[data-theme="clair"] #vue-hammer .ha-tuile--orange{background:linear-gradient(160deg,rgba(199,106,0,.10),var(--carte) 65%)}
html[data-theme="clair"] #vue-hammer .ha-etat--vert{background:rgba(15,138,106,.10)}
html[data-theme="clair"] #vue-hammer .ha-etat--bleu{background:rgba(31,98,201,.10)}
html[data-theme="clair"] #vue-hammer .ha-etat--orange{background:rgba(199,106,0,.10)}
html[data-theme="clair"] #vue-hammer .ha-etat--rose{background:rgba(199,38,92,.10)}
html[data-theme="clair"] #vue-hammer .ha-dates input{color-scheme:light}