/* ============================================================
   UniHeberg — Guides Design System (v2)
   Habille les pages /guides/*.html sans toucher au HTML généré :
   on cible les blocs via les signatures des attributs style="..."
   posées par le générateur (identiques sur toutes les pages).
   ============================================================ */

/* ---------- Conteneur & fond ---------- */
main[style*="max-width:800px"]{
  max-width:920px !important;
  padding-top:44px !important;
  padding-bottom:20px !important;
  position:relative;
  isolation:isolate;
}
main[style*="max-width:800px"]::before{
  content:"";
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:min(1100px,160vw); height:520px;
  background:
    radial-gradient(circle at 30% 0%, rgba(111,66,193,0.16) 0%, transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(0,232,122,0.08) 0%, transparent 50%);
  pointer-events:none; z-index:-1;
}
[data-theme="light"] main[style*="max-width:800px"]::before{
  background:
    radial-gradient(circle at 30% 0%, rgba(124,58,237,0.08) 0%, transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(5,150,105,0.05) 0%, transparent 50%);
}

/* ---------- Fil d'Ariane ---------- */
nav[aria-label="Fil d'Ariane"]{
  display:inline-flex !important; align-items:center; gap:2px;
  background:var(--w06); border:1px solid var(--border);
  padding:7px 14px !important; border-radius:100px;
  margin-bottom:36px !important;
}
nav[aria-label="Fil d'Ariane"] a:hover{ color:var(--white) !important; }

/* ---------- En-tête d'article ---------- */
header:has(> h1[style*="letter-spacing:-0.03em"]){
  padding-bottom:36px; margin-bottom:8px !important;
  border-bottom:1px solid var(--border);
}
h1[style*="letter-spacing:-0.03em"]::before{
  content:"Guide UniHeberg";
  display:table; align-items:center; gap:7px;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:0.04em; color:var(--purple);
  background:var(--purple-glow); border:1px solid rgba(111,66,193,0.3);
  padding:6px 14px 6px 14px; border-radius:100px;
  margin-bottom:20px;
}
h1[style*="letter-spacing:-0.03em"]{
  background:linear-gradient(90deg,var(--white) 55%,var(--purple) 130%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
header p[style*="max-width:640px"]{
  font-size:16.5px !important; line-height:1.75 !important; max-width:680px !important;
  border-left:2px solid rgba(111,66,193,0.4); padding-left:16px;
}
header div[style*="font-size:12px;color:var(--w40)"]{
  margin-top:24px !important; flex-wrap:wrap;
}
header div[style*="font-size:12px;color:var(--w40)"] span{
  background:var(--surface); border:1px solid var(--border2);
  padding:6px 12px; border-radius:100px; display:inline-flex; align-items:center;
}
header div[style*="font-size:12px;color:var(--w40)"] span:nth-child(2){
  background:none; border:none; padding:0; color:var(--w20);
}

/* ---------- Sections de contenu (numérotées) ---------- */
article{ counter-reset:gsec; }
article > section{ scroll-margin-top:88px; }
article > section + section{
  border-top:1px solid var(--border);
  padding-top:44px !important;
}
article > section > h2[style*="letter-spacing:-0.02em"]{
  counter-increment:gsec;
  display:flex; align-items:center; gap:14px;
  font-size:clamp(1.2rem,2.6vw,1.6rem) !important;
}
article > section > h2[style*="letter-spacing:-0.02em"]::before{
  content:counter(gsec,decimal-leading-zero);
  flex:none; width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,var(--purple2),var(--purple));
  color:#fff; font-family:'Syne',sans-serif; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(111,66,193,0.35);
}
/* Titre "Guides & articles recommandés" (hors <article>) : pas de numéro */
main ~ section h2[style*="letter-spacing:-0.02em"],
main ~ section h2[style*="text-align:center"]{
  font-size:clamp(1.3rem,3vw,1.7rem) !important;
}

/* Sous-titres (ex: "Processeur : le critère n°1") en badge */
h3[style*="color:var(--purple)"]{
  display:inline-flex !important; align-items:center; gap:8px;
  font-size:12.5px !important; font-weight:700 !important;
  letter-spacing:0.05em; text-transform:uppercase;
  color:var(--purple) !important;
  background:var(--purple-glow); border:1px solid rgba(111,66,193,0.22);
  padding:6px 14px !important; border-radius:100px;
  margin:28px 0 14px !important;
}
h3[style*="color:var(--purple)"]::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--purple); box-shadow:0 0 8px var(--purple);
}

/* Paragraphes / emphase */
article > section div[style*="color:var(--w70);font-size:15px;line-height:1.8"]{
  font-size:15.5px !important;
}
article > section div[style*="color:var(--w70);font-size:15px;line-height:1.8"] p{
  margin-bottom:14px;
}
article > section div[style*="color:var(--w70);font-size:15px;line-height:1.8"] p:last-child{
  margin-bottom:0;
}
article strong{
  color:var(--white); font-weight:700;
  box-shadow:inset 0 -0.42em 0 rgba(111,66,193,0.16);
}

/* ---------- Listes ---------- */
article ul[style*="padding-left:24px"],
article ol[style*="padding-left:24px"]{
  list-style:none !important; padding-left:0 !important;
  display:grid !important; gap:10px; margin:18px 0 !important;
}
article ul[style*="columns:2"]{
  grid-template-columns:repeat(2,1fr) !important; columns:initial !important;
}
@media (max-width:560px){
  article ul[style*="columns:2"]{ grid-template-columns:1fr !important; }
}
article ul[style*="padding-left:24px"] li,
article ol[style*="padding-left:24px"] li{
  position:relative; padding:10px 14px 10px 42px !important;
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; line-height:1.5;
  transition:border-color .15s, transform .15s;
}
article ul[style*="padding-left:24px"] li:hover,
article ol[style*="padding-left:24px"] li:hover{
  border-color:rgba(111,66,193,0.35); transform:translateX(2px);
}
article ul[style*="padding-left:24px"] li::before,
article ol[style*="padding-left:24px"] li::before{
  content:"✓"; position:absolute; left:12px; top:12px;
  width:18px; height:18px; border-radius:50%;
  background:var(--green-dim); color:var(--green);
  font-size:11px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
article ol[style*="padding-left:24px"]{ counter-reset:gstep; }
article ol[style*="padding-left:24px"] li{ counter-increment:gstep; }
article ol[style*="padding-left:24px"] li::before{
  content:counter(gstep);
  background:linear-gradient(135deg,var(--purple2),var(--purple)) !important;
  color:#fff !important;
  width:20px !important; height:20px !important;
  font-size:11px !important; font-family:'Syne',sans-serif; font-weight:700;
}

/* ---------- Tableaux comparatifs ---------- */
article div[style*="overflow-x:auto;margin:20px 0"]{
  border:1px solid var(--border2); border-radius:16px !important;
  background:var(--surface);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
}
[data-theme="light"] article div[style*="overflow-x:auto;margin:20px 0"]{
  box-shadow:0 16px 40px rgba(0,0,0,0.06);
}
article table[style*="border-collapse:collapse"]{
  font-size:13.5px !important;
}
article table[style*="border-collapse:collapse"] thead tr{
  background:linear-gradient(180deg,var(--w06),transparent) !important;
  border-bottom:1px solid var(--border2) !important;
}
article table[style*="border-collapse:collapse"] thead th{
  padding:16px !important; white-space:nowrap;
}
article table[style*="border-collapse:collapse"] tbody tr{
  transition:background .15s;
}
article table[style*="border-collapse:collapse"] tbody tr:hover{
  background:var(--w06);
}
article table[style*="border-collapse:collapse"] tbody td{
  padding:13px 16px !important;
}
article table[style*="border-collapse:collapse"] tbody td:first-child{
  color:var(--w50); font-weight:500;
}
/* Colonne "UniHeberg" mise en avant (2e colonne, texte vert) */
article table[style*="border-collapse:collapse"] tbody td:nth-child(2){
  background:var(--green-dim);
  position:relative;
}
article table[style*="border-collapse:collapse"] thead th:nth-child(2){
  position:relative;
}
article table[style*="border-collapse:collapse"] thead th:nth-child(2)::after{
  content:"★ Recommandé";
  display:block; font-family:'DM Sans',sans-serif; font-weight:600;
  font-size:9.5px; letter-spacing:0.04em; color:var(--green); margin-top:4px;
}

/* ---------- code inline ---------- */
article code[style*="background:var(--bg2)"]{
  font-family:'SFMono-Regular',Consolas,monospace !important;
  border:1px solid var(--border2); color:var(--purple);
}

/* ---------- Encadrés d'information (tip/note, icône + texte) ---------- */
article div[style*="align-items:flex-start"][style*="border-radius:12px"],
article div[style*="align-items:flex-start"][style*="border-radius:16px"]{
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
[data-theme="light"] article div[style*="align-items:flex-start"][style*="border-radius:12px"],
[data-theme="light"] article div[style*="align-items:flex-start"][style*="border-radius:16px"]{
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
}

/* ---------- FAQ (accordéon) ---------- */
article details[style*="border-radius:12px"]{
  transition:border-color .18s, background .18s, box-shadow .18s;
}
article details[style*="border-radius:12px"]:hover{
  border-color:rgba(111,66,193,0.35) !important;
}
article details[open][style*="border-radius:12px"]{
  border-color:rgba(111,66,193,0.45) !important;
  background:var(--purple-glow) !important;
  box-shadow:0 8px 28px rgba(111,66,193,0.12);
}
article details summary{ list-style:none; }
article details summary::-webkit-details-marker{ display:none; }
article details summary i.fa-chevron-down{
  transition:transform .25s ease;
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--w06);
  display:flex; align-items:center; justify-content:center;
}
article details[open] summary i.fa-chevron-down{
  transform:rotate(180deg);
  background:var(--purple); color:#fff !important;
}
article details summary:hover{ color:var(--purple); }

/* ---------- CTA (boîte centrée dégradée) ---------- */
div[style*="linear-gradient(135deg"][style*="text-align:center"]{
  position:relative; overflow:hidden;
}
div[style*="linear-gradient(135deg"][style*="text-align:center"]::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% -20%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events:none;
}
div[style*="linear-gradient(135deg"][style*="text-align:center"] a[style*="border-radius:100px"]{
  transition:transform .2s, box-shadow .2s !important;
}
div[style*="linear-gradient(135deg"][style*="text-align:center"] a[style*="border-radius:100px"]:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 6px 42px rgba(111,66,193,0.55) !important;
}

/* ---------- Blocs "Toutes nos offres" / "Guides recommandés" ---------- */
div[style*="border-radius:20px;padding:28px;margin:48px 0"]{
  background:linear-gradient(180deg,var(--surface),var(--surface2)) !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.22);
}
[data-theme="light"] div[style*="border-radius:20px;padding:28px;margin:48px 0"]{
  box-shadow:0 20px 50px rgba(0,0,0,0.06);
}
a[style*="border-radius:14px;padding:16px;display:flex"]{
  position:relative;
}
a[style*="border-radius:16px;padding:24px;transition:border-color 0.2s,transform 0.2s"]{
  position:relative; overflow:hidden;
}
a[style*="border-radius:16px;padding:24px;transition:border-color 0.2s,transform 0.2s"]::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0);
  transform-origin:left; transition:transform .25s ease;
  background:linear-gradient(90deg,var(--purple2),var(--purple),var(--cyan));
}
a[style*="border-radius:16px;padding:24px;transition:border-color 0.2s,transform 0.2s"]:hover::before{
  transform:scaleX(1);
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  main[style*="max-width:800px"]{ padding-top:24px !important; }
  article > section > h2[style*="letter-spacing:-0.02em"]::before{
    width:32px; height:32px; font-size:12px; border-radius:9px;
  }
  header p[style*="max-width:640px"]{ font-size:15px !important; }
}