/* ==========================================================================
   Maxelik, gabarit d'article : partage vertical, sommaire suivi, essentiel à retenir
   ========================================================================== */

/* ---------- EN-TÊTE ---------- */
.ar-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--slate-2);color:#c8d3d9}
.ar-hero-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.28;mix-blend-mode:luminosity}
.ar-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,29,34,.96) 0%,rgba(20,29,34,.8) 55%,rgba(20,29,34,.55) 100%)}
.ar-hero .houle{z-index:-1}
.ar-hero .wrap{padding-block:clamp(22px,3.5svh,40px) calc(clamp(22px,3.5svh,40px) + 44px)}
.ar-crumb a{display:inline-flex;align-items:center;gap:10px;color:#dbe4e8;font-weight:800;text-decoration:none;font-size:.92rem}
.ar-crumb .go-ring{width:32px;height:32px}
.ar-crumb .go-ring svg{transform:rotate(180deg)}
.ar-cat{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,3svh,26px)}
.ar-cat a{font-size:.8rem;font-weight:800;color:#fff;background:rgba(0,131,255,.35);padding:5px 12px;border-radius:999px;text-decoration:none}
.ar-cat a:hover{background:var(--blue)}
.ar-hero h1{margin-top:12px;color:#fff;font-size:clamp(2rem,1.3rem + 2.2vw,3.1rem)}
.ar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:18px;font-size:.94rem;color:#c8d3d9}
.ar-meta>span{display:inline-flex;align-items:center;gap:10px}
.ar-meta .ico{width:24px;height:24px}
.ar-meta .ico .s{stroke:#e9f0f3}.ar-meta .ico .fs{fill:rgba(255,255,255,.1)}
.ar-by img{width:34px;height:34px;padding:5px;border-radius:50%;background:#fff}
.go-ring{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background-color .3s,color .3s,box-shadow .3s}
.go-ring svg{width:15px;height:15px;transition:transform .3s var(--ease)}
a:hover .go-ring{background:var(--grad);color:#fff;box-shadow:none}

/* ---------- MISE EN PAGE : partage | texte | sommaire ---------- */
.ar-layout{display:grid;grid-template-columns:56px minmax(0,1fr) 270px;gap:clamp(20px,3vw,48px);align-items:start;padding-block:clamp(40px,5vw,64px)}
.ar-share{position:sticky;top:calc(var(--head-bar) + 28px);display:grid;gap:10px;justify-items:center}
.ar-share-t{font-size:.72rem;font-weight:900;color:var(--gray);writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:6px;letter-spacing:.04em}
.ar-share a,.ar-share button{position:relative;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--soft);color:var(--slate);cursor:pointer;transition:background-color .25s,color .25s,transform .25s var(--ease)}
.ar-share a:hover,.ar-share button:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.ar-share svg{width:18px;height:18px}
.ar-copied{position:absolute;left:54px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.8rem;font-weight:800;color:#fff;background:var(--slate);padding:4px 10px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}
.ar-copied.is-on{opacity:1}
.ar-toc{position:sticky;top:calc(var(--head-bar) + 28px);padding:20px;border-radius:var(--r);background:var(--soft)}
.ar-toc-t{font-weight:900;color:var(--slate)}
.ar-prog{height:4px;margin:12px 0 10px;border-radius:var(--r);background:#dfe8ee;overflow:hidden}
.ar-prog i{display:block;height:100%;width:0;background:var(--grad);border-radius:var(--r)}
.ar-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid;gap:2px}
.ar-toc li{counter-increment:toc}
.ar-toc a{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:8px 6px;border-radius:var(--r);color:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:700;line-height:1.35;transition:background-color .2s,color .2s}
.ar-toc a::before{content:counter(toc,decimal-leading-zero);font-size:.76rem;font-weight:900;color:var(--gray);padding-top:1px}
.ar-toc a:hover{color:var(--blue)}
.ar-toc a.is-on{background:#fff;color:var(--blue);box-shadow:0 8px 18px -14px rgba(19,40,60,.6)}
.ar-toc a.is-on::before{color:var(--blue)}

/* ---------- TEXTE ---------- */
.ar-body{min-width:0;font-size:1.06rem;line-height:1.75;color:var(--ink)}
.ar-body>*+*{margin-top:1.1em}
.ar-body h2{margin-top:2.2em;font-size:clamp(1.45rem,1.15rem + .9vw,1.9rem);scroll-margin-top:calc(var(--head-bar) + 24px)}
.ar-body h2+*{margin-top:.8em}
.ar-body a{font-weight:700}
.ar-body ul,.ar-body ol{padding-left:1.3em}
.ar-body li+li{margin-top:.5em}
.ar-body code{font-size:.9em;padding:2px 6px;border-radius:var(--r);background:var(--soft-b);color:var(--slate)}
.ar-chapo{font-size:1.22rem;line-height:1.65;color:var(--slate);font-weight:600}
/* l'essentiel à retenir */
.ar-key{position:relative;margin-top:28px;padding:clamp(22px,3vw,32px);border-radius:var(--r);background:var(--slate);color:#d6dfe3;overflow:hidden;isolation:isolate}
.ar-key::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;border:1.5px solid rgba(0,186,255,.3);box-shadow:0 0 0 26px rgba(0,186,255,.06),0 0 0 52px rgba(0,186,255,.04);z-index:-1}
.ar-key h2{margin:0;color:#fff;font-size:1.3rem;scroll-margin-top:calc(var(--head-bar) + 24px)}
.ar-key ol{list-style:none;margin:16px 0 0;padding:0;counter-reset:key;display:grid;gap:12px}
.ar-key li{counter-increment:key;position:relative;padding-left:46px;min-height:30px;font-size:1rem;line-height:1.55}
.ar-key li+li{margin:0}
.ar-key li::before{content:counter(key);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-weight:900;font-size:.86rem}
.ar-key b{color:#fff}
.ar-key code{background:rgba(255,255,255,.1);color:#9fe0ff}
/* tableau */
.ar-table{overflow-x:auto;border-radius:var(--r);background:var(--soft)}
.ar-table table{width:100%;border-collapse:collapse;font-size:.97rem;line-height:1.5}
.ar-table th,.ar-table td{padding:14px 16px;text-align:left;border-bottom:1px solid #e6edf2;vertical-align:top}
.ar-table thead th{background:var(--slate);color:#fff;font-weight:800}
.ar-table thead th:last-child{background:linear-gradient(100deg,#0064c8,#0083FF)}
.ar-table tbody th{width:130px;color:var(--slate);font-weight:800;background:var(--soft)}
.ar-table tr:last-child td,.ar-table tr:last-child th{border-bottom:0}
.ar-table td[colspan]{font-weight:700;color:var(--slate)}
/* encadrés */
.ar-note{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);background:var(--soft-b);font-size:1rem}
.ar-note .ico{width:30px;height:30px;flex:none;color:var(--slate)}
.ar-steps{list-style:none;padding:0!important;counter-reset:st}
.ar-steps li{counter-increment:st;position:relative;padding:14px 0 14px 54px;border-bottom:1px solid #e6edf2}
.ar-steps li+li{margin:0}
.ar-steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:12px;font-weight:900;font-size:1.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ar-offer{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 24px;border-radius:var(--r);background:linear-gradient(120deg,#0058b8,#0070dd 60%,#0083FF);color:#eaf6ff}
.ar-offer .ico{width:52px;height:52px}
.ar-offer .ico .s,.ar-offer .ico .a{stroke:#fff}.ar-offer .ico .f{fill:#fff}.ar-offer .ico .fs{fill:rgba(255,255,255,.18)}
.ar-offer .ico path[stroke="#fff"]{stroke:var(--blue)}
.ar-offer-t{font-weight:900;color:#fff;font-size:1.1rem}
.ar-offer p{font-size:.95rem;line-height:1.5}
.ar-offer p+p{margin-top:4px}
.ar-offer .btn{white-space:nowrap}
.ar-body .faq{margin-top:1em}
.ar-body .faq summary{font-size:1rem}
.ar-body .faq .ans{font-size:.98rem}
.ar-author{display:flex;align-items:center;gap:18px;margin-top:2.4em!important;padding:20px 22px;border-radius:var(--r);background:var(--soft)}
.ar-faces{display:flex;flex:none}
.ar-faces img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid #fff}
.ar-faces img+img{margin-left:-16px}
.ar-author p{font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.ar-author b{display:block;color:var(--slate)}

/* ---------- À LIRE ENSUITE ---------- */
.ar-next-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:clamp(24px,3vw,36px)}
.ar-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ar-n{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#fff;text-decoration:none;color:var(--ink);box-shadow:0 18px 36px -30px rgba(19,40,60,.6);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ar-n:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ar-n figure{margin:0;aspect-ratio:16/9;overflow:hidden}
.ar-n img{width:100%;height:100%;object-fit:cover}
.ar-n-b{display:grid;gap:6px;padding:18px 20px 20px}
.ar-n-k{font-size:.78rem;font-weight:800;color:var(--blue)}
.ar-n b{font-size:1.05rem;line-height:1.35;color:var(--slate)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .ar-layout{grid-template-columns:56px minmax(0,1fr)}
  .ar-toc{position:static;grid-column:2;grid-row:1;margin-bottom:8px}
  .ar-body{grid-column:2}
}
@media (max-width:760px){
  .ar-layout{grid-template-columns:1fr;gap:18px}
  .ar-toc,.ar-body{grid-column:auto;grid-row:auto}
  .ar-share{position:sticky;top:auto;bottom:12px;z-index:20;grid-row:3;display:flex;justify-content:center;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 14px 30px -16px rgba(19,40,60,.5);width:max-content;margin:0 auto}
  .ar-share-t{display:none}
  .ar-share a,.ar-share button{width:40px;height:40px}
  .ar-copied{left:50%;top:-28px;transform:translateX(-50%)}
  .ar-offer{grid-template-columns:1fr}
  .ar-next{grid-template-columns:1fr}
  .ar-author{flex-direction:column;align-items:flex-start}
}