/* ==========================================================================
   Offre – UI complète (fiche projet + comparateur colonnes + avis)
   ========================================================================== */

   :root{
    --b:#e5e7eb;        /* border */
    --m:#6b7280;        /* muted text */
    --v:#5b21b6;        /* brand */
    --bg:#ffffff;       /* panel */
    --bg-sub:#fafafa;   /* subtle background */
    --ok:#16a34a;       /* green check */
  }
  
  /* Base */
  body{padding-top:85px;font-family:Inter,Arial,sans-serif;margin:0;color:#111827;background:#fff;}
  .container{max-width:1240px;margin:auto;padding:1.5rem;}
  .flex{display:flex;gap:2rem;}
  .main{flex:1;} .aside{width:360px;}
  h1{font-size:clamp(1.6rem,2vw+1rem,2.2rem);margin:0 0 .8rem;}
  .muted{color:var(--m);}
  .badge{background:var(--v);color:#fff;border-radius:.5rem;padding:.15rem .55rem;font-size:.75rem;}
  .rating{display:flex;gap:.25rem;font-size:.9rem;align-items:center}
  .star{color:#fbbf24}
  
  /* Auteur */
  .user{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem;}
  .user img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#f3f4f6}
  
  /* Carousel */
  .carousel{position:relative;border:1px solid var(--b);border-radius:.75rem;overflow:hidden;background:#000}
  .carousel img,.carousel video{width:100%;aspect-ratio:16/9;object-fit:cover}
  .nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:none;width:42px;height:42px;border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,.12);cursor:pointer}
  .nav-btn svg{width:20px;height:20px}
  .nav-prev{left:10px} .nav-next{right:10px}
  .play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .play-overlay::after{content:'';border:solid transparent;border-width:12px 0 12px 18px;border-left-color:#fff;margin-left:4px}
  .thumbs{display:flex;gap:.5rem;margin-top:.5rem;overflow-x:auto}
  .thumbs img,.thumbs video{width:80px;height:56px;border:1px solid var(--b);border-radius:.3rem;object-fit:cover;opacity:.6;cursor:pointer;background:#000}
  .thumbs .active{opacity:1;border-color:var(--v)}
  
  /* Sections */
  .section{margin-top:2rem}
  .section h2{font-size:1.25rem;margin:.4rem 0}
  .profile{border:1px solid var(--b);border-radius:.75rem;padding:1.2rem;background:#fff}
  
  /* Aside – box packs */
  .pack-box{position:sticky;top:80px;border:1px solid var(--b);border-radius:.75rem;padding:1.5rem;background:#fff}
  .tabs{display:flex;border-bottom:1px solid var(--b);margin:-1.5rem -1.5rem 1.2rem}
  .tabs button{flex:1;border:none;background:none;padding:1rem;font-weight:700;cursor:pointer}
  .tabs .active{border-bottom:3px solid var(--v);color:#111}
  .price{font-size:1.8rem;font-weight:800;margin:.25rem 0}
  .desc{font-size:.95rem;margin:.7rem 0}
  .delay{font-size:.9rem;margin-bottom:.6rem}
  .includes h4{font-size:.95rem;margin:.3rem 0}
  .includes ul{margin:.2rem 0 0;padding-left:1.1rem}
  .includes li{margin:.15rem 0}
  
  /* Buttons */
  .btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1rem;border:none;border-radius:.5rem;font-weight:700;font-size:.95rem;cursor:pointer}
  .btn-primary{background:#111827;color:#fff}
  .btn-outline{background:#fff;border:1px solid var(--b);color:#111}
  .actions{margin-top:1.1rem;display:flex;flex-direction:column;gap:.6rem}
  
  /* Modal */
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;visibility:hidden;opacity:0;transition:.2s}
  .modal.show{visibility:visible;opacity:1}
  .modal .box{background:#fff;border-radius:.75rem;width:440px;max-width:95%;padding:1.5rem;border:1px solid var(--b)}
  .modal h3{margin-top:0;font-size:1.2rem}
  .modal .field{display:flex;flex-direction:column;margin-bottom:1rem;font-size:.95rem}
  .modal .btns{display:flex;gap:.8rem;justify-content:flex-end;margin-top:1rem}
  
  /* Reviews – résumé */
  .reviews-summary{display:grid;grid-template-columns:160px 1fr auto;gap:18px;align-items:center;border:1px solid var(--b);border-radius:.75rem;padding:1rem;background:#fff}
  .score{display:flex;flex-direction:column;align-items:center;gap:4px}
  .score-big{font-size:2rem;font-weight:800}
  .stars{letter-spacing:2px;color:#fbbf24}
  .bars .bar-row{display:flex;gap:.6rem;align-items:center;margin:.25rem 0}
  .bars .label{width:84px;color:var(--m);font-size:.9rem}
  .bars .bar{flex:1;height:8px;background:#f3f4f6;border-radius:999px;overflow:hidden}
  .bars .bar i{display:block;height:100%;background:#111827}
  .bars .num{min-width:38px;text-align:right;color:var(--m);font-size:.9rem}
  .breakdown{display:flex;gap:14px;align-items:center;color:#111}
  .breakdown b{margin-left:.25rem}
  
  /* Review card */
  .review{border-top:1px solid var(--b);padding:1rem 0;font-size:.95rem;background:#fff}
  .review:first-child{border-top:none}
  .review-head{display:flex;align-items:center;gap:.8rem}
  .avatar-circle{width:36px;height:36px;border-radius:50%;background:#f3f4f6;display:grid;place-items:center;font-weight:800;color:#111;border:1px solid var(--b)}
  .review .info .name{font-weight:700}
  .review .rate{margin-left:auto;font-weight:700}
  
  /* ==========================================================================
     COMPARAISON – Offres en colonnes, infos en lignes
     ========================================================================== */
  
  .compare.alt{overflow-x:auto;border-radius:.75rem;border:1px solid var(--b);background:#fff}
  .compare-table.alt{width:100%;border-collapse:separate;border-spacing:0}
  .compare-table.alt thead th{
    padding:16px;
    border-bottom:1px solid var(--b);
    vertical-align:top;
    background:#fff;
  }
  .compare-table.alt thead th:first-child{
    min-width:180px; width:22%;
    background:#fff; text-align:left;
  }
  .pkg-head .price{font-weight:800;font-size:1.1rem;margin-bottom:4px}
  .pkg-head .pkg-name{font-weight:700}
  .pkg-sub{color:var(--m);font-size:.9rem;margin-top:6px;white-space:pre-line}
  
  .compare-table.alt tbody td{
    padding:14px 16px;
    border-top:1px solid var(--b);
    text-align:center;
    vertical-align:middle;
  }
  .compare-table.alt tbody td:first-child{
    text-align:left;background:var(--bg-sub);font-weight:600;
    position:sticky; left:0; z-index:1; /* garde l’intitulé visible à l’horizontale */
  }
  .compare-table.alt tbody tr:nth-child(odd) td:not(:first-child){background:#fff}
  .compare-table.alt tbody tr:nth-child(even) td:not(:first-child){background:#fcfcfd}
  
  .compare-table.alt .total-row td{
    background:#f8fafc;font-weight:700;border-top:2px solid var(--b)
  }
  .compare-table.alt .total-row td .total-price{margin-bottom:.5rem}
  
  /* cocher/— dans les cellules */
  .compare-table.alt td{font-size:.95rem}
  .compare-table.alt td:contains("✔"), .compare-table.alt td .ok{color:var(--ok);font-weight:800}
  .compare-table.alt td .dash{color:var(--m)}
  
  /* petite astuce CSS pour ✓ si tu utilises des booléens via classes */
  .tick{color:var(--ok);font-weight:900}
  .dash{color:var(--m)}
  
  /* Responsive : table scroll */
  .compare.alt::-webkit-scrollbar{height:10px}
  .compare.alt::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}
  
  /* ==========================================================================
     Utilitaires + adhérences
     ========================================================================== */
  
  ul.inc{margin:.2rem 0 0;padding-left:1.1rem}
  ul.inc li{margin:.15rem 0}
  
  @media (max-width: 1024px){
    .aside{width:320px}
  }
  @media (max-width: 860px){
    .flex{flex-direction:column}
    .aside{width:auto}
    .reviews-summary{grid-template-columns:1fr}
  }
  
  /* Bouton d’édition flottant (fourni) */
  .sticky-edit{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:999}
  .sticky-edit button{padding:.8rem 2rem;font-size:1rem;color:#fff;border:none;border-radius:.5rem;cursor:pointer;background:#5F36F5}