/* Cockpit Cadevia — partie Marketing, v2 (29 sept. 2026) : Performance · Calendrier · Bibliothèque · Stratégie
   et le tiroir ⚙︎ Connexions. Mise en page de la maquette validée (docs/mockups/2026-09-29-cockpit-marketing-v2-
   gabarit.html) avec les variables de style.css. Portée :
   · `#p-marketing …` pour tout ce qui vit dans les pages ;
   · `.mkTiroir`, `.mkFeuille`, `.mkVoile`, `.mkToast` (et `.mkModal`, la surcouche de copie) vivent au niveau de
     <body> : un ancêtre en `backdrop-filter` ou en `transform` capturerait leur `position: fixed` (piège du 26/09).
   · Les noms qui existent déjà ailleurs dans le Cockpit (`.chip`, `.kpi`, `.row`, `.nav`, `.pill`) sont préfixés
     `mk` ici : un style global qui fuirait dans le Marketing (ou l'inverse) ne se verrait qu'à l'écran.
   Historique : DA « verre clair » (1ᵉʳ sept.), passée à « Apple + verre » le 26 sept. ; les blocs portés de l'ancien
   écran (fiche concurrent, playbook, héros cobalt nuit) gardent leurs règles plus bas. */

/* ══ La toile ══ ⚠️ 29 sept. 2026 (Marketing v2) : le panneau n'a PLUS de cadre de verre. Son
   `overflow:hidden` cassait le sommaire collant de la Stratégie (un `position:sticky` ne colle pas sous un
   ancêtre qui coupe), et son `backdrop-filter` aurait capturé tout `position:fixed` descendant. Les cartes
   posent directement sur le fond, comme dans la maquette validée et le reste du Cockpit. */
#p-marketing{
  --mIn:#1D1D1F; --mIn2:#424245; --mLab:#86868B; --mLine:rgba(0,0,0,.08); --mLine2:rgba(0,0,0,.12);
  --mWell:#F5F5F7; --mGlass:rgba(255,255,255,.82); --mCob:#0071E3; --mCobL:#2997FF;
  position:relative; color:var(--mIn);
}
#p-marketing .mainHead{margin-bottom:20px}
#p-marketing .mainHead h2{font-size:27px; letter-spacing:-.6px}
#p-marketing .mainHead .date{color:var(--mLab)}

/* ══ Les pages ══ */
.mkPage{display:none}
.mkPage.on{display:block; animation:panelIn .26s cubic-bezier(.2,.7,.3,1) both}

/* ══ Génériques repeints (verre clair) ══ */
#p-marketing .card{background:var(--card); border:0; border-radius:22px; padding:20px 22px; box-shadow:var(--card-shadow)}
#p-marketing .note{color:var(--mLab)}
:is(#p-marketing,.mkModal) .dot{box-shadow:0 0 8px currentColor}
.dCob{background:#0071E3; color:#0071E3} .dOk{background:#2FA84F; color:#2FA84F}
.dOr{background:#E8A13D; color:#E8A13D} .dBad{background:#E5484D; color:#E5484D}
.dInfo{background:#2492B3; color:#2492B3} .dViolet{background:#7C5CD6; color:#7C5CD6}
#p-marketing .dKpi{background:var(--mGlass); border:1px solid var(--mLine); border-radius:18px; padding:16px 18px;
  box-shadow:0 14px 32px -26px #10306466, inset 0 1px 0 #ffffff}
#p-marketing .dKpi .l{color:var(--mLab)}
#p-marketing .dKpi .v{font-size:26px; font-weight:800; margin-top:7px;
  background:linear-gradient(120deg,#003E80 15%,#2997FF 90%); -webkit-background-clip:text; background-clip:text; color:transparent}
#p-marketing .dKpi .s{color:var(--mLab)}
:is(#p-marketing,.mkModal) .ecAjout input{background:var(--mWell); border:1px solid var(--mLine2); border-radius:12px;
  color:var(--mIn); padding:10px 12px; font:inherit; font-size:13px}
:is(#p-marketing,.mkModal) input:focus, .mkModal select:focus, .mkModal textarea:focus{outline:none; border-color:var(--mCobL); box-shadow:0 0 0 3px #0071E31f}

/* ══ Communs marketing ══ */
.mkIntro{font-size:14px; color:var(--mIn2); line-height:1.7; max-width:100ch; margin-bottom:20px}
.mkIntro b{color:var(--mIn); font-weight:700}
.mkFiltres{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.mkFiltres a{font-size:11px; font-weight:700; letter-spacing:.3px; color:var(--mIn2);
  background:#fff; border:1px solid var(--mLine2); border-radius:999px;
  padding:6px 13px; cursor:pointer; user-select:none; transition:all .15s}
.mkFiltres a:hover:not(.on){color:var(--mCob); border-color:var(--mCobL)}
.mkFiltres a.on{color:#fff; background:linear-gradient(135deg,#0071E3,#2997FF); border-color:transparent;
  box-shadow:0 8px 18px -10px #0071E3AA}
.mkSrc{font-size:11px; color:var(--mLab); line-height:1.7; margin-top:16px}
.mkSrc a{color:var(--mCob); text-decoration:none; overflow-wrap:anywhere}
.mkTag{display:inline-flex; align-items:center; font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  border-radius:999px; padding:3px 9px; border:1px solid var(--mLine2); color:var(--mIn2); background:#fff}
.mkTag.video{color:#7C3AB8; border-color:#8A3FC236; background:#8A3FC20d}
.mkTag.carrousel{color:#1B7C99; border-color:#2492B336; background:#2492B30d}
.mkTag.pilier{color:var(--mCob); border-color:#2997FF40; background:#2997FF0f}
.mkTag.on-vert{color:#217A3C; border-color:#2FA84F44; background:#2FA84F10}
.mh5{font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--mLab); margin:0 0 10px}
.mkVol{display:flex; flex-direction:column; gap:8px}
.mkVol .it{display:block; position:relative; font-size:12.5px; color:var(--mIn2); line-height:1.6;
  background:var(--mWell); border:1px solid var(--mLine); border-radius:12px; padding:10px 14px 10px 32px}
.mkVol .it::before{content:"→"; position:absolute; left:13px; top:10px; color:var(--mCob); font-weight:800}
.mkVol .it b{color:var(--mIn)}
.mkVol.vol-cob .it{border-color:#2997FF3d; background:#EDF4FD}
.mkDeux{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:860px){.mkDeux{grid-template-columns:1fr}}

/* ══ Héros (pitch, verdict) — le registre cobalt profond, précédent du panneau Écoute ══ */
.mkHero{position:relative; border-radius:24px; padding:26px 30px; overflow:hidden; color:#fff;
  background:
    radial-gradient(600px 240px at 14% -8%, #2997FF3d, transparent 62%),
    linear-gradient(150deg,#2C2C2E,#1C1C1E 70%);
  border:1px solid #0071E344;
  box-shadow:0 30px 64px -34px #1C1C1EB8, inset 0 1px 0 #ffffff22}
.mkHeroLab{font-size:10.5px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:#8FB4FF}
.mkHeroTx{font-size:15.5px; color:#E9F0FF; line-height:1.75; margin-top:12px; max-width:100ch}
.mkHeroTx b{color:#fff}
.mkHeroSig{font-size:11.5px; color:#7C8DB8; margin-top:14px}

/* ══ Plan de bataille ══ */
.mkRegles{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:13px}
.mkRegle{background:var(--mWell); border:1px solid var(--mLine); border-radius:16px; padding:16px 18px}
.mkRegle .rn{display:flex; align-items:baseline; gap:10px; font-size:14px; font-weight:800; color:var(--mIn)}
.mkRegle .rn i{font-style:normal; font-size:11px; font-weight:800; color:var(--mCob);
  background:#2997FF14; border:1px solid #2997FF33; border-radius:8px; padding:2px 8px; flex:0 0 auto}
.mkRegle p{font-size:12.5px; color:var(--mIn2); line-height:1.65; margin-top:8px}

.mkBoucle{display:flex; flex-wrap:wrap; align-items:stretch}
.mkBoucle .et{flex:1; min-width:150px; background:var(--mWell); border:1px solid var(--mLine); border-radius:16px;
  padding:14px 16px; position:relative; margin-right:26px; margin-bottom:8px}
.mkBoucle .et:last-child{margin-right:0}
.mkBoucle .et::after{content:"→"; position:absolute; right:-21px; top:50%; transform:translateY(-50%);
  color:var(--mCobL); font-size:15px; font-weight:800}
.mkBoucle .et:last-child::after{content:""}
.mkBoucle .et b{display:block; font-size:12.5px; color:var(--mIn)}
.mkBoucle .et span{display:block; font-size:11px; color:var(--mIn2); line-height:1.55; margin-top:5px}
/* checklist */
#p-marketing .cki{color:var(--mIn2); border-bottom:1px solid var(--mLine); display:flex; align-items:center; gap:12px;
  padding:11px 4px; font-size:13.5px; cursor:pointer}
#p-marketing .cki .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--mLine2);background:#fff;flex:0 0 auto}
#p-marketing .cki .ckt{flex:1}
#p-marketing .cki.done{color:var(--mLab); text-decoration:line-through}
#p-marketing .cki.done .box{background:#2FA84F; border-color:#2FA84F}
#p-marketing .cki .del{opacity:0; color:var(--mLab); padding:0 4px; cursor:pointer}
#p-marketing .cki:hover .del{opacity:1}
#p-marketing .cki .del:hover{color:#E5484D}

/* ══ Concurrents ══ */
.cqGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:13px}
.cqCard{background:var(--mGlass); border:1px solid var(--mLine); border-radius:18px; padding:17px 18px; cursor:pointer;
  min-width:0; transition:border-color .18s, transform .18s, box-shadow .18s;
  box-shadow:0 14px 32px -26px #10306466, inset 0 1px 0 #ffffff}
.cqCard:hover{border-color:var(--mCobL); transform:translateY(-2px); box-shadow:0 20px 44px -24px #0071E366}
.cqTop{display:flex; align-items:center; gap:12px}
.cqAv{flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:#fff; background:linear-gradient(150deg,#2997FF,#0071E3);
  box-shadow:0 10px 22px -10px #0071E388, inset 0 1px 0 #ffffff50}
.cqNom{flex:1; min-width:0}
.cqNom b{display:block; font-size:15px; color:var(--mIn)}
.cqNom span{font-size:11px; color:var(--mLab); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cqProm{font-size:12.5px; color:var(--mIn2); line-height:1.6; margin-top:11px; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.cqFoot{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.cqFoot .mchip{font-size:10px; padding:3px 9px}

/* ══ Playbook ══ */
.fmtGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:13px}
.fmtCard{background:#fff; border:1px solid var(--mLine); border-radius:16px; padding:17px 18px; min-width:0;
  box-shadow:0 10px 26px -22px #10306455}
.fmtCard .fh{display:flex; align-items:flex-start; gap:10px}
.fmtCard .fh b{flex:1; font-size:14.5px; color:var(--mIn); line-height:1.35}
.fmtCard .fm{font-size:12.5px; color:var(--mIn2); line-height:1.65; margin-top:9px}
.fmtCard .fc{font-size:12.5px; color:var(--mIn); line-height:1.6; margin-top:10px;
  background:#EDF4FD; border:1px solid #D6E4FF; border-radius:12px; padding:9px 12px}
.fmtCard .fc b{color:var(--mCob)}
.fmtCard .fx{font-size:11.5px; color:var(--mLab); line-height:1.55; margin-top:9px; font-style:italic}
.fmtRecette{margin-top:10px; border:1px solid var(--mLine); border-radius:11px; background:var(--mWell)}
.fmtRecette summary{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--mCob);
  padding:8px 12px; cursor:pointer; list-style:none; user-select:none}
.fmtRecette summary::-webkit-details-marker{display:none}
.fmtRecette summary::after{content:" ▾"}
.fmtRecette[open] summary::after{content:" ▴"}
.fmtRecette p{font-size:12px; color:var(--mIn2); line-height:1.65; padding:0 12px 10px}
.hkList{display:flex; flex-direction:column}
.hkRow{display:flex; align-items:flex-start; gap:12px; padding:11px 2px; border-bottom:1px solid var(--mLine);
  font-size:13.5px; color:var(--mIn)}
.hkRow:last-child{border-bottom:none}
.hkRow .ht{flex:1; line-height:1.55}
.hkRow .mchip{flex:0 0 auto; margin-top:1px}
.cp{flex:0 0 auto; opacity:0; font-size:11px; font-weight:700; color:var(--mCob); cursor:pointer; padding:2px 6px}
.hkRow:hover .cp, label:hover .cp{opacity:1}
.ensAcc{border:1px solid var(--mLine); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 10px 26px -24px #10306455}
.ensAcc+.ensAcc{margin-top:12px}
.ensAcc summary{display:flex; align-items:center; gap:11px; padding:15px 18px; cursor:pointer; list-style:none; user-select:none}
.ensAcc summary::-webkit-details-marker{display:none}
.ensAcc summary b{flex:1; font-size:14px; color:var(--mIn)}
.ensAcc summary .n{font-size:11px; color:var(--mLab); text-align:right}
.ensAcc summary::after{content:"▾"; color:var(--mLab); transition:transform .15s}
.ensAcc[open] summary::after{transform:rotate(180deg)}
.ensAcc .accBody{padding:0 18px 16px}
.accResume{padding:10px 0 4px}
.ensRow{padding:12px 0; border-top:1px solid var(--mLine)}
.ensRow b{display:block; font-size:13px; color:var(--mIn); line-height:1.5}
.ensRow p{font-size:12.5px; color:var(--mIn2); line-height:1.65; margin-top:5px}
.ensRow .ap{font-size:12px; color:var(--mCob); line-height:1.6; margin-top:6px}
.ensRow .ap::before{content:"⟶ Cadevia : "; font-weight:800}
:is(#p-marketing,.mkModal) .mTx{font-size:13.5px; line-height:1.7}
#p-marketing .mTx{color:var(--mIn2)}

/* ══ Petites étiquettes (fiche concurrent) ══ */
.stRef{font-size:9.5px; font-weight:800; letter-spacing:.5px; color:var(--mCob); background:#2997FF12;
  border:1px solid #2997FF33; border-radius:999px; padding:2px 7px}

/* ══ Stratégie › La fabrication : phases, arborescence, outils ══ */
.phGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:13px}
.phCard{background:var(--mWell); border:1px solid var(--mLine); border-radius:16px; padding:16px 18px}
.phCard b{display:block; font-size:13px; color:var(--mIn); margin-top:9px; line-height:1.45}
.phCard p{font-size:12px; color:var(--mIn2); line-height:1.65; margin-top:8px}
.mkArbo{font-size:12px; color:var(--mCob); background:#EDF4FD; border:1px solid #D6E4FF;
  border-radius:12px; padding:13px 16px; line-height:1.7; overflow-x:auto; margin-bottom:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mkTbl td small{display:block; color:var(--mLab); font-size:11px; margin-top:2px; white-space:normal}
.mkVerdict{font-size:11px; font-weight:700}
.mkVerdict.oui{color:#2FA84F} .mkVerdict.non{color:#E5484D} .mkVerdict.bof{color:#C98A1F}

/* ══ Modales (sur <body> — même verre clair) ══ */
.mkModal{--mIn:#10182B; --mIn2:#4A5468; --mLab:#8A93A6; --mLine:#E3EAF8; --mLine2:#D6E0F2;
  --mWell:#F4F7FD; --mCob:#0071E3; --mCobL:#2997FF;
  position:fixed; inset:0; z-index:70; background:#1C1C1E82;
  backdrop-filter:blur(9px) saturate(1.15); -webkit-backdrop-filter:blur(9px) saturate(1.15);
  display:flex; align-items:flex-start; justify-content:center; padding:26px 16px; overflow-y:auto}
.mkModal .mBox{border-radius:24px; max-width:1020px; width:100%; padding:0 0 26px; margin:auto 0; color:var(--mIn);
  background:
    radial-gradient(700px 260px at 82% -6%, #E2EBFF 0%, transparent 60%),
    linear-gradient(165deg,#FEFEFF,#F6F9FE);
  border:1px solid #E0E8F7;
  box-shadow:0 60px 120px -40px #04102ECC, inset 0 1px 0 #ffffff}
.mkModal .mHead{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:14px; padding:20px 26px 16px;
  background:#FDFEFFEE; border-bottom:1px solid var(--mLine); border-radius:24px 24px 0 0;
  backdrop-filter:blur(18px)}
.mkModal .mHead .cqAv{width:46px; height:46px; font-size:17px}
.mkModal .mHead .t{flex:1; min-width:0}
.mkModal .mHead .t b{display:block; font-size:18px; font-weight:800; color:var(--mIn); line-height:1.3}
.mkModal .mHead .t span{font-size:11.5px; color:var(--mLab)}
.mkModal .mX{flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--mLine2);
  background:#fff; color:var(--mIn2); font-size:14px; cursor:pointer}
.mkModal .mX:hover{color:#E5484D; border-color:#E5484D}

.mkModal .mBody{padding:20px 26px 0}
.mkModal h5{font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--mCob); margin:22px 0 10px}
.mkModal h5:first-child{margin-top:0}
.mkModal .note{color:var(--mLab)}
.mkModal .mTx{color:var(--mIn2)}
.mkModal .mTx b{color:var(--mIn)}
.mkModal .tbl th{color:var(--mLab); border-bottom-color:var(--mLine2)}
.mkModal .tbl td{color:var(--mIn2); border-bottom-color:var(--mLine)}
.mkModal .tbl td b{color:var(--mIn)}
.mkModal .mchip{color:var(--mIn2); background:var(--mWell); border-color:var(--mLine2)}

/* fiche d'édition */

.mkModal input, .mkModal select, .mkModal textarea{
  background:#fff; border:1px solid var(--mLine2); border-radius:12px;
  color:var(--mIn); padding:10px 12px; font:inherit; font-size:13px}
.mkModal textarea{background:var(--mWell)}

.mt12{margin-top:12px}
:is(#p-marketing,.mkModal) .btnP{background:linear-gradient(135deg,#0071E3,#2997FF); box-shadow:0 10px 22px -10px #0071E3AA}
:is(#p-marketing,.mkModal) .btnP:hover{filter:brightness(1.08)}

.copieManuelle{width:100%; min-height:380px; resize:vertical; line-height:1.6; font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ══ Concurrents — logos & chiffres façon fiche marché ══ */
.cqLogo{flex:0 0 auto; width:42px; height:42px; border-radius:11px; object-fit:cover; background:#fff;
  border:1px solid var(--mLine); box-shadow:0 6px 14px -8px #10306455}
.mkModal .mHead .cqLogo{width:52px; height:52px; border-radius:13px}
.cqNote{font-size:11px; color:var(--mIn2); margin-top:3px}
.cqNote b{color:#B9791F; font-weight:800}

/* ══ Fiche concurrent — page pleine largeur, façon fiche marché ══ */
.fcPage{animation:panelIn .26s cubic-bezier(.2,.7,.3,1) both}
.fcRetour{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--mIn2);
  background:#fff; border:1px solid var(--mLine2); border-radius:999px; padding:8px 14px; cursor:pointer; margin-bottom:18px}
.fcRetour:hover{color:var(--mCob); border-color:var(--mCobL)}
.fcHero{display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:#fff; border:1px solid var(--mLine);
  border-radius:24px; padding:24px 28px; box-shadow:0 22px 50px -34px #10306466}
.fcHero .cqLogo{width:88px; height:88px; border-radius:22px; box-shadow:0 14px 30px -14px #10306466}
.fcHero .cqAv{width:88px; height:88px; border-radius:22px; font-size:30px}
.fcHero .fcT{flex:1; min-width:260px}
.fcHero .fcT h3{font-size:28px; font-weight:800; letter-spacing:-.5px; color:var(--mIn); line-height:1.15}
.fcHero .fcT .fcSub{font-size:13px; color:var(--mIn2); margin-top:6px; line-height:1.5}
.fcHero .fcBadges{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.fcBadge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--mIn);
  background:var(--mWell); border:1px solid var(--mLine); border-radius:999px; padding:6px 12px}
.fcBadge b{color:#B9791F}
.fcHero .fcActions{display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.fcKpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; margin-top:16px}
.fcK{background:#fff; border:1px solid var(--mLine); border-radius:18px; padding:16px 18px; min-width:0;
  box-shadow:0 14px 32px -28px #10306455; display:flex; flex-direction:column; gap:6px}
.fcK.argent{background:linear-gradient(160deg,#F4F8FF,#fff); border-color:#D6E4FF}
.fcK .l{font-size:9.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:var(--mLab)}
.fcK .h{font-size:26px; font-weight:800; letter-spacing:-.5px; color:var(--mIn); line-height:1.15; overflow-wrap:anywhere}
.fcK.argent .h{background:linear-gradient(120deg,#003E80 10%,#2997FF 90%); -webkit-background-clip:text; background-clip:text; color:transparent}
.fcK .d{font-size:11.5px; color:var(--mIn2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.fcK:hover .d{-webkit-line-clamp:unset}
.fcK .s{font-size:10.5px; color:var(--mLab); margin-top:auto; padding-top:4px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.fcK .s a{color:var(--mCob); text-decoration:none}
.fcSec{margin-top:22px}
.fcSec h4{font-size:15px; font-weight:800; color:var(--mIn); letter-spacing:-.2px; display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.fcSec h4 small{font-size:11.5px; font-weight:600; color:var(--mLab)}
.fcDeux{display:grid; grid-template-columns:1.15fr 1fr; gap:16px; align-items:start}
@media (max-width:980px){.fcDeux{grid-template-columns:1fr}}
.fcCarte{background:#fff; border:1px solid var(--mLine); border-radius:20px; padding:20px 22px; box-shadow:0 14px 32px -28px #10306455}
.fcTx{font-size:14px; color:var(--mIn2); line-height:1.7}
.fcTx b{color:var(--mIn)}
.fcFrise{display:flex; flex-direction:column; gap:0; position:relative; padding-left:18px}
.fcFrise::before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--mCobL),#D6E4FF)}
.fcEv{position:relative; padding:7px 0 7px 14px; font-size:13px; color:var(--mIn2); line-height:1.5}
.fcEv::before{content:""; position:absolute; left:-17px; top:13px; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--mCobL)}
.fcEv b{display:inline-block; min-width:64px; color:var(--mCob); font-weight:800; font-size:12px; margin-right:6px}
.fcAdsBar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px}
.fcAdsBar .dKpi{flex:1; min-width:150px}
.adGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.adCard{background:var(--mWell); border:1px solid var(--mLine); border-radius:16px; padding:15px 17px; display:flex; flex-direction:column; gap:8px}
.adCard .adTop{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:10.5px; color:var(--mLab)}
.adCard .adTop .mkTag{font-size:9px}
.adCard .adTitre{font-size:13.5px; font-weight:800; color:var(--mIn); line-height:1.4}
.adCard .adTexte{font-size:12.5px; color:var(--mIn2); line-height:1.55; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line}
.adCard:hover .adTexte{-webkit-line-clamp:unset}
.adCard .adCta{margin-top:auto; font-size:11px; font-weight:800; color:var(--mCob)}
.fcVide{font-size:13px; color:var(--mIn2); background:var(--mWell); border:1px dashed var(--mLine2); border-radius:14px; padding:14px 16px; line-height:1.6}
.fcRes .tbl td,.fcRes .tbl th{font-size:13px}
.fcVol .it{font-size:13.5px}

/* ══ Connexions : la liste des relevés ══ */
.pfRel{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--mLine); font-size:12.5px; color:var(--mIn2)}
.pfRel:first-of-type{border-top:none}
.pfRel b{color:var(--mIn)}
.pfRel .del{margin-left:auto; opacity:0; color:var(--mLab); cursor:pointer}
.pfRel:hover .del{opacity:1}
.pfRel .del:hover{color:#E5484D}

/* ══ Avatars ══ */
.avGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px}
.avCard{background:#fff; border:1px solid var(--mLine); border-radius:16px; padding:17px 18px;
  box-shadow:0 10px 26px -22px #10306455; display:flex; flex-direction:column; gap:10px}
.avTete{display:flex; align-items:flex-start; gap:12px}
.avTete b{display:block; font-size:15px; color:var(--mIn)}
.avTete span{display:block; font-size:11.5px; color:var(--mIn2); line-height:1.5; margin-top:3px}
.avLigne{font-size:12px; color:var(--mIn2); line-height:1.6}
.avLigne i{display:block; font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:var(--mLab); margin-bottom:3px}
.avLigne .avPrompt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--mCob);
  background:#EDF4FD; border:1px solid #D6E4FF; border-radius:10px; padding:8px 11px; display:block}
.avLigne .cp{opacity:.7; text-transform:none; letter-spacing:0}

/* ══ Liens de bio · boîte de réception · rapport du lundi ══ */
.lnUrl{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--mCob); font-weight:700}

.tbl .del{color:var(--mLab); cursor:pointer; opacity:.45}
.tbl .del:hover{color:#E5484D; opacity:1}
.bxList{display:flex; flex-direction:column; max-height:440px; overflow:auto}
.bxRow{display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--mLine); align-items:flex-start}
.bxRow:first-child{border-top:none}
.bxCanal{flex:0 0 auto; display:flex; align-items:center; padding-top:1px}
.bxT{flex:1; min-width:0; font-size:12.5px; color:var(--mIn)}
.bxT small{color:var(--mLab); font-size:11px}
.bxT p{margin:3px 0 0; color:var(--mIn2); line-height:1.5}
.bxRep{flex:0 0 auto; font-size:11px; font-weight:800; color:var(--mCob); text-decoration:none; white-space:nowrap}

.rpApercu{margin-top:12px; background:var(--mWell); border:1px solid var(--mLine); border-radius:12px; padding:12px 14px;
  font-size:12.5px; color:var(--mIn); line-height:1.55}
.rpApercu b{display:block; margin-bottom:6px}
.rpApercu p{margin:2px 0}
.rpApercu p.sub{padding-left:14px; color:var(--mIn2)}

/* ══ Connexions : dossiers pCloud, erreurs, aide ══ */
.pbFil{font-size:11.5px; color:var(--mLab); margin:10px 0 4px}
.pbFil a{color:var(--mCob); cursor:pointer; font-weight:700}
.pbDos{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid var(--mLine); font-size:12.5px}
.pbDos a{color:var(--mIn); cursor:pointer; font-weight:700}
.pbErr{background:#FDECEC; border:1px solid #E5484D44; border-radius:10px; padding:8px 10px; margin-top:8px; font-size:12px; color:#7A1F1A; cursor:pointer; line-height:1.45}
.pbAide{margin-top:14px; font-size:12.5px; color:var(--mIn2)}
.pbAide summary{cursor:pointer; font-weight:800; color:var(--mIn); font-size:13px}
.pbAide .tbl td{font-size:12px; vertical-align:top}
.pbAide code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--mCob)}

/* ══ Adaptation mobile ══ */
@media (max-width:760px){
  .mkHero{padding:20px 18px}
  .mkModal{padding:14px 8px}
  .mkModal .mBody{padding:16px 14px 0}
  .mkModal .mHead{padding:14px 14px 12px}
}

/* ══ Le panneau TikTok des feuilles de programmation et de confirmation (UX Guidelines Direct Post : créateur affiché, confidentialité sans défaut, rien de coché) ══ */
.ttPanel{margin-top:16px; padding:14px 16px; border:1px solid #2997FF3d; border-radius:12px; background:#F6F9FF}
.ttHead{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--mIn2)}
.ttLogo{display:inline-flex; width:22px; height:22px; border-radius:6px; background:#000; color:#fff; align-items:center; justify-content:center; font-weight:900}
.ttCreateur{display:inline-flex; align-items:center; gap:6px; color:var(--mIn)}
.ttCreateur img{width:28px; height:28px; border-radius:50%; object-fit:cover}
.ttApercu{display:block; margin-top:12px; max-height:260px; max-width:100%; border-radius:10px; background:#000}
/* Carrousel : les pages en bande, dans l'ordre, numérotées — l'ordre EST l'information.
   Une bande qui défile plutôt qu'une grille : 13 pages ne doivent pas repousser le bouton
   « Confirmer » hors de l'écran. */
.ttApercuGrille{display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:6px}
.ttApercuGrille figure{margin:0; position:relative; flex:0 0 auto}
.ttApercuGrille img{display:block; height:150px; width:auto; border-radius:8px; background:#0b0f16}
.ttApercuGrille figcaption{position:absolute; left:6px; top:6px; min-width:18px; text-align:center;
  background:rgba(8,12,20,.78); color:#fff; font-size:11px; font-weight:600; border-radius:6px; padding:1px 5px}
.ttReq{font-size:9px; color:#E5484D; font-weight:800; margin-left:6px}
.ttGroupe{margin-top:12px}
.ttT{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--mIn2); margin-bottom:6px}
.ttCk{display:inline-flex; align-items:center; gap:6px; margin:4px 14px 4px 0; font-size:12.5px; color:var(--mIn); font-weight:600}
.ttCk i{font-weight:400; color:var(--mIn2)}
.ttSous{margin:6px 0 0 22px}
.ttDecl{margin-top:12px; font-size:12px; color:var(--mIn); font-weight:600}
.ttDecl a{color:var(--mCob)}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   Marketing v2 (29 sept. 2026) — quatre écrans + le tiroir ⚙︎ Connexions. Mise en page de la maquette
   validée (docs/mockups/2026-09-29-cockpit-marketing-v2-gabarit.html), variables de style.css.
   Classes préfixées `mk` : `.pill` (couts.css) et `.chip`/`.kpi` (style.css) existent déjà ailleurs.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
#p-marketing .mkHead{align-items:center; gap:12px 18px; margin-bottom:20px}
#mk-nav{flex-wrap:wrap}
.mkGear{margin-left:auto; display:inline-flex; align-items:center; gap:7px; border:0; background:var(--card); color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.06); padding:7px 13px; border-radius:999px; font:inherit; font-size:13px; font-weight:500; cursor:pointer}
.mkGear:hover{box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.18)}
.mkPastille{background:rgba(255,149,0,.14); color:var(--warn); font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px}

/* ── Stratégie : une page, un sommaire collant ── */
.mkStrat{display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; align-items:start}
.mkSomm{position:sticky; top:92px; display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:18px;
  background:var(--glass); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow)}
.mkSomm button{border:0; background:transparent; text-align:left; padding:7px 9px; border-radius:9px; font:inherit; font-size:13px;
  font-weight:500; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; gap:6px}
.mkSomm button:hover{background:var(--fill2)}
.mkSomm button.on{background:var(--fill); font-weight:650}
.mkSomm button small{color:var(--ink3); font-weight:500}
.mkBlocs{display:flex; flex-direction:column; gap:34px; min-width:0}
.mkBloc{display:flex; flex-direction:column; gap:16px; min-width:0; scroll-margin-top:92px}
.mkBlocT{margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; color:var(--ink)}
.mkBlocT small{font-size:13px; font-weight:400; letter-spacing:0; color:var(--ink2)}
.mkBloc .mkIntro{margin-bottom:4px}
.mkObj{display:flex; flex-direction:column; gap:9px}
.mkObj label{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--ink); cursor:pointer}
.mkObj input{flex:0 0 auto; width:16px; height:16px; margin-top:2px; accent-color:var(--blue)}
.mkThemes{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.mkTheme{border-radius:14px; padding:12px 14px; background:var(--card2); display:flex; flex-direction:column; gap:5px}
.mkTheme b{display:flex; align-items:center; gap:7px; font-size:14px; color:var(--ink)}
.mkTheme b i{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.mkTheme b .num{margin-left:auto; font-size:13px; font-weight:600; color:var(--ink2)}
.mkTheme span{font-size:12.5px; line-height:1.45; color:var(--ink2)}
.mkTheme small{font-size:11px; color:var(--ink3)}
.mkDeuxCartes{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:1100px){.mkDeuxCartes{grid-template-columns:minmax(0,1fr)}}

/* ── Les couches (au niveau de <body>) : voile, tiroir, feuille, toast ── */
.mkTiroir,.mkFeuille{--mIn:#1D1D1F; --mIn2:#424245; --mLab:#86868B; --mLine:rgba(0,0,0,.08); --mLine2:rgba(0,0,0,.12);
  --mWell:#F5F5F7; --mCob:#0071E3; --mCobL:#2997FF; color:var(--ink)}
.mkVoile{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.22); opacity:0; pointer-events:none; transition:opacity .2s}
.mkVoile.on{opacity:1; pointer-events:auto}
.mkTiroir{position:fixed; top:12px; right:12px; bottom:12px; z-index:70; width:min(420px,calc(100% - 24px));
  display:flex; flex-direction:column; overflow:hidden; border-radius:22px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.35); visibility:hidden; transform:translateX(calc(100% + 24px));
  transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s}
.mkTiroir.on{visibility:visible; transform:none; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s}
.mkTh{display:flex; align-items:center; gap:10px; padding:16px 18px 10px}
.mkTh h3{margin:0; font-size:17px; font-weight:700}
.mkX{margin-left:auto; flex:0 0 auto; border:0; background:var(--fill); color:var(--ink); width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px}
.mkTb{overflow-y:auto; overscroll-behavior:contain; padding:0 18px 18px; display:flex; flex-direction:column; gap:16px}
.mkCx h4{margin:0 0 6px; font-size:12px; font-weight:650; color:var(--ink2)}
.mkCxl{display:flex; flex-direction:column; background:#fff; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.05)}
.mkCxr{display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; min-width:0}
.mkCxr:last-child{border-bottom:0}
.mkCxH{display:flex; align-items:flex-start; gap:10px}
.mkCxH .nm{flex:1; min-width:0; font-weight:600; line-height:1.35}
.mkCxH .nm small{display:block; margin-top:2px; font-size:11.5px; font-weight:400; color:var(--ink2); line-height:1.45; overflow-wrap:anywhere}
.mkCxH .nm code,.mkCxl code{font-family:var(--mono); font-size:11px; color:var(--link)}
.mkPill{flex:0 0 auto; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap}
.mkPill.ok{background:var(--green-bg); color:var(--ok)}
.mkPill.non{background:var(--red-bg); color:var(--bad)}
.mkPill.att{background:rgba(255,149,0,.14); color:var(--warn)}
.mkCxAct{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.mkCxAct input{flex:1 1 150px}
.mkCxForm{display:flex; flex-wrap:wrap; gap:6px}
.mkCxForm input,.mkCxForm select{flex:1 1 130px}
.mkCxPied{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px 12px; border-top:1px solid var(--line)}
.mkCxPied .note{font-size:12px; line-height:1.5}
.mkCxSous{padding:10px 12px 0; font-size:11px; font-weight:650; color:var(--ink2)}
.mkCxl .pbErr{margin:6px 12px 10px; cursor:default}
.mkCxl .pbAide{margin:0; padding:10px 12px}
.mkCxDos{padding:0 12px 8px}
.mkCxDos:empty{display:none}
.mkCxLien{display:flex; align-items:flex-start; gap:8px; padding:7px 0 0; border-top:1px solid var(--line)}
.mkCxLien .nm{flex:1; min-width:0}
.mkCxLien small{display:block; font-size:11px; color:var(--ink2); line-height:1.45; overflow-wrap:anywhere}
.mkCxLien .lnUrl{overflow-wrap:anywhere}
.mkCxMini{display:inline-flex; gap:4px; flex:0 0 auto}
.mkCxr .pfRel{padding:6px 0; font-size:12px}
.mkCxr .pfRel .del{opacity:.55}   /* au doigt, pas de survol : la croix reste visible */
.mkLienBtn{border:0; background:var(--fill2); color:var(--link); font:inherit; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; cursor:pointer}
.mkLienBtn.rouge{color:var(--bad)}
.mkRouge{color:var(--bad)}
.mkRetour{background:rgba(0,113,227,.10); box-shadow:inset 0 0 0 1px rgba(0,113,227,.22); border-radius:12px; padding:9px 12px;
  font-size:13px; font-weight:600; color:var(--link); line-height:1.45}
.mkTiroir input:not([type="checkbox"]):not([type="radio"]),.mkTiroir select,.mkFeuille input:not([type="checkbox"]):not([type="radio"]),.mkFeuille select,.mkFeuille textarea{border:0; background:var(--fill2); border-radius:9px;
  padding:7px 10px; font:inherit; font-size:13px; font-weight:400; color:var(--ink); min-width:0; outline:0}
.mkTiroir input:not([type="checkbox"]):not([type="radio"]):focus,.mkTiroir select:focus,.mkFeuille input:not([type="checkbox"]):not([type="radio"]):focus,.mkFeuille select:focus,.mkFeuille textarea:focus{box-shadow:0 0 0 3px rgba(0,113,227,.22)}
.mkBtn{border:0; background:var(--blue); color:#fff; padding:6px 13px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap}
.mkBtn:hover{background:#0077ED}
.mkBtn.gris{background:var(--fill); color:var(--ink)}
.mkBtn.gris:hover{background:rgba(120,120,128,.2)}
.mkBtn:disabled{opacity:.5; cursor:default}
.mkFeuille{position:fixed; left:50%; top:50%; z-index:80; width:min(520px,calc(100% - 24px)); max-height:calc(100% - 40px); overflow-y:auto;
  padding:20px; border-radius:24px; background:#fff; box-shadow:0 40px 90px -20px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; visibility:hidden; transform:translate(-50%,-46%) scale(.98);
  transition:opacity .18s, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s}
.mkFeuille.on{opacity:1; pointer-events:auto; visibility:visible; transform:translate(-50%,-50%); transition:opacity .18s, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s}
.mkFt b{display:block; font-size:17px; font-weight:700}
.mkFt span{display:block; margin-top:4px; font-size:12.5px; line-height:1.45; color:var(--ink2)}
.mkChamps{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.mkChamp{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink2)}
.mkChamp textarea{min-height:90px; resize:vertical; line-height:1.4}
.mkChampsDeux{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mkActions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:18px}
.mkToast{position:fixed; left:50%; bottom:22px; z-index:90; display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px);
  padding:10px 14px; border-radius:14px; background:rgba(29,29,31,.92); color:#fff; font-size:13px;
  opacity:0; pointer-events:none; transform:translate(-50%,20px); transition:opacity .2s, transform .2s}
.mkToast.on{opacity:1; pointer-events:auto; transform:translate(-50%,0)}
.mkToast button{border:0; background:rgba(255,255,255,.18); color:#fff; border-radius:999px; padding:4px 10px; font:inherit; font-weight:600; cursor:pointer}
.mkToast button[hidden]{display:none}
@media (max-width:760px){
  .mkStrat{grid-template-columns:minmax(0,1fr)}
  .mkSomm{position:static; flex-direction:row; flex-wrap:wrap}
  .mkGear{margin-left:0}
  .mkChampsDeux{grid-template-columns:1fr}
  #p-marketing .card{padding:18px 16px}
}
/* ── Communs des écrans (maquette validée) ── */
.mkPage.on{display:flex; flex-direction:column; gap:16px}
#p-marketing .barre{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
#p-marketing .seg.petit button{padding:5px 11px; font-size:12.5px}
/* Une rangée de choix plus large que l'écran DÉFILE (au téléphone), elle ne déborde jamais de la page. */
#p-marketing .seg.petit{max-width:100%; overflow-x:auto; scrollbar-width:none}
#p-marketing .seg.petit::-webkit-scrollbar{display:none}
#p-marketing .seg.petit button{flex:0 0 auto}
.mkChip{border:0; background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06); padding:5px 11px; border-radius:999px;
  font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.mkChip.on{background:var(--ink); color:#fff}
.mkChip i{width:7px; height:7px; border-radius:50%; display:inline-block}
.mkChip .num{opacity:.6}
.mkSel,.mkRecherche{border:0; background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.06); border-radius:999px; padding:6px 12px; font:inherit;
  font-size:13px; color:var(--ink); outline:0; min-width:0}
.mkRecherche{flex:1 1 200px; max-width:300px}
.mkSel:focus,.mkRecherche:focus{box-shadow:0 0 0 3px rgba(0,113,227,.22)}
:is(#p-marketing,.mkFeuille) .bandeau{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.45}
:is(#p-marketing,.mkFeuille) .bandeau.reel{background:rgba(0,113,227,.10); box-shadow:inset 0 0 0 1px rgba(0,113,227,.22)}
:is(#p-marketing,.mkFeuille) .bandeau.alerte{background:#FFF6D6; box-shadow:inset 0 0 0 1px #F2D675; display:block}
:is(#p-marketing,.mkFeuille) .bandeau.alerte details{margin-top:6px; font-size:12px}
.mkRz{display:inline-flex; gap:3px; vertical-align:middle}
.mkRz i{width:16px; height:16px; border-radius:5px; font-style:normal; font-size:8.5px; font-weight:800; color:#fff; display:inline-grid; place-items:center; letter-spacing:0}
/* La vignette : un cadre gris avec la référence, l'image par-dessus (une image introuvable disparaît, le cadre reste). */
.mkVg{position:relative; display:block; overflow:hidden; background:var(--card2); aspect-ratio:4/5}
.mkVg>b{position:absolute; inset:0; display:grid; place-items:center; padding:4px; font-size:10.5px; font-weight:700; color:var(--ink3); text-align:center; overflow-wrap:anywhere; line-height:1.2}
.mkVg>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
/* Points d'état (Calendrier, Bibliothèque, feuilles) */
.e-publiee{background:var(--ok)} .e-programmee{background:var(--blue)} .e-confirmee,.e-proposee,.e-sur-pcloud{background:#FF9500} .e-erreur{background:#FF3B30} .e-libre{background:#AEAEB2}
.pt{width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto}

/* ── Bibliothèque ── */
#p-marketing .bstats{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; font-size:13px; color:var(--ink2)}
#p-marketing .bstats b{color:var(--ink); font-size:15px}
#p-marketing .bgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
#p-marketing .bcard{background:var(--card); border-radius:16px; overflow:hidden; box-shadow:var(--card-shadow); cursor:pointer; border:0; padding:0;
  text-align:left; display:flex; flex-direction:column; font:inherit; color:var(--ink); min-width:0}
#p-marketing .bcard:hover{transform:translateY(-1px)}
#p-marketing .bcard .cv{position:relative}
#p-marketing .bcard .cv .ty{position:absolute; top:7px; left:7px; background:rgba(0,0,0,.62); color:#fff; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px}
#p-marketing .bcard .cv .st{position:absolute; top:7px; right:7px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; background:#fff}
#p-marketing .bcard .cv .fm{position:absolute; left:7px; bottom:7px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; background:#FFF6D6; color:var(--warn)}
.st.s-publiee{color:var(--ok)} .st.s-programmee{color:var(--blue)} .st.s-libre{color:var(--ink2)} .st.s-erreur{color:var(--bad)} .st.s-a-produire{color:var(--warn)}
#p-marketing .bcard .in{padding:9px 11px 12px; display:flex; flex-direction:column; gap:4px; min-width:0}
#p-marketing .bcard .in b{font-size:11.5px; font-weight:650; color:var(--ink2)}
#p-marketing .bcard .in span{font-size:13px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
#p-marketing .bcard .in small{font-size:11.5px; color:var(--ink3); display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
#p-marketing .bcard .in small i{width:7px; height:7px; border-radius:50%; flex:0 0 auto; display:inline-block}

/* ── La feuille (détail d'un contenu, d'un post, programmation) ── */
.mkFeuille.large{width:min(680px,calc(100% - 24px))}
.mkFeuille .fh{display:flex; gap:14px; align-items:flex-start}
.mkFeuille .fh .mkVg{width:96px; flex:0 0 auto; border-radius:12px}
.mkFeuille .fh .mkVg.grand{width:128px}
.mkFeuille .fh .t{display:flex; flex-direction:column; gap:4px; min-width:0}
.mkFeuille .fh .t>b{font-size:12px; color:var(--ink2)}
.mkFeuille .fh .t>span:not(.note){font-size:16px; font-weight:650; line-height:1.3}
.mkFeuille .note{font-size:12.5px; color:var(--ink2); line-height:1.45}
.mkSec{margin-top:16px}
.mkSec h4,.mkSec>summary{margin:0 0 6px; font-size:12px; font-weight:650; color:var(--ink2); cursor:default}
details.mkSec>summary{cursor:pointer}
.mkSec p{margin:0; font-size:13.5px; line-height:1.5}
.mkLeg{white-space:pre-wrap; margin:0; font:inherit; font-size:13px; line-height:1.5; background:var(--fill2); border-radius:10px; padding:10px 12px; max-height:240px; overflow:auto}
.mkChemin{font-family:var(--mono); font-size:11px!important; overflow-wrap:anywhere}
.mkListe{margin:6px 0 0; padding-left:18px; font-size:13px; line-height:1.5}
.mkPostL{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; padding:4px 0}
.mkPostL small{flex-basis:100%; color:var(--bad); font-size:11.5px; line-height:1.4}
.mkStatL{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; padding:4px 0}
.mkStatL small{color:var(--ink3); font-size:11.5px}
.mkBtn.mkDanger{color:var(--bad)}
.mkActions .mkBtn.mkDanger{margin-right:auto}

/* ── Performance ── */
#p-marketing .ct{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 14px; font-size:16px; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
#p-marketing .ct small{font-size:12.5px; font-weight:400; color:var(--ink2)}
#p-marketing .ct .droite{margin-left:auto}
#p-marketing .mkRow{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
#p-marketing .mkKpis{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
#p-marketing .mkKpi{background:var(--card); border-radius:18px; padding:14px 16px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:3px; min-width:0}
#p-marketing .mkKpi .l{font-size:12.5px; font-weight:500; color:var(--ink2)}
#p-marketing .mkKpi .v{font-size:26px; font-weight:700; letter-spacing:-.025em}
#p-marketing .mkKpi .d{font-size:12px; font-weight:600; line-height:1.35}
#p-marketing .mkKpi .d.up{color:var(--ok)} #p-marketing .mkKpi .d.down{color:var(--bad)} #p-marketing .mkKpi .d.neutre{color:var(--ink3); font-weight:500}
#p-marketing .mkKpi .d .vs{color:var(--ink3); font-weight:500}
#p-marketing .mkKpi svg{width:100%; height:30px; margin-top:4px}
#p-marketing .vd{color:var(--ink3); cursor:help; border-bottom:1px dotted rgba(0,0,0,.25)}
#p-marketing .graph svg{width:100%; height:auto; display:block}
#p-marketing .graph text{font-size:10.5px; fill:var(--ink3)}
#p-marketing .leg{display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--ink2); margin-top:8px}
#p-marketing .leg span{display:inline-flex; align-items:center; gap:5px}
#p-marketing .leg i{width:9px; height:9px; border-radius:3px; display:inline-block}
#p-marketing .graph .note{margin-top:8px}
#p-marketing .entonnoir{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
#p-marketing .mkEt{display:grid; grid-template-columns:150px minmax(0,1fr) 64px; align-items:center; gap:10px; font-size:13px}
#p-marketing .mkEt .barre-e{height:26px; border-radius:7px; background:rgba(0,113,227,.10); position:relative; overflow:hidden}
#p-marketing .mkEt .barre-e i{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#0071E3,#4DA3FF); border-radius:7px}
#p-marketing .mkEt .v{text-align:right; font-weight:650}
#p-marketing .tblw{overflow-x:auto; margin:0 -6px; padding:0 6px}
#p-marketing table.posts{width:100%; border-collapse:collapse; font-size:13px; min-width:980px}
#p-marketing table.posts th{text-align:right; font-size:11.5px; font-weight:600; color:var(--ink2); padding:8px; border-bottom:1px solid var(--line); cursor:default; white-space:nowrap; user-select:none}
#p-marketing table.posts th[data-pf-tri]{cursor:pointer}
#p-marketing table.posts th:first-child,#p-marketing table.posts td:first-child{text-align:left}
#p-marketing table.posts th.tri{color:var(--ink)}
#p-marketing table.posts td{padding:7px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; color:var(--ink)}
#p-marketing table.posts td.par{font-size:11px; color:var(--ink3)}
#p-marketing table.posts tr[data-pf-post]{cursor:pointer}
#p-marketing table.posts tbody tr:hover td{background:var(--fill2)}
#p-marketing .pcell{display:flex; align-items:center; gap:10px; min-width:260px}
#p-marketing .pcell .mkVg.mini3{width:34px; height:42px; border-radius:6px; flex:0 0 auto; aspect-ratio:auto}
#p-marketing .pcell .t{display:flex; flex-direction:column; gap:1px; white-space:normal; max-width:300px; min-width:0}
#p-marketing .pcell .t b{font-size:12px; font-weight:650}
#p-marketing .pcell .t b span{color:var(--ink3); font-weight:500}
#p-marketing .pcell .t span{font-size:12.5px; line-height:1.3}
#p-marketing .pcell .t small{font-size:11px; color:var(--ink3)}
#p-marketing .verdict{font-size:14px}
#p-marketing .mur{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
#p-marketing .mur .m{position:relative; border-radius:12px; overflow:hidden; cursor:pointer; border:0; padding:0; background:var(--card2); font:inherit}
#p-marketing .mur .m .o{position:absolute; inset:auto 0 0 0; padding:18px 8px 6px; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; font-size:12px; font-weight:650; display:flex; justify-content:space-between}
#p-marketing .barres-c{display:flex; flex-direction:column; gap:9px; margin-bottom:8px}
#p-marketing .bc{display:grid; grid-template-columns:130px minmax(0,1fr) 110px; gap:10px; align-items:center; font-size:12.5px}
#p-marketing .bc>span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#p-marketing .bc .tr{height:10px; border-radius:5px; background:var(--fill2); overflow:hidden}
#p-marketing .bc .tr i{display:block; height:100%; border-radius:5px}
#p-marketing .bc .val{text-align:right; color:var(--ink2)}
#p-marketing .heat{display:grid; grid-template-columns:34px repeat(24,minmax(0,1fr)); gap:2px; font-size:10px; color:var(--ink3); margin-bottom:10px}
#p-marketing .heat .c{aspect-ratio:1; border-radius:3px}
#p-marketing .heat .c.slot{outline:1.5px solid var(--ink); outline-offset:-1.5px}
#p-marketing .heat .h{text-align:center}
#p-marketing .decl{display:flex; flex-direction:column; gap:10px}
#p-marketing .dl{display:flex; align-items:center; gap:10px}
#p-marketing .dl .mkVg.mini2{width:40px; height:50px; border-radius:7px; flex:0 0 auto; aspect-ratio:auto}
#p-marketing .dl .t{flex:1; min-width:0; font-size:12.5px; line-height:1.3}
#p-marketing .dl .t b{display:block; font-size:12px}
@media (max-width:760px){
  #p-marketing .mkEt{grid-template-columns:104px minmax(0,1fr) 54px}
  #p-marketing .bc{grid-template-columns:96px minmax(0,1fr) 92px}
  #p-marketing .heat{grid-template-columns:28px repeat(24,minmax(0,1fr))}
}

/* ── Calendrier ── */
#p-marketing .calzone{display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:16px; align-items:start}
#p-marketing .calmain{display:flex; flex-direction:column; gap:12px; min-width:0}
#p-marketing .calhead{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
#p-marketing .calhead h3{margin:0; font-size:20px; font-weight:700; letter-spacing:-.02em; min-width:150px}
#p-marketing .calhead #cal-remplir{margin-left:auto}
.mkNavBtn{border:0; background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px; font-family:inherit}
#p-marketing .etats{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12px; color:var(--ink2)}
#p-marketing .etats span{display:inline-flex; align-items:center; gap:5px}
#p-marketing .mois{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
#p-marketing .jn{font-size:11.5px; font-weight:600; color:var(--ink3); padding:0 4px}
#p-marketing .jour{background:var(--card); border-radius:12px; min-height:128px; padding:6px 6px 8px; display:flex; flex-direction:column; gap:4px;
  box-shadow:0 1px 1px rgba(0,0,0,.03); transition:box-shadow .15s,background .15s; min-width:0}
#p-marketing .jour.hors{opacity:.45}
#p-marketing :is(.jour,.sj,.ag).passe{background:rgba(255,255,255,.55)}
#p-marketing :is(.jour,.sj,.ag).auj{box-shadow:inset 0 0 0 2px var(--blue)}
#p-marketing :is(.jour,.sj,.ag).cible{box-shadow:inset 0 0 0 2px var(--blue),0 8px 20px -10px rgba(0,113,227,.5); background:#F2F8FF}
#p-marketing :is(.jour,.sj,.ag).attente{cursor:copy; box-shadow:inset 0 0 0 1px rgba(0,113,227,.35)}
#p-marketing .jour .dn{display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600; padding:0 2px}
#p-marketing .jour.auj .dn b{background:var(--blue); color:#fff; border-radius:999px; padding:0 6px}
#p-marketing .jour .dn .num{color:var(--ink3); font-weight:500}
#p-marketing .vide{font-size:11px; color:var(--ink3); padding:2px}
#p-marketing .pst{display:flex; align-items:center; gap:5px; padding:2px; border-radius:7px; cursor:grab; min-width:0; background:transparent}
#p-marketing .pst:hover{background:var(--fill2)}
#p-marketing .pst.verrou{cursor:pointer}
#p-marketing .pst.err{background:var(--red-bg)}
#p-marketing .pst .mkVg.mini{width:22px; height:28px; border-radius:4px; flex:0 0 auto; aspect-ratio:auto}
#p-marketing .pst .hh{font-size:11px; font-weight:600; flex:0 0 auto}
#p-marketing .pst .rf{font-size:10.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
#p-marketing .pst .lk{font-size:9px; flex:0 0 auto}
#p-marketing .pst .pt{margin-left:auto}
#p-marketing .semaine{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
#p-marketing .sj{background:var(--card); border-radius:14px; padding:8px; display:flex; flex-direction:column; gap:8px; min-height:420px; min-width:0}
#p-marketing .sj h4{margin:0; font-size:12.5px; font-weight:600; color:var(--ink2)}
#p-marketing .sj h4 b{color:var(--ink); font-size:15px}
#p-marketing .sc{border-radius:10px; overflow:hidden; background:var(--card2); cursor:grab; position:relative}
#p-marketing .sc .mkVg{aspect-ratio:4/5}
#p-marketing .sc .i{padding:5px 7px 7px; font-size:11px; line-height:1.3; display:flex; flex-direction:column; gap:3px; min-width:0}
#p-marketing .sc .i b{font-size:11.5px}
#p-marketing .sc .i span{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
#p-marketing .sc .i .rzl{display:flex; align-items:center; gap:6px; -webkit-line-clamp:unset}
#p-marketing .sc .i .rzl .pt{margin-left:auto}
#p-marketing .sc .hb{position:absolute; top:6px; left:6px; background:rgba(0,0,0,.66); color:#fff; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:999px}
#p-marketing .agenda{display:flex; flex-direction:column; gap:8px}
#p-marketing .ag{background:var(--card); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:6px}
#p-marketing .ag h4{margin:0; font-size:13px; font-weight:600}
#p-marketing .ag .l{display:flex; gap:8px; flex-wrap:wrap}
#p-marketing .ag .pst{background:var(--card2); padding:4px 8px 4px 4px; max-width:100%}
#p-marketing .tray{position:sticky; top:92px; background:var(--glass); backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid var(--glass-edge); border-radius:20px; padding:14px; box-shadow:var(--glass-shadow); display:flex; flex-direction:column; gap:10px;
  max-height:calc(100vh - 110px); min-width:0}
#p-marketing .tray h3{margin:0; font-size:15px; font-weight:650}
#p-marketing .tray .sous{font-size:12px; color:var(--ink2); line-height:1.4}
#p-marketing .tray input{width:100%; border:0; background:var(--fill2); border-radius:9px; padding:7px 10px; outline:0; font:inherit; font-size:13px; color:var(--ink)}
#p-marketing .tray .barre{gap:6px}
#p-marketing .tray .mkSel{flex:1 1 100%; box-shadow:none; background:var(--fill2); border-radius:9px}
#p-marketing .tgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:max-content; gap:8px; overflow-y:auto; padding:2px; margin:0 -2px; min-height:0; flex:1 1 auto}
#p-marketing .tcard{background:#fff; border-radius:10px; overflow:hidden; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,.06); border:0; padding:0; text-align:left;
  position:relative; font:inherit; color:var(--ink); min-width:0}
#p-marketing .tcard .lb{display:block; font-size:10.5px; line-height:1.25; padding:4px 6px 6px; color:var(--ink2); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
#p-marketing .tcard .lb b{color:var(--ink); font-size:11px}
#p-marketing .tcard.choisie{outline:2px solid var(--blue)}
#p-marketing .tcard .ty{position:absolute; top:5px; left:5px; background:rgba(0,0,0,.62); color:#fff; font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:999px}
#p-marketing .tcard .sf{position:absolute; top:5px; right:5px; background:#FFF6D6; color:var(--warn); font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:999px}
#p-marketing .placement{display:none; align-items:center; gap:10px; background:var(--blue); color:#fff; padding:9px 14px; border-radius:12px; font-size:13px; font-weight:500;
  position:sticky; top:84px; z-index:5}
#p-marketing .placement.on{display:flex}
#p-marketing .placement button{margin-left:auto; border:0; background:rgba(255,255,255,.2); color:#fff; border-radius:999px; padding:4px 10px; cursor:pointer; font:inherit}
/* La feuille : cases de réseaux, erreur lisible, proposition « Remplir les trous » */
.mkFeuille .cases{display:flex; flex-wrap:wrap; gap:8px}
.mkFeuille .cases label{display:inline-flex; align-items:center; gap:6px; background:var(--fill2); padding:6px 10px; border-radius:10px; font-weight:500; color:var(--ink); font-size:13px}
.mkFeuille .cases label.off{opacity:.45}
.mkFeuille .mkChamp input[type="checkbox"]{width:auto}
.mkErreur{background:var(--red-bg); color:#8A1C12; border-radius:12px; padding:10px 12px; font-size:13px; line-height:1.45; margin:0}
.mkErreur small{color:#8A1C12; opacity:.85}
.mkPropL{display:flex; flex-direction:column; gap:6px; margin-top:14px; max-height:46vh; overflow-y:auto}
.mkPropL .dl{display:flex; align-items:center; gap:10px}
.mkPropL .mkVg.mini2{width:40px; height:50px; border-radius:7px; flex:0 0 auto; aspect-ratio:auto}
.mkPropL .t{flex:1; min-width:0; font-size:12.5px; line-height:1.3}
.mkPropL .t b{display:block; font-size:12px}
.mkPropL .etat{flex:0 0 auto; font-size:12px; font-weight:700; color:var(--ok)}
.mkPropL .deja{display:block; margin-top:2px; font-size:11px; font-weight:600; color:var(--warn)}
.mkFeuille .ttPanel{margin-top:0}
.mkFeuille .ttCk{display:block; margin:6px 0; line-height:1.45}
.mkFeuille .ttCk input{margin:0 6px 0 0; vertical-align:-2px}
.mkFeuille .ttGroupe .note,.mkFeuille .ttPanel>.note{margin-top:8px}
.mkFeuille .ttPanel .mkChamp select{max-width:100%}
@media (max-width:1100px){
  #p-marketing .calzone{grid-template-columns:minmax(0,1fr)}
  #p-marketing .tray{position:static; max-height:none}
  #p-marketing .tgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); max-height:380px}
}
@media (max-width:760px){
  #p-marketing .calhead #cal-remplir{margin-left:0}
  #p-marketing .placement{top:72px}
}

/* Au téléphone, les quatre écrans ne tiennent pas sur une ligne : une grille 2 × 2 plutôt qu'une piste qui
   se replie en forme de galet (même parti que les formules de Coûts & marge). */
@media (max-width:560px){
  #mk-nav{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; border-radius:16px}
  #mk-nav button{border-radius:13px}
}
@media (prefers-reduced-motion:reduce){.mkTiroir,.mkTiroir.on,.mkFeuille,.mkFeuille.on,.mkToast,.mkVoile{transition:none}}