/* =====================================================================
   Pages guide (SEO) — design system partagé des 3 pages :
   /achat-revente-leboncoin, /achat-revente-leboncoin-pc,
   /achat-revente-leboncoin-iphones.
   Mêmes jetons que la page /achat-revente pour une identité cohérente.
   Chargé en /assets/guide.css?v=N — incrémenter N à chaque modification
   (le cache des assets est immuable un an).
   ===================================================================== */
:root{
  --bg:#05070d;
  --bg-2:#090d18;
  --card:rgba(255,255,255,.035);
  --card-strong:rgba(255,255,255,.055);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --text:#f2f5ff;
  --muted:#9aa5c2;
  --accent:#4c7ef3;
  --accent-2:#6c63ff;
  --grad:linear-gradient(100deg,#4c7ef3,#6c63ff);
  --grad-btn:linear-gradient(100deg,#3b63d6,#5348e0);
  --green:#2fd47a;
  --green-dim:rgba(47,212,122,.12);
  --radius:18px;
  --font-h:"Montserrat",system-ui,sans-serif;
  --font-b:"Inter",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font:16px/1.7 var(--font-b);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ---------- barre de navigation ---------- */
.barre{
  position:sticky;top:0;z-index:50;
  background:rgba(5,7,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.barre-in{
  max-width:1060px;margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:18px;
}
.barre-logo{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-h);font-weight:800;font-size:1.02rem;color:var(--text);
  white-space:nowrap;
}
.barre-logo:hover{text-decoration:none}
.barre-logo img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.barre-nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.barre-nav::-webkit-scrollbar{display:none}
.barre-nav a{
  color:var(--muted);font-size:.88rem;font-weight:600;white-space:nowrap;
  padding:7px 11px;border-radius:999px;
}
.barre-nav a:hover{color:var(--text);text-decoration:none;background:var(--card-strong)}
.barre-nav a[aria-current="page"]{color:var(--text);background:var(--card-strong)}
.barre-cta{
  flex:0 0 auto;
  background:var(--grad-btn);color:#fff;font-weight:700;font-size:.86rem;
  padding:9px 16px;border-radius:999px;white-space:nowrap;
}
.barre-cta:hover{text-decoration:none;filter:brightness(1.08)}
@media (max-width:760px){
  .barre-in{padding:9px 14px;gap:10px}
  .barre-logo span{display:none}
  .barre-nav a{font-size:.8rem;padding:6px 9px}
  .barre-cta{font-size:.78rem;padding:8px 12px}
  /* Le nom de la niche s'efface quand la barre devient étroite : l'onglet actif
     indique déjà où l'on est, et le bouton ne doit pas écraser la navigation. */
  .cta-niche{display:none}
}

/* ---------- fil d'ariane ---------- */
.fil-ariane{font-size:.8rem;color:var(--muted);margin:22px 0 0}
.fil-ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.fil-ariane li+li::before{content:"›";margin-right:6px;color:var(--muted)}
.fil-ariane a{color:var(--muted)}
.fil-ariane [aria-current]{color:var(--text)}

/* ---------- en-tête d'article ---------- */
.article-hero{padding:26px 0 8px}
.article-hero h1{
  font-family:var(--font-h);font-weight:900;letter-spacing:-.01em;
  font-size:clamp(1.7rem,4.6vw,2.6rem);line-height:1.16;margin:10px 0 14px;
}
.article-hero .accroche{color:var(--muted);font-size:1.06rem;max-width:680px}
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:18px 0 0;color:var(--muted);font-size:.84rem;
}
.article-meta img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.article-meta b{color:var(--text);font-weight:600}
.pastille{
  display:inline-block;padding:4px 11px;border-radius:999px;
  background:var(--green-dim);color:var(--green);
  font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}

/* ---------- sommaire ---------- */
.sommaire{
  margin:30px 0 8px;padding:18px 20px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
}
.sommaire p{font-weight:700;font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sommaire ol{list-style:none;columns:2;column-gap:26px;font-size:.92rem}
.sommaire li{margin:5px 0;break-inside:avoid}
.sommaire a{color:var(--text)}
.sommaire a:hover{color:var(--accent)}
@media (max-width:640px){.sommaire ol{columns:1}}

/* ---------- corps d'article ---------- */
article{padding-bottom:30px}
article h2{
  font-family:var(--font-h);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.32rem,3.4vw,1.8rem);line-height:1.25;
  margin:52px 0 16px;scroll-margin-top:76px;
}
article h2::before{
  content:"";display:block;width:44px;height:4px;border-radius:2px;
  background:var(--grad);margin-bottom:12px;
}
article h3{
  font-family:var(--font-h);font-weight:800;font-size:1.08rem;
  margin:30px 0 10px;scroll-margin-top:76px;
}
article p{margin:0 0 16px;color:#d9deee}
article p b,article li b{color:var(--text)}
article ul,article ol{margin:0 0 18px;padding-left:22px;color:#d9deee}
article li{margin:7px 0}
article li::marker{color:var(--accent)}

/* ---------- blocs ---------- */
.encadre{
  margin:22px 0;padding:16px 18px;border-radius:14px;
  background:var(--card-strong);border:1px solid var(--border-strong);
  border-left:3px solid var(--accent);
}
.encadre p:last-child{margin-bottom:0}
.encadre--vert{border-left-color:var(--green)}
.encadre .titre-encadre{
  display:block;font-weight:800;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;
}
.encadre--vert .titre-encadre{color:var(--green)}

.tableau-scroll{overflow-x:auto;margin:22px 0;border:1px solid var(--border);border-radius:14px}
table.tableau{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.tableau th{
  text-align:left;padding:11px 14px;background:var(--card-strong);
  font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--border-strong);white-space:nowrap;
}
.tableau td{padding:10px 14px;border-bottom:1px solid var(--border);color:#d9deee}
.tableau tr:last-child td{border-bottom:0}
.tableau td:first-child{color:var(--text);font-weight:600}
.tableau .ok{color:var(--green);font-weight:700}
.note-tableau{font-size:.8rem;color:var(--muted);margin:-12px 0 22px}

.etapes{list-style:none;padding:0;counter-reset:etape;margin:24px 0}
.etapes>li{
  counter-increment:etape;position:relative;
  padding:0 0 22px 54px;margin:0;
}
.etapes>li::before{
  content:counter(etape);position:absolute;left:0;top:-2px;
  width:36px;height:36px;border-radius:50%;
  background:var(--grad);color:#fff;font-weight:800;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
}
.etapes>li:not(:last-child)::after{
  content:"";position:absolute;left:17px;top:38px;bottom:2px;width:2px;
  background:var(--border-strong);
}
/* Le titre d'étape est un vrai <h3> (cible d'ancre et de résultat enrichi) sans
   pour autant hériter des marges des h3 de l'article, qui casseraient la frise. */
.etapes h3.titre-etape{
  font-family:var(--font-h);font-weight:800;font-size:1.02rem;
  color:var(--text);margin:0 0 4px;scroll-margin-top:76px;
}

/* Chaque erreur est un <h3> (cible d'ancre et d'extrait enrichi) mais reste
   visuellement une puce de liste : pas les marges des h3 de l'article. */
article ol h3.titre-erreur{
  display:inline;font-family:var(--font-b);font-weight:700;font-size:1rem;
  color:var(--text);margin:0;scroll-margin-top:76px;
}
article ol h3.titre-erreur::after{content:" "}

.grille-cartes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
@media (max-width:640px){.grille-cartes{grid-template-columns:1fr}}
.carte-lien{
  display:block;padding:18px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);color:var(--text);
  transition:border-color .15s,transform .15s;
}
.carte-lien:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px)}
.carte-lien b{display:block;font-family:var(--font-h);font-size:1.02rem;margin-bottom:6px}
.carte-lien span{color:var(--muted);font-size:.88rem;line-height:1.5;display:block}
.carte-lien .suite{color:var(--accent);font-weight:700;font-size:.86rem;margin-top:10px}

/* ---------- FAQ ---------- */
.faq-item{
  border:1px solid var(--border);border-radius:14px;background:var(--card);
  margin:0 0 10px;overflow:hidden;
}
.faq-item summary{
  cursor:pointer;list-style:none;padding:15px 18px;
  font-weight:700;color:var(--text);position:relative;padding-right:42px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:1.3rem;font-weight:600;
}
.faq-item[open] summary::after{content:"–"}
.faq-item .rep{padding:0 18px 15px;color:#d9deee}
.faq-item .rep p:last-child{margin-bottom:0}

/* ---------- CTA ---------- */
.cta-guide{
  margin:44px 0;padding:26px 24px;text-align:center;
  border-radius:var(--radius);border:1px solid var(--border-strong);
  background:
    radial-gradient(600px 200px at 50% 0%,rgba(76,126,243,.14),transparent 70%),
    var(--bg-2);
}
.cta-guide p.gros{font-family:var(--font-h);font-weight:800;font-size:1.2rem;margin-bottom:6px;color:var(--text)}
.cta-guide p.petit{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.btn-guide{
  display:inline-block;background:var(--grad-btn);color:#fff;
  font-weight:700;font-size:1rem;padding:13px 26px;border-radius:999px;
  box-shadow:0 12px 30px rgba(59,99,214,.35);
}
.btn-guide:hover{text-decoration:none;filter:brightness(1.08)}
.cta-guide .sous-btn{font-size:.8rem;color:var(--muted);margin:10px 0 0}

/* ---------- bloc auteur ---------- */
.auteur-bloc{
  display:flex;gap:16px;align-items:flex-start;
  margin:44px 0 0;padding:20px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);
}
.auteur-bloc img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.auteur-bloc b{display:block;font-family:var(--font-h);font-size:1.05rem;margin-bottom:4px}
.auteur-bloc p{color:var(--muted);font-size:.9rem;margin:0}
.auteur-bloc a{font-weight:600}

/* ---------- pied de page ---------- */
.pied{
  margin-top:70px;border-top:1px solid var(--border);
  background:var(--bg-2);
}
.pied-in{max-width:1060px;margin:0 auto;padding:44px 20px 26px}
.pied-grille{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:34px;
}
@media (max-width:820px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.pied-grille{grid-template-columns:1fr}}
.pied-marque{display:flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:800;font-size:1.05rem}
.pied-marque img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.pied-col .pied-desc{color:var(--muted);font-size:.86rem;margin-top:12px;max-width:280px}
.pied-titre{
  font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;font-weight:700;
}
.pied-col ul{list-style:none}
.pied-col li{margin:8px 0}
.pied-col a{color:#c6cde2;font-size:.9rem}
.pied-col a:hover{color:var(--text)}
.pied-bas{
  border-top:1px solid var(--border);padding-top:18px;
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
  color:var(--muted);font-size:.8rem;
}