/* =========================================================
   Atelier — Maison Léon
   Surcouche de marque et composants métier sur le template
   Acara (DexignZone). Chargé APRÈS css/style.css.
   ========================================================= */

:root {
  --ml-rouge: #E54642;
  --ml-rouge-fonce: #c93531;
  --ml-rouge-pale: #fdeceb;
}

/* ---------- Marque : le corail Acara devient le rouge Maison Léon ---------- */
.btn-primary { background-color: var(--ml-rouge); border-color: var(--ml-rouge); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ml-rouge-fonce); border-color: var(--ml-rouge-fonce);
}
.btn-outline-primary { color: var(--ml-rouge); border-color: var(--ml-rouge); }
.btn-outline-primary:hover { background-color: var(--ml-rouge); border-color: var(--ml-rouge); color: #fff; }
.badge-primary, .bg-primary { background-color: var(--ml-rouge) !important; }
.text-primary { color: var(--ml-rouge) !important; }
.border-primary { border-color: var(--ml-rouge) !important; }
.progress-bar { background-color: var(--ml-rouge); }
.progress-bar.bg-success { background-color: #2bc155 !important; }
.progress-bar.bg-warning { background-color: #ffab2d !important; }
.progress-bar.bg-danger  { background-color: #f35757 !important; }

.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li:hover > a,
.deznav .metismenu > li > a.mm-active {
  color: var(--ml-rouge);
}
.deznav .metismenu > li.mm-active > a i,
.deznav .metismenu > li:hover > a i { color: var(--ml-rouge); }

.nav-tabs .nav-link.active {
  color: var(--ml-rouge);
  border-color: transparent transparent var(--ml-rouge);
  border-bottom-width: 2px;
}
.nav-tabs .nav-link:hover { color: var(--ml-rouge-fonce); }

.form-check-input:checked { background-color: var(--ml-rouge); border-color: var(--ml-rouge); }
a { color: inherit; }
a.lien { color: var(--ml-rouge); }

/* ---------- Logo dans la barre de navigation ---------- */
.nav-header .brand-logo { padding-left: 1.4rem; }
.nav-header .brand-title { width: 138px; height: auto; margin-left: 0; }
.nav-header .logo-abbr { width: 42px; height: 42px; }
[data-sidebar-style="mini"] .nav-header .brand-title,
[data-sidebar-style="overlay"].menu-toggle .nav-header .brand-title { display: none; }

/* ---------- Avatars initiales (pastille client) ---------- */
.avatar-ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .5px;
  flex: 0 0 auto;
}
.avatar-ini.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; }
.avatar-ini.xl { width: 72px; height: 72px; border-radius: 20px; font-size: 24px; }
/* Logo du client (favicon du site en général) : fond blanc, l'image est
   contenue dans la pastille sans déformation, quelle que soit sa forme. */
.avatar-ini.logo { background: #fff !important; border: 1px solid #e9ecf2; padding: 4px; overflow: hidden; }
.avatar-ini.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.avatar-ini.logo.sm { padding: 3px; }
.avatar-ini.logo.xl { padding: 8px; }
.champ-image .avatar-ini { cursor: default; }

/* ---------- Badges statuts & niveaux ---------- */
.badge-statut { font-weight: 500; padding: .35em .8em; border-radius: 20px; }
.s-todo    { background: #eef0f4; color: #5b6270; }
.s-doing   { background: #e3efff; color: #1a66c9; }
.s-review  { background: #fff3dd; color: #b47607; }
.s-done    { background: #e2f7e9; color: #1e9a4e; }
.s-blocked { background: #fdeceb; color: var(--ml-rouge-fonce); }

.lvl-info   { background: #e3efff; color: #1a66c9; }
.lvl-ask    { background: #f1e8fd; color: #7b3ff2; }
.lvl-valid  { background: #fff3dd; color: #b47607; }
.lvl-urgent { background: #fdeceb; color: var(--ml-rouge-fonce); }

/* ---------- Cartes clients ---------- */
.carte-client { transition: transform .15s ease, box-shadow .15s ease; }
.carte-client:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.carte-client .type-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  font-weight: 600; padding: .3em .9em; border-radius: 20px;
}
.type-annonceur { background: var(--ml-rouge-pale); color: var(--ml-rouge-fonce); }
.type-projet    { background: #e8f0fb; color: #0a6dd6; }

/* ---------- SWOT ---------- */
.swot-carte { border-radius: 14px; padding: 1.1rem 1.25rem; height: 100%; }
.swot-carte h5 { font-size: 14px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: .7rem; }
.swot-carte ul { margin: 0; padding-left: 1.1rem; }
.swot-carte li { margin-bottom: .3rem; font-size: 14px; }
.swot-f  { background: #e2f7e9; } .swot-f h5  { color: #1e9a4e; }
.swot-fa { background: #fdeceb; } .swot-fa h5 { color: var(--ml-rouge-fonce); }
.swot-o  { background: #e3efff; } .swot-o h5  { color: #1a66c9; }
.swot-m  { background: #fff3dd; } .swot-m h5  { color: #b47607; }

/* ---------- Frise « temps forts » (espace client) ---------- */
.frise { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.frise-mois { min-width: 210px; scroll-snap-align: start; }
.frise-mois .mois-titre {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: #7e8299; margin-bottom: 8px;
}
.tf-carte {
  background: #fff; border-radius: 14px; padding: .8rem .95rem; margin-bottom: 10px;
  border-left: 4px solid #ccc; box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.tf-carte .tf-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
/* Médiathèque Dropbox */
.md-ariane a { color: #3e4152; font-weight: 500; }
.md-ariane a:hover { color: var(--ml-rouge); }
.md-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.md-tuile { position: relative; border: 1px solid #eef0f4; border-radius: 12px; padding: 12px 10px 10px; text-align: center;
  cursor: pointer; background: #fff; transition: all .15s ease; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.md-tuile:hover { border-color: #d9dce6; box-shadow: 0 4px 14px rgba(0,0,0,.05); transform: translateY(-1px); }
.md-dossier { background: #fffdf5; }
.md-apercu { width: 100%; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #f6f7fb; overflow: hidden; }
.md-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.md-ext { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #7e8299; background: #fff; border: 1px solid #e3e6ef; border-radius: 6px; padding: 4px 8px; }
.md-nom { font-size: 12.5px; font-weight: 500; color: #3e4152; word-break: break-word; line-height: 1.3; }
.md-meta { font-size: 11px; color: #9a9fb0; }
.md-partage { border-color: #bfe6cc; background: #f3fbf5; }
.md-bascule { border: 1px solid #e3e6ef; background: #fff; color: #7e8299; border-radius: 20px; font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }
.md-bascule.on { background: #e2f7e9; color: #1e9a4e; border-color: #bfe6cc; }
.md-bascule:hover { border-color: var(--ml-rouge); color: var(--ml-rouge); }
.md-suppr { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; color: #9a9fb0;
  font-size: 12px; line-height: 22px; opacity: 0; transition: opacity .15s; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.md-tuile:hover .md-suppr { opacity: 1; }
.md-suppr:hover { color: #fff; background: var(--ml-rouge); }
.ec-bloc .md-tuile { cursor: pointer; }

/* Liens rapides de l'en-tête de fiche */
.liens-rapides { display: flex; flex-wrap: wrap; gap: 6px; }
.lien-rapide { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: #f4f5f9; color: var(--lr, #3e4152); transition: all .15s ease; }
.lien-rapide:hover { background: var(--lr, #3e4152); color: #fff; transform: translateY(-1px); }

/* Éditeur enrichi (textarea des formulaires) */
.editeur { border: 1px solid #e3e6ef; border-radius: 10px; overflow: hidden; }
.editeur-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; background: #f6f7fb; border-bottom: 1px solid #e9ecf2; }
.editeur-barre button { border: 0; background: transparent; border-radius: 6px; min-width: 28px; height: 26px; padding: 0 6px; font-size: 13px; color: #3e4152; cursor: pointer; }
.editeur-barre button:hover { background: #e9ecf2; }
.editeur-sep { width: 1px; height: 18px; background: #dfe2ea; margin: 0 4px; }
.editeur-zone { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 12px; font-size: 14px; line-height: 1.6; overflow-y: auto; max-height: 420px; }
.editeur-zone:focus { outline: none; }
.editeur-zone h2, .texte-riche h2, .reunion-texte h2, .brief-ligne dd h2, .obj-texte h2 { font-size: 17px; margin: .6em 0 .3em; }
.editeur-zone h3, .texte-riche h3, .reunion-texte h3, .brief-ligne dd h3, .obj-texte h3 { font-size: 15px; margin: .5em 0 .25em; }
.editeur-zone p, .texte-riche p, .reunion-texte p, .brief-ligne dd p, .obj-texte p { margin: 0 0 .4em; }
.editeur-zone ul, .editeur-zone ol, .texte-riche ul, .texte-riche ol, .reunion-texte ul, .reunion-texte ol,
.brief-ligne dd ul, .brief-ligne dd ol, .obj-texte ul, .obj-texte ol { margin: .2em 0 .5em; padding-left: 1.3em; }
.reunion-texte, .brief-ligne dd { white-space: normal; }

/* Images insérées dans les textes enrichis (captures d'écran) */
.img-riche { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid #e9ecf2; margin: .5em 0; }
.editeur-zone .img-riche { cursor: default; }
.brief-ligne dd .img-riche, .reunion-texte .img-riche, .process-texte .img-riche { max-width: 720px; }

/* Process : tutos par client */
.process-carte { margin-bottom: 12px; border-left: 4px solid #e3e6ef; }
.process-carte.process-partage { border-left-color: #1e9a4e; }
.process-tete { cursor: pointer; }
.process-fleche { color: #9a9fb0; font-size: 14px; }
.process-texte { font-size: 13.5px; line-height: 1.7; color: #4a4f5e; }
.process-texte ol, .process-texte ul { padding-left: 1.4em; margin: .3em 0 .6em; }
.process-texte li { margin-bottom: .25em; }
.ec-bloc .process-carte { box-shadow: none; border: 1px solid #eef0f4; border-left-width: 4px; }

/* Mot du mois */
.mot-mois { border: 1px solid #eef0f4; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.mot-mois-courant { border-color: #bfe6cc; background: #f6fcf8; }
.ec-mot-mois { background: #fff7f0; border-left: 3px solid #f0821e; border-radius: 10px; padding: 12px 16px; }
.ec-mot-mois-ancien { background: #f8f9fc; border-left-color: #d9dce6; }
.ec-mot-mois-titre { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #b45f0b; margin-bottom: 6px; }
.ec-mot-mois-ancien .ec-mot-mois-titre { color: #7e8299; }

/* Relation projet : cartes de compte rendu */
.reunion-carte { margin-bottom: 14px; border-left: 4px solid #e3e6ef; }
.reunion-carte.reunion-partagee { border-left-color: #1e9a4e; }
.reunion-texte { white-space: pre-line; font-size: 13.5px; line-height: 1.7; color: #4a4f5e; }
.reunion-note { background: #fff8e6; border-radius: 10px; padding: 10px 14px; }
.ec-bloc .reunion-carte { box-shadow: none; border: 1px solid #eef0f4; border-left-width: 4px; }

/* Brief client : formulaire et synthèse */
.brief-section { margin-bottom: 16px; }
.brief-item { border: 1px solid #eef0f4; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: #fcfcfe; }
.brief-syn-section { margin-bottom: 22px; }
.brief-syn-section h5 { font-size: 15px; padding-bottom: 6px; border-bottom: 2px solid var(--ml-rouge); margin-bottom: 8px; }
.brief-syn dl { margin: 0; }
.brief-ligne { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f0f1f6; font-size: 13.5px; }
.brief-ligne dt { font-weight: 600; color: #3e4152; }
.brief-ligne dd { margin: 0; white-space: pre-line; color: #4a4f5e; }
.brief-syn-item { margin: 8px 0 14px; }
.brief-syn-item-titre { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
@media (max-width: 600px) { .brief-ligne { grid-template-columns: 1fr; gap: 2px; } }

/* Objectifs hiérarchisés (onglet SWOT & stratégie) */
.objectifs { display: flex; flex-direction: column; gap: 12px; }
.obj-bande {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px;
  border-radius: 12px; cursor: pointer; transition: filter .15s ease;
}
.obj-bande:hover { filter: brightness(.97); }
.obj-primaire { background: #fbe9e3; }
.obj-secondaire, .obj-tertiaire { background: #fbf4dd; }
.obj-crayon { color: #e8711a; font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.obj-label { font-size: 14px; color: #3e4152; }
.obj-primaire .obj-label { font-weight: 600; }
.obj-texte { margin: .35rem 0 0; font-size: 14px; color: #5b6270; white-space: pre-line; }
.mi-table .mi-groupe td { background: #f5f6fa; padding: .5rem .75rem; }
.mi-table .pre-ligne { white-space: pre-line; }
.tf-etoiles { color: #f5b301; font-size: 15px; letter-spacing: 1px; }
.tf-etoiles .tf-etoile-vide { color: #e3e5ec; }
.tf-etoiles-mini { color: #f5b301; font-size: 11px; letter-spacing: 1px; }
.tf-table .tf-mois { vertical-align: top; background: #fafbfe; }
.tf-table .tf-mois .btn { padding: 0 .5rem; line-height: 1.5; opacity: .5; }
.tf-table .tf-mois:hover .btn { opacity: 1; }
.tf-table .tf-vide-ligne td { color: #b5b9c6; }
.tf-carte h6 { margin: .15rem 0 .2rem; font-size: 14px; }
.tf-carte p { margin: 0; font-size: 12.5px; color: #7e8299; }
.frise-mois.vide .mois-titre { opacity: .45; }
.frise-mois.vide .tf-vide {
  border: 1.5px dashed #e3e6ef; border-radius: 14px; height: 64px;
}

/* ---------- Kanban (espace client) ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767px) { .kanban { grid-template-columns: 1fr; } }
.kanban-col { background: #f6f7fb; border-radius: 16px; padding: 14px; }
.kanban-col > h6 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  color: #7e8299; margin-bottom: 12px;
}
.kanban-carte {
  background: #fff; border-radius: 12px; padding: .85rem 1rem; margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
}
.kanban-carte h6 { font-size: 14px; margin-bottom: .3rem; }
.kanban-carte .meta { font-size: 12px; color: #7e8299; }

/* ---------- Espace client (page front, mobile-first) ---------- */
.ec-body { background: #f6f7fb; font-family: 'Poppins', sans-serif; color: #3e4152; }
.ec-topbar {
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid #eef0f4; padding: .65rem 0;
}
.ec-topbar img { height: 40px; }
.ec-wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px 60px; }
.ec-bloc { background: #fff; border-radius: 20px; padding: 1.5rem 1.6rem; margin-top: 22px; box-shadow: 0 6px 24px rgba(0,0,0,.04); }
.ec-bloc > h4 { font-size: 17px; font-weight: 600; margin-bottom: 1rem; }
.ec-bloc > h4 span { color: #b5b9c9; font-weight: 400; }
.ec-bloc-accent { border: 2px solid #f0821e; box-shadow: 0 6px 24px rgba(240,130,30,.10); }
/* Menu de l'espace client : un niveau, un onglet par catégorie */
.ec-menu { gap: 4px; margin-top: 18px; border-bottom: 1px solid #e9ecf2; flex-wrap: wrap; }
.ec-menu .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: #7e8299; font-weight: 500; font-size: 14px; padding: .55rem .9rem; }
.ec-menu .nav-link:hover { color: #3e4152; }
.ec-menu .nav-link.active { color: var(--ml-rouge); border-bottom-color: var(--ml-rouge); background: transparent; }
.ec-wrap .tab-pane > .ec-bloc:first-child { margin-top: 22px; }
.ec-hero { display: flex; align-items: center; gap: 18px; padding: 34px 0 6px; }
.ec-hero h1 { font-size: clamp(22px, 4vw, 32px); font-weight: 600; margin: 0; }
.ec-hero p { margin: 0; color: #7e8299; font-size: 14px; }
.btn-strategie {
  border: 1.5px solid #e3e6ef; background: #fff; border-radius: 30px;
  padding: .55rem 1.3rem; font-size: 14px; font-weight: 500; color: #3e4152;
  transition: all .15s ease;
}
.btn-strategie:hover { border-color: var(--ml-rouge); color: var(--ml-rouge); }
.ec-todo li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: .75rem 0; border-bottom: 1px solid #f0f1f6; list-style: none;
}
.ec-todo li:last-child { border-bottom: 0; }
.ec-todo .form-check-input { width: 1.25em; height: 1.25em; margin-top: .2em; cursor: pointer; }
.ec-todo .fait { text-decoration: line-through; color: #b5b9c9; }
.ec-todo .meta { font-size: 12px; color: #9aa0b4; display: block; }
.ec-footer { text-align: center; color: #b5b9c9; font-size: 12.5px; margin-top: 44px; }

/* ---------- Utilitaires (compléments Bootstrap) ---------- */
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }

/* ---------- Divers ---------- */
.stat-ico {
  width: 54px; height: 54px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 24px;
}
.table-atelier td, .table-atelier th { vertical-align: middle; }
.liste-simple li { padding: .7rem 0; border-bottom: 1px solid #f0f1f6; list-style: none; }
/* Listing des publications sous le calendrier marketing */
.ed-liste tbody tr[data-liste-post] { cursor: pointer; }
.ed-liste tbody tr[data-liste-post]:hover td { background: #fafbfe; }
.ed-liste .ed-liste-mois td { background: #f5f6fa; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #5b6270; padding: .45rem .75rem; }
.liste-simple li:last-child { border-bottom: 0; }
.date-bloc {
  width: 46px; flex: 0 0 auto; text-align: center; background: #f6f7fb;
  border-radius: 12px; padding: .35rem 0; line-height: 1.15;
}
.date-bloc b { font-size: 17px; display: block; color: #3e4152; }
.date-bloc span { font-size: 11px; color: #7e8299; }
.vide-etat { text-align: center; color: #9aa0b4; padding: 2.2rem 1rem; }
.vide-etat i { font-size: 34px; display: block; margin-bottom: .6rem; opacity: .5; }

/* =========================================================
   Agenda de production — grille semaine
   ========================================================= */
.ag-grille { display: flex; gap: 0; background: #fff; border-radius: 14px; overflow: hidden; }
.ag-heures { flex: 0 0 54px; border-right: 1px solid #f0f1f6; }
.ag-heure {
  font-size: 11px; color: #9aa0b4; text-align: right;
  padding-right: 6px; transform: translateY(-6px);
}
.ag-cols { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.ag-col { flex: 1 1 0; min-width: 128px; border-right: 1px solid #f0f1f6; }
.ag-col:last-child { border-right: 0; }
.ag-col-tete { height: 44px; text-align: center; padding-top: 6px; border-bottom: 1px solid #f0f1f6; }
.ag-jour { display: block; font-size: 11px; color: #9aa0b4; text-transform: uppercase; }
.ag-date { font-size: 15px; font-weight: 600; color: #3e4152; }
.ag-auj .ag-col-tete { background: var(--ml-rouge-pale); }
.ag-auj .ag-date { color: var(--ml-rouge-fonce); }
.ag-col-corps { position: relative; cursor: crosshair; }
.ag-ligne { position: absolute; left: 0; right: 0; border-top: 1px solid #f6f7fb; }
.ag-bloc {
  position: absolute; border-radius: 8px; padding: 4px 7px; overflow: hidden;
  cursor: pointer; transition: filter .12s ease;
}
.ag-bloc:hover { filter: brightness(.96); }
.ag-bloc-titre { font-size: 12px; font-weight: 600; line-height: 1.25; }
.ag-bloc-meta { font-size: 10.5px; color: #7e8299; line-height: 1.3; }
.ag-annule { opacity: .5; }
.ag-annule .ag-bloc-titre { text-decoration: line-through; }
.ag-pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.ag-histo {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid #f6f7fb; cursor: pointer;
}
.ag-histo:last-child { border-bottom: 0; }
.ag-histo:hover { background: #fafbfd; }
.ag-histo-date { font-size: 12px; color: #9aa0b4; flex: 0 0 128px; }
.ag-histo-titre { flex: 1 1 auto; font-size: 13px; color: #3e4152; }

/* Mobile : la grille défile horizontalement plutôt que d'écraser les colonnes */
@media (max-width: 991px) {
  .ag-col { min-width: 116px; }
  .ag-histo-date { flex-basis: 96px; }
}

/* Déplacement des sessions : `touch-action: none` empêche le défilement de la
   page de voler le geste sur écran tactile ; `user-select` évite la sélection
   de texte pendant le glissement à la souris. */
.ag-bloc { touch-action: none; user-select: none; -webkit-user-select: none; }
.ag-bloc.ag-drag {
  z-index: 5; cursor: grabbing; opacity: .9;
  box-shadow: 0 8px 20px rgba(62, 65, 82, .22);
}

/* Panneau « à caler » : vignettes de sessions de contrat non programmées */
.ag-acaler-corps { max-height: 640px; overflow-y: auto; }
.ag-acaler {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: #f6f7fb; border: 1px dashed #d4d7e3; border-radius: 10px;
  padding: .5rem .65rem; margin-bottom: .4rem; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.ag-acaler:hover { border-color: var(--ml-rouge); background: var(--ml-rouge-pale); }
.ag-acaler-prise { opacity: .4; }
.ag-acaler-nom { font-size: 13px; font-weight: 600; color: #3e4152; }
.ag-acaler-client { font-size: 11.5px; color: #7e8299; }
.ag-acaler-duree { font-size: 11px; color: #9aa0b4; margin-left: auto; }
.ag-acaler-rang {
  font-size: 10px; color: #7e8299; background: #fff;
  border-radius: 6px; padding: 0 .3rem;
}
.ag-fantome {
  position: fixed; z-index: 1080; pointer-events: none;
  min-width: 110px; padding: 4px 8px; border-radius: 8px;
  background: #e3f3ec; border-left: 3px solid #1e7d5a;
  font-size: 12px; font-weight: 600; color: #1e7d5a;
  box-shadow: 0 8px 20px rgba(62, 65, 82, .22);
}
.ag-col-corps.ag-cible { background: #f2fbf7; box-shadow: inset 0 0 0 2px #1e7d5a; }
.ag-acaler-lien {
  display: inline-block; font-size: 12.5px; color: #3e4152;
  background: #f6f7fb; border-radius: 8px; padding: .25rem .6rem;
  text-decoration: none; border: 1px solid transparent;
}
.ag-acaler-lien:hover { border-color: var(--ml-rouge); color: var(--ml-rouge-fonce); }

/* =========================================================
   Ajustements d'échelle et de mise en page (Maison Léon)
   ========================================================= */

/* Le template Acara dimensionne tout en rem sur une base de 16 px : barre
   latérale 21,5 rem, en-tête 7,5 rem, textes et espacements compris. Passer la
   base à 14 px compacte l'ensemble de façon homogène, sans retoucher règle par
   règle. Seul `padding-top` de la barre latérale était en px : on le repasse en
   rem pour qu'il suive la hauteur de l'en-tête. */
html { font-size: 13px; }
.deznav { padding-top: 7.5rem; }

/* Ces éléments-là sont figés EN PIXELS dans le template : ils ne suivent pas la
   réduction en rem, d'où un titre et un menu restés démesurés quand tout le
   reste avait rétréci. On les redimensionne explicitement.
   Sélecteurs volontairement longs : ils doivent l'emporter sur ceux d'Acara,
   qui portent déjà deux attributs. */
.header-left .dashboard_bar { font-size: 19px; }
.header-left .dashboard_bar span { font-size: 12px; }

[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li > a,
.deznav .metismenu > li > a {
  font-size: 13px;
  padding: 11px 26px;
}
.deznav .metismenu > li > a i { font-size: 17px; margin-right: 7px; }
.deznav .copyright { font-size: 11px; }

@media only screen and (max-width: 1400px) {
  [data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li > a {
    font-size: 13px;
    padding: 11px 20px;
  }
}

/* La grille de l'agenda est dimensionnée en pixels dans agenda.js (hauteur
   d'une heure) : elle ne suit pas la réduction en rem. On resserre les colonnes
   pour qu'elle reste cohérente avec le reste de l'interface. */
.ag-col { min-width: 108px; }
@media (max-width: 991px) { .ag-col { min-width: 100px; } }

/* Un seul logo. Le gabarit prévoit l'icône (.logo-abbr) à côté du nom
   (.brand-title) ; or le logo Maison Léon contient déjà les deux. On ne garde
   l'icône que lorsque le menu est replié — ou trop étroit pour le nom. */
.nav-header .logo-abbr { display: none; }
.nav-header .brand-title { max-width: 150px; }
#main-wrapper.menu-toggle .nav-header .logo-abbr { display: inline-block; }
@media only screen and (max-width: 1199px) {
  .nav-header .logo-abbr { display: inline-block; }
}

/* Cartes clients : l'espacement vient des gouttières de la grille. La marge
   basse par défaut de .card s'ajoutait à une carte déjà en h-100, ce qui
   décalait les hauteurs de colonne au lieu de séparer les cartes. */
#grille-clients > [class^="col-"] { margin-bottom: 1.5rem; }
#grille-clients .card { margin-bottom: 0; }

/* Vignettes de demandes ponctuelles : distinguées des produits récurrents
   par un fond plein plutôt qu'un pointillé (une demande n'a pas de rythme). */
.ag-acaler-demande { border-style: solid; background: #fff; }
.ag-acaler-cat {
  font-size: 10px; color: #7e8299; background: #eef0f6;
  border-radius: 6px; padding: 0 .35rem;
}
.ag-acaler-hc {
  font-size: 10px; color: #9a7400; background: #fdf4d6;
  border-radius: 6px; padding: 0 .35rem;
}
/* Cadre et état des demandes, repris du vocabulaire Notion */
.cadre-contrat      { background: #e3f3ec; color: #1e7d5a; }
.cadre-hors-contrat { background: #fdf4d6; color: #9a7400; }
.cadre-projet       { background: #eef0f6; color: #5b6079; }
/* Ligne de regroupement par état dans le listing des demandes */
.table-groupe td { background: #fafbfd; border-top: 1px solid #eef0f4; padding: .45rem .75rem; }

/* Tâches : ligne cliquable et fil de commentaires horodaté */
.ligne-tache { cursor: pointer; }
.ligne-tache:hover td { background: #fafbfd; }
.pastille-com {
  font-size: 11px; color: #7e8299; background: #eef0f6;
  border-radius: 8px; padding: 0 .4rem; margin-left: .4rem; white-space: nowrap;
}
.fil-com { max-height: 240px; overflow-y: auto; }
.com { border-left: 2px solid #eef0f4; padding: .35rem 0 .5rem .7rem; margin-bottom: .3rem; }
.com-tete { display: flex; gap: .5rem; align-items: center; font-size: 11.5px; }
.com-texte { font-size: 13px; color: #3e4152; margin-top: .15rem; }
/* Tâche archivée : présente pour l'historique, visuellement en retrait */
.s-archive { background: #f1f2f6; color: #9aa0b4; }

/* =========================================================
   Listing des tâches — présentation
   ========================================================= */
.carte-taches .table-taches { border-collapse: separate; border-spacing: 0; }
.table-taches thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: #9aa0b4; font-weight: 600; border-bottom: 1px solid #eef0f4;
  padding: .5rem .75rem; background: transparent;
}
.table-taches td { padding: .6rem .75rem; vertical-align: middle; border-top: 0; }

/* En-tête de groupe : repliable, toute la ligne est cliquable */
.grp-tete td {
  background: #f7f8fb; padding: .4rem .75rem;
  border-top: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4;
  cursor: pointer; user-select: none;
}
.grp-tete:hover td { background: #f1f3f8; }
.grp-chevron { color: #9aa0b4; margin-right: .45rem; transition: transform .15s ease; }
.grp-tete.replie .grp-chevron { transform: rotate(-90deg); }
.grp-nb { font-size: 11px; color: #9aa0b4; margin-left: .5rem; }

/* Lignes */
.ligne-tache td { border-bottom: 1px solid #f4f5f9; }
.ligne-tache:hover td { background: #fbfcfe; }
.tache-titre { font-size: 13.5px; font-weight: 500; color: #3e4152; }
.tache-note { font-size: 11.5px; color: #9aa0b4; margin-top: .1rem; }
.pastille-com {
  display: inline-block; min-width: 17px; text-align: center;
  font-size: 10px; font-weight: 600; color: #7e8299; background: #eef0f6;
  border-radius: 9px; padding: 0 .3rem; margin-left: .35rem; vertical-align: 1px;
}

/* Étiquettes */
.chip {
  display: inline-block; font-size: 11px; font-weight: 500;
  border-radius: 8px; padding: .2rem .55rem; white-space: nowrap;
}
.chip-cat { background: #f1f2f6; color: #6a708a; }
.chip-contrat      { background: #e3f3ec; color: #1e7d5a; }
.chip-hors-contrat { background: #fdf4d6; color: #9a7400; }
.chip-projet       { background: #eaf0fb; color: #3568b5; }

/* Personnes en initiales */
.qui { display: flex; gap: 3px; }
.ini-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: #eef0f6; color: #5b6079;
  font-size: 10px; font-weight: 600; cursor: default;
}

/* Boutons d'action discrets, révélés au survol de la ligne */
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: #b5b9c9;
  cursor: pointer; opacity: 0; transition: all .12s ease;
}
.ligne-tache:hover .btn-ico { opacity: 1; }
.btn-ico:hover { background: var(--ml-rouge-pale); border-color: #f3c9c7; color: var(--ml-rouge-fonce); }
.btn-ico:focus-visible { opacity: 1; outline: 2px solid var(--ml-rouge); outline-offset: 1px; }
@media (hover: none) { .btn-ico { opacity: 1; } }

/* Bascule « archivées » */
.bascule-archives {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  font-size: 12px; color: #7e8299; cursor: pointer;
  border: 1px solid #e3e6ef; border-radius: 20px; padding: .3rem .75rem;
  user-select: none;
}
.bascule-archives:hover { border-color: var(--ml-rouge); color: var(--ml-rouge-fonce); }
.bascule-archives input { accent-color: var(--ml-rouge); margin: 0; }
.bascule-archives:has(input:checked) {
  background: var(--ml-rouge-pale); border-color: var(--ml-rouge); color: var(--ml-rouge-fonce);
}

/* =========================================================
   Calendrier éditorial et pilotage semaine
   ========================================================= */
.ed-table th, .ed-table td { border-top: 0; border-bottom: 1px solid #f0f1f6; }
.ed-table thead th {
  text-align: center; padding: .5rem .35rem; border-bottom: 1px solid #eef0f4;
}
.ed-jour { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .6px; color: #9aa0b4; }
.ed-date { font-size: 14px; font-weight: 600; color: #3e4152; }
.ed-table thead th.ed-auj { background: var(--ml-rouge-pale); border-radius: 10px 10px 0 0; }
.ed-table thead th.ed-auj .ed-date { color: var(--ml-rouge-fonce); }
.ed-client {
  width: 150px; min-width: 130px; font-size: 13px; font-weight: 500;
  vertical-align: middle !important; background: #fafbfd;
}
.ed-client-lien { color: #3e4152; text-decoration: none; }
.ed-client-lien:hover { color: var(--ml-rouge); }
.ed-case { position: relative; vertical-align: top; padding: .4rem .35rem; min-width: 116px; }
.ed-case:hover { background: #fbfcfe; }
.ed-post {
  border-radius: 9px; padding: .35rem .5rem; margin-bottom: .25rem;
  cursor: pointer; font-size: 11.5px; line-height: 1.3;
}
.ed-post:hover { filter: brightness(.96); }
.ed-post-sujet { display: block; font-weight: 600; }
/* Heure de publication, en tête du sujet : donne l'ordre de la journée */
.ed-heure {
  display: inline-block; margin-right: 4px; padding: 1px 4px; border-radius: 4px;
  background: rgba(62,65,82,.09); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2px; vertical-align: 1px;
}
.ed-post-res { opacity: .75; font-size: 10px; }
.ed-plus {
  width: 100%; border: 1px dashed #e0e3ed; background: transparent; color: #c3c7d4;
  border-radius: 8px; font-size: 13px; line-height: 1; padding: .2rem 0;
  cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.ed-case:hover .ed-plus { opacity: 1; }
.ed-plus:hover { border-color: var(--ml-rouge); color: var(--ml-rouge); }
@media (hover: none) { .ed-plus { opacity: 1; } }

/* Calendrier mensuel : le mois entier d'un client (fiche + espace client) */
.ed-mois { table-layout: fixed; }
.ed-mois th, .ed-mois td { border-top: 0; border-bottom: 1px solid #f0f1f6; }
.ed-mois thead th { text-align: center; padding: .45rem .3rem; background: transparent; }
.ed-jour-case {
  position: relative; vertical-align: top; height: 104px; width: 20%;
  padding: .35rem .35rem 1.2rem; border-left: 1px solid #f4f5f9;
}
.ed-jour-case:first-child { border-left: 0; }
.ed-jour-case:hover { background: #fbfcfe; }
.ed-num { display: block; font-size: 11px; font-weight: 600; color: #8b90a3; margin-bottom: .25rem; }
.ed-hors-mois { background: #fcfcfd; }
.ed-hors-mois .ed-num { color: #ccd0dc; }
.ed-jour-auj { background: var(--ml-rouge-pale); }
.ed-jour-auj .ed-num { color: var(--ml-rouge-fonce); }
.ed-jour-case .ed-plus { position: absolute; left: .35rem; right: .35rem; bottom: .3rem; width: auto; }
/* Le « + » n'apparaît qu'au survol de SA case — sans cette règle il restait
   invisible dans la vue mois, qui n'utilise pas la classe .ed-case. */
.ed-jour-case:hover .ed-plus { opacity: 1; }

/* Glisser-déposer d'un post d'une case à l'autre */
.ed-post[draggable="true"] { cursor: grab; }
.ed-post[draggable="true"]:active { cursor: grabbing; }
.ed-drag { opacity: .4; }
.ed-survol {
  background: var(--ml-rouge-pale) !important;
  box-shadow: inset 0 0 0 2px var(--ml-rouge);
  border-radius: 8px;
}

/* Pastilles de canaux : Facebook, Instagram, article… */
.ed-canaux { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.ed-canal {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .3px;
  line-height: 1; padding: 3px 5px; border-radius: 5px;
}
.ed-post-fige { cursor: default; }
/* Vignette colorée à la couleur du collaborateur (tableau de bord).
   Le fond et la bordure sont posés en style inline, la couleur venant de la
   fiche Équipe : ici seulement ce qui ne dépend pas de la personne. */
.ed-post-qui { color: #3e4152; border-radius: 9px; }
.ed-qui-nom {
  display: inline-flex; align-items: center; margin-left: auto;
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  font-size: 9.5px; font-weight: 700; letter-spacing: .2px;
}

/* Vue transversale (tableau de bord) : le client avant le sujet */
.ed-post-client {
  display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; opacity: .7; margin-bottom: 1px;
}
/* Bas d'une vignette : canaux à gauche, responsable à droite */
.ed-post-bas { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.ed-post-bas .ed-canaux { margin-top: 0; flex: 1; }
.ed-qui {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 15px; padding: 0 3px; border-radius: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px; margin-left: auto;
}
.ed-legende {
  display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .8rem;
  font-size: 12px; color: #7e8299;
}
.ed-legende span { display: inline-flex; align-items: center; gap: 5px; }

/* Choix des canaux dans le formulaire d'un post */
.ed-canaux-choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.ed-canal-choix {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1.5px solid #e6e9f0; border-radius: 30px; padding: .3rem .75rem;
  font-size: 12.5px; color: #5b6270; transition: all .14s ease;
}
.ed-canal-choix input { accent-color: var(--c); margin: 0; }
.ed-canal-choix:hover { border-color: var(--c); }
.ed-canal-choix:has(input:checked) {
  border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 8%, #fff);
  font-weight: 600;
}

/* Barre du calendrier dans l'espace client */
.ec-cal-barre { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }

/* Pense-bêtes du tableau de bord */
.memo-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 430px; }
.memo {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .2rem; border-bottom: 1px solid #f4f5f9;
}
.memo:last-child { border-bottom: 0; }
.memo-case input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--ml-rouge); cursor: pointer; }
.memo-corps { flex: 1; cursor: pointer; min-width: 0; }
.memo-corps p { margin: 0; font-size: 13px; color: #3e4152; line-height: 1.4; }
.memo-corps small { font-size: 11px; color: #9298ad; }
.memo-de { font-style: italic; margin-left: .35rem; }
.memo-fait .memo-corps p { text-decoration: line-through; color: #b5b9c9; }
.memo-fait .memo-corps small { opacity: .55; }
.memo-corps:hover p { color: var(--ml-rouge); }

/* Confirmation discrète en tête d'un bloc */
.note-breve {
  background: #e2f7e9; color: #1a7d43; border-radius: 10px;
  padding: .5rem .85rem; font-size: 13px; margin-bottom: .75rem;
}

/* Grille horaire : la semaine en agenda, 7 jours × heures de la journée.
   Une gouttière d'heures à gauche, puis sept colonnes de largeur égale. */
.ed-hor { --gouttiere: 54px; font-size: 12px; }
/* Sept colonnes : lundi → dimanche (voir JOURS dans edito.js) */
.ed-hor-entete, .ed-hor-bande, .ed-hor-corps {
  display: grid; grid-template-columns: var(--gouttiere) repeat(7, minmax(0, 1fr));
}
/* Colonnes de week-end, à peine grisées */
.ed-we { background: #f9fafc; }
.ed-hor-gouttiere { display: flex; align-items: center; justify-content: flex-end; padding-right: .5rem; }
.ed-hor-jour { text-align: center; padding: .3rem 0 .45rem; border-left: 1px solid #f4f5f9; }
.ed-hor-jour.ed-hor-auj { background: var(--ml-rouge-pale); border-radius: 8px 8px 0 0; }
.ed-hor-jour.ed-hor-auj .ed-date { color: var(--ml-rouge-fonce); }

/* Bande « À caler » : ce qui n'a pas d'heure, et la cible pour en retirer une */
.ed-hor-bande { border-top: 1px solid #eceef4; border-bottom: 2px solid #eceef4; }
.ed-hor-libre {
  min-height: 34px; padding: .25rem; border-left: 1px solid #f4f5f9;
}

.ed-hor-corps { position: relative; }
.ed-hor-echelle { position: relative; }
.ed-hor-h { position: relative; }
.ed-hor-h span {
  position: absolute; top: -7px; right: .5rem; font-size: 10px; color: #b5b9c9;
}
.ed-hor-col { position: relative; border-left: 1px solid #f4f5f9; }
.ed-hor-col.ed-hor-auj { background: #fffafa; }
.ed-hor-ligne { position: absolute; left: 0; right: 0; border-top: 1px solid #f4f5f9; }
.ed-hor-bloc { position: absolute; }
.ed-hor-bloc .ed-post { margin-bottom: 0; }

/* Repère qui suit le curseur pendant un glissement, avec l'heure d'arrivée */
.ed-hor-guide {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed var(--ml-rouge); pointer-events: none; z-index: 5;
}
.ed-hor-guide span {
  position: absolute; top: -8px; left: 2px; padding: 1px 5px; border-radius: 5px;
  background: var(--ml-rouge); color: #fff; font-size: 9.5px; font-weight: 700;
}
.ed-hor-col.ed-survol, .ed-hor-libre.ed-survol {
  background: var(--ml-rouge-pale); box-shadow: inset 0 0 0 2px var(--ml-rouge);
  border-radius: 8px;
}

/* Pilotage : matrice clients × semaines */
.pil-table th, .pil-table td { border-top: 0; border-bottom: 1px solid #f0f1f6; }
.pil-table thead th { text-align: center; padding: .5rem .4rem; }
.pil-sem { display: block; font-size: 11px; color: #6a708a; }
.pil-num { font-size: 10px; color: #b5b9c9; }
.pil-client {
  width: 170px; min-width: 140px; font-size: 13px; font-weight: 500;
  background: #fafbfd; vertical-align: middle !important;
}
.pil-case { text-align: center; padding: .35rem; }
.pil-courante { background: #fdf7f7; }
.pil-btn {
  width: 100%; border: 1px solid transparent; border-radius: 20px;
  padding: .25rem .5rem; font-size: 11.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: filter .12s ease;
}
.pil-btn:hover { filter: brightness(.95); }
.pil-nb {
  display: inline-block; margin-left: .35rem; font-size: 9.5px;
  background: rgba(255,255,255,.65); border-radius: 7px; padding: 0 .3rem;
}
.pil-todo  { background: #eef0f4; color: #6a708a; }
.pil-doing { background: #e3efff; color: #1a66c9; }
.pil-valid { background: #fdeaf3; color: #b4318a; }
.pil-done  { background: #e2f7e9; color: #1e9a4e; }
.pil-pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.pil-pastille.pil-todo  { background: #b8bec9; }
.pil-pastille.pil-doing { background: #1a66c9; }
.pil-pastille.pil-valid { background: #b4318a; }
.pil-pastille.pil-done  { background: #1e9a4e; }

/* =========================================================
   Tuiles d'indicateurs — rangée compacte, partagée par les écrans
   ========================================================= */
.kpi-rangee {
  display: grid; gap: 12px; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
}
.kpi {
  background: #fff; border: 1px solid #eef0f4; border-radius: 14px;
  padding: .75rem .9rem; display: flex; align-items: center; gap: .8rem;
}
.kpi-ico {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #f1f2f6; color: #7e8299;
}
.kpi-txt { min-width: 0; }
.kpi-val { display: block; font-size: 21px; font-weight: 600; line-height: 1.15; color: #3e4152; }
.kpi-lab {
  display: block; font-size: 11px; color: #9aa0b4; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .5px;
}
.kpi-alerte .kpi-ico { background: var(--ml-rouge-pale); color: var(--ml-rouge-fonce); }
.kpi-alerte .kpi-val { color: var(--ml-rouge-fonce); }
.kpi-ok .kpi-ico { background: #e2f7e9; color: #1e9a4e; }
@media (max-width: 767px) {
  .kpi-rangee { grid-template-columns: 1fr 1fr; }
  .kpi { padding: .6rem .7rem; gap: .6rem; }
  .kpi-val { font-size: 18px; }
}

/* =========================================================
   Animations et transitions
   Volontairement courtes (120-260 ms) : elles doivent accompagner
   le geste, pas le faire attendre.
   ========================================================= */

/* Repli des groupes de tâches */
@keyframes ligneEntre {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}
.ligne-entre { animation: ligneEntre .24s cubic-bezier(.22,.61,.36,1) both; }
.ligne-sort {
  opacity: 0; transform: translateY(-5px);
  transition: opacity .13s ease, transform .13s ease;
}
.grp-tete td, .ligne-tache td { transition: background-color .15s ease; }

/* Tuiles d'indicateurs : léger soulèvement au survol */
.kpi { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(62,65,82,.07);
  border-color: #e3e6ef;
}

/* Étiquettes, boutons, onglets */
.chip, .badge-statut { transition: filter .14s ease; }
.chip:hover { filter: brightness(.97); }
.nav-tabs .nav-link { transition: color .16s ease, border-color .16s ease; }
.btn { transition: background-color .16s ease, border-color .16s ease,
                   color .16s ease, transform .12s ease; }
.btn:active { transform: scale(.97); }

/* Calendrier éditorial */
.ed-post { transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; }
.ed-post:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(62,65,82,.10); }
.pil-btn { transition: filter .14s ease, transform .12s ease; }
.pil-btn:active { transform: scale(.96); }

/* Vignettes « à caler » et blocs d'agenda */
.ag-acaler { transition: border-color .15s ease, background-color .15s ease, opacity .12s ease; }
.ag-col-corps { transition: background-color .14s ease, box-shadow .14s ease; }

/* Apparition douce d'un panneau qui vient de se charger */
@keyframes bloctEntre {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.bloc-entre { animation: bloctEntre .26s cubic-bezier(.22,.61,.36,1) both; }

/* Respect du réglage système : aucune animation si l'utilisateur les refuse */
@media (prefers-reduced-motion: reduce) {
  .ligne-entre, .bloc-entre { animation: none; }
  .kpi:hover, .ed-post:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}
.eq-couleur { display: inline-block; width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid rgba(0,0,0,.06); }

/* =========================================================
   Espace client — tableau des échanges
   ========================================================= */
.ec-kanban {
  display: grid; gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.ec-carte-cale { font-size: 11px; color: #1e9a4e; margin: 2px 0 4px; }
.ec-col { background: #f6f7fb; border-radius: 14px; padding: 10px; min-height: 90px; }
.ec-col-tete {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: #7e8299; margin-bottom: 9px; padding: 0 2px;
}
.ec-col-nb {
  background: #fff; border-radius: 8px; padding: 0 .4rem;
  font-size: 10px; color: #9aa0b4;
}
.ec-carte {
  background: #fff; border-radius: 11px; padding: .6rem .7rem; margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(62,65,82,.05); cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.ec-carte:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(62,65,82,.10); }
.ec-carte-titre { font-size: 13px; font-weight: 500; color: #3e4152; line-height: 1.35; }
.ec-carte-pied {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-top: .4rem; font-size: 10.5px; color: #9aa0b4;
}
.ec-tag {
  background: var(--ml-rouge-pale); color: var(--ml-rouge-fonce);
  border-radius: 7px; padding: 0 .35rem;
}
.ec-vide { text-align: center; color: #c3c7d4; font-size: 12px; padding: .5rem 0; }

/* Sur mobile le tableau défile horizontalement : six colonnes écrasées
   seraient illisibles. */
@media (max-width: 900px) {
  .ec-kanban {
    grid-template-columns: repeat(6, 78vw);
    overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x mandatory;
  }
  .ec-col { scroll-snap-align: start; }
}

/* Déplacement des cartes du tableau d'échanges (vue agence) */
.ec-carte-mobile { touch-action: none; user-select: none; -webkit-user-select: none; }
.ec-carte-prise {
  position: fixed; z-index: 1080; pointer-events: none;
  transform: rotate(1.5deg); cursor: grabbing;
  box-shadow: 0 14px 32px rgba(62,65,82,.22);
}
.ec-col-cible { transition: background-color .14s ease, box-shadow .14s ease; }
.ec-col-survol {
  background: var(--ml-rouge-pale);
  box-shadow: inset 0 0 0 2px var(--ml-rouge);
}

/* Carte masquée au client : présente pour l'agence, en retrait visuel */
.ec-carte-masquee { opacity: .62; border: 1px dashed #d4d7e3; box-shadow: none; }
.ec-masquer {
  display: flex; align-items: center; gap: .35rem; margin: .45rem 0 0;
  font-size: 10.5px; color: #9aa0b4; cursor: pointer; user-select: none;
}
.ec-masquer input { accent-color: var(--ml-rouge); margin: 0; width: 13px; height: 13px; }
.ec-masquer input:disabled { opacity: .4; cursor: not-allowed; }

/* Carte partagée avec le client : liseré vert, lisible d'un coup d'œil */
.ec-carte-partagee { border-left: 3px solid #1e7d5a; }
.ec-tag-vert { background: #e3f3ec; color: #1e7d5a; }
.ec-puce { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .3rem; }
.ec-puce-verte { background: #1e7d5a; }
.ec-puce-grise { background: #d4d7e3; }

/* Rappel « À compléter » de la vue d'ensemble */
.manque {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: 10px; margin-bottom: .3rem;
  cursor: pointer; transition: background-color .14s ease, transform .14s ease;
}
.manque:hover { background: #f7f8fb; transform: translateX(2px); }
.manque-puce { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.manque-haut  .manque-puce { background: var(--ml-rouge); }
.manque-moyen .manque-puce { background: #e2a33a; }
.manque-bas   .manque-puce { background: #c3c7d4; }
.manque-txt { flex: 1 1 auto; font-size: 13px; color: #3e4152; }
.manque-fleche { color: #c3c7d4; font-size: 17px; line-height: 1; }

/* =========================================================
   Liens & technique
   ========================================================= */
.site-carte { border: 1px solid #eef0f4; border-radius: 14px; padding: .9rem 1rem; margin-bottom: .8rem; }
.site-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.site-nom { font-size: 14px; font-weight: 600; color: #3e4152; display: flex; align-items: center; gap: .5rem; }
.site-infos { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .5rem; font-size: 12px; color: #6a708a; }
.site-infos b { color: #9aa0b4; font-weight: 500; margin-right: .3rem; }
.exp-proche { color: #9a7400; font-weight: 600; }
.exp-passe  { color: var(--ml-rouge-fonce); font-weight: 600; }
.acces-liste { margin-top: .7rem; border-top: 1px solid #f4f5f9; padding-top: .6rem; }
.acces-ligne {
  display: grid; grid-template-columns: 1.1fr 1.1fr 1fr auto;
  gap: .6rem; align-items: center; padding: .3rem 0; font-size: 12.5px;
}
.acces-lib { font-weight: 500; color: #3e4152; }
.acces-val { color: #6a708a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.acces-actions { display: flex; gap: .6rem; }
.acces-actions button, .acces-actions a {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ml-rouge);
}
@media (max-width: 767px) { .acces-ligne { grid-template-columns: 1fr; gap: .15rem; } }

/* Liens dans l'espace client */
.ec-liens { display: flex; flex-wrap: wrap; gap: .6rem; }
.ec-liens-groupe + .ec-liens-groupe { margin-top: 14px; }
.ec-liens-titre { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #7e8299; margin-bottom: 8px; }
.table-taches .lien-groupe td { background: #f5f6fa; padding: .45rem .75rem; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #5b6270; }
.ec-lien {
  display: flex; flex-direction: column; gap: .1rem;
  border: 1.5px solid #e3e6ef; border-radius: 14px; padding: .6rem 1rem;
  text-decoration: none; color: #3e4152; transition: all .15s ease;
}
.ec-lien:hover { border-color: var(--ml-rouge); transform: translateY(-2px); }
.ec-lien-lib { font-size: 13.5px; font-weight: 500; }
.ec-lien-cat { font-size: 11px; color: #9aa0b4; }

/* ---------- Search Console ----------
   Courbe mensuelle en SVG plutôt qu'une bibliothèque de graphes : deux
   polylignes et des repères suffisent, et le rendu suit la largeur de la
   carte sans script de redimensionnement. */
.gsc-courbe {
  width: 100%;
  height: 190px;
  display: block;
  overflow: visible;
}
.gsc-axe {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.gsc-axe span { flex: 1; text-align: center; }
.gsc-axe .gsc-axe-vide { color: transparent; }

/* ---------- Lisibilité des champs de saisie ----------
   Acara écrit dans les champs en #7e7e7e (--bs-body-color), soit exactement la
   teinte de son texte secondaire : ce qu'on tape se lit alors aussi pâle qu'une
   indication de saisie, et on ne distingue plus un champ rempli d'un champ vide.
   On sépare les deux rôles — le texte saisi passe à l'encre, l'indication reste
   grise mais plus douce. `opacity: 1` est nécessaire : Firefox éclaircit les
   placeholders par défaut, ce qui annulerait le réglage. */
.form-control,
.form-select,
select.form-control,
textarea.form-control {
  color: #2f3242;
}
.form-control:focus,
.form-select:focus {
  color: #2f3242;
}
.form-control::placeholder,
textarea.form-control::placeholder {
  color: #a8adbd;
  opacity: 1;
}
.form-control::-webkit-input-placeholder { color: #a8adbd; }
.form-control::-moz-placeholder { color: #a8adbd; opacity: 1; }
.form-control:-ms-input-placeholder { color: #a8adbd; }