/* =====================================================================
   Synapse O.S. — feuille partagee par les pages SEO.
   Reprend a l'identique la palette et les metriques de la landing.
   La landing conserve son CSS en ligne : elle est validee et deployee,
   on ne la fragilise pas pour economiser quelques kilo-octets.
   ===================================================================== */

:root{
  --bg:#09090b; --surface:#18181b; --surface-soft:rgba(24,24,27,.4);
  --border:#27272a; --border-soft:rgba(39,39,42,.8);
  --text:#d4d4d8; --muted:#a1a1aa; --faint:#8a8a93; --dim:#52525b;
  --white:#fff; --blue:#2563eb; --blue-light:#3b82f6; --shell:72rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-wrap:break-word;
}
::selection{background:var(--blue);color:#fff}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{color:var(--white);letter-spacing:-.025em;line-height:1.2;font-weight:600}
:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;border-radius:4px}

.shell{max-width:var(--shell);margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
.shell--texte{max-width:46rem}
.overline{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--faint)}
.overline--blue{color:var(--blue-light)}

/* ---- navigation ---- */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border-soft);
     background:rgba(9,9,11,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:4rem;gap:1rem}
.brand{display:flex;align-items:center;gap:.625rem;flex-shrink:0;padding:.375rem 0}
.brand__mark{width:1.5rem;height:1.5rem;border-radius:.375rem;background:var(--blue);
             display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand__name{font-size:.875rem;font-weight:600;color:var(--white);letter-spacing:-.01em}
.nav__links{display:none;align-items:center;gap:1.25rem}
.nav__links a{font-size:.875rem;color:var(--muted);transition:color .15s;padding:.625rem .25rem;display:inline-block}
.nav__links a:hover{color:var(--white)}

/* ---- boutons ---- */
.btn{display:inline-block;border-radius:.5rem;background:var(--blue);color:#fff;
     font-weight:500;text-align:center;transition:background-color .15s;
     box-shadow:0 0 20px rgba(37,99,235,.4)}
.btn:hover{background:var(--blue-light)}
.btn--sm{padding:.5rem 1rem;font-size:.875rem}
.btn--lg{padding:.875rem 1.75rem;font-size:1rem}
.btn--ghost{background:transparent;border:1px solid var(--border);box-shadow:none;color:var(--text)}
.btn--ghost:hover{background:var(--surface);border-color:#3f3f46}

/* ---- article ---- */
.entete{border-bottom:1px solid var(--border);padding:4rem 0 3rem}
.entete h1{font-size:1.875rem;margin-top:1rem}
.entete__chapo{margin-top:1.5rem;color:var(--muted);line-height:1.7;font-size:1.0625rem}
.fil{font-size:.8125rem;color:var(--dim);margin-bottom:1.25rem}
.fil a{color:var(--faint)}
.fil a:hover{color:var(--white)}

.article{padding:3.5rem 0}
.article h2{font-size:1.5rem;margin-top:3rem}
.article h3{font-size:1.125rem;font-weight:500;margin-top:2rem}
.article h2:first-child,.article h3:first-child{margin-top:0}
.article p{margin-top:1rem;color:var(--muted);line-height:1.75}
.article ul,.article ol{margin-top:1rem;padding-left:1.25rem;color:var(--muted);line-height:1.75}
.article li{margin-top:.5rem}
.article li::marker{color:var(--dim)}
.article strong{color:var(--white);font-weight:500}
.article a:not(.btn){color:var(--blue-light);text-decoration:underline;text-underline-offset:3px}
.article a:not(.btn):hover{color:#60a5fa}

/* ---- encadres ---- */
.encadre{margin-top:2rem;border:1px solid var(--border);border-left:3px solid var(--blue);
         border-radius:.75rem;background:var(--surface-soft);padding:1.5rem}
.encadre p{margin-top:.5rem}
.encadre p:first-child{margin-top:0}
.encadre__titre{color:var(--white);font-weight:600;font-size:.9375rem}

.tableau{margin-top:1.75rem;overflow-x:auto;border:1px solid var(--border);border-radius:.75rem}
table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:26rem}
th,td{padding:.875rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--white);font-weight:500;background:var(--surface)}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}
td strong{color:var(--white)}

/* ---- bloc de conversion ---- */
.encart{margin-top:3rem;border:1px solid var(--border);border-radius:.75rem;
        background:var(--surface-soft);padding:2rem}
.encart h2{margin-top:0;font-size:1.375rem}
.encart p{margin-top:.875rem}
.encart .btn{margin-top:1.5rem}
.encart__note{margin-top:.875rem;font-size:.8125rem;color:var(--faint)}

/* ---- liens internes ---- */
.aussi{margin-top:3.5rem;border-top:1px solid var(--border);padding-top:2rem}
.aussi__liste{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);
              border:1px solid var(--border);border-radius:.75rem;overflow:hidden;margin-top:1.25rem}
.aussi__item{background:var(--bg);padding:1.25rem 1.5rem;transition:background-color .15s;display:block}
.aussi__item:hover{background:var(--surface)}
.aussi__item strong{display:block;color:var(--white);font-weight:500;font-size:.9375rem}
.aussi__item span{display:block;margin-top:.375rem;color:var(--muted);font-size:.875rem;line-height:1.6}

/* ---- pied ---- */
.footer{border-top:1px solid var(--border);padding:2.5rem 0}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.footer__brand{display:flex;align-items:center;gap:.625rem}
.footer__mark{width:1.25rem;height:1.25rem;border-radius:.25rem;background:var(--surface);
              display:flex;align-items:center;justify-content:center}
.footer__brand span{font-size:.875rem;font-weight:500;color:var(--muted)}
.footer p{font-size:.875rem;color:var(--faint)}
.footer__liens{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}
/* padding vertical : zone tactile a ~40 px, exigence mobile */
.footer__liens a{font-size:.875rem;color:var(--faint);padding:.625rem .25rem;display:inline-block}
.footer__liens a:hover{color:var(--white)}
/* le fil d'Ariane reste discret mais garde une zone tactile suffisante */
.fil a{padding:.5rem .25rem;margin-left:-.25rem;display:inline-block}

@media (min-width:640px){
  .entete{padding:5.5rem 0 3.5rem}
  .entete h1{font-size:2.5rem}
  .article h2{font-size:1.875rem}
  .encart{padding:2.5rem}
  .aussi__liste{grid-template-columns:1fr 1fr}
  .footer__inner{flex-direction:row;justify-content:space-between;text-align:left}
}
@media (min-width:768px){ .nav__links{display:flex} }
@media (max-width:400px){
  .entete h1{font-size:1.625rem}
  .article h2{font-size:1.375rem}
  .shell{padding-left:1.125rem;padding-right:1.125rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}