/* ── CP Figma v3 — Contrats préliminaires refonte (cp-integration) ──
       Structural/responsive classes only; all cosmetic styling is emitted
       inline by the cp* helpers in 08_gallery_prelim_contracts.js. These
       class names are NEW — nothing here targets pre-existing markup. */
    .cp-tabbar {
      display: flex;
      flex-wrap: wrap;            /* mobile rule: wrapped tabs, never overflow-x */
      gap: 4px;
      background: var(--cp-surface);
      border: 1px solid var(--cp-border-soft);
      border-radius: 12px;
      padding: 6px 10px;
      width: fit-content;
      max-width: 100%;
    }
    .cp-tabbar button {
      border: none;
      background: transparent;
      color: var(--cp-sub-strong);
      font-size: 13px;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      white-space: nowrap;
    }
    .cp-tabbar button.on {
      background: var(--cp-tint);
      color: var(--cp-teal);
      font-weight: 600;
    }
    .cp-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 16px;
    }
    .cp-rail-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 16px;
      align-items: start;
    }
    @media (max-width: 1080px) {
      .cp-rail-layout { grid-template-columns: 1fr; }
    }
    .cp-card-click { transition: box-shadow .15s ease, border-color .15s ease; }
    .cp-card-click:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      border-color: var(--cp-teal-soft) !important;
    }
    body.dark-theme .cp-card-click:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
    /* SC page shell (PR2): 260px nav rail + main column. NO overflow/transform
       here — the CP typeaheads rely on in-flow + position:fixed dropdowns. */
    .cp-sc-shell {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }
    .cp-scnav-top { display: none; }
    @media (max-width: 1080px) {
      .cp-sc-shell { grid-template-columns: 1fr; }
      .cp-scnav { display: none; }
      .cp-scnav-top { display: block; }
    }
    /* SC body + aside rail (inline 340px grid) collapses on narrow screens. */
    @media (max-width: 900px) {
      .cp-rail-layout-inner { grid-template-columns: 1fr !important; }
    }

    .card-pile-section {
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(16px) saturate(150%);
      -webkit-backdrop-filter: blur(16px) saturate(150%);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 24px;
      margin-bottom: 20px;
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .card-pile-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-pile-title.selected {
      color: #006a85;
    }

    .card-pile-title.deselected {
      color: rgba(255, 255, 255, 0.4);
    }

    /* ===== CARD FLIP ANIMATION ===== */
    .card-flip-container {
      perspective: 1000px;
    }

    .card-flipper {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }

    .card-flip-container.flipped .card-flipper {
      transform: rotateY(180deg);
    }

    .card-front,
    .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 12px;
    }

    .card-back {
      transform: rotateY(180deg);
      background: linear-gradient(145deg, #2d1f5f, #1a1a2e);
      border: 2px solid rgba(0, 106, 133, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-pattern {
      width: 80%;
      height: 80%;
      background-image: repeating-linear-gradient(45deg,
          rgba(0, 106, 133, 0.1),
          rgba(0, 106, 133, 0.1) 10px,
          transparent 10px,
          transparent 20px);
      border-radius: 8px;
      border: 1px solid rgba(0, 106, 133, 0.2);
    }

    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .line-clamp-none {
      display: block;
      -webkit-line-clamp: unset;
    }