/* ════════════════════════════════════════════════════════════
   Feuille commune aux pages de lecture (guide, pages produit,
   pages métier). Reprend exactement l'habillage du site : même
   nuit, même typographie, mêmes transitions entre pages.
   ════════════════════════════════════════════════════════════ */

@view-transition{navigation:auto}
::view-transition{background:#05070f}
::view-transition-old(root){animation:vtSortie .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtEntree .5s cubic-bezier(.16,.84,.24,1) both}
@keyframes vtSortie{to{transform:perspective(1400px) translateZ(-120px);opacity:0}}
@keyframes vtEntree{from{transform:perspective(1400px) rotateX(6deg) translateY(30px);opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

:root{--nuit:#080C18;--texte:#EDF0FA;--gris:#95A0BE;--bleu:#4763F0;--bleu2:#8FA5FF;--or:#F5C451;--bord:rgba(255,255,255,.09);--bord2:rgba(255,255,255,.16)}
*{box-sizing:border-box}
body{margin:0;background:var(--nuit);color:var(--texte);font-family:'Karla',system-ui,sans-serif;font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(600px 440px at 82% -8%,rgba(78,107,255,.16),transparent 62%)}
.wrap{max-width:740px;margin:0 auto;padding:0 24px 80px}

header{padding:26px 0;border-bottom:1px solid var(--bord);margin-bottom:40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marque{font-family:'Archivo',system-ui,sans-serif;font-weight:900;text-decoration:none;color:var(--texte);display:inline-flex;align-items:center;gap:9px}
.tete-lien{font-size:14.5px;color:var(--gris);text-decoration:none;border-bottom:1px solid var(--bord2);white-space:nowrap}

h1{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 118;font-weight:900;font-size:clamp(26px,4vw,36px);letter-spacing:-.03em;margin:0 0 8px;line-height:1.1}
.maj{color:var(--gris);font-size:14px;margin-bottom:38px}
h2{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 112;font-weight:700;font-size:20px;letter-spacing:-.015em;margin:44px 0 14px;color:var(--bleu2)}
h3{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:16.5px;margin:26px 0 8px;color:var(--texte)}
p{color:var(--gris);margin:0 0 14px}
ul,ol{color:var(--gris);padding-left:20px;margin:0 0 14px}
li{margin-bottom:8px}
strong{color:var(--texte);font-weight:600}
a{color:var(--texte);text-decoration:none;border-bottom:1px solid var(--bord2);transition:border-color .25s}
a:hover{border-color:var(--bleu2)}

.resume{padding:18px 22px;border:1px solid var(--bord2);border-radius:14px;background:rgba(255,255,255,.03);margin:0 0 10px}
.resume p{margin:0}
.encadre{padding:16px 20px;border-left:3px solid var(--or);border-radius:0 12px 12px 0;background:rgba(245,196,81,.07);margin:0 0 16px}
.encadre p{margin:0;color:var(--texte);font-size:15.5px}
.appel{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:13px 22px;border-radius:100px;background:var(--bleu);color:#fff;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:15.5px;border:none;box-shadow:0 12px 30px -12px rgba(78,107,255,.95)}
.appel:hover{border:none}
.sommaire{margin:0 0 34px;padding:18px 22px;border:1px solid var(--bord);border-radius:14px}
.sommaire ol{margin:0;padding-left:20px}
.sommaire li{margin-bottom:5px;font-size:15px}
.retour{display:inline-flex;align-items:center;gap:6px;margin-top:50px;font-size:15px;transition:gap .3s cubic-bezier(.16,.84,.24,1)}
.retour:hover{gap:12px}

/* ── Photographies du produit ── */
figure{margin:26px 0 22px}
figure img{width:100%;height:auto;display:block}
figcaption{color:var(--gris);font-size:14px;margin-top:10px;line-height:1.55}
.deux-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}

@media(max-width:560px){.deux-photos{grid-template-columns:1fr}}

/* ── Tableaux ── */
table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--bord);color:var(--gris);vertical-align:top}
th{color:var(--texte);font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:14px}
td strong{color:var(--texte)}

/* ── Liens vers les autres pages, en pied d'article ── */
.ailleurs{margin:44px 0 0;padding:20px 22px;border:1px solid var(--bord);border-radius:14px}
.ailleurs h2{margin:0 0 12px;font-size:17px}
.ailleurs ul{margin:0;padding-left:18px}
.ailleurs li{margin-bottom:6px;font-size:15px}

@media(prefers-reduced-motion:no-preference){
  body::before{inset:-12%;animation:derive 26s ease-in-out infinite alternate}
  @keyframes derive{50%{transform:translate3d(-3%,2%,0) scale(1.07)}100%{transform:translate3d(2%,-2%,0) scale(1.02)}}
  header{animation:descend .8s cubic-bezier(.16,.84,.24,1) both}
  @keyframes descend{from{opacity:0;translate:0 -24px}}
  h1{animation:monte .9s .15s cubic-bezier(.16,.84,.24,1) both}
  .maj{animation:monte .9s .3s cubic-bezier(.16,.84,.24,1) both}
  @keyframes monte{from{opacity:0;translate:0 22px;filter:blur(6px)}}
  /* Le texte reste lisible en toutes circonstances : seuls les titres glissent
     en arrivant. Rien d'essentiel ne dépend d'une animation, ni pour un visiteur,
     ni pour un moteur de recherche. */
  .anim .wrap > h2{opacity:0}
  .anim .wrap > h2.vu{animation:titre .8s cubic-bezier(.16,.84,.24,1) both}
  @keyframes titre{from{opacity:0;translate:-20px 0}to{opacity:1;translate:0 0}}
}