/* Gabarit d'article du blog Rafa (Laura, 20/10/2026), porté depuis article.html.
   Chargé APRÈS blog.css : la nav, le pied de page et les boutons (.btn) sont ceux du blog.
   Les propriétés de l'article sont en tête, comme dans la référence. */
.article-page{
  --lime:#E6FF72;--cornflower:#8CA8FF;--charcoal:#323232;--bone:#FFFAF5;--brown:#2B1C18;
  --sky:#DFE7FF;--sand-50:#F6EFE6;--sand-100:#ECE1D3;--line-soft:#D9CABA;
  --fg2:#5E4A3C;--fg3:#8C7865;--muted-on-dark:#C6B7A6;
  --cat-couts:#C8811E;--cat-methode:#4F8A3A;--cat-plateformes:#8CA8FF;--cat-cas:#B3402B;
  --font-display:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --wrap:1200px;
  color:var(--charcoal);
}
.article-page main .wrap{max-width:var(--wrap);padding-left:32px;padding-right:32px}
.article-page main a{color:var(--charcoal);text-decoration-thickness:1px;text-underline-offset:3px}
.article-page main a:hover{color:var(--brown);text-decoration-thickness:2px}
.article-page strong{font-weight:700;color:inherit}
.article-page main .eyebrow{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}

/* nav du blog, collée en haut, avec la barre de lecture lime juste dessous */
.art-top{position:sticky;top:0;z-index:40}
.progress{height:3px;background:#3E2C23}
.progress__bar{height:3px;width:0;background:var(--lime)}

/* pastilles de catégorie */
.pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--sky);border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--charcoal)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,var(--cat-cas))}
.pill--couts{--dot:var(--cat-couts)}.pill--methode{--dot:var(--cat-methode)}.pill--plateformes{--dot:var(--cat-plateformes)}.pill--cas{--dot:var(--cat-cas)}

/* en-tête */
.crumbs{display:flex;gap:8px;font-size:13px;color:var(--fg3);margin-bottom:28px}
.article-page main .crumbs a{color:var(--fg3)}
.article-head{padding-top:48px}
.article-head__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px;align-items:center}
.article-head__text{display:flex;flex-direction:column;gap:22px}
.article-head h1{font-family:var(--font-display);font-size:clamp(36px,4.6vw,56px);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0;text-wrap:balance;color:var(--charcoal)}
.lede{font-size:19px;line-height:1.6;color:var(--fg2);margin:0;text-wrap:pretty}
.byline{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--fg2);line-height:1.35}
.byline b{display:block;color:var(--charcoal)}
.cover{border:2px solid var(--charcoal);border-radius:20px;overflow:hidden;box-shadow:6px 6px 0 var(--charcoal);aspect-ratio:16/10}
.cover img{width:100%;height:100%;object-fit:cover}

/* bloc « figures » : 2 à 4 chiffres clés, un seul --accent */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;margin-top:56px}
.figure{background:var(--bone);border:2px solid var(--charcoal);border-radius:16px;box-shadow:3px 3px 0 var(--charcoal);padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.figure--accent{background:var(--lime)}
.figure__value{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--charcoal)}
.figure__label{font-size:14px;color:var(--fg2)}
.figure--accent .figure__label{color:var(--charcoal)}

/* corps : sommaire + texte */
.article-body{display:flex;gap:64px;align-items:flex-start;flex-wrap:wrap;padding-top:72px;padding-bottom:96px}
.toc{flex:0 1 220px;position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.toc nav{display:flex;flex-direction:column;gap:2px;border-left:1.5px solid var(--line-soft)}
.article-page main .toc a{display:block;padding:7px 0 7px 14px;margin-left:-1.5px;border-left:3px solid transparent;font-size:14px;line-height:1.4;text-decoration:none;color:var(--fg3);font-weight:500}
.article-page main .toc a.is-active{color:var(--charcoal);font-weight:700;border-left-color:var(--charcoal)}
@media (max-width:900px){.toc{display:none}}

.prose{flex:1 1 560px;max-width:700px;min-width:0;font-size:18px;line-height:1.7;color:var(--charcoal)}
.prose h2{font-family:var(--font-display);font-size:30px;line-height:1.2;letter-spacing:-.015em;font-weight:700;margin:56px 0 18px;scroll-margin-top:96px;color:var(--charcoal)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 20px}

/* bloc « table » : ligne .is-key facultative */
.table{border:1.5px solid var(--line-soft);border-radius:14px;overflow:hidden;margin:0 0 24px;overflow-x:auto}
.table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
.table th{background:var(--sand-50);text-align:left;font-weight:700;padding:12px 16px}
.table td{padding:12px 16px;border-top:1.5px solid var(--sand-100)}
.table .num{text-align:right}
.table .note{color:var(--fg3)}
.table tr.is-key td{background:var(--sand-50);font-weight:700}

/* blocs « takeaway » et « pullquote » */
.takeaway{background:var(--sky);border:2px solid var(--charcoal);border-radius:16px;box-shadow:3px 3px 0 var(--charcoal);padding:22px 26px;margin:28px 0 0;display:flex;flex-direction:column;gap:6px}
.article-page main .takeaway .eyebrow{color:var(--charcoal);font-weight:700}
.takeaway p{margin:0;font-size:17px;line-height:1.6}
.pullquote{margin:32px 0;font-family:var(--font-display);font-size:26px;line-height:1.3;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.article-page .highlight{background:linear-gradient(to bottom,transparent 12%,var(--lime) 12%,var(--lime) 92%,transparent 92%) no-repeat;color:var(--charcoal);padding:0 .25em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* bloc « steps » : liste numérotée */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;counter-reset:s}
.steps li{display:flex;gap:16px;align-items:flex-start;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;background:var(--lime);border:2px solid var(--charcoal);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;margin-top:2px}

/* bloc « split » : Je referais / Je changerais */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.split__card{border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.6}
.split__card--keep{background:var(--sand-50)}
.split__card--change{background:var(--bone);border:1.5px solid var(--line-soft)}
.split__card h3{font-family:var(--font-display);font-size:20px;font-weight:700;margin:0;color:var(--charcoal)}
.split__card p{margin:0}

/* bloc « summary » : surface sombre + grain (la .dark du blog) */
.article-page .dark{border-radius:20px;overflow:hidden;color:var(--bone)}
.summary{padding:32px}
.summary ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:1.55}
.summary li{display:flex;gap:14px}
.summary li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-top:9px}
.summary strong{color:var(--lime)}
.author{display:flex;align-items:center;gap:14px;margin-top:40px;padding-top:24px;border-top:1.5px solid var(--line-soft);font-size:14px;line-height:1.45;color:var(--fg2)}
.author strong{color:var(--charcoal)}

/* appel au simulateur */
.cta{border-radius:24px;padding:48px;display:flex;flex-direction:column;gap:18px}
.article-page main .cta .eyebrow{color:var(--lime)}
.cta h2{font-family:var(--font-display);font-size:clamp(30px,3.4vw,42px);line-height:1.18;font-weight:700;letter-spacing:-.02em;margin:0;max-width:640px;color:var(--bone)}
.cta p{margin:0;font-size:17px;line-height:1.6;color:var(--muted-on-dark);max-width:560px}
.article-page main .cta .btn{color:var(--charcoal);text-decoration:none}
@media (max-width:600px){.cta{padding:32px 24px}.article-page main .wrap{padding-left:20px;padding-right:20px}}

/* à lire ensuite */
.related{padding-top:96px;padding-bottom:112px;display:flex;flex-direction:column;gap:28px}
.related h2{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-.015em;margin:6px 0 0;color:var(--charcoal)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.article-page main .related .card{text-decoration:none;color:var(--charcoal);background:var(--bone);border:1.5px solid var(--charcoal);border-radius:16px;box-shadow:0 3px 0 var(--charcoal);padding:8px;display:flex;flex-direction:column;gap:14px;transition:transform 150ms ease-out}
.article-page main .related .card:hover{transform:translateY(-2px);color:var(--charcoal)}
.card__img{aspect-ratio:16/10;border-radius:10px;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{padding:0 8px 12px;display:flex;flex-direction:column;gap:10px}
.card__title{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.3;text-wrap:pretty}
.card__meta{font-size:13px;color:var(--fg3)}
/* Téléphone : la nav reste collée en haut avec la barre de lecture, sans le choix « Mon entreprise / Mes clients » (trop haute sinon). */
@media (max-width:760px){.article-page .art-top .sw{display:none}}
@media (max-width:760px){.prose h2{scroll-margin-top:136px}}
/* listes ordinaires dans le texte (articles convertis le 20/10/2026) */
.prose .liste{margin:0 0 24px;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.prose .liste li::marker{color:var(--fg3)}
.prose .steps{margin:0 0 24px}
.takeaway .liste{margin:6px 0 0;padding-left:20px;font-size:17px;line-height:1.6;display:flex;flex-direction:column;gap:6px}
.takeaway p + p{margin-top:8px}
.takeaway + .table,.takeaway + p,.takeaway + .liste,.takeaway + .steps{margin-top:24px}