/* ===== Couleurs et polices de MRC Communication ===== */
:root {
  --ardoise: #55727d;
  --ardoise-fonce: #3f5760;
  --ardoise-clair: #e3eaec;
  --creme: #f0eee5;
  --fond: #f0eee5;
  --creme-fonce: #e6e2d4;
  --caramel: #c8a47b;
  --caramel-clair: #f3e9dc;
  --blanc: #ffffff;
  --texte: #2f3e44;
  --texte-doux: #6f7f85;
  --ombre: 0 6px 24px rgba(85, 114, 125, 0.09);
  --rayon: 18px;
  --titre: 'Bebas Neue', sans-serif;
  --corps: 'Raleway', sans-serif;
  --petit: 'Open Sans', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ===== Mise en page générale ===== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ardoise);
  color: var(--creme);
  display: flex;
  flex-direction: column;
  padding: 32px 18px 24px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; flex-direction: column; padding: 0 12px 32px; }
.bouton-menu { display: none; }
.brand-mark { font-family: var(--titre); font-size: 2.6rem; letter-spacing: 3px; line-height: 1; }
.brand-sub { font-family: var(--corps); font-weight: 300; letter-spacing: 4px; text-transform: uppercase; font-size: .72rem; color: var(--caramel); margin-top: 4px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--creme);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  opacity: .82;
  transition: background .2s, opacity .2s;
}
.nav a:hover { background: rgba(240, 238, 229, .1); opacity: 1; }
.nav a.active { background: var(--creme); color: var(--ardoise-fonce); opacity: 1; }
.sidebar-foot { margin-top: auto; padding: 0 12px; font-size: .78rem; font-family: var(--petit); display: flex; flex-direction: column; gap: 10px; }
.sidebar-foot span { opacity: .6; }
.lien-sauvegarde { background: rgba(240, 238, 229, .12); color: var(--creme); border: none; border-radius: 10px; padding: 8px 12px; font-family: var(--corps); font-weight: 600; font-size: .8rem; cursor: pointer; }
.lien-sauvegarde:hover { background: rgba(240, 238, 229, .2); }
.etat-synchro { font-size: .7rem; opacity: .7; }
.etat-synchro[data-etat="erreur"] { color: #f4c7bb; opacity: 1; }
button.ns-retour { background: none; border: none; text-align: left; cursor: pointer; font-family: var(--corps); }
body.mode-connexion .sidebar { display: none; }
.connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.connexion-carte { background: var(--blanc); border-radius: 22px; padding: 36px 32px; width: min(420px, 100%); box-shadow: var(--ombre); }
.connexion-marque { padding: 0 0 18px; }
.connexion-marque .brand-mark { color: var(--ardoise); }
.connexion-carte h1 { font-family: var(--titre); font-weight: 400; font-size: 2.4rem; letter-spacing: 1px; color: var(--ardoise); margin: 0; }
.connexion-carte > .doux { margin: 4px 0 20px; font-size: .9rem; }
.champs-connexion { display: flex; flex-direction: column; gap: 12px; }
.champs-connexion input { font-family: var(--corps); font-size: 1rem; border: 1px solid var(--creme-fonce); border-radius: 12px; padding: 12px 14px; }
.champs-connexion input:focus { outline: 2px solid var(--caramel); outline-offset: -1px; }
.champs-connexion .btn { justify-content: center; padding: 13px; font-size: 1rem; margin-top: 6px; }
.mdp-zone { position: relative; display: block; }
.mdp-zone input { width: 100%; padding-right: 88px !important; }
.voir-mdp { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: var(--creme); color: var(--ardoise-fonce); font-family: var(--corps); font-weight: 700; font-size: .78rem; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.voir-mdp:hover { background: var(--creme-fonce); }
.erreur-connexion { color: #a35d4f; font-size: .86rem; margin: 0; min-height: 1em; }
.liste-comptes { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 8px; }
.compte { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--creme); border-radius: 12px; padding: 12px 14px; }
.compte > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.compte .doux, .compte-id { font-size: .8rem; }
.compte-boutons { display: flex; gap: 6px; }
.mdp-nouveau { font-family: monospace; font-size: 1.2rem; background: var(--creme); padding: 4px 10px; border-radius: 8px; }
.boutons-sauvegarde { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.boutons-sauvegarde label { cursor: pointer; }
.rappel-sauvegarde { display: block; width: 100%; text-align: left; margin-bottom: 14px; padding: 10px 16px; border-radius: 12px; border: 1px dashed var(--creme-fonce); background: transparent; color: var(--texte-doux); font-family: var(--corps); font-size: .86rem; font-weight: 600; cursor: pointer; }
.rappel-sauvegarde:hover { background: var(--blanc); color: var(--ardoise-fonce); }
.lbl .court { display: none; }
.lien-ns { color: #04123f; background: #fec40b; text-decoration: none; font-weight: 700; border-radius: 10px; padding: 8px 12px; text-align: center; font-family: var(--corps); }
.lien-ns:hover { filter: brightness(1.05); }

.main { flex: 1; min-width: 0; }
.page { max-width: 1240px; margin: 0 auto; padding: 44px 40px 60px; animation: apparition .3s ease; }
.page.sans-animation { animation: none; }
.page.pleine-largeur { max-width: 1680px; }
@keyframes apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== En-tête de page ===== */
.entete { margin-bottom: 32px; }
.entete .surtitre { font-family: var(--petit); font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--caramel); font-weight: 600; }
.entete h1 { font-family: var(--titre); font-weight: 400; font-size: 3rem; letter-spacing: 1.5px; color: var(--ardoise); margin: 2px 0 4px; line-height: 1.05; }
.entete p { margin: 0; color: var(--texte-doux); }

/* ===== Cartes ===== */
.grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 24px;
  box-shadow: var(--ombre);
}
.carte h2 {
  font-family: var(--titre); font-weight: 400; letter-spacing: 1px;
  font-size: 1.6rem; color: var(--ardoise); margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}

/* ===== Page vide (en attendant) ===== */
.vide {
  text-align: center;
  padding: 56px 24px;
  border: 2px dashed var(--creme-fonce);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .5);
}
.vide h3 { font-family: var(--titre); font-weight: 400; font-size: 1.7rem; letter-spacing: 1px; color: var(--ardoise); margin: 10px 0 6px; }
.vide p { color: var(--texte-doux); margin: 0 auto; max-width: 420px; }
.carte .vide { padding: 28px 16px; border-width: 1.5px; }
.carte .vide p { font-size: .92rem; }

/* ===== Boutons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer;
  font-family: var(--corps); font-weight: 600; font-size: .92rem;
  padding: 11px 20px; border-radius: 999px;
  background: var(--ardoise); color: var(--creme);
  transition: background .2s, transform .1s;
}
.btn:hover { background: var(--ardoise-fonce); }
.btn:active { transform: scale(.97); }
.btn.doux { background: var(--caramel); color: var(--blanc); }
.btn.doux:hover { background: #b8925f; }

/* ===== Boutons (variantes) ===== */
.btn.secondaire { background: var(--blanc); color: var(--ardoise-fonce); box-shadow: inset 0 0 0 1px var(--creme-fonce); }
.btn.secondaire:hover { background: var(--creme); }
.btn.discret { background: transparent; color: var(--texte-doux); box-shadow: inset 0 0 0 1px var(--creme-fonce); }
.btn.discret:hover { color: var(--ardoise-fonce); background: var(--creme); }
.btn.petit { padding: 7px 13px; font-size: .82rem; }
.btn.mini { padding: 4px 10px; font-size: .78rem; }
.btn.lien-danger { background: transparent; color: #a35d4f; padding-left: 0; }
.btn.lien-danger:hover { background: transparent; text-decoration: underline; }
.lien { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--ardoise); text-decoration: underline; text-underline-offset: 3px; }
.alerte { color: #a35d4f; }
.doux { color: var(--texte-doux); }

/* ===== En-tête avec bouton ===== */
.entete-action { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.vide-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

/* ===== Prospection : le pipeline ===== */
.pipeline { display: flex; gap: 6px; margin-bottom: 14px; }
.seg {
  flex: 1 1 0; min-width: 0; min-height: 76px;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  border: 1px solid var(--creme-fonce); border-radius: 14px; padding: 12px 14px;
  background: var(--blanc); color: var(--texte); cursor: pointer;
  font-family: var(--corps); transition: flex-grow .35s ease, transform .1s;
}
.seg:hover { transform: translateY(-1px); }
.seg .n { font-family: var(--titre); font-size: 2rem; line-height: 1; letter-spacing: 1px; }
.seg .l { font-size: .78rem; color: var(--texte-doux); line-height: 1.2; font-weight: 500; }
.seg.choisi { outline: 2px solid var(--ardoise); outline-offset: -2px; }
.seg.st-1 { background: #f6efe6; }
.seg.st-2 { background: #efe2d0; }
.seg.st-3 { background: #dfe7e9; }
.seg.st-4 { background: #c9d6da; }
.seg.st-5 { background: var(--ardoise); color: var(--creme); border-color: var(--ardoise); }
.seg.st-5 .l { color: var(--creme); opacity: .85; }
.seg.st-6 { background: transparent; border-style: dashed; }

.resume { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: var(--texte-doux); font-size: .92rem; margin-bottom: 18px; }
.resume strong { color: var(--texte); }
.resume .alerte strong { color: inherit; }

/* ===== Prospection : les filtres ===== */
.filtres-barre { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(130px, 1fr)) auto auto; gap: 8px; align-items: center; margin-bottom: 16px; }
.filtres-barre input[type=search], .filtres-barre select, .prospect select, .prospect input, .prospect textarea {
  width: 100%; font-family: var(--corps); font-size: .88rem; color: var(--texte);
  border: 1px solid var(--creme-fonce); background: var(--blanc); border-radius: 10px; padding: 8px 10px;
}
.filtres-barre input:focus, .filtres-barre select:focus, .prospect input:focus, .prospect select:focus, .prospect textarea:focus { outline: 2px solid var(--caramel); outline-offset: -1px; }
.case { display: flex; align-items: center; gap: 6px; font-size: .88rem; white-space: nowrap; cursor: pointer; }
.case input { accent-color: var(--ardoise); }

/* ===== Prospection : la liste ===== */
.liste-prospects { display: flex; flex-direction: column; gap: 8px; }
.prospect { background: var(--blanc); border-radius: 14px; border-left: 4px solid var(--creme-fonce); box-shadow: 0 2px 10px rgba(85, 114, 125, .06); }
.prospect.p-haute { border-left-color: var(--ardoise); }
.prospect.p-moyenne { border-left-color: var(--caramel); }
.prospect.p-basse { border-left-color: #e3cdb4; }
.prospect.gagne { background: #eef3f4; }
.prospect.perdu { opacity: .6; }
.prospect-ligne { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) 160px auto; gap: 14px; align-items: center; padding: 12px 14px; }
.prospect-nom { all: unset; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.prospect-nom b { font-weight: 700; font-size: 1rem; color: var(--ardoise-fonce); }
.prospect-nom:hover b { text-decoration: underline; text-underline-offset: 3px; }
.prospect-nom small { color: var(--texte-doux); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prospect-quand { font-size: .86rem; color: var(--texte-doux); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.badge-retard { background: #b8725f; color: #fff; border-radius: 6px; padding: 1px 8px; font-size: .74rem; font-weight: 600; }
.prospect .statut-choix { font-weight: 600; }
.statut-choix.st-5 { background: var(--ardoise); color: var(--creme); }
.prospect-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.relance-rapide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 12px; font-size: .84rem; }
.relance-rapide .etiquette { color: var(--texte-doux); white-space: nowrap; }
.relance-rapide.due .etiquette { color: #a35d4f; font-weight: 600; }
.prospect .relance-rapide input[type=date] { width: auto; padding: 5px 8px; font-size: .82rem; background: var(--creme); }
.boutons-jours { display: flex; gap: 4px; }
.prospect .relance-rapide .commentaire { flex: 1 1 220px; width: auto; border-color: transparent; background: transparent; }
.prospect .relance-rapide .commentaire:hover, .prospect .relance-rapide .commentaire:focus { border-color: var(--creme-fonce); background: var(--creme); }

.prospect-details { border-top: 1px solid var(--creme-fonce); padding: 18px; display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 24px; }
.prospect-details h3 { font-family: var(--titre); font-weight: 400; letter-spacing: 1px; font-size: 1.3rem; color: var(--ardoise); margin: 0 0 10px; }
.prospect-details dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: .88rem; }
.prospect-details dt { color: var(--texte-doux); }
.prospect-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.prospect-details a { color: var(--ardoise); }
.analyse { margin: 14px 0 0; padding: 10px 12px; background: var(--caramel-clair); border-radius: 10px; font-size: .86rem; }
.prospect-details .champ { margin-bottom: 10px; }
.prospect-details textarea { resize: vertical; }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.details-boutons { display: flex; gap: 8px; }

/* ===== Champs de formulaire ===== */
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ > span { font-size: .78rem; color: var(--texte-doux); font-weight: 500; }

/* ===== Fenêtre (ajouter / modifier) ===== */
body.fige { overflow: hidden; }
.fenetre-fond { position: fixed; inset: 0; background: rgba(47, 62, 68, .45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; animation: apparition .2s ease; }
.fenetre { background: var(--blanc); border-radius: 20px; width: min(680px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.fenetre-tete { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 8px; }
.fenetre-tete h2 { font-family: var(--titre); font-weight: 400; letter-spacing: 1px; font-size: 1.9rem; color: var(--ardoise); margin: 0; }
.fermer { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--texte-doux); }
.fenetre-corps { padding: 8px 24px 16px; overflow: auto; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.champs .large { grid-column: 1 / -1; }
.champs input, .champs select, .champs textarea { font-family: var(--corps); font-size: .92rem; color: var(--texte); border: 1px solid var(--creme-fonce); border-radius: 10px; padding: 9px 11px; background: var(--blanc); width: 100%; }
.champs input:focus, .champs select:focus, .champs textarea:focus { outline: 2px solid var(--caramel); outline-offset: -1px; }
.champs .erreur { border-color: #b8725f; }
.fenetre-pied { display: flex; align-items: center; gap: 8px; padding: 14px 24px 20px; border-top: 1px solid var(--creme-fonce); }
.espace { flex: 1; }

/* ===== Petit message en bas ===== */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ardoise-fonce); color: var(--creme); padding: 10px 18px; border-radius: 12px; font-size: .9rem; z-index: 60; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); animation: apparition .2s ease; }

/* ===== To-do ===== */
.ajout-tache { display: flex; gap: 8px; margin-bottom: 28px; background: var(--blanc); padding: 8px; border-radius: 16px; box-shadow: var(--ombre); }
.ajout-tache input { font-family: var(--corps); font-size: .95rem; color: var(--texte); border: none; background: transparent; padding: 10px 12px; border-radius: 10px; }
.ajout-tache input[name=titre] { flex: 1; min-width: 0; }
.ajout-tache input[type=date] { background: var(--creme); color: var(--texte-doux); }
.ajout-tache input:focus { outline: 2px solid var(--caramel); outline-offset: -2px; }
.ajout-tache select { font-family: var(--corps); font-size: .9rem; color: var(--ardoise-fonce); font-weight: 600; border: none; background: var(--caramel-clair); border-radius: 10px; padding: 0 10px; }
.pastille-pour { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.pour-client { background: var(--ardoise-clair); color: var(--ardoise-fonce); }
.carres-todo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.carre-todo { padding: 22px; border-top: 5px solid var(--caramel); }
.carre-clients { border-top-color: var(--ardoise); }
.carre-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.carre-tete h2 { margin: 0; }
.carre-tete p { margin: 0; font-size: .85rem; color: var(--texte-doux); }
.gros-compte { font-family: var(--titre); font-size: 2.4rem; line-height: 1; color: var(--caramel); }
.carre-clients .gros-compte { color: var(--ardoise); }
.carre-todo .ajout-tache { box-shadow: none; background: var(--creme); margin-bottom: 12px; padding: 6px; border-radius: 14px; flex-wrap: wrap; }
.carre-todo .ajout-tache input[type=date] { background: var(--blanc); }
.carre-todo .ajout-tache select { background: var(--blanc); padding: 8px 10px; }
.carre-todo .ajout-tache .btn { padding: 8px 16px; font-size: 1.1rem; }
.carre-todo .liste-taches { padding: 0; }
.carre-vide { color: var(--texte-doux); font-size: .9rem; text-align: center; padding: 18px 0 8px; margin: 0; }
.terminees { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--creme); font-family: var(--corps); font-weight: 600; color: var(--texte-doux); font-size: .9rem; }
.groupe-taches { margin-bottom: 26px; }
.groupe-taches h2 { font-family: var(--titre); font-weight: 400; letter-spacing: 1px; font-size: 1.5rem; color: var(--ardoise); margin: 0 0 10px; display: flex; align-items: center; gap: 14px; }
.groupe-retard h2 { color: #a35d4f; }
.compte { font-family: var(--petit); font-size: .78rem; background: var(--caramel-clair); color: var(--caramel); border-radius: 999px; padding: 2px 9px; letter-spacing: 0; vertical-align: middle; }
.lien-titre { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fleche { font-size: 1rem; color: var(--texte-doux); }
.petit-lien { font-family: var(--corps); font-size: .82rem; letter-spacing: 0; color: var(--texte-doux); }
.liste-taches { padding: 6px 8px; }
.tache { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; }
.tache + .tache { border-top: 1px solid var(--creme); }
.tache:hover { background: var(--creme); }
.coche { width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; border: 2px solid var(--ardoise); background: transparent; color: var(--creme); cursor: pointer; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.coche:hover { background: var(--ardoise-clair); }
.tache.faite .coche { background: var(--ardoise); }
.tache-titre { all: unset; cursor: pointer; flex: 1; min-width: 0; font-size: .95rem; overflow-wrap: anywhere; }
.tache.faite .tache-titre { text-decoration: line-through; color: var(--texte-doux); }
.tache-date { font-size: .8rem; color: var(--texte-doux); white-space: nowrap; font-family: var(--petit); }

/* ===== Clients : la liste ===== */
.grille-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.carte-client { background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); text-decoration: none; color: var(--texte); transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.carte-client:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(85, 114, 125, .16); }
.carte-client-image { height: 150px; background: var(--ardoise) center / cover; position: relative; }
.carte-client-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31, 42, 46, .55), rgba(31, 42, 46, .05)); }
.carte-client-logo { position: absolute; left: 18px; bottom: -28px; width: 72px; height: 72px; object-fit: contain; background: var(--blanc); border-radius: 18px; padding: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); z-index: 1; }
.initiales { position: absolute; left: 18px; bottom: -28px; width: 72px; height: 72px; border-radius: 18px; background: var(--caramel); color: var(--blanc); font-family: var(--titre); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; z-index: 1; letter-spacing: 1px; }
.carte-client-corps { padding: 40px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.carte-client-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.carte-client-tete h2 { font-family: var(--titre); font-weight: 400; font-size: 1.6rem; letter-spacing: 1px; color: var(--ardoise); margin: 0; line-height: 1.1; }
.carte-client-projet { margin: 0; font-size: .9rem; color: var(--texte-doux); }
.jx { color: var(--caramel); font-weight: 700; }
.carte-client-pied { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--texte-doux); font-family: var(--petit); }
.tag-statut { font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: var(--creme); color: var(--texte-doux); }
.tag-statut.statut-1 { background: var(--ardoise-clair); color: var(--ardoise-fonce); }
.tag-statut.statut-0 { background: var(--caramel-clair); color: #9a7448; }
.barre-avancement { height: 8px; background: var(--creme); border-radius: 999px; overflow: hidden; }
.barre-avancement span { display: block; height: 100%; background: linear-gradient(90deg, var(--caramel), var(--ardoise)); border-radius: 999px; transition: width .4s ease; }
.barre-avancement.grande { height: 12px; }

/* ===== Espace client : bannière ===== */
.retour { display: inline-block; color: var(--texte-doux); text-decoration: none; font-weight: 600; font-size: .9rem; margin-bottom: 14px; }
.retour:hover { color: var(--ardoise); }
.banniere-client { position: relative; border-radius: 22px; overflow: hidden; background: var(--ardoise) center 35% / cover; min-height: 250px; display: flex; align-items: flex-end; box-shadow: var(--ombre); }
.banniere-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(25, 34, 38, .88) 0%, rgba(25, 34, 38, .35) 60%, rgba(25, 34, 38, .15) 100%); }
.banniere-contenu { position: relative; display: flex; align-items: flex-end; gap: 22px; padding: 28px; width: 100%; color: var(--creme); flex-wrap: wrap; }
.banniere-logo { width: 110px; height: 110px; object-fit: contain; background: var(--blanc); border-radius: 24px; padding: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.initiales.grand { position: static; width: 110px; height: 110px; font-size: 2.6rem; }
.banniere-contenu h1 { font-family: var(--titre); font-weight: 400; font-size: 3rem; letter-spacing: 1.5px; margin: 2px 0 2px; line-height: 1; }
.banniere-contenu p { margin: 0; opacity: .9; }
.surtitre.clair { color: var(--caramel); font-family: var(--petit); font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
.compte-a-rebours { margin-left: auto; text-align: center; background: rgba(240, 238, 229, .14); backdrop-filter: blur(6px); border: 1px solid rgba(240, 238, 229, .25); border-radius: 18px; padding: 12px 20px; }
.compte-a-rebours .n { display: block; font-family: var(--titre); font-size: 2.6rem; line-height: 1; letter-spacing: 1px; color: var(--caramel); }
.compte-a-rebours .l { font-size: .78rem; opacity: .85; }

.onglets-client { display: flex; gap: 4px; margin: 22px 0; border-bottom: 1px solid var(--creme-fonce); overflow-x: auto; }
.onglets-client button { font-family: var(--corps); font-weight: 600; font-size: .95rem; background: none; border: none; padding: 12px 16px; color: var(--texte-doux); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets-client button:hover { color: var(--ardoise-fonce); }
.onglets-client button.choisi { color: var(--ardoise-fonce); border-bottom-color: var(--caramel); }
.onglet-lien { font-family: var(--corps); font-weight: 600; font-size: .95rem; padding: 12px 16px; color: var(--texte-doux); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglet-lien:hover { color: var(--ardoise-fonce); }
.onglet-lien.choisi { color: var(--ardoise-fonce); border-bottom-color: var(--caramel); }

/* ===== Espace client : vue d'ensemble ===== */
.grille-client { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.infos-liste { margin: 0 0 18px; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: .9rem; }
.infos-liste dt { color: var(--texte-doux); }
.infos-liste dd { margin: 0; overflow-wrap: anywhere; }
.infos-liste a { color: var(--ardoise); }
.avancement-bloc { background: var(--creme); border-radius: 14px; padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.avancement-tete { display: flex; justify-content: space-between; font-weight: 600; font-size: .9rem; }
.avancement-tete strong { font-family: var(--titre); font-weight: 400; font-size: 1.5rem; color: var(--ardoise); line-height: 1; }
.avancement-bloc input[type=range] { accent-color: var(--ardoise); width: 100%; }
.avancement-bloc small { font-size: .76rem; }
.supprimer-mini { background: none; border: none; color: var(--texte-doux); font-size: 1.2rem; cursor: pointer; opacity: 0; transition: opacity .15s; padding: 0 4px; }
.tache:hover .supprimer-mini, li:hover .supprimer-mini { opacity: 1; }
.ajout-compact { box-shadow: none; background: var(--creme); margin: 12px 0 0; padding: 5px; flex-wrap: wrap; }
.ajout-compact input { padding: 8px 10px; }
.ajout-compact input[type=date] { background: var(--blanc); }
.ajout-compact .btn { padding: 7px 14px; }
.mini-posts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mini-post { all: unset; cursor: pointer; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 2px 10px; padding: 10px; border-radius: 12px; background: var(--creme); }
.mini-post:hover { background: var(--creme-fonce); }
.mini-date { grid-row: span 2; font-family: var(--titre); font-size: 1.2rem; color: var(--caramel); align-self: center; letter-spacing: .5px; }
.mini-titre { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-post .etat { justify-self: start; }
.puces { margin: 0; padding-left: 18px; }
.puces li { margin-bottom: 6px; }
.petit-titre { font-family: var(--titre); font-weight: 400; font-size: 1.2rem; letter-spacing: 1px; color: var(--ardoise); margin: 18px 0 10px; }
.nuancier { display: flex; gap: 12px; flex-wrap: wrap; }
.nuance { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nuance span { width: 52px; height: 52px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.nuance code { font-size: .72rem; color: var(--texte-doux); }
.zone-notes, .fiche textarea { width: 100%; font-family: var(--corps); font-size: .9rem; color: var(--texte); border: 1px solid var(--creme-fonce); border-radius: 12px; padding: 12px; background: var(--creme); resize: vertical; line-height: 1.55; }
.zone-notes:focus, .fiche textarea:focus { outline: 2px solid var(--caramel); outline-offset: -1px; background: var(--blanc); }

/* ===== États des contenus ===== */
.etat { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: var(--creme); color: var(--texte-doux); }
.etat-1 { background: #f3ead2; color: #8a6d2c; }
.etat-2, .etat-3 { background: var(--caramel-clair); color: #9a7448; }
.etat-4 { background: #ebe1ef; color: #6d4f7c; }
.etat-5 { background: #f4dfda; color: #a35d4f; }
.etat-6 { background: var(--ardoise-clair); color: var(--ardoise-fonce); }
.etat-7 { background: #dfeadf; color: #4c7351; }

/* ===== Espace client : calendrier ===== */
.barre-calendrier { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtres-calendrier { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filtre { font-family: var(--corps); font-weight: 600; font-size: .86rem; border: 1px solid var(--creme-fonce); background: transparent; color: var(--texte-doux); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.filtre:hover { background: var(--blanc); color: var(--ardoise-fonce); }
.filtre.choisi { background: var(--ardoise); border-color: var(--ardoise); color: var(--creme); }
.filtres-calendrier select { font-family: var(--corps); font-size: .86rem; border: 1px solid var(--creme-fonce); background: var(--blanc); border-radius: 999px; padding: 7px 12px; color: var(--texte); }
.chiffres-calendrier { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 26px; }
.chiffres-calendrier div { background: var(--blanc); border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(85, 114, 125, .06); display: flex; flex-direction: column; }
.chiffres-calendrier .n { font-family: var(--titre); font-size: 1.9rem; color: var(--ardoise); line-height: 1.1; letter-spacing: .5px; }
.chiffres-calendrier .l { font-size: .78rem; color: var(--texte-doux); }
.mois { margin-bottom: 24px; }
.mois h2 { font-family: var(--titre); font-weight: 400; font-size: 1.6rem; letter-spacing: 1px; color: var(--ardoise); margin: 0 0 10px; text-transform: capitalize; display: flex; align-items: center; gap: 12px; }
.liste-posts { padding: 6px; }
.post { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 70px minmax(0, 1fr) 120px 90px 150px; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 10px; }
.post + .post { border-top: 1px solid var(--creme); }
.post:hover { background: var(--creme); }
.post.aujourdhui { background: var(--caramel-clair); }
.post-date { font-family: var(--petit); font-size: .82rem; color: var(--texte-doux); text-transform: capitalize; }
.post-titre { font-weight: 600; font-size: .92rem; display: flex; flex-direction: column; min-width: 0; }
.post-titre small { font-weight: 400; color: var(--texte-doux); font-size: .76rem; }
.post-format { font-size: .82rem; color: var(--texte-doux); }
.post-stats { font-size: .8rem; color: var(--ardoise); font-family: var(--petit); }
.post .etat { justify-self: end; }
.lien-notion { margin: 14px 0 0; font-size: .86rem; }
.lien-notion a { color: var(--ardoise); }

/* ===== Calendrier mensuel ===== */
.bascule { display: inline-flex; background: var(--blanc); border-radius: 999px; padding: 3px; box-shadow: inset 0 0 0 1px var(--creme-fonce); }
.bascule button { font-family: var(--corps); font-weight: 600; font-size: .86rem; border: none; background: transparent; color: var(--texte-doux); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.bascule button.choisi { background: var(--ardoise); color: var(--creme); }
.nav-mois { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.nav-mois h2 { font-family: var(--titre); font-weight: 400; font-size: 2rem; letter-spacing: 1px; color: var(--ardoise); margin: 0 6px; text-transform: capitalize; display: flex; align-items: center; gap: 10px; min-width: 230px; }
.legendes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.legende { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.legende .etat { font-size: .68rem; }
.legende-titre { font-family: var(--petit); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--texte-doux); width: 52px; }
.pastille-format { font-size: .68rem; font-weight: 700; border-radius: 6px; padding: 3px 9px; border-left: 3px solid; }

.grille-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.nom-jour { font-family: var(--petit); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--texte-doux); padding: 10px 8px; background: var(--creme); text-align: center; }
.case-jour { min-height: 170px; border-top: 1px solid var(--creme); border-right: 1px solid var(--creme); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.case-jour:nth-child(7n) { border-right: none; }
.case-jour.hors-mois { background: rgba(240, 238, 229, .45); }
.case-jour.hors-mois .num-jour { opacity: .45; }
.case-tete { display: flex; justify-content: space-between; align-items: center; }
.num-jour { font-family: var(--petit); font-size: .82rem; font-weight: 600; color: var(--texte-doux); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.case-jour.aujourdhui .num-jour { background: var(--caramel); color: var(--blanc); }
.ajout-jour { border: none; background: none; color: var(--texte-doux); font-size: 1.1rem; cursor: pointer; opacity: 0; border-radius: 6px; width: 24px; height: 24px; line-height: 1; }
.case-jour:hover .ajout-jour { opacity: 1; }
.ajout-jour:hover { background: var(--creme); color: var(--ardoise); }
.puce-post { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 7px 9px; border-radius: 9px; border-left: 4px solid; transition: filter .15s, transform .1s; }
.puce-post:hover { filter: brightness(.95); transform: translateY(-1px); }
.puce-haut { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.puce-format { font-weight: 700; font-size: .64rem; text-transform: uppercase; letter-spacing: .4px; opacity: .75; }
.puce-ev { font-size: .64rem; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-titre { font-size: .8rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.puce-etat.etat { font-size: .62rem; padding: 2px 8px; align-self: flex-start; margin-top: 2px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }
.puce-etat.etat-0 { background: #fff; }


/* ===== Fiche détaillée d'un contenu ===== */
.panneau { width: min(760px, 100%); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-gris { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--creme); color: var(--texte-doux); }
.detail-date { margin: 12px 0 16px; font-weight: 600; color: var(--ardoise); text-transform: capitalize; }
.detail-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 18px; }
.detail-chiffres div { background: var(--creme); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.detail-chiffres .n { font-family: var(--titre); font-size: 1.5rem; color: var(--ardoise); line-height: 1.1; }
.detail-chiffres .l { font-size: .72rem; color: var(--texte-doux); }
.detail-post h3 { font-family: var(--titre); font-weight: 400; font-size: 1.3rem; letter-spacing: 1px; color: var(--ardoise); margin: 0 0 8px; }
.brief-titre { color: var(--ardoise-fonce); }
.detail-brief { white-space: pre-wrap; background: var(--creme); border-radius: 12px; padding: 14px 16px; font-size: .9rem; line-height: 1.6; }

/* ===== Argent (tableau de bord + Finances) ===== */
.tuiles-argent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.tuile-argent { background: var(--blanc); border-radius: 16px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(85, 114, 125, .06); display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--texte); border-top: 4px solid var(--creme-fonce); }
.tuile-argent .l { font-size: .8rem; color: var(--texte-doux); font-weight: 600; }
.tuile-argent .n { font-family: var(--titre); font-size: 2rem; letter-spacing: .5px; color: var(--ardoise); line-height: 1.1; }
.tuile-argent .s { font-size: .78rem; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile-argent.ok { border-top-color: #6f9a72; }
.tuile-argent.ok .n { color: #4c7351; }
.tuile-argent.retard { border-top-color: #b8725f; background: #fbf1ee; }
.tuile-argent.retard .n, .tuile-argent.retard .s { color: #a35d4f; }
a.tuile-argent:hover { transform: translateY(-2px); transition: transform .15s; }

.table-docs { padding: 6px; overflow-x: auto; }
.doc { display: grid; grid-template-columns: 1fr auto; align-items: center; border-radius: 10px; }
.doc + .doc { border-top: 1px solid var(--creme); }
.doc:hover:not(.doc-tete) { background: var(--creme); }
.doc-ouvrir, .doc-tete { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 110px 1.3fr 1.6fr 100px 90px 100px 130px; gap: 12px; align-items: center; padding: 11px 12px; font-size: .88rem; min-width: 0; }
.doc-tete { cursor: default; grid-column: 1 / -1; grid-template-columns: 110px 1.3fr 1.6fr 100px 90px 100px 130px 120px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texte-doux); font-family: var(--petit); }
.doc-num { display: flex; flex-direction: column; font-weight: 700; color: var(--ardoise-fonce); }
.doc-num small { font-weight: 600; font-size: .68rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .5px; }
.doc-client { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-objet { color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-montant { font-weight: 700; }
.doc-action { padding-right: 10px; width: 120px; display: flex; justify-content: flex-end; }
.statut-fin { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.fin-ok { background: #dfeadf; color: #4c7351; }
.fin-retard { background: #f4dfda; color: #a35d4f; }
.fin-partiel { background: var(--caramel-clair); color: #9a7448; }
.fin-attente { background: var(--ardoise-clair); color: var(--ardoise-fonce); }
.fin-neutre { background: var(--creme); color: var(--texte-doux); }

/* ===== Paiements mensuels ===== */
.titre-section { font-family: var(--titre); font-weight: 400; font-size: 1.6rem; letter-spacing: 1px; color: var(--ardoise); margin: 0 0 12px; }
.titre-section .doux { font-family: var(--corps); font-size: .9rem; letter-spacing: 0; text-transform: capitalize; }
.bloc-mensuels { margin-bottom: 28px; }
.grille-mensuels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mensuel { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-left: 4px solid #6f9a72; }
.mensuel.en-retard { border-left-color: #b8725f; background: #fbf1ee; }
.mensuel-ouvrir { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.mensuel-client { font-weight: 700; color: var(--ardoise-fonce); }
.mensuel-montant { font-family: var(--titre); font-size: 1.8rem; color: var(--ardoise); letter-spacing: .5px; line-height: 1.1; }
.mensuel-montant small { font-family: var(--corps); font-size: .8rem; color: var(--texte-doux); letter-spacing: 0; }
.mensuel-ouvrir .doux { font-size: .8rem; }
.mensuel-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mensuel-partiel { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .82rem; background: var(--caramel-clair); color: #7a5b38; border-radius: 10px; padding: 8px 10px; }
.mensuel-historique { display: flex; gap: 6px; flex-wrap: wrap; font-size: .72rem; color: #4c7351; }
.mensuel-historique span { background: #eef4ee; border-radius: 999px; padding: 2px 8px; }
.alerte-retard { display: block; margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: #fbf1ee; color: #a35d4f; font-weight: 600; font-size: .9rem; text-decoration: none; border-left: 4px solid #b8725f; }
.alerte-retard:hover { background: #f7e6e1; }

/* ===== Tableau de bord ===== */
.bloc-objectifs { margin-bottom: 18px; }
.grille-objectifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.objectif { background: var(--creme); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.objectif-tete { display: flex; justify-content: space-between; align-items: baseline; }
.objectif-titre { font-weight: 700; font-size: .9rem; }
.objectif-pct { font-family: var(--titre); font-size: 1.8rem; color: var(--caramel); line-height: 1; }
.objectif-valeurs { font-size: .95rem; }
.objectif-valeurs strong { font-size: 1.15rem; color: var(--ardoise-fonce); }
.objectif small { font-size: .74rem; }
.barre-avancement.atteint span { background: linear-gradient(90deg, #8bb08e, #4c7351); }
.grille-tableau { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.gros-compte.alerte { color: #a35d4f; }
.liste-mini { display: flex; flex-direction: column; }
.mini-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 9px 8px; border-radius: 10px; text-decoration: none; color: var(--texte); }
.mini-ligne + .mini-ligne { border-top: 1px solid var(--creme); }
.mini-ligne:hover { background: var(--creme); }
.mini-info { font-size: .8rem; color: var(--texte-doux); white-space: nowrap; }
.pied-bloc { margin: 12px 0 0; font-size: .86rem; }
.pied-bloc a { color: var(--ardoise); font-weight: 600; text-decoration: none; }
.pied-bloc a:hover { text-decoration: underline; }
.mini-client { display: flex; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: var(--texte); }
.mini-client:hover { background: var(--creme); }
.mini-client img { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; background: var(--creme); padding: 3px; }
.initiales.petit { position: static; width: 46px; height: 46px; font-size: 1.1rem; border-radius: 12px; flex-shrink: 0; }
.mini-client-corps { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini-post.fmt-reel, .mini-post.fmt-carrousel, .mini-post.fmt-post, .mini-post.fmt-story, .mini-post.fmt-email, .mini-post.fmt-video { border-left: 4px solid; }
.liens-rapides { display: flex; flex-wrap: wrap; gap: 8px; }
.lien-rapide { background: var(--creme); color: var(--ardoise-fonce); text-decoration: none; font-weight: 600; font-size: .88rem; padding: 10px 16px; border-radius: 999px; transition: background .15s; }
.lien-rapide:hover { background: var(--caramel-clair); }
.lien-rapide span { color: var(--caramel); }

/* ===== Page Contenu ===== */
.detail-strategie { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .86rem; margin: 12px 0 0; background: var(--creme); border-radius: 12px; padding: 10px 14px; }
.detail-strategie dt { color: var(--texte-doux); }
.detail-strategie dd { margin: 0; font-weight: 600; }
.banque-idees { margin-top: 34px; }
.banque-idees h2 { font-family: var(--titre); font-weight: 400; font-size: 1.8rem; letter-spacing: 1px; color: var(--ardoise); margin: 0; }
.banque-idees .doux { margin: 0; font-size: .88rem; }
.grille-idees { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.idee { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border-left: 4px solid; min-height: 80px; transition: transform .1s; }
.idee:hover { transform: translateY(-2px); }
.idee-titre { font-weight: 600; font-size: .88rem; line-height: 1.35; }
/* Couleurs par type de contenu : fond doux + liseré plus foncé */
.fmt-reel { background: #f4ddd5; border-left-color: #c47a63 !important; color: #6e3b2c; }
.fmt-carrousel { background: #dce7ea; border-left-color: #55727d !important; color: #2f4a52; }
.fmt-post { background: #f2e7d6; border-left-color: #c8a47b !important; color: #6b5233; }
.fmt-story { background: #e8e1f0; border-left-color: #8a74a8 !important; color: #4d3d66; }
.fmt-email { background: #e0ebdf; border-left-color: #6f9a72 !important; color: #34523a; }
.fmt-video { background: #f5dcdc; border-left-color: #b55a5a !important; color: #6a2c2c; }
.fmt-autre { background: var(--creme); border-left-color: var(--creme-fonce) !important; color: var(--texte); }

/* ===== Espace client : infos & contacts ===== */
.infos-grille { display: grid; grid-template-columns: 1fr 2fr; gap: 22px; align-items: start; }
.liste-liens { list-style: none; margin: 0; padding: 0; }
.liste-liens li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--creme); }
.liste-liens a { color: var(--ardoise-fonce); font-weight: 600; font-size: .9rem; text-decoration: none; }
.liste-liens a:hover { text-decoration: underline; }
.ajout-lien input { flex: 1 1 120px; min-width: 0; }
.fiches { display: flex; flex-direction: column; gap: 14px; }
.fiche summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.fiche summary::-webkit-details-marker { display: none; }
.fiche summary::after { content: '▾'; color: var(--texte-doux); }
.fiche[open] summary::after { content: '▴'; }
.fiche summary h2 { margin: 0; }
.fiche textarea { margin-top: 14px; }
.table-contacts { display: flex; flex-direction: column; }
.contact { all: unset; cursor: pointer; display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr 1fr; gap: 12px; padding: 12px 10px; border-radius: 10px; font-size: .88rem; }
.contact + .contact { border-top: 1px solid var(--creme); }
.contact:hover { background: var(--creme); }
.contact span { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .grille-offres { grid-template-columns: 1fr; }
  .chiffres-cles { grid-template-columns: repeat(2, 1fr); }
  .tuiles-argent { grid-template-columns: repeat(2, 1fr); }
  .grille-objectifs { grid-template-columns: 1fr; }
  .grille-client { grid-template-columns: 1fr 1fr; }
  .infos-grille { grid-template-columns: 1fr; }
  .chiffres-calendrier { grid-template-columns: repeat(3, 1fr); }
  .post { grid-template-columns: 60px minmax(0, 1fr) 140px; }
  .post-format, .post-stats { display: none; }
  .filtres-barre { grid-template-columns: 1fr 1fr; }
  .filtres-barre .recherche { grid-column: 1 / -1; }
  .prospect-ligne { grid-template-columns: 1fr 160px; }
  .prospect-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .prospect-quand { grid-row: 2; }
  .prospect-details { grid-template-columns: 1fr; }
}

/* ===== Bloc montage dans la fiche d'un contenu ===== */
.puce-ns { font-size: .58rem; font-weight: 800; background: #04123f; color: #fec40b; border-radius: 4px; padding: 1px 5px; letter-spacing: .5px; }
.bloc-montage { margin: 18px 0; border: 1.5px solid #04123f22; border-radius: 14px; padding: 14px; background: #f3f3f3; }
.montage-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.case-nstudio { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .9rem; color: #04123f; }
.case-nstudio input { width: 18px; height: 18px; accent-color: #04123f; margin-top: 2px; }
.case-nstudio small { color: var(--texte-doux); font-weight: 400; }
.bloc-montage select, .ajout-commentaire select, .ajout-commentaire input { font-family: var(--corps); font-size: .86rem; border: 1px solid #d9d9d9; border-radius: 10px; padding: 7px 10px; background: #fff; color: var(--texte); }
.montage-statut { margin: 12px 0 8px; font-size: .88rem; }
.bloc-montage h4 { margin: 14px 0 8px; font-size: .9rem; color: #04123f; }
.statut-montage { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.vue-client { background: #fff; border-radius: 12px; padding: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.vue-client-titre { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texte-doux); font-family: var(--petit); }
.boutons-client { display: flex; gap: 8px; flex-wrap: wrap; }
.ajout-commentaire { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ajout-commentaire input { flex: 1 1 180px; }
.titre-brief { margin-top: 18px !important; }
.petit-texte { font-size: .84rem; margin: 6px 0; }
.video-cadre { width: 100%; aspect-ratio: 9 / 16; max-height: 480px; border: none; border-radius: 12px; background: #000; display: block; }
.bouton-video { background: #04123f; color: #fec40b; align-self: flex-start; text-decoration: none; }
.bouton-video:hover { background: #0b1f5c; }
.fil { display: flex; flex-direction: column; gap: 8px; }
.bulle { border-radius: 12px; padding: 8px 12px; max-width: 90%; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; }
.bulle-auteur { font-size: .7rem; font-weight: 700; opacity: .7; }
.bulle-monteur { background: #04123f; color: #f3f3f3; align-self: flex-start; }
.bulle-eloise { background: var(--caramel-clair); color: #5d4528; align-self: flex-end; }
.bulle-client { background: #fff; border: 1px solid #e3e3e3; align-self: flex-start; }

/* Couleurs des statuts de montage (identité NStudio) */
.mt-0 { --mt: #8a93a8; --mt-fond: #eceef2; }
.mt-1 { --mt: #2b59c3; --mt-fond: #e3eafb; }
.mt-2 { --mt: #b8890a; --mt-fond: #fff3cc; }
.mt-3 { --mt: #c2410c; --mt-fond: #fde4d6; }
.mt-4 { --mt: #2f7a46; --mt-fond: #dff1e4; }
.statut-montage, .ns-statut { background: var(--mt-fond); color: var(--mt); }

/* ===== Espace NStudio (le monteur) : #04123f · #fec40b · #f3f3f3 ===== */
body.mode-monteur { background: #f3f3f3; }
body.mode-monteur .sidebar { display: none; }
body.mode-monteur .page { max-width: none; padding: 0; animation: none; }
.ns-app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.ns-menu { background: #04123f; color: #f3f3f3; padding: 28px 16px 22px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ns-marque { padding: 0 10px; }
.ns-nav { display: flex; flex-direction: column; gap: 4px; }
.ns-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: #f3f3f3; text-decoration: none; font-weight: 600; font-size: .92rem; opacity: .85; }
.ns-nav a:hover { background: rgba(243, 243, 243, .08); opacity: 1; }
.ns-nav a.actif { background: #fec40b; color: #04123f; opacity: 1; }
.ns-nav a img, .ns-mini-init { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: #f3f3f3; flex-shrink: 0; }
.ns-mini-init { display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: #04123f; }
.ns-nav-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-nav-titre { font-size: .68rem; text-transform: uppercase; letter-spacing: 2px; opacity: .5; padding: 14px 12px 4px; font-family: var(--petit); }
.ns-nav-vide { font-size: .8rem; opacity: .5; padding: 0 12px; }
.ns-badge { margin-left: auto; background: rgba(254, 196, 11, .2); color: #fec40b; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; font-family: var(--corps); letter-spacing: 0; vertical-align: middle; }
.ns-nav a.actif .ns-badge { background: #04123f; color: #fec40b; }
.ns-retour { margin-top: auto; display: flex; flex-direction: column; gap: 2px; color: #f3f3f3; font-size: .82rem; text-decoration: none; padding: 0 10px; opacity: .8; }
.ns-retour small { opacity: .6; font-size: .7rem; }
.ns-retour:hover { color: #fec40b; opacity: 1; }
.ns-contenu { padding: 36px 40px 60px; min-width: 0; }
.ns-entete { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ns-entete-logo { width: 64px; height: 64px; border-radius: 16px; object-fit: contain; background: #fff; padding: 5px; box-shadow: 0 4px 14px rgba(4, 18, 63, .1); }
.ns-sur { font-size: .76rem; text-transform: uppercase; letter-spacing: 2px; color: #b8890a; font-weight: 700; font-family: var(--petit); }
.ns-logo { font-family: var(--titre); font-size: 2.2rem; color: #fec40b; letter-spacing: 2px; line-height: 1; }
.ns-logo span { color: #f3f3f3; }
.ns-marque { display: flex; flex-direction: column; }
.ns-sous { color: #f3f3f3; opacity: .7; font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; font-family: var(--petit); }
.ns-titre { font-family: var(--titre); font-weight: 400; font-size: 2.8rem; letter-spacing: 1.5px; color: #04123f; margin: 0; line-height: 1.05; }
.ns-compteurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.ns-compteur { all: unset; box-sizing: border-box; cursor: pointer; background: #fff; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; border-bottom: 4px solid var(--mt); transition: transform .1s; }
.ns-compteur:hover { transform: translateY(-2px); }
.ns-compteur.choisi { outline: 2px solid #04123f; }
.ns-compteur .n { font-family: var(--titre); font-size: 2.2rem; color: #04123f; line-height: 1; }
.ns-compteur .l { font-size: .78rem; color: #5b6478; font-weight: 600; }
.ns-barre { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ns-bascule { display: inline-flex; background: #fff; border-radius: 999px; padding: 3px; }
.ns-bascule button { font-family: var(--corps); font-weight: 700; font-size: .86rem; border: none; background: transparent; color: #04123f; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.ns-bascule button.choisi { background: #04123f; color: #fec40b; }
.ns-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ns-carte { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; border-left: 5px solid var(--mt); box-shadow: 0 4px 16px rgba(4, 18, 63, .06); }
.ns-carte-tete { display: flex; gap: 12px; align-items: flex-start; }
.ns-logo-client { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: #f3f3f3; padding: 3px; flex-shrink: 0; }
.ns-initiales { display: flex; align-items: center; justify-content: center; background: #04123f; color: #fec40b; font-family: var(--titre); font-size: 1.1rem; padding: 0; }
.ns-carte-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ns-client { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #5b6478; }
.ns-carte-titre b { color: #04123f; font-size: .98rem; line-height: 1.3; }
.ns-infos { font-size: .8rem; color: #5b6478; margin: 0; }
.ns-alerte { color: #c2410c; font-weight: 700; }
.ns-prio { font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.mp-0 { background: #fec40b; color: #04123f; }
.mp-1 { background: #e6e9f2; color: #04123f; }
.mp-2 { background: #f3f3f3; color: #8a93a8; }
.ns-carte-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ns-statut { font-family: var(--corps); font-weight: 700; font-size: .86rem; border: none; border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.ns-btn { font-family: var(--corps); font-weight: 700; font-size: .84rem; border: none; border-radius: 10px; padding: 8px 14px; cursor: pointer; background: #04123f; color: #f3f3f3; }
.ns-btn:hover { background: #0b1f5c; }
.ns-btn.jaune { background: #fec40b; color: #04123f; }
.ns-btn.jaune:hover { filter: brightness(1.05); }
.ns-vide { text-align: center; padding: 50px 20px; background: #fff; border-radius: 16px; color: #5b6478; }
.ns-vide h3 { font-family: var(--titre); font-weight: 400; font-size: 1.8rem; color: #04123f; margin: 0 0 6px; letter-spacing: 1px; }
.ns-nav-mois { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ns-nav-mois h2 { font-family: var(--titre); font-weight: 400; font-size: 2rem; color: #04123f; margin: 0; letter-spacing: 1px; text-transform: capitalize; min-width: 230px; }
.ns-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border-radius: 16px; overflow: hidden; }
.ns-jour { background: #04123f; color: #fec40b; text-align: center; padding: 9px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.ns-case { min-height: 175px; border-right: 1px solid #ececec; border-top: 1px solid #ececec; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ns-case:nth-child(7n) { border-right: none; }
.ns-case.hors { background: #fafafa; }
.ns-case.hors .ns-num { opacity: .4; }
.ns-num { font-size: .8rem; font-weight: 700; color: #04123f; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.ns-case.auj .ns-num { background: #fec40b; }
.ns-puce { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border-radius: 9px; background: var(--mt-fond); color: #04123f; border-left: 4px solid var(--mt); transition: transform .1s; }
.ns-puce:hover { transform: translateY(-1px); }
.ns-puce-haut, .ns-puce-bas { display: flex; justify-content: space-between; align-items: center; gap: 4px; flex-wrap: wrap; }
.ns-puce-client { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--mt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ns-puce-titre { font-size: .8rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ns-puce-format { font-size: .62rem; font-weight: 800; text-transform: uppercase; opacity: .65; }
.ns-puce .statut-montage { font-size: .6rem; padding: 2px 7px; background: #fff; }
.ns-prio.mini { font-size: .58rem; padding: 2px 6px; }
.ns-fenetre { border-top: 6px solid #fec40b; }
.ns-fenetre .fenetre-tete h2 { color: #04123f; }
.ns-fiche h3 { font-family: var(--titre); font-weight: 400; font-size: 1.3rem; letter-spacing: 1px; color: #04123f; margin: 18px 0 8px; }
.ns-etapes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ns-etape { font-family: var(--corps); font-weight: 700; font-size: .84rem; border: 2px solid transparent; border-radius: 999px; padding: 7px 14px; cursor: pointer; background: var(--mt-fond); color: var(--mt); }
.ns-etape.choisi { border-color: var(--mt); box-shadow: 0 0 0 2px #fff inset; }
.ns-lien { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ns-lien input { flex: 1 1 220px; font-family: var(--corps); font-size: .88rem; border: 1px solid #d9d9d9; border-radius: 10px; padding: 9px 11px; }

/* ===== Fiche de contenu façon Notion ===== */
.fenetre-fiche { width: min(820px, 100%); }
.fenetre-fiche .fenetre-tete h2 { font-family: var(--corps); font-size: .9rem; font-weight: 600; color: var(--texte-doux); text-transform: capitalize; letter-spacing: 0; }
.fenetre-fiche .fenetre-pied { display: none; }
.titre-editable { width: 100%; border: none; resize: none; overflow: hidden; font-family: var(--titre); font-size: 2.1rem; letter-spacing: 1px; color: var(--ardoise-fonce); background: transparent; padding: 4px 6px; border-radius: 8px; line-height: 1.15; }
.titre-editable:hover { background: var(--creme); }
.titre-editable:focus { outline: none; background: var(--creme); }
.props { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 6px; }
.prop { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; min-height: 36px; }
.prop-label { font-size: .84rem; color: var(--texte-doux); padding-left: 6px; }
.prop-select, .prop-input { font-family: var(--corps); font-size: .88rem; color: var(--texte); border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; max-width: 100%; }
.prop-input { width: 100%; cursor: text; }
.prop-select:hover, .prop-input:hover { background: var(--creme); }
.prop-select:focus, .prop-input:focus { outline: none; border-color: var(--creme-fonce); background: var(--blanc); }
.prop-select.etat, .prop-select.pastille-format { font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 4px 12px; width: auto; }
.prop-select.pastille-format { border-left: 4px solid; border-radius: 8px; }
.brief-cliquable { cursor: text; transition: box-shadow .15s; }
.brief-cliquable:hover { box-shadow: 0 0 0 2px var(--creme-fonce); }
.brief-editable { width: 100%; min-height: 200px; font-family: var(--corps); font-size: .9rem; line-height: 1.6; color: var(--texte); border: 2px solid var(--caramel); border-radius: 12px; padding: 14px 16px; background: var(--blanc); resize: vertical; }
.brief-editable:focus { outline: none; }
.stats-fiche { margin-top: 18px; }
.stats-fiche summary { cursor: pointer; font-weight: 700; color: var(--ardoise); font-size: .9rem; }
.fiche-pied { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--creme-fonce); }

/* ===== Accès aux comptes ===== */
.bloc-acces .carre-tete .doux { margin: 4px 0 0; font-size: .88rem; max-width: 560px; }
.liste-acces { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 8px; }
.acces { background: var(--creme); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.acces-plateforme { display: flex; justify-content: space-between; align-items: center; }
.acces-plateforme b { color: var(--ardoise-fonce); font-size: 1rem; }
.acces-plateforme a { font-size: .8rem; color: var(--ardoise); }
.acces-champ { display: grid; grid-template-columns: 100px 1fr auto auto; gap: 6px; align-items: center; background: var(--blanc); border-radius: 10px; padding: 6px 8px; }
.acces-label { font-size: .74rem; color: var(--texte-doux); }
.acces-valeur { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.acces-valeur.mdp { font-family: monospace; letter-spacing: 1px; }
.acces-notes { margin: 0; font-size: .82rem; color: var(--texte-doux); }
.acces-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .74rem; }
.note-securite { margin: 16px 0 0; font-size: .8rem; color: var(--texte-doux); }

/* ===== Page Business ===== */
.actions-finances { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chiffres-cles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.chiffre-cle { background: var(--blanc); border-radius: 16px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(85, 114, 125, .06); display: flex; flex-direction: column; }
.chiffre-cle .l { font-size: .8rem; color: var(--texte-doux); font-weight: 600; }
.chiffre-cle .n { font-family: var(--titre); font-size: 2.2rem; color: var(--ardoise-fonce); letter-spacing: .5px; line-height: 1.1; }
.grille-graphiques { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 12px; }
.grille-graphiques .graphique:first-child { grid-column: 1 / -1; }
.barres { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 220px; align-items: end; padding-top: 24px; border-bottom: 1px solid var(--creme-fonce); }
.barre-col { display: flex; flex-direction: column; height: 100%; outline: none; }
.barre-zone { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.barre { width: 70%; max-width: 46px; background: var(--ardoise); border-radius: 4px 4px 0 0; min-height: 2px; transition: opacity .15s; }
.barre.courante { background: var(--ardoise-fonce); }
.barre-col:hover .barre, .barre-col:focus .barre { opacity: .8; }
.valeur-barre { position: absolute; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 700; color: var(--texte); white-space: nowrap; }
.repere-objectif { position: absolute; left: 8%; right: 8%; border-top: 2px dashed var(--texte-doux); z-index: 1; }
.infobulle { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ardoise-fonce); color: var(--creme); font-size: .76rem; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.barre-col:hover .infobulle, .barre-col:focus .infobulle { opacity: 1; }
.barre-mois { text-align: center; font-size: .72rem; color: var(--texte-doux); padding-top: 6px; text-transform: capitalize; font-family: var(--petit); }
.legende-graph { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--texte-doux); margin: 10px 0 0; }
.trait-objectif { width: 22px; border-top: 2px dashed var(--texte-doux); }
.table-chiffres { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table-chiffres th, .table-chiffres td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--creme); }
.table-chiffres th { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-doux); }
.slogan { font-family: var(--titre); font-size: 1.6rem; letter-spacing: 1px; color: var(--ardoise); margin: 0 0 18px; }
.grille-offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.offre { border-top: 6px solid var(--creme-fonce); display: flex; flex-direction: column; gap: 4px; }
.offre-0 { border-top-color: #e3cdb4; }
.offre-1 { border-top-color: var(--caramel); }
.offre-2 { border-top-color: var(--ardoise); }
.offre-tete { display: flex; flex-direction: column; margin-bottom: 6px; }
.offre-tete h2 { margin: 0; }
.offre-prix { font-family: var(--titre); font-size: 2.6rem; color: var(--ardoise-fonce); line-height: 1; letter-spacing: .5px; }
.offre-accroche { font-style: italic; color: var(--caramel); font-weight: 600; margin: 4px 0; }
.offre p { font-size: .88rem; margin: 4px 0; }
.offre-phrase { background: var(--creme); border-radius: 10px; padding: 10px 12px; }
.liste-oui, .liste-non { margin: 0; padding: 0; list-style: none; font-size: .86rem; display: flex; flex-direction: column; gap: 5px; }
.liste-oui li::before { content: '✓ '; color: #4c7351; font-weight: 800; }
.liste-non li { color: var(--texte-doux); }
.liste-non li::before { content: '✕ '; color: #a35d4f; font-weight: 800; }
.offre-argument { margin: 10px 0; font-size: .86rem; }
.offre-argument summary { cursor: pointer; font-weight: 700; color: var(--ardoise); }
.offre .btn { align-self: flex-start; margin-top: 6px; }
.table-options { display: flex; flex-direction: column; }
.table-options div { display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid var(--creme); font-size: .9rem; }
.avatar-intro { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.avatar-intro h2 { margin: 0; }
.avatar-intro .doux { margin: 2px 0 0; }
.avatar-initiale { width: 64px; height: 64px; border-radius: 50%; background: var(--caramel); color: var(--blanc); font-family: var(--titre); font-size: 2.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.grille-avatar { columns: 2; column-gap: 18px; }
.bloc-avatar { break-inside: avoid; margin-bottom: 18px; }
.texte-avatar { white-space: pre-wrap; font-size: .9rem; line-height: 1.6; cursor: text; border-radius: 10px; padding: 6px; margin: -6px; }
.texte-avatar:hover { background: var(--creme); }

/* ===== Aperçu de l'espace client ===== */
.barre-retour { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.barre-retour .retour { margin: 0; }
body.mode-client .sidebar { display: none; }
body.mode-client .page { padding-top: 0; }
body.mode-client .ajout-jour { display: none; }
.ap-bandeau { color: #f0eee5 !important; position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: #2f3e44; color: var(--creme); padding: 10px 20px; margin: 0 -40px 0; font-size: .86rem; }
.ap-bandeau a { color: #c8a47b; font-weight: 700; text-decoration: none; }
.ap-page { padding-top: 22px; }
.ap-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ap-marque { font-family: var(--titre); font-size: 1.9rem; letter-spacing: 2px; color: var(--ardoise); line-height: 1; }
.ap-marque small { font-family: var(--corps); font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--caramel); margin-left: 4px; }
.ap-connecte { font-size: .82rem; color: var(--texte-doux); background: var(--blanc); border-radius: 999px; padding: 6px 14px; }
.ap-bienvenue { margin-bottom: 22px; border-left: 5px solid var(--caramel); }
.ap-bienvenue h2 { margin-top: 0; }
.ap-bienvenue p { margin: 0; color: var(--texte-doux); line-height: 1.6; }
.ap-contact { display: flex; flex-direction: column; gap: 10px; }
.ap-contact .doux { margin: 0 0 4px; }
.ap-whatsapp { background: #25d366; color: #fff; justify-content: center; text-decoration: none; }
.ap-whatsapp:hover { background: #1fb457; }
.ap-contact .secondaire { justify-content: center; text-decoration: none; }
.ap-actions { margin: 0; padding-left: 18px; }
.ap-actions li { margin-bottom: 8px; }
.ap-actions li.fait { color: var(--texte-doux); text-decoration: line-through; }
.ap-video { border-left: 4px solid #b8890a; }
.contact-lecture { cursor: default; }

/* ===== Téléphone : le menu passe en bas de l'écran ===== */
@media (max-width: 900px) {
  .carres-todo { grid-template-columns: 1fr; }
  .grille-client { grid-template-columns: 1fr; }
  .grille-tableau { grid-template-columns: 1fr; }
  .grille-graphiques { grid-template-columns: 1fr; }
  .grille-avatar { columns: 1; }
}

@media (max-width: 760px) {
  .app { flex-direction: column; }
  /* Téléphone : barre fine en haut + menu « trois traits » qui se déroule */
  .sidebar {
    position: sticky; top: 0; left: 0; right: 0; z-index: 30;
    width: 100%; height: auto; max-height: 100vh; overflow-y: auto;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    gap: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
  }
  .barre-haut { display: flex; align-items: center; justify-content: space-between; }
  .brand { flex-direction: row; align-items: baseline; gap: 8px; padding: 0; }
  .brand-mark { font-size: 1.9rem; }
  .brand-sub { margin-top: 0; font-size: .62rem; }
  .bouton-menu { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: none; background: rgba(240, 238, 229, .12); border-radius: 12px; cursor: pointer; }
  .bouton-menu span { display: block; height: 2px; background: var(--creme); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .sidebar.ouvert .bouton-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sidebar.ouvert .bouton-menu span:nth-child(2) { opacity: 0; }
  .sidebar.ouvert .bouton-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav, .sidebar-foot { display: none; }
  .sidebar.ouvert .nav { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; animation: apparition .2s ease; }
  .sidebar.ouvert .sidebar-foot { display: flex; margin-top: 16px; padding: 14px 0 6px; border-top: 1px solid rgba(240, 238, 229, .15); }
  .nav a { padding: 13px 14px; font-size: 1rem; }
  .page { padding: 24px 16px 40px; }
  .entete h1 { font-size: 2.4rem; }
  .grille { grid-template-columns: 1fr; gap: 16px; }
  .pipeline { flex-wrap: wrap; }
  .seg { flex: 1 1 28% !important; min-height: 64px; }
  .filtres-barre { grid-template-columns: 1fr; }
  .prospect-ligne { grid-template-columns: 1fr; }
  .prospect-quand { grid-row: auto; }
  .champs { grid-template-columns: 1fr; }
  .ajout-tache { flex-wrap: wrap; }
  .carres-todo { grid-template-columns: 1fr; }
  .ajout-tache input[name=titre] { flex-basis: 100%; }
  .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .banniere-contenu { padding: 20px; gap: 14px; }
  .banniere-logo, .initiales.grand { width: 76px; height: 76px; border-radius: 18px; }
  .banniere-contenu h1 { font-size: 2.2rem; }
  .compte-a-rebours { margin-left: 0; }
  .chiffres-calendrier { grid-template-columns: repeat(2, 1fr); }
  .post { grid-template-columns: 56px minmax(0, 1fr); }
  .post .etat { grid-column: 2; justify-self: start; }
  .contact { grid-template-columns: 1fr; gap: 2px; }
    .ns-compteurs { grid-template-columns: repeat(2, 1fr); }
  .ns-liste { grid-template-columns: 1fr; }
  .ns-case { min-height: 60px; }
  .ns-app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ns-menu { position: static; height: auto; gap: 12px; padding: 16px; }
  .ns-nav { flex-direction: row; flex-wrap: wrap; }
  .ns-nav-titre { display: none; }
  .ns-retour { margin-top: 4px; }
  .ns-contenu { padding: 20px 16px 40px; }
  .ns-titre { font-size: 2.1rem; }
  .ns-compteurs { grid-template-columns: repeat(3, 1fr); }
  .ns-nav-mois h2 { min-width: 0; font-size: 1.5rem; }
  .ns-jour { padding: 8px 2px; font-size: .62rem; letter-spacing: 0; }
  .ap-bandeau { margin: 0 -16px; padding: 10px 16px; }
  .ap-haut { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ns-puce { padding: 0; height: 7px; border-left: none; background: var(--mt); }
  .ns-puce > * { display: none !important; }
  .case-jour { min-height: 70px; padding: 3px; }
  .puce-post { padding: 0; height: 7px; border-radius: 4px; border-left: none; }
  .puce-haut, .puce-titre, .puce-etat { display: none; }
  .nom-jour { padding: 8px 2px; font-size: .66rem; letter-spacing: 0; }
  .nav-mois h2 { min-width: 0; font-size: 1.6rem; }
}