/* =============================================================================
   ee-demos.css  —  Deux cartes « démos » côte à côte + fenêtre flottante
   excel-exercice.com — version COMPATIBLE (sans propriétés qui font râler
   le correcteur CSS de WordPress/Themify). Apparence identique.
   Cloisonné sous .ee-demos / .ee-democard / .ee-modal.
   ============================================================================= */

.ee-demos-wrap{ max-width:1180px; margin-left:auto; margin-right:auto; padding:72px 28px; }
.ee-demos-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
.ee-demos-head h2{ margin:14px 0 0; }
.ee-demos-head .lede{ margin-top:12px; }

/* ── Les deux cartes côte à côte ─────────────────────────────── */
.ee-demos{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ee-democard{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--c-surface,#fff); border:1px solid var(--c-border,#d4dcd7);
  border-radius:var(--radius,14px); box-shadow:var(--shadow,0 12px 28px -16px rgba(14,24,20,.14)); cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ee-democard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover,0 12px 32px -12px rgba(14,24,20,.18)); border-color:var(--c-brand,#107C41); }
.ee-democard::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--ruled,#107C41); }

/* aperçu (haut de la carte) */
.ee-democard .peek{ padding:22px 22px 0; background:var(--peek-bg,#eaf4ee); }
.ee-democard .peek .miniwin{
  background:#fff; border:1px solid var(--c-border,#d4dcd7); border-radius:10px 10px 0 0;
  border-bottom:none; overflow:hidden; box-shadow:0 -1px 0 rgba(14,24,20,.02), 0 12px 24px -18px rgba(14,24,20,.4);
}
.ee-democard .peek .mw-bar{ height:26px; display:flex; align-items:center; gap:6px; padding:0 11px; background:var(--c-brand,#107C41); }
.ee-democard.is-quiz .peek .mw-bar{ background:#7a4aa3; }
.ee-democard .peek .mw-bar i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); }
.ee-democard .peek .mw-bar .nm{ margin-left:6px; font-family:var(--font-mono,'Space Mono',monospace); font-size:10px; color:rgba(255,255,255,.92); }

/* mini tableur */
.pk-sheet{ width:100%; border-collapse:collapse; font-size:12px; }
.pk-sheet th,.pk-sheet td{ border:1px solid #e7ece9; padding:6px 9px; text-align:left; color:var(--c-text,#36443e); }
.pk-sheet thead th{ background:#f3f6f4; font-family:var(--font-mono,'Space Mono',monospace); font-size:9.5px; color:var(--c-muted,#677571); text-align:center; }
.pk-sheet td.num{ text-align:right; }
.pk-sheet tr.tot td{ font-weight:700; color:var(--c-ink,#0e1814); background:var(--c-brand-pale,#eef6f1); }
.pk-sheet td.cur{ box-shadow:inset 0 0 0 2px var(--c-brand,#107C41); }

/* mini quiz */
.pk-quiz{ padding:12px 13px 14px; }
.pk-quiz .q{ font-size:12.5px; font-weight:600; color:var(--c-ink,#0e1814); margin:0 0 10px; }
.pk-quiz .o{ display:flex; align-items:center; gap:9px; border:1px solid #dce8e1; border-radius:7px; padding:7px 10px; margin-bottom:6px; font-size:11.5px; background:#fff; }
.pk-quiz .o .r{ width:14px; height:14px; border-radius:50%; border:2px solid #c9d2ce; flex-shrink:0; }
.pk-quiz .o.sel{ border-color:#b985dd; background:#f6e2ff; }
.pk-quiz .o.sel .r{ border-color:#9a5cc6; background:radial-gradient(circle,#9a5cc6 0 4px,#fff 5px); }
.pk-quiz .o code{ font-family:var(--font-mono,'Space Mono',monospace); }

/* corps de carte */
.ee-democard .body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.ee-democard .chips{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.fmt-quizmaker{ color:#7a4aa3; background:#f3ecfa; }
.ee-democard h3{ margin:0; }
.ee-democard p{ margin:9px 0 0; font-size:14.5px; line-height:1.55; color:var(--c-text,#36443e); }
.ee-democard .go{
  margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:14.5px; color:var(--c-brand-dark,#0b5a2f);
}
.ee-democard.is-quiz .go{ color:#7a4aa3; }
.ee-democard .go svg{ transition:transform .15s; }
.ee-democard:hover .go svg{ transform:translateX(4px); }

.ee-democard.is-ex   { --ruled:var(--t-xls,#107C41);  --peek-bg:#eaf4ee; }
.ee-democard.is-quiz { --ruled:#9a5cc6;               --peek-bg:#f3ecfa; }

/* ── Fenêtre flottante (modale) ──────────────────────────────── */
.ee-modal{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none; }
.ee-modal.open{ display:block; }
.ee-modal .scrim{ position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(8,20,12,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:eeFade .2s ease; }
.ee-modal .panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:680px; max-width:92vw; max-height:90vh; overflow:auto;
  background:var(--c-surface,#fff); border-radius:var(--radius,14px); box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  animation:eePop .22s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes eeFade{ from{opacity:0} to{opacity:1} }
@keyframes eePop{ from{opacity:0; transform:translate(-50%,-46%) scale(.97)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }
.ee-modal .phead{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--c-border,#d4dcd7); position:-webkit-sticky; position:sticky; top:0; background:var(--c-surface,#fff); }
.ee-modal .phead .ttl{ font-weight:700; color:var(--c-ink,#0e1814); font-size:16px; }
.ee-modal .phead .tag{ font-family:var(--font-mono,'Space Mono',monospace); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:6px; }
.ee-modal .phead .close{
  margin-left:auto; width:34px; height:34px; border-radius:8px; border:1px solid var(--c-border,#d4dcd7);
  background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--c-muted,#677571);
}
.ee-modal .phead .close:hover{ color:var(--c-ink,#0e1814); border-color:var(--c-muted,#677571); }
.ee-modal .pbody{ padding:22px; }

@media(max-width:760px){ .ee-demos{ grid-template-columns:1fr; } }