/* ============================================================
   GUIDES COLIVIO — feuille partagée par /guides et chaque article.
   Mêmes jetons que la landing (index.html) : si l'accent ou le fond
   change là-bas, le changer ici aussi. Les guides n'ont volontairement
   aucune animation : on vient y chercher une réponse, vite.
   ============================================================ */
:root{
  --accent:#4a5cf7;
  --accent-2:#9b6bf3;
  --accent-soft:#8b8fff;
  --accent-text:#a99bff;
  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
  --grad-text:linear-gradient(100deg,#6b7bff,#b58cff);
  --bg:#06060a;
  --panel:#0b0b12;
  --panel-2:#10101a;
  --line:rgba(255,255,255,.07);
  --line-accent:rgba(140,120,255,.28);
  --fg:#f2f2f7;
  --fg-2:#c4c4d2;
  --fg-3:#9393a8;
  --fg-4:#8b8b9f;
  --ok:#5fd39a;
  --warn:#f5b85c;
  --radius:18px;
  --shell:1240px;
  --pad:34px;
  --lecture:740px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--accent-text);text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3{text-wrap:balance;margin:0;}
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- boutons (copie de la landing) ---------- */
.btn{
  position:relative;overflow:hidden;display:inline-block;
  padding:15px 26px;border-radius:12px;
  font-size:15px;font-weight:700;color:#fff;white-space:nowrap;
  background:var(--grad);box-shadow:0 0 60px -14px #6b5cf7;
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px -16px rgba(107,92,247,1);}
.btn-ghost{
  display:inline-block;padding:15px 26px;border-radius:12px;
  border:1px solid var(--line-accent);background:rgba(255,255,255,.02);
  font-size:15px;font-weight:600;color:#dcdcf0;white-space:nowrap;
}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(140,120,255,.6);}
.btn:focus-visible,.btn-ghost:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #b58cff;outline-offset:3px;}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(6,6,10,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;font-size:20px;font-weight:800;letter-spacing:-.025em;color:var(--fg);}
.brand img{width:34px;height:34px;object-fit:contain;}
.nav-links{display:flex;gap:24px;font-size:14px;font-weight:500;}
.nav-links a{color:#9d9dae;white-space:nowrap;}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff;}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px;flex:none;}
.nav-right .login{font-size:14px;font-weight:600;color:#c8c8d6;}
.nav .btn{padding:11px 20px;font-size:14px;}
@media(max-width:860px){.nav-links{display:none;}}
@media(max-width:520px){.nav-right .login{display:none;}:root{--pad:20px;}}

/* ---------- en-tête d'article ---------- */
.ariane{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--fg-4);margin:40px 0 0;padding:0;list-style:none;}
.ariane li+li::before{content:"›";margin-right:8px;color:var(--fg-4);}
.ariane a{color:var(--fg-3);}
.ariane a:hover{color:#fff;}
.lecture{max-width:var(--lecture);margin:0 auto;}
.eyebrow{display:inline-block;margin-top:22px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft);}
.article h1{margin-top:12px;font-size:clamp(34px,5.2vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.035em;}
.chapo{margin-top:18px;font-size:19px;line-height:1.6;color:var(--fg-2);}
.meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--fg-4);}

/* L'essentiel : la réponse d'abord (pyramide inversée). */
.essentiel{margin-top:30px;padding:22px 24px;border:1px solid var(--line-accent);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(107,92,247,.10),rgba(107,92,247,.03));}
.essentiel b.titre{display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:10px;}
.essentiel ul{margin:0;padding-left:20px;}
.essentiel li{margin:6px 0;line-height:1.55;color:var(--fg);}

.sommaire{margin-top:26px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);}
.sommaire b{font-size:14px;color:#e2e2ee;}
.sommaire ol{margin:10px 0 0;padding-left:20px;columns:2;column-gap:30px;}
.sommaire li{margin:5px 0;font-size:14px;break-inside:avoid;}
.sommaire a{color:var(--fg-3);}
.sommaire a:hover{color:#fff;}
@media(max-width:640px){.sommaire ol{columns:1;}}

/* ---------- corps ---------- */
.corps{margin-top:10px;font-size:17px;line-height:1.75;color:var(--fg-2);}
.corps h2{margin-top:56px;font-size:clamp(26px,3.4vw,34px);line-height:1.15;font-weight:800;letter-spacing:-.03em;color:var(--fg);scroll-margin-top:90px;}
.corps h3{margin-top:32px;font-size:21px;line-height:1.3;font-weight:750;letter-spacing:-.015em;color:var(--fg);}
.corps p{margin:16px 0 0;}
.corps ul,.corps ol{margin:14px 0 0;padding-left:22px;}
.corps li{margin:8px 0;}
.corps strong{color:var(--fg);font-weight:700;}
.corps a{color:var(--accent-text);text-decoration:underline;text-decoration-color:rgba(169,155,255,.4);text-underline-offset:3px;}
.corps a:hover{text-decoration-color:var(--accent-text);}

.encadre{margin-top:24px;padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-size:16px;}
.encadre.attention{border-color:rgba(245,184,92,.35);background:rgba(245,184,92,.06);}
.encadre.astuce{border-color:rgba(95,211,154,.3);background:rgba(95,211,154,.05);}
.encadre b:first-child{color:var(--fg);}

.tableau{margin-top:22px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;}
.tableau table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;}
.tableau th,.tableau td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.tableau th{font-size:13px;font-weight:700;color:#e2e2ee;background:var(--panel-2);}
.tableau tr:last-child td{border-bottom:0;}
.tableau td.nous{color:var(--fg);font-weight:700;}

.etapes{counter-reset:etape;list-style:none;padding-left:0 !important;}
.etapes>li{counter-increment:etape;position:relative;padding-left:46px;margin:18px 0 !important;}
.etapes>li::before{content:counter(etape);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;background:var(--grad);}

/* ---------- outils (calculateurs) ---------- */
.outil{margin-top:28px;padding:24px;border:1px solid var(--line-accent);border-radius:var(--radius);background:var(--panel);}
.outil h3{margin-top:0;}
.outil .champs{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.outil label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--fg-3);}
.outil input,.outil select{font:inherit;font-size:16px;color:var(--fg);background:#07070c;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:11px 12px;color-scheme:dark;}
.outil .resultat{margin-top:18px;padding:16px 18px;border-radius:12px;background:rgba(107,92,247,.08);border:1px solid var(--line-accent);font-size:16px;line-height:1.6;color:var(--fg);}
.outil .resultat b{font-size:20px;}
.outil .note{margin-top:10px;font-size:13px;color:var(--fg-4);line-height:1.5;}

/* ---------- appel à l'action ---------- */
.cta{margin-top:48px;padding:28px;border-radius:22px;border:1px solid var(--line-accent);
  background:radial-gradient(120% 140% at 0% 0%,rgba(107,92,247,.22),transparent 60%),var(--panel);}
.cta h2,.cta .cta-titre{margin:0;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.025em;color:var(--fg);}
.cta p{margin:10px 0 0;color:var(--fg-2);font-size:16px;line-height:1.6;}
.cta .rang{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.cta small{display:block;margin-top:12px;color:var(--fg-4);font-size:13px;}

/* ---------- pourquoi Colivio (encadré commun à tous les guides) ---------- */
.atouts{margin-top:48px;padding:28px;border-radius:22px;border:1px solid var(--line);background:var(--panel-2);}
.atouts .atouts-titre{margin:0;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.025em;color:var(--fg);}
.atouts .atouts-sous{margin:8px 0 0;font-size:15px;color:var(--fg-3);line-height:1.55;}
.atouts ul{margin:20px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.atouts li{padding:16px 16px 16px 44px;position:relative;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-size:14px;line-height:1.55;color:var(--fg-3);}
.atouts li::before{content:"";position:absolute;left:16px;top:19px;width:16px;height:16px;border-radius:50%;background:var(--grad);
  -webkit-mask:radial-gradient(circle,#000 0 3px,transparent 3.5px),linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;}
.atouts li b{display:block;margin-bottom:3px;font-size:15px;color:var(--fg);}
.atouts .atouts-lien{display:inline-block;margin-top:18px;font-size:15px;font-weight:700;color:var(--accent-text);}
.atouts .atouts-lien:hover{color:#fff;}

/* ---------- FAQ ---------- */
.faq{margin-top:12px;}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-top:10px;}
.faq summary{cursor:pointer;list-style:none;padding:16px 50px 16px 18px;position:relative;font-weight:700;color:var(--fg);font-size:16px;line-height:1.4;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:24px;font-weight:500;color:var(--accent-soft);transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0;padding:0 18px 16px;font-size:16px;line-height:1.65;color:var(--fg-2);}

/* ---------- liés ---------- */
.lies{margin-top:56px;padding-top:30px;border-top:1px solid var(--line);}
.lies h2{font-size:22px;font-weight:800;color:var(--fg);}
.cartes{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.carte{display:block;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--fg);transition:border-color .2s ease,transform .2s ease;}
.carte:hover{border-color:var(--line-accent);transform:translateY(-2px);}
.carte .tag{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);}
.carte b{display:block;margin-top:8px;font-size:18px;line-height:1.3;letter-spacing:-.01em;}
.carte span.desc{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--fg-3);}

/* ---------- hub ---------- */
.hub-tete{padding:10px 0 10px;}
.hub-tete h1{margin-top:14px;font-size:clamp(38px,6vw,64px);line-height:1.02;font-weight:800;letter-spacing:-.04em;}
.hub-tete p{margin-top:18px;max-width:680px;font-size:19px;line-height:1.6;color:var(--fg-2);}
.hub-grille{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
.hub-grille .carte{padding:26px;}
.hub-grille .carte b{font-size:21px;}

/* ---------- pied ---------- */
footer{margin-top:90px;border-top:1px solid var(--line);}
.foot-in{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;padding-top:52px;padding-bottom:40px;}
.foot-col{display:grid;gap:10px;font-size:14px;min-width:160px;}
.foot-col b{font-size:13px;font-weight:700;color:#e2e2ee;}
.foot-col a{color:#8b8b9e;}
.foot-col a:hover{color:#fff;}
.foot-legal{padding-bottom:40px;font-size:13px;color:#8a8a9e;}

/* ============================================================
   HABILLAGE « VITRINE » (15 septembre 2026)
   Théophile : « pas ultra esthétique, pas l'esprit du site ». Les guides
   reprennent les signatures visuelles de la landing (index.html) :
   halo violet derrière l'en-tête (.hero-glow), cartes vitrées qui
   s'allument au survol (.card), encadrés à bord dégradé (.diff-card).
   Rien d'animé en boucle : on vient ici chercher une réponse.
   ============================================================ */
body{position:relative;}
body::before{
  content:"";position:absolute;left:50%;top:-260px;transform:translateX(-50%);
  width:min(1500px,160vw);height:900px;pointer-events:none;z-index:0;filter:blur(38px);
  background:
    radial-gradient(38% 38% at 40% 46%,rgba(74,92,247,.26),rgba(74,92,247,0) 70%),
    radial-gradient(34% 34% at 62% 40%,rgba(155,107,243,.22),rgba(155,107,243,0) 72%);
}
main,footer,.nav{position:relative;z-index:1;}
.nav{z-index:60;}

/* Titres : un mot-clé en dégradé comme sur la landing (span.grad dans le h1). */
.article h1,.hub-tete h1{letter-spacing:-.04em;}
.eyebrow{padding:6px 13px;border-radius:999px;border:1px solid rgba(140,120,255,.32);background:rgba(107,92,247,.10);
  letter-spacing:.12em;color:#c3c5ff;box-shadow:0 0 40px -14px #6b5cf7;}

/* L'essentiel : bord dégradé et lueur, comme les cartes « différences ». */
.essentiel{border-radius:22px;border:1px solid var(--line-accent);
  background:linear-gradient(160deg,rgba(74,92,247,.16),rgba(155,107,243,.05) 60%),var(--panel-2);
  box-shadow:0 40px 90px -55px rgba(107,92,247,.9);}
.essentiel li::marker{color:var(--accent-soft);}

/* Sommaire : panneau vitré. */
.sommaire{border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--panel);}

/* Cartes (hub, guides liés) : vitrées, s'allument au survol. */
.carte{position:relative;overflow:hidden;border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 45%,rgba(124,107,255,.06)),var(--panel);
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;}
.carte::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 35%);}
.carte:hover{border-color:rgba(140,120,255,.42);transform:translateY(-4px);box-shadow:0 30px 70px -40px rgba(107,92,247,.9);}
.carte .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(107,92,247,.12);letter-spacing:.1em;}
.hub-grille .carte{padding:28px;}

/* Encadrés, tableaux, outils : même famille de panneaux arrondis. */
.encadre,.tableau,.outil,.faq details{border-radius:18px;}
.outil{background:linear-gradient(160deg,rgba(74,92,247,.10),rgba(155,107,243,.03) 60%),var(--panel);}
.cta{border-radius:26px;box-shadow:0 40px 90px -50px rgba(107,92,247,.9);}
.atouts{border-radius:26px;background:linear-gradient(160deg,rgba(155,107,243,.10),rgba(74,92,247,.03) 60%),var(--panel-2);}

/* Schémas (SVG en ligne) : la vidéo SEO le rappelle, certaines recherches
   attendent des visuels (« emballer un colis », « où coller le bordereau »). */
.schema{margin:26px 0 0;padding:18px 18px 14px;border-radius:22px;border:1px solid var(--line-accent);
  background:linear-gradient(160deg,rgba(74,92,247,.10),rgba(155,107,243,.03) 60%),var(--panel);overflow-x:auto;}
.schema svg{display:block;width:100%;min-width:520px;height:auto;font-family:Manrope,system-ui,sans-serif;}
.schema figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--fg-3);}

/* Intertitres : petit trait dégradé devant, pour rythmer la lecture. */
.corps h2{position:relative;padding-top:18px;}
.corps h2::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;border-radius:3px;background:var(--grad);}

/* Pages produit (/demarrer, /extension...) : bouton d'essai des l'en-tete. */
.rang-hero{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
.rang-hero .rang-note{font-size:13px;color:var(--fg-4);}
.corps code{font-size:.9em;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--fg);}

/* ============================================================
   ALIGNEMENT SUR LA VITRINE (16 septembre 2026)
   Theophile : les guides doivent avoir exactement l'apparence de la
   page vitrine. Meme police (Manrope) deja ; on reprend ici les jetons
   de texte de index.html et le dessin de ses titres (interlettrage
   -.04em, interlignes serres). Seules les tailles restent plus petites :
   une page de lecture ne porte pas un titre de 72 px.
   ============================================================ */
:root{--fg-2:#a3a3b6;--fg-4:#85859b;--panel-2:#0a0a11;--radius:22px;}
.article h1{line-height:1.02;letter-spacing:-.04em;}
.corps h2,.lies h2,.cta .cta-titre,.atouts .atouts-titre{line-height:1.06;letter-spacing:-.04em;}
.corps h3{letter-spacing:-.03em;}
.chapo{font-size:20px;line-height:1.62;}