/* ============================================================
   LOGICIELS.CSS — Page "Mes licences" (logiciels.html)
   Dépend de theme.css, vitrine.css, profile.css.
   ============================================================ */

/* ---------- En-tête de page ---------- */
.software-hero{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:28px 24px; margin-bottom:22px; position:relative; overflow:hidden;
}
.software-hero::before{
  content:""; position:absolute; right:-20%; top:-50%;
  width:380px; height:380px;
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
  pointer-events:none;
}
.software-hero > *{position:relative; z-index:1;}
.software-hero-text{flex:1; min-width:240px;}
.software-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.5px;
  padding:6px 14px; border-radius:var(--r-pill); text-transform:uppercase;
  margin-bottom:14px;
}
.software-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent);}
.software-hero h1{margin:0 0 8px; font-size:28px; font-weight:800; letter-spacing:-.5px;}
.software-hero .software-sub{margin:0; color:var(--muted); font-size:14px; max-width:640px; line-height:1.5;}

/* ---------- Section produit ---------- */
.product-section{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; margin-bottom:18px;
}
.product-section-head{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; flex-wrap:wrap;
}
.product-section-icon{
  width:44px; height:44px; border-radius:var(--r-md); flex-shrink:0;
  background:var(--accent-grad); color:#fff; display:grid; place-items:center;
  box-shadow:var(--glow);
}
.product-section-icon svg{width:24px; height:24px;}
.product-section-icon.dim{background:var(--surface-3); color:var(--muted); box-shadow:none;}
.product-section-head h2{margin:0 0 4px; font-size:20px; font-weight:800;}
.product-section-head p{margin:0; color:var(--muted); font-size:13px;}
.badge-soon{
  display:inline-block; vertical-align:middle;
  font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-pill); margin-left:6px;
  background:var(--warning-soft,rgba(245,158,11,.16)); color:var(--warning,#F59E0B);
  border:1px solid color-mix(in srgb,var(--warning,#F59E0B) 35%,transparent);
}

/* ---------- États (chargement / vide) ---------- */
.loading-state, .empty-state{
  text-align:center; padding:36px 20px; color:var(--muted); font-size:14px;
  border:1px dashed var(--border); border-radius:var(--r-md);
}
.empty-state svg, .loading-state svg{
  width:32px; height:32px; color:var(--muted-2); margin:0 auto 10px; display:block;
}

/* La grille des modules (ex. « Full maps / DTC ») est immédiatement
   suivie du bloc installeur : sans cette marge, les deux se collaient
   et donnaient un rendu « bousculé ». Ciblé dans .product-section pour
   ne pas affecter la page profil (qui réutilise .submods). */
.product-section .submods{margin-bottom:18px;}

/* ---------- Carte "dernière version" (vedette) ---------- */
.release-featured{
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%,var(--surface-2)) 0%, var(--surface-2) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
  border-radius:var(--r-lg); padding:24px; margin-bottom:22px; position:relative;
  overflow:hidden;
}
.release-featured::before{
  content:""; position:absolute; top:-50%; right:-10%;
  width:280px; height:280px;
  background:radial-gradient(circle, var(--accent-soft-2) 0%, transparent 70%);
  pointer-events:none;
}
.release-featured > *{position:relative; z-index:1;}
.release-featured-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:8px;
}
.release-featured .version-label{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:800;
  padding:4px 10px; border-radius:var(--r-pill); letter-spacing:.5px;
  text-transform:uppercase; box-shadow:var(--glow);
}
.release-featured .version-label .dot{width:6px; height:6px; border-radius:50%; background:#fff;}
.release-version{
  font-size:34px; font-weight:800; letter-spacing:-1px; margin:6px 0 4px;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.release-meta{
  display:flex; align-items:center; gap:14px; color:var(--muted); font-size:13px;
  flex-wrap:wrap; margin-bottom:18px;
}
.release-meta .meta-item{display:inline-flex; align-items:center; gap:6px;}
.release-meta svg{width:14px; height:14px; opacity:.8;}

/* ---------- Notes de version (rendu Markdown) ---------- */
.release-notes{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md);
  padding:18px 20px; margin-bottom:18px;
}
.release-notes-title{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
.release-notes-title svg{width:14px; height:14px; color:var(--accent);}
/* Le HTML injecté (depuis notesHtml côté serveur) contient déjà des <style> inline
   pour la compatibilité email. On ajoute ici les styles qui rendent les notes
   agréables dans le contexte du site. */
.release-notes :is(h3,h4){color:var(--text) !important; margin:14px 0 6px !important;}
.release-notes :is(h3){font-size:15px;}
.release-notes :is(h4){font-size:13px;}
.release-notes ul{margin:6px 0 !important; padding-left:22px !important;}
.release-notes li{margin:5px 0 !important; line-height:1.5;}
.release-notes p{margin:6px 0 !important; line-height:1.55;}
.release-notes hr{border:none !important; border-top:1px solid var(--border) !important; margin:14px 0 !important;}
.release-notes a{color:var(--accent-3,#FB923C) !important; text-decoration:underline;}
.release-notes strong{color:var(--text);}
.release-notes em{color:var(--text);}
.release-notes-empty{color:var(--muted-2); font-size:13px; font-style:italic;}

/* ---------- Actions (téléchargement) ---------- */
.release-actions{display:flex; gap:10px; flex-wrap:wrap;}
.release-actions .btn{font-size:14px; padding:12px 20px;}
.release-actions .btn svg{width:18px; height:18px;}
/* Bloc « Installeur RN-Suite » : chemin recommandé, affiché au-dessus des
   versions et indépendant d'elles. */
.installer-cta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 20px; margin-bottom:16px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.installer-cta-text{flex:1 1 260px; min-width:0;}
.installer-cta-title{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--text);
}
.installer-cta-title svg{width:18px; height:18px; color:var(--accent);}
.installer-version{
  font-size:12px; font-weight:600; color:var(--accent);
  background:var(--accent-soft);
  padding:2px 8px; border-radius:var(--r-pill);
}
.installer-cta p{margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted);}
.installer-cta .btn{flex:0 0 auto;}
.installer-cta .btn svg{width:18px; height:18px;}

/* Avertissement SmartScreen + empreinte : replié par défaut (le chemin normal
   reste le bouton), et sur toute la largeur sous la carte. */
.installer-notice{flex:1 1 100%; margin-top:2px;}
.installer-notice summary{
  cursor:pointer; width:fit-content;
  font-size:12.5px; font-weight:600; color:var(--muted);
  padding:4px 0;
}
.installer-notice summary:hover{color:var(--text);}
.installer-notice p{margin-top:8px;}
.installer-sha{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:10px;
}
.installer-sha span{
  font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted);
}
.installer-sha code, .installer-sha-hint code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11.5px; color:var(--text);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:3px 7px;
  overflow-wrap:anywhere;
}
.installer-sha-hint{font-size:12px;}

/* Précision à la place du bouton d'archive : où récupérer cette version.
   Le client n'a plus de lien direct, ce texte est donc sa seule indication. */
.release-hint{
  display:flex; align-items:center; gap:8px;
  margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted);
}
.release-hint svg{
  width:16px; height:16px; flex:0 0 auto; color:var(--accent);
}
.hash-line{
  display:flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--mono); font-size:11px; color:var(--muted-2);
}
.hash-line .hash-label{color:var(--muted); font-family:var(--font); font-weight:700; letter-spacing:.5px;}
.hash-line code{
  background:var(--surface-3); padding:3px 8px; border-radius:var(--r-sm);
  border:1px solid var(--border); word-break:break-all;
}

/* Notes mal nommées dans webnotes/ — visible de l'administrateur seul.
   Ton « avertissement » assumé : c'est une erreur de publication à corriger. */
.notes-ignored{
  background:var(--warning-soft,rgba(245,158,11,.12));
  border:1px solid color-mix(in srgb,var(--warning,#F59E0B) 35%,transparent);
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:16px;
  font-size:12.5px; color:var(--text);
}
.notes-ignored ul{margin:8px 0 0; padding-left:20px;}
.notes-ignored li{margin:4px 0; color:var(--muted);}
.notes-ignored p{margin:8px 0 0; color:var(--muted);}
.notes-ignored code{
  font-family:var(--mono); font-size:11.5px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:2px 6px;
}

/* ---------- Historique des versions ---------- */
.history-head{
  display:flex; align-items:center; gap:8px; margin:24px 0 14px;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted);
}
.history-head svg{width:14px; height:14px; color:var(--accent);}

.history-list{display:flex; flex-direction:column; gap:10px;}
.history-item{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; transition:var(--t);
}
.history-item-head{
  display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer;
  user-select:none; transition:var(--t-fast);
}
.history-item-head:hover{background:var(--surface-3);}
.history-item-head .v-num{font-size:16px; font-weight:700;}
.history-item-head .v-date{color:var(--muted); font-size:12px; margin-left:auto;}
.history-item-head .chevron{
  width:18px; height:18px; color:var(--muted); transition:transform var(--t);
  flex-shrink:0;
}
.history-item.open .chevron{transform:rotate(180deg);}
.history-item-body{
  display:none; padding:0 16px 16px;
  border-top:1px solid var(--border);
}
.history-item.open .history-item-body{display:block; animation:fadeIn .18s ease;}
.history-item-body .release-notes{margin-bottom:14px;}
.history-item-body .release-actions{margin-top:6px;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

@media (max-width:599px){
  .release-featured{padding:20px 18px;}
  .release-version{font-size:28px;}
  .product-section{padding:20px 18px;}
}