/* Offre de service Ulimi — charte : police Ubuntu, dégradé signature vert -> bleu
   (mêmes variables et composants que le Plan de charge Ulimi). */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

:root {
  --vert-ardoise: #353D35;
  --creme: #FEF5D5;
  --a1: #6CB65C; --a2: #59A466; --a3: #407F5B;
  --a4: #017581; --a5: #21677F; --a6: #154C84;
  --cyan: #00B8FF; --gris: #919191;
  --grad: linear-gradient(90deg, #6CB65C 0%, #59A466 22%, #407F5B 44%, #017581 66%, #21677F 82%, #154C84 100%);
  --bg: #F4F6F4; --card: #FFFFFF; --line: #E4E8E4;
  --ok: #59A466; --warn: #E0A500; --danger: #C8442E;
}

* { box-sizing: border-box; }
body {
  font-family: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  margin: 0; background: var(--bg); color: var(--vert-ardoise);
  font-size: 14px; line-height: 1.45;
}
a { color: var(--a4); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 700; margin: 0 0 .4em; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; }
code { font-size: 12px; }

/* --- En-tête --- */
header.topbar {
  background: var(--vert-ardoise); color: #fff;
  padding: 14px 26px; display: flex; align-items: center; gap: 24px;
}
header.topbar .brand { font-weight: 700; font-size: 18px; letter-spacing: .5px; }
header.topbar .brand small { display:block; font-weight:400; font-size:11px; color:#B9C2B9; letter-spacing:1px; text-transform:uppercase; }
header.topbar nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
header.topbar nav a { color: #D9E0D9; font-weight: 500; padding: 4px 2px; }
header.topbar nav a.active, header.topbar nav a:hover { color: #fff; text-decoration: none; border-bottom: 2px solid var(--a1); }
.grad-bar { height: 5px; background: var(--grad); }

main { max-width: 1280px; margin: 0 auto; padding: 24px; }
main.main-wide { max-width: 1420px; }
.periode { color: var(--gris); font-size: 13px; margin-bottom: 18px; }
.mini { font-size: 12px; color: var(--gris); }
.masque { display: none !important; }

/* --- Flash --- */
.flash { padding: 10px 16px; border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.flash.success { background: #E7F3E4; color: #2C5E27; }
.flash.error { background: #F7E2DD; color: #8C2D1B; }

/* --- Cartes / KPI --- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; }
.grid { display: grid; gap: 16px; }
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.kpi-tile .v { font-size: 26px; font-weight: 700; }
.kpi-tile .l { color: var(--gris); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.kpi-tile.grad { background: var(--grad); color: #fff; border: none; }
.kpi-tile.grad .l { color: #EAF2EA; }

/* --- Pastilles --- */
.chip { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; color: #fff; }
.tag { display:inline-block; padding:1px 7px; border-radius:5px; font-size:11px; background:#EEF1EE; color:var(--vert-ardoise); }

/* --- Tableaux --- */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--gris); font-weight: 500; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }

/* --- Formulaires / boutons --- */
input, select, textarea { font-family: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--vert-ardoise); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a2); }
label { font-size: 12px; color: var(--gris); display: block; margin-bottom: 3px; }
.btn { display: inline-block; background: var(--a4); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 500; cursor: pointer; font-size: 13px; }
.btn:hover { background: var(--a5); text-decoration: none; }
.btn.grad { background: var(--grad); }
.btn.ghost { background: transparent; color: var(--a4); border: 1px solid var(--a4); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.row-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row-inline > div { flex: 1; min-width: 120px; }

/* --- Onglets --- */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 18px; border-radius: 8px 8px 0 0; background: #E9ECE9; color: var(--vert-ardoise); font-weight: 500; }
.tabs a.active { background: var(--grad); color: #fff; }
details summary { cursor: pointer; font-weight: 500; color: var(--a4); }

@media (max-width: 700px) {
  header.topbar { flex-wrap: wrap; padding: 12px 16px; }
  header.topbar nav { margin-left: 0; }
  main { padding: 16px; }
}

/* ===================================================================================
   Offres : administration
   =================================================================================== */
.pastille { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
.entete-offre { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.grid.deux-col { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
.grid.edition { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
table.chapitres td { vertical-align: middle; }
td.outils { white-space: nowrap; text-align: right; }
td.outils form { display: inline; }
.btn[disabled] { opacity: .35; cursor: default; }
.copie { display: flex; gap: 6px; }
.copie input { flex: 1; min-width: 0; }
input.code { font-family: 'Consolas', 'Courier New', monospace; letter-spacing: 2px; font-size: 15px; }
input.titre-chapitre { width: 100%; font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.sommaire-admin { padding-left: 20px; margin: 0; }
.sommaire-admin li { margin: 4px 0; }
.sommaire-admin li.actif > a { font-weight: 700; color: var(--vert-ardoise); }
tr.non-lu td { background: #FFF8F6; }
td.extrait { white-space: pre-line; }
.lien-discret { background: none; border: none; color: var(--gris); cursor: pointer; font-size: 11px; padding: 0; text-decoration: underline; }

/* --- Éditeur --- */
.editeur { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: #FAFBFA; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; }
.barre-outils button { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; font-family: inherit; font-size: 12px; cursor: pointer; color: var(--vert-ardoise); }
.barre-outils button:hover { border-color: var(--a2); background: #F4FBF2; }
.barre-outils .sep { width: 1px; background: var(--line); margin: 0 4px; }
.zone-edition { min-height: 420px; padding: 18px 22px; outline: none; background: #fff; }
.zone-edition:focus { box-shadow: inset 0 0 0 2px #E7F3E4; }

/* --- Commentaires (admin + prospect) --- */
.fil { border-top: 1px solid var(--line); padding: 12px 0; }
.fil:first-of-type { border-top: none; }
.commentaire .meta { font-size: 12px; color: var(--gris); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.commentaire .meta strong { color: var(--vert-ardoise); }
.commentaire .meta form.suppr { margin-left: auto; }
.commentaire .texte { white-space: pre-line; margin-top: 3px; }
.commentaire.ulimi .meta strong { color: var(--a4); }
.reponse { margin: 10px 0 0 22px; padding-left: 12px; border-left: 3px solid var(--a1); }
.repondre { margin: 8px 0 0 22px; }
.repondre textarea, .nouveau-commentaire textarea { width: 100%; margin: 6px 0; }
.nouveau-commentaire { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ===================================================================================
   Contenu d'une offre (éditeur ET lecture prospect : même rendu)
   =================================================================================== */
.contenu-offre { font-size: 15px; line-height: 1.6; }
.contenu-offre h2 { font-size: 19px; margin: 1.4em 0 .5em; color: var(--a5); }
.contenu-offre h3 { font-size: 16px; margin: 1.2em 0 .4em; }
.contenu-offre h2:first-child, .contenu-offre h3:first-child { margin-top: 0; }
.contenu-offre p { margin: 0 0 .8em; }
.contenu-offre ul, .contenu-offre ol { margin: 0 0 .9em; padding-left: 24px; }
.contenu-offre li { margin: .2em 0; }
.contenu-offre ul li::marker { color: var(--a2); }
.contenu-offre img { max-width: 100%; height: auto; border-radius: 6px; }
.contenu-offre table { margin: .4em 0 1.1em; font-size: 14px; }
.contenu-offre th { background: #F1F5F1; color: var(--vert-ardoise); text-transform: none; font-size: 13px; letter-spacing: 0; font-weight: 700; }
.contenu-offre td, .contenu-offre th { border: 1px solid var(--line); }
.contenu-offre blockquote { margin: 0 0 1em; padding: 6px 16px; border-left: 4px solid var(--a3); color: #555; }
.contenu-offre hr { border: none; height: 3px; background: var(--grad); margin: 1.6em 0; border-radius: 2px; }
.contenu-offre .encadre { background: #F2F8F1; border-left: 4px solid var(--a2); border-radius: 8px; padding: 12px 16px; margin: 0 0 1em; }
.contenu-offre .encadre > :last-child { margin-bottom: 0; }
.contenu-offre .import-a-reprendre { background: #FFF4D6; border: 1px dashed var(--warn); border-radius: 6px; padding: 6px 10px; color: #8A6400; font-size: 13px; }
/* Jamais montré au prospect */
.espace-prospect .contenu-offre .import-a-reprendre { display: none; }

/* ===================================================================================
   Espace prospect
   =================================================================================== */
.bandeau-apercu { background: var(--warn); color: #fff; padding: 8px 20px; font-weight: 500; font-size: 13px; }
.bandeau-apercu a { color: #fff; text-decoration: underline; }
.espace-prospect .titre-offre { margin-left: auto; text-align: right; font-weight: 500; }
.espace-prospect .titre-offre small { display: block; font-size: 11px; color: #B9C2B9; font-weight: 400; }
.espace-prospect header.topbar nav { margin-left: 18px; align-items: center; }
.mini-clair { color: #B9C2B9; font-size: 12px; }
.lecture { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; max-width: 1180px; margin: 0 auto; padding: 24px; }
.sommaire { position: sticky; top: 16px; align-self: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.sommaire summary { font-weight: 700; color: var(--vert-ardoise); }
.sommaire ol { margin: 10px 0 0; padding-left: 22px; }
.sommaire li { margin: 6px 0; }
.sommaire li a { color: var(--vert-ardoise); }
.sommaire li.actif { font-weight: 700; }
.sommaire li.actif::marker { color: var(--a2); }
.sommaire li.actif a { color: var(--a4); }
.nb-com { display: inline-block; font-size: 10px; background: #E9ECE9; border-radius: 8px; padding: 0 6px; color: var(--gris); font-weight: 500; }
.chapitre-prospect { min-width: 0; max-width: 820px; padding: 0; }
.titre-chapitre-prospect { font-size: 28px; margin: 4px 0 18px; padding-bottom: 10px; border-bottom: 3px solid; border-image: var(--grad) 1; }
.chapitre-prospect .contenu-offre { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px 30px; margin-bottom: 18px; }
.pagination { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.pied-prospect { text-align: center; color: var(--gris); font-size: 12px; padding: 20px 16px 30px; }

@media (max-width: 900px) {
  .grid.deux-col, .grid.edition { grid-template-columns: minmax(0, 1fr); }
  .lecture { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 14px; }
  .sommaire { position: static; }
  .chapitre-prospect .contenu-offre { padding: 18px 16px; }
  .contenu-offre table { display: block; overflow-x: auto; }
  .espace-prospect .titre-offre { margin-left: 0; text-align: left; }
}

/* --- Suivi de navigation du prospect (fiche offre) --- */
.sous-titre-suivi { font-size: 14px; font-weight: 500; margin: 18px 0 6px; color: var(--vert-ardoise); }
table.temps-chapitres td { padding: 5px 8px; }
.jauge-cellule { width: 34%; }
.jauge { display: block; height: 8px; min-width: 2px; border-radius: 4px; background: linear-gradient(90deg, var(--a1), var(--a4)); }
details.visite { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; padding: 0 10px; }
details.visite summary { cursor: pointer; padding: 8px 0; }
details.visite table { margin-bottom: 8px; }

/* --- Commentaires sur la fiche offre --- */
.entete-carte { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.entete-carte h2 { margin: 0; }
.echanges-chapitre { margin-top: 14px; }
.echanges-chapitre h3 { margin: 0 0 2px; font-size: 14px; font-weight: 500; }
.echanges-chapitre h3 a { color: var(--a5); text-decoration: none; }
.echanges-chapitre .fil { padding: 8px 0 8px 12px; border-left: 3px solid var(--line); border-top: none; }
details.ecrire-prospect { margin-top: 14px; }
details.ecrire-prospect form { margin-top: 8px; }