/* Portail social AgenzWeb — style sobre et professionnel, même niveau de finition que eci-bdc.
   Pas de dépendance externe (polices système), responsive mobile d'abord. */
:root {
  --fond: #f4f5f7;
  --surface: #ffffff;
  --texte: #1f2430;
  --texte-doux: #5b6472;
  --bordure: #e1e4e9;
  --accent: #2563eb;
  --accent-sombre: #1d4ed8;
  --succes: #16a34a;
  --alerte: #dc2626;
  --attention: #d97706;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.45;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

header.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
header.entete h1 { font-size: 17px; margin: 0; font-weight: 600; }
header.entete .client { font-size: 13px; color: var(--texte-doux); }

.bandeau-ia {
  background: #eef2ff;
  color: #3730a3;
  font-size: 12.5px;
  padding: 7px 16px;
  text-align: center;
  border-bottom: 1px solid #e0e7ff;
}

nav.onglets {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  padding: 0 12px;
  overflow-x: auto;
}
nav.onglets button {
  border: none;
  background: none;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--texte-doux);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
nav.onglets button.actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

main { flex: 1; padding: 14px 16px 60px; max-width: 980px; margin: 0 auto; width: 100%; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

h2.titre-section { font-size: 15px; margin: 0 0 10px; color: var(--texte); }

/* ---------- connexion ---------- */
.ecran-connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
/* Même bug que `.superposition` (corrigé au Lot 7, voir README-deploy-social-portal.md §9.5) :
   l'attribut HTML `hidden` pose display:none via la feuille UA, mais `.ecran-connexion` ci-dessus
   force display:flex via une déclaration AUTEUR — qui gagne toujours sur l'UA, quelle que soit la
   spécificité. Trouvé pendant la vérification visuelle du Lot 4 : l'écran de connexion restait
   affiché PAR-DESSUS l'application après connexion. Hors scope Lot 4, corrigé ici (même règle que
   §9.5 : signaler plutôt que masquer un correctif hors-scope), jamais découvert avant faute de test
   visuel sur ce chemin précis (Lot 1/2 n'avaient testé que l'API, pas le rendu après connexion). */
.ecran-connexion[hidden] { display: none; }
.ecran-connexion form { max-width: 360px; width: 100%; }
.ecran-connexion .carte { width: 100%; }
.logo-connexion { text-align: center; margin-bottom: 18px; }
.logo-connexion svg { width: 48px; height: 48px; }

label { display: block; font-size: 13px; color: var(--texte-doux); margin: 12px 0 4px; }
input[type="email"], input[type="password"], input[type="text"], input[type="date"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--texte);
}
textarea { resize: vertical; min-height: 70px; font-family: inherit; }

button.principal {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
button.principal:hover { background: var(--accent-sombre); }
button.principal:disabled { opacity: 0.55; cursor: not-allowed; }

button.secondaire {
  background: #fff;
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
button.secondaire:hover { background: #f8f9fb; }
button.secondaire:disabled { opacity: 0.55; cursor: not-allowed; }
button.secondaire:disabled:hover { background: #fff; }

button.lien { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0; }

.erreur { color: var(--alerte); font-size: 13px; margin-top: 10px; }
.info { color: var(--texte-doux); font-size: 13px; }

/* ---------- filtres ---------- */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtres select, .filtres input { width: auto; }

/* ---------- ligne condensée (patron FIGÉ §6.3/§6.9) ---------- */
.ligne-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--bordure);
}
.ligne-item:last-child { border-bottom: none; }
.logo-reseau { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.ligne-contenu { min-width: 0; }
.ligne-sujet { font-size: 13.5px; color: var(--texte-doux); margin-bottom: 2px; }
.ligne-legende { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.ligne-legende.edition { width: 100%; }
.ligne-statut {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  margin-top: 4px;
  background: #f1f5f9;
  color: var(--texte-doux);
}
.ligne-statut.valide { background: #dcfce7; color: #166534; }
.ligne-statut.rejete { background: #fee2e2; color: #991b1b; }
.ligne-statut.partiellement_valide { background: #fef3c7; color: #92400e; }
.ligne-statut.publie { background: #dbeafe; color: #1e40af; }

.ligne-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ligne-actions button { font-size: 12.5px; padding: 5px 9px; white-space: nowrap; }
.btn-valider { border-color: var(--succes) !important; color: var(--succes) !important; }
.btn-rejeter { border-color: var(--alerte) !important; color: var(--alerte) !important; }

/* ---------- calendrier ---------- */
.calendrier-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.jour-entete { font-size: 11px; text-align: center; color: var(--texte-doux); padding: 4px 0; }
.jour-case {
  min-height: 64px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 4px;
  font-size: 11px;
  cursor: pointer;
  background: #fff;
}
.jour-case.hors-mois { background: #f8f9fb; color: #b4bac3; }
.jour-case.selectionne { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.jour-numero { font-weight: 600; margin-bottom: 3px; }
.jour-puce { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 1px; }

.liste-jour .groupe-resume {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--bordure);
  cursor: pointer;
}
.liste-jour .groupe-resume:last-child { border-bottom: none; }

/* ---------- détail d'un groupe ---------- */
.detail-plateforme {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.detail-plateforme-entete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.detail-plateforme-entete strong { font-size: 13.5px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.choix-visuel { display: flex; gap: 10px; align-items: center; font-size: 13px; margin-top: 10px; color: var(--texte-doux); }
.choix-visuel label { display: inline-flex; gap: 4px; align-items: center; margin: 0; font-size: 13px; color: var(--texte); }

.superposition {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px 12px; z-index: 50;
}
/* Bug pré-existant corrigé (découvert en vérification visuelle Lot 7) : l'attribut HTML `hidden`
   met display:none via la feuille de style du navigateur (origine UA), mais `.superposition`
   ci-dessus force display:flex via une déclaration AUTEUR — qui gagne toujours sur l'UA en CSS,
   quelle que soit la spécificité. Résultat : le panneau restait invisible mais interactif en
   permanence, bloquant tout clic sur toute la page (y compris le bouton de connexion). Règle de
   spécificité supérieure, même origine auteur, pour rétablir le masquage réel. */
.superposition[hidden] { display: none; }
.panneau {
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  padding: 20px;
}
.panneau-entete { display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px; }
.panneau-fermer { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--texte-doux); line-height: 1; }

.compteur-regen { font-size: 12px; color: var(--texte-doux); margin-top: 4px; }

/* ---------- inbox unifiée & modération (§6.9, Lot 7) ---------- */
.badge-compteur {
  display: inline-block;
  background: var(--alerte);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
  border-radius: 20px;
  padding: 1px 5px;
  margin-left: 4px;
  line-height: 1.4;
}
.logo-reseau-svg { flex: none; border-radius: 6px; }
.ligne-auteur { font-size: 12.5px; color: var(--texte-doux); font-weight: 600; }
.ligne-message { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; margin: 2px 0 6px; }
.ligne-proposition {
  font-size: 13.5px;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8f9fb;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 7px 9px;
}
.ligne-proposition.vide { color: var(--texte-doux); font-style: italic; background: none; border-style: dashed; }
.ligne-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag-lead { background: #fef3c7; color: #92400e; font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 7px; }
.tag-type { background: #f1f5f9; color: var(--texte-doux); font-size: 10.5px; border-radius: 20px; padding: 2px 7px; }
a.tag-type { text-decoration: none; }
.ligne-statut.nouveau { background: #e0e7ff; color: #3730a3; }
.ligne-statut.propose { background: #fef3c7; color: #92400e; }
.ligne-statut.repondu_auto { background: #dcfce7; color: #166534; }
.ligne-statut.escalade { background: #fee2e2; color: #991b1b; }
.ligne-statut.clos { background: #f1f5f9; color: var(--texte-doux); }
.btn-escalader { border-color: var(--attention) !important; color: var(--attention) !important; }
.reecriture-inline { margin-top: 6px; }
.reecriture-inline textarea { width: 100%; min-height: 56px; margin-bottom: 6px; }
.reecriture-actions { display: flex; gap: 8px; }
.filtre-lead-label { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; }

/* ---------- événements -> teasing (§6.6, Lot 4) ---------- */
.ligne-statut.a_revoir { background: #fef3c7; color: #92400e; }
.ligne-statut.planifie { background: #e0e7ff; color: #3730a3; }
.ligne-statut.teasing_en_cours { background: #dbeafe; color: #1e40af; }
.ligne-statut.passe { background: #f1f5f9; color: var(--texte-doux); }
.ligne-statut.annule { background: #fee2e2; color: #991b1b; }
.badge-evenement {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #e0e7ff;
  border-radius: 20px;
  font-size: 11px;
  padding: 2px 8px;
  margin-top: 4px;
  cursor: pointer;
}
.badge-evenement:hover { background: #e0e7ff; }

/* ---------- performance : vue d'ensemble abonnés (§6.7, Lot 5) ---------- */
.ligne-stat-compte {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--bordure);
}
.ligne-stat-compte:last-child { border-bottom: none; }

/* ---------- tendances (§6.10, Lot 5b) ---------- */
.ligne-statut.proposee { background: #e0e7ff; color: #3730a3; }
.ligne-statut.adoptee { background: #dcfce7; color: #166534; }
.ligne-statut.ecartee { background: #fee2e2; color: #991b1b; }
.ligne-statut.pattern_gagnant { background: #fef3c7; color: #92400e; }

/* ---------- recommandations (§6.7, Décision A Olivier 27/10, §12/§13 ter) : une recommandation
   acceptée reste visible (« en cours »), une réalisée est son issue normale. .proposee déjà posée
   ci-dessus (même teinte « à décider » que les fiches tendance). ---------- */
.ligne-statut.acceptee { background: #dbeafe; color: #1e40af; }
.ligne-statut.appliquee { background: #dcfce7; color: #166534; }

/* ---------- publicité (§6.8, Lot 6) : .proposee déjà posée ci-dessus. 'active' en vert soutenu
   (dépense réelle en cours, GO Olivier déjà donné) — jamais atteignable depuis une action client,
   voir server/app.mjs#activerCampagnePub (garde-fou testé dans test/ads-pub.test.mjs). ---------- */
.ligne-statut.etude { background: #f1f5f9; color: var(--texte-doux); }
.ligne-statut.validee_client { background: #dbeafe; color: #1e40af; }
.ligne-statut.go_olivier_attendu { background: #fef3c7; color: #92400e; }
.ligne-statut.active { background: #166534; color: #ffffff; }
.ligne-statut.en_pause { background: #fef3c7; color: #92400e; }
.ligne-statut.terminee { background: #f1f5f9; color: var(--texte-doux); }
.ligne-statut.rejetee { background: #fee2e2; color: #991b1b; }

/* ---------- utilitaires de mise en page (CSP Lot 8 : `style-src 'self'` bloque TOUT attribut
   `style=""` inline — statique ou dynamique, le navigateur ne fait pas la différence — voir
   server/http.mjs et README-deploy-social-portal.md §11). Remplace les styles inline qui étaient
   silencieusement bloqués. Placées en fin de fichier pour gagner sur les classes sémantiques
   ci-dessus à spécificité égale quand les deux sont posées sur le même élément (ex. "info u-mt-6"). ---------- */
.u-texte-centre { text-align: center; }
.u-pleine-largeur { width: 100%; }
.u-ligne-centree { display: flex; align-items: center; gap: 12px; }
.u-entete-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.u-texte-fort { font-weight: 600; font-size: 13.5px; }
.u-texte-pre { margin: 0 0 8px; white-space: pre-wrap; }
.u-attention-mt4 { color: var(--attention); margin-top: 4px; }
.u-m-0 { margin: 0; }
.u-m-10-0 { margin: 10px 0; }
.u-mt-4 { margin-top: 4px; }
.u-mt-6 { margin-top: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }

/* Grilles de cases à cocher compactes (plateformes/cadence, Nouveau post + Événements) — Bug CSP :
   le style inline `display:flex;gap:14px;flex-wrap:wrap` sur chaque conteneur/label contrait
   `label{display:block}` ci-dessus ; bloqué par la CSP, les cases s'empilaient une par ligne. */
.grille-cases { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.grille-cases label { display: flex; gap: 6px; align-items: center; font-size: 13px; margin: 0; }

/* Puce de statut du calendrier (§6.1) — une classe par statut (couleurs alignées sur les badges
   .ligne-statut.* ci-dessus), jamais un style="background:…" inline (bloqué par la CSP). */
.puce-brouillon { background: #9ca3af; }
.puce-partiellement_valide { background: #d97706; }
.puce-valide { background: #16a34a; }
.puce-rejete { background: #dc2626; }
.puce-publie { background: #2563eb; }
.puce-a-revoir { background: #d97706; }
.puce-supprime { background: #cbd5e1; }
.ligne-statut.supprime { background: #f1f5f9; color: var(--texte-doux); }

/* ---------- visuels finaux : vignettes, visuel plein format, bibliothèque (§A, additif Olivier
   27/10 : "voir les visuels et textes finaux, de les modifier") ---------- */
.vignette-visuel {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  border: 1px solid var(--bordure);
  background: #f1f5f9;
}
.ligne-contenu > .vignette-visuel,
.ligne-contenu > .badge-visuel-manquant { display: block; margin-bottom: 4px; }
.badge-visuel-manquant {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.detail-visuel { margin: 10px 0; }
.visuel-plein {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--bordure);
  background: #f1f5f9;
}
.panneau-bibliotheque { max-width: 760px; }
.grille-bibliotheque {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 10px 0;
  max-height: 50vh;
  overflow-y: auto;
}
.bibliotheque-image {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 0;
  background: #f8f9fb;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.bibliotheque-image:hover { border-color: var(--accent); }
.bibliotheque-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-bibliotheque { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; border-top: 1px solid var(--bordure); padding-top: 12px; }
.upload-bibliotheque label { margin: 0; width: 100%; }

/* Badge "pris en charge par AgenzWeb" sur une ligne inbox escaladée (§6.9) — remplace les boutons
   ✓ Valider / ✎ Réécrire : le client final ne répond jamais à un item escaladé (serveur refuse en
   409, voir server/app.mjs). */
.badge-pris-en-charge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  white-space: nowrap;
}

/* ---------- liens stylés comme des boutons (§6.7/§6.11, vague 2 : "Ouvrir"/"Télécharger" un
   rapport sont des <a href>, pas des <button>) — les règles .secondaire/.principal existantes sont
   qualifiées `button.*`, donc jamais appliquées à un <a> sans ce doublon explicite. ---------- */
a.secondaire, a.principal {
  display: inline-block;
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
}
a.secondaire { background: #fff; color: var(--texte); border: 1px solid var(--bordure); }
a.secondaire:hover { background: #f8f9fb; }
a.principal { background: var(--accent); color: #fff; border: none; font-weight: 600; }
a.principal:hover { background: var(--accent-sombre); }

/* ---------- tables de stats (§6.7/§6.11, vague 2 : stats par publication, comparatif concurrents) :
   une table HTML simple, bordures légères, jamais de style inline (CSP). ---------- */
.table-stats { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.table-stats th, .table-stats td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.table-stats th { color: var(--texte-doux); font-weight: 600; font-size: 12px; }
.table-stats td .logo-reseau { margin: 0; }

/* Badge « métrique de démonstration » (§C, vague 2) — jamais présenté comme une mesure réelle,
   accolé à la valeur dans la liste des stats par publication (source='demo'). */
.badge-demo {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 6px;
  margin-right: 4px;
  letter-spacing: 0.02em;
}

/* ---------- document de rapport autonome (§6.7, 6e additif) : servi par GET /report/:id
   (server/app.mjs), référencé en externe par ce même style.css (CSP style-src 'self' respectée —
   jamais un <style> ni un style="" inline dans le document généré, voir cm-service.mjs#construireRapportHtml). ---------- */
.rapport { max-width: 860px; margin: 0 auto; padding: 24px 18px 60px; }
.rapport-titre { font-size: 20px; margin: 0 0 6px; }
.rapport-genere-le { color: var(--texte-doux); font-size: 13px; margin: 0 0 20px; }
.rapport-section { margin-bottom: 26px; }
.rapport-section-titre { font-size: 16px; margin: 0 0 10px; border-bottom: 2px solid var(--accent); padding-bottom: 6px; }
.rapport-texte { font-size: 14px; margin: 8px 0; }
.rapport-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rapport-table th, .rapport-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--bordure); }
.rapport-table th { background: #f8f9fb; color: var(--texte-doux); font-weight: 600; font-size: 12.5px; }

/* ---------- plan de communication mensuel raisonné (Volet 1) ----------
   Frise type Gantt en CSS Grid (classes uniquement, CSP `style-src 'self'` — jamais un style=""
   inline, même doctrine que .puce-* ci-dessus). Colonne de label fixe (flex) + grille 31 colonnes
   (une par jour du mois, les colonnes au-delà du nombre réel de jours restent simplement vides). */
.plan-strategie { white-space: pre-wrap; font-size: 14px; margin: 0; }
.plan-entete-mois { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.plan-entete-mois strong { font-size: 15px; text-transform: capitalize; }
.frise-gantt-wrap { overflow-x: auto; margin-top: 12px; }
.frise-entete { display: flex; align-items: center; margin-bottom: 4px; }
.frise-entete .frise-label { color: var(--texte-doux); font-size: 11px; font-weight: 600; }
.frise-entete-jours { flex: 1; display: grid; grid-template-columns: repeat(31, minmax(18px, 1fr)); font-size: 9.5px; color: var(--texte-doux); min-width: 560px; }
.frise-ligne { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.frise-ligne:last-child { border-bottom: none; }
.frise-label { width: 128px; flex: none; font-size: 12px; color: var(--texte); font-weight: 600; }
.frise-jours { flex: 1; display: grid; grid-template-columns: repeat(31, minmax(18px, 1fr)); position: relative; height: 22px; align-items: center; min-width: 560px; }
.frise-pastille { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); padding: 0; cursor: pointer; justify-self: start; }
.frise-pastille:hover { filter: brightness(0.9); }
@media (max-width: 680px) {
  .frise-gantt-wrap { display: none; }
}
/* Grille des 31 colonnes-jour (grid-column: N) — un placement par jour du mois, posé en classe
   plutôt qu'en style="" inline (CSP). */
.gj-1 { grid-column: 1; } .gj-2 { grid-column: 2; } .gj-3 { grid-column: 3; } .gj-4 { grid-column: 4; }
.gj-5 { grid-column: 5; } .gj-6 { grid-column: 6; } .gj-7 { grid-column: 7; } .gj-8 { grid-column: 8; }
.gj-9 { grid-column: 9; } .gj-10 { grid-column: 10; } .gj-11 { grid-column: 11; } .gj-12 { grid-column: 12; }
.gj-13 { grid-column: 13; } .gj-14 { grid-column: 14; } .gj-15 { grid-column: 15; } .gj-16 { grid-column: 16; }
.gj-17 { grid-column: 17; } .gj-18 { grid-column: 18; } .gj-19 { grid-column: 19; } .gj-20 { grid-column: 20; }
.gj-21 { grid-column: 21; } .gj-22 { grid-column: 22; } .gj-23 { grid-column: 23; } .gj-24 { grid-column: 24; }
.gj-25 { grid-column: 25; } .gj-26 { grid-column: 26; } .gj-27 { grid-column: 27; } .gj-28 { grid-column: 28; }
.gj-29 { grid-column: 29; } .gj-30 { grid-column: 30; } .gj-31 { grid-column: 31; }

/* Liste « pourquoi » (sous la frise, toujours visible — devient la vue mobile de secours quand la
   frise est masquée sous 680px, regroupée par semaine). */
.plan-pourquoi-semaine-titre { font-weight: 600; font-size: 12.5px; color: var(--texte-doux); margin: 14px 0 4px; }
.plan-pourquoi-ligne { padding: 7px 0; border-bottom: 1px solid var(--bordure); cursor: pointer; }
.plan-pourquoi-ligne:last-child { border-bottom: none; }
.plan-pourquoi-entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-pourquoi-date { font-size: 11.5px; color: var(--texte-doux); min-width: 70px; }
.plan-pourquoi-sujet { font-size: 13.5px; font-weight: 600; }
.plan-pourquoi-raison { color: var(--texte-doux); font-size: 12.5px; margin-top: 3px; }

/* ---------- graphiques Performance (Volet 2, dataviz) ---------- */
.graphiques-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.graphique { min-width: 0; }
.graphique svg { display: block; max-width: 100%; }
.graphique-titre-interne { font-size: 12.5px; font-weight: 600; color: var(--texte-doux); margin-bottom: 8px; }
.graphique-legende { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; font-size: 12px; color: var(--texte-doux); }
.graphique-legende-item { display: inline-flex; align-items: center; gap: 5px; }
.graphique-legende-pastille { display: inline-flex; flex: none; }
.graphique-vide { color: var(--texte-doux); font-size: 13px; padding: 16px 0; text-align: center; border: 1px dashed var(--bordure); border-radius: 8px; }

@media (max-width: 560px) {
  .ligne-item { grid-template-columns: 24px 1fr; }
  .ligne-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
  .calendrier-grille { gap: 2px; }
  .jour-case { min-height: 48px; }
}