/* ==========================================================================
   WEBIPHI — Article du journal                               wbp-article.css
   --------------------------------------------------------------------------
   Gabarit créé le 17/10/2026. Chargé par chaque article (méta « css »).
   Exemple complet et mode d'emploi : _build/pages/modele-article.html.
   S'appuie sur .wbp-prose (wbp-blocks.css) pour le texte courant, et sur
   .wbp-faq et .wbp-also, déjà utilisés ailleurs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.wbp-art-head{background:var(--wbp-bg-alt);padding-bottom:clamp(110px,14vw,170px)}
.wbp-art-head__in{max-width:calc(880px + var(--wbp-pad) * 2);padding-top:clamp(28px,4vw,52px)}
.wbp-art-head h1{margin:18px 0 0;text-wrap:balance}

.wbp-art-cat{
  display:inline-block;padding:7px 14px;border-radius:999px;
  background:var(--wbp-brand-soft);color:var(--wbp-brand-mid);
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  transition:background .2s, color .2s;
}
.wbp-art-cat:hover{background:var(--wbp-brand);color:#fff}

/* Le chapô : plus grand que le texte, plus petit qu'un titre. */
.wbp-art-lead{
  margin:20px 0 0;max-width:62ch;
  font-size:clamp(1.125rem,1rem + .5vw,1.3125rem);line-height:1.6;color:var(--wbp-ink-2);
}

/* En flex, mais chaque info est enveloppée dans son <span> : le <b> de
   « Par l'équipe WEBIPHI » reste dans sa phrase (piège n°2). */
.wbp-art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:28px;
  font-size:.9375rem;color:var(--wbp-muted);
}
.wbp-art-meta > span + span::before{content:"\00B7";margin-right:14px;color:var(--wbp-muted)}
/* Sur téléphone, les infos passent à la ligne : un point en début de ligne
   ne sépare plus rien. */
@media (max-width:559px){.wbp-art-meta > span + span::before{display:none}}
.wbp-art-meta b{color:var(--wbp-ink);font-weight:600}
.wbp-art-by{display:inline-flex;align-items:center;gap:10px}

/* L'avatar de l'agence : le W du logo, en blanc sur bordeaux. */
.wbp-art-av{
  flex:none;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;background:var(--wbp-brand);
}
.wbp-art-av svg{width:52%;height:auto;overflow:visible}
.wbp-art-av path{fill:none;stroke:var(--wbp-cream);stroke-width:22;stroke-linejoin:miter}
.wbp-art-av--lg{width:56px;height:56px}

/* --------------------------------------------------------------------------
   Couverture — remonte dans l'en-tête, qui lui a réservé la place
   -------------------------------------------------------------------------- */
.wbp-art-cover{
  margin:calc(-1 * clamp(80px,11vw,130px)) auto 0;max-width:1100px;
  border-radius:var(--wbp-radius-lg);overflow:hidden;box-shadow:var(--wbp-shadow-l);
}
.wbp-art-cover img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}

/* --------------------------------------------------------------------------
   Mise en page : sommaire + texte
   -------------------------------------------------------------------------- */
.wbp-art-layout{
  /* minmax(0,1fr) et non auto : sinon le tableau (min-width 520px) élargit
     la colonne et tout le texte déborde de l'écran du téléphone. */
  display:grid;grid-template-columns:minmax(0,1fr);gap:32px;
  padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px);
  max-width:calc(1100px + var(--wbp-pad) * 2);
}
@media (min-width:1080px){
  .wbp-art-layout{grid-template-columns:250px minmax(0,1fr);gap:64px;align-items:start}
}

/* Le sommaire colle au défilement sur grand écran. top : la hauteur de
   l'en-tête, qui se masque à la descente mais revient à la remontée. */
@media (min-width:1080px){
  .wbp-art-side{position:sticky;top:calc(var(--wbp-hdr-h, 80px) + 24px)}
}
.wbp-art-toc{
  padding:20px 22px;border:1px solid var(--wbp-line);border-radius:var(--wbp-radius);
  background:#fff;
}
.wbp-art-toc h2{
  margin:0 0 12px;
  font-size:.75rem;font-weight:500;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wbp-muted);
}
.wbp-art-toc ol{list-style:none;margin:0;padding:0;counter-reset:wbp-toc}
.wbp-art-toc li{counter-increment:wbp-toc}
.wbp-art-toc a{
  display:block;padding:7px 0;
  font-size:.9375rem;line-height:1.4;color:var(--wbp-ink-2);
  transition:color .2s;
}
.wbp-art-toc a::before{
  content:counter(wbp-toc, decimal-leading-zero);
  margin-right:10px;font-size:.8125rem;font-weight:600;color:var(--wbp-brand-mid);
}
.wbp-art-toc a:hover{color:var(--wbp-brand)}

/* La carte d'appel n'existe que sur grand écran, sous le sommaire. */
.wbp-art-sidecta{display:none}
@media (min-width:1080px){
  .wbp-art-sidecta{
    display:block;margin-top:16px;padding:22px;border-radius:var(--wbp-radius);
    background:var(--wbp-dark);color:#fff;
  }
  .wbp-art-sidecta b{display:block;font-size:1.0625rem;font-weight:600;line-height:1.35}
  .wbp-art-sidecta p{margin:8px 0 16px;font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.66)}
  .wbp-art-sidecta .wbp-btn{min-height:44px;padding:10px 20px;font-size:.875rem}
}

/* --------------------------------------------------------------------------
   Le texte
   .wbp-prose donne la base (titres, listes, liens). On l'ajuste pour une
   lecture longue : interligne plus ample, ancres qui ne passent pas sous
   l'en-tête collant.
   -------------------------------------------------------------------------- */
.wbp-art-body{max-width:72ch;font-size:1.0625rem;line-height:1.75;color:var(--wbp-ink-2)}
.wbp-art-body h2{
  margin-top:56px;font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem);line-height:1.25;
  color:var(--wbp-ink);scroll-margin-top:110px;
}
.wbp-art-body h3{margin-top:36px;font-size:1.25rem;line-height:1.35;color:var(--wbp-ink)}
.wbp-art-body > :first-child{margin-top:0}
.wbp-art-body p{margin-bottom:20px}

/* Liste numérotée : .wbp-prose ne stylait que les puces. */
.wbp-art-body ol{
  list-style:none;margin:0 0 20px;padding:0;counter-reset:wbp-ol;
  display:flex;flex-direction:column;gap:12px;
}
.wbp-art-body ol li{position:relative;padding-left:40px;counter-increment:wbp-ol}
.wbp-art-body ol li::before{
  content:counter(wbp-ol);
  position:absolute;left:0;top:2px;
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--wbp-brand-soft);color:var(--wbp-brand-mid);
  font-size:.8125rem;font-weight:700;line-height:1;
}
.wbp-art-body ul li::before{top:13px}

/* Citation : filet bordeaux, texte plus grand. */
.wbp-art-body blockquote{
  margin:36px 0;padding:4px 0 4px 26px;border-left:3px solid var(--wbp-brand);
}
.wbp-art-body blockquote p{
  margin:0;font-size:1.25rem;line-height:1.55;font-weight:500;color:var(--wbp-ink);
  text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   Blocs de l'article
   -------------------------------------------------------------------------- */
/* L'essentiel : en tête, la réponse à la question du titre. */
.wbp-art-key{
  margin:0 0 40px;padding:26px 28px;border-radius:var(--wbp-radius);
  background:var(--wbp-brand-soft);border:1px solid var(--wbp-brand-line);
}
.wbp-art-body .wbp-art-key h2{
  margin:0 0 14px;font-size:.75rem;font-weight:600;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wbp-brand-mid);
}
.wbp-art-key ul{margin:0}
.wbp-art-key li{color:var(--wbp-ink)}
.wbp-art-key li::before{background:var(--wbp-brand-mid)}

/* Encart conseil / mise en garde. Pas en flex (piège n°2). */
.wbp-art-note{
  margin:28px 0;padding:18px 22px 18px 58px;position:relative;
  border-radius:var(--wbp-radius-s);background:var(--wbp-bg-alt);
  border:1px solid var(--wbp-line);
}
.wbp-art-note p{margin:0;font-size:1rem;line-height:1.65}
/* L'ampoule (conseil) ou le triangle (attention), dessinés en masque. */
.wbp-art-note::before{
  content:'';position:absolute;left:20px;top:19px;width:22px;height:22px;
  background:var(--wbp-brand-mid);
  -webkit-mask:var(--wbp-art-ic) center/contain no-repeat;mask:var(--wbp-art-ic) center/contain no-repeat;
  --wbp-art-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
}
.wbp-art-note--warn{background:#FDF6EC;border-color:#F0DFC4}
.wbp-art-note--warn::before{
  background:#9A5B00;
  --wbp-art-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

/* Tableau : défile horizontalement sur téléphone plutôt que de casser la page. */
.wbp-art-table{margin:32px 0;overflow-x:auto;border:1px solid var(--wbp-line);border-radius:var(--wbp-radius-s)}
.wbp-art-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.wbp-art-table caption{
  padding:14px 18px;text-align:left;caption-side:top;
  font-size:.875rem;font-weight:600;color:var(--wbp-ink);border-bottom:1px solid var(--wbp-line);
}
.wbp-art-table th,.wbp-art-table td{padding:12px 18px;text-align:left;vertical-align:top}
.wbp-art-table thead th{background:var(--wbp-bg-alt);color:var(--wbp-ink);font-weight:600}
.wbp-art-table tbody tr + tr td{border-top:1px solid var(--wbp-line)}
.wbp-art-table td:first-child{color:var(--wbp-ink);font-weight:500}

/* Encart d'appel au milieu du texte : aplat bordeaux, comme l'appel final. */
.wbp-art-cta{
  display:grid;gap:18px;align-items:center;margin:40px 0;
  padding:26px 28px;border-radius:var(--wbp-radius);
  background:var(--wbp-brand);color:var(--wbp-cream);
}
@media (min-width:700px){.wbp-art-cta{grid-template-columns:1fr auto;gap:28px}}
.wbp-art-cta b{display:block;font-size:1.1875rem;line-height:1.35;color:#fff}
.wbp-art-cta p{margin:6px 0 0;font-size:.9375rem;line-height:1.55;color:rgba(239,228,214,.85)}
.wbp-art-body .wbp-art-cta a{text-decoration:none}
.wbp-art-cta :focus-visible{outline-color:var(--wbp-cream)}

/* Figure dans le texte. */
.wbp-art-fig{margin:36px 0}
.wbp-art-fig img{display:block;width:100%;height:auto;border-radius:var(--wbp-radius)}
.wbp-art-fig figcaption{margin-top:10px;font-size:.875rem;line-height:1.5;color:var(--wbp-muted)}

/* FAQ : .wbp-faq, avec le titre du texte. */
.wbp-art-faq{margin-top:56px}
.wbp-art-faq .wbp-faq{margin-top:18px}

/* Partage. */
.wbp-art-share{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--wbp-line);
  font-size:.875rem;
}
.wbp-art-share > span{margin-right:6px;font-weight:600;color:var(--wbp-ink)}
.wbp-art-body .wbp-art-share a{
  padding:7px 14px;border:1px solid var(--wbp-line);border-radius:999px;
  font-weight:500;color:var(--wbp-ink-2);text-decoration:none;
  transition:border-color .2s, color .2s;
}
.wbp-art-body .wbp-art-share a:hover{border-color:var(--wbp-brand-mid);color:var(--wbp-brand)}

/* Auteur. */
.wbp-art-author{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  margin-top:28px;padding:24px;border-radius:var(--wbp-radius);background:var(--wbp-bg-alt);
}
.wbp-art-author b{display:block;color:var(--wbp-ink);font-size:1.0625rem}
.wbp-art-author p{margin:4px 0 0;font-size:.9375rem;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .wbp-art-cat,.wbp-art-toc a,.wbp-art-share a{transition:none}
}