/* Articles « Conseils » en nouvelle DA (20/10/2026) : complète vibe.css pour les pages de texte.
   Héros avec sommaire, texte courant lisible, cartes et étapes issues des listes, modèle à copier. */

/* titres d'articles souvent longs : un cran plus petits que ceux des pages courtes */
main.cmp h1{ font-size:clamp(30px,4.3vw,48px); }

/* sommaire dans le visuel du héros */
.hero-visual.toc{ display:flex; align-items:center; justify-content:center; min-height:400px; }
.toc .hv-panel{ inset:18px 0 18px 22px; }
.toc-card{ position:relative; z-index:2; width:min(440px,88%); background:#FFFDF8; border:1px solid var(--border); border-radius:22px; padding:24px 24px 18px; box-shadow:0 26px 54px rgba(42,32,26,.28); transform:rotate(-1.5deg); }
.toc-h{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:15px; letter-spacing:.01em; margin:0 0 12px; color:var(--brand); }
.toc-card ol{ list-style:none; margin:0; padding:0; }
.toc-card li{ margin:0; border-top:1px solid var(--border); }
.toc-card li:first-child{ border-top:none; }
.toc-card a{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px; line-height:1.35; }
.toc-card a:hover span{ color:var(--brand); }
.toc-card b{ flex:none; width:26px; height:26px; border-radius:9px; background:var(--chip); color:var(--brand); font-family:'Unbounded',sans-serif; font-size:12.5px; display:grid; place-items:center; }

/* texte courant */
.cmp .prose{ max-width:780px; font-size:17px; line-height:1.7; color:#3B2F25; }
.cmp .prose p{ margin:0 0 16px; }
.cmp .prose h3{ font-family:'Unbounded',sans-serif; font-weight:600; font-size:18px; line-height:1.3; margin:26px 0 10px; color:var(--ink); }
.cmp .prose ul, .cmp .prose ol{ margin:0 0 18px; padding-left:22px; }
.cmp .prose li{ margin:0 0 8px; }
.cmp .prose li::marker{ color:var(--brand); font-weight:800; }
.cmp .prose a, .cmp .sec-lede a, .cmp .cc a, .cmp .steps a, .cmp .tip a{ color:var(--brand); text-decoration:underline; }
.cmp .prose figure{ margin:22px 0; }
.cmp .prose img{ max-width:100%; height:auto; border-radius:16px; }
.cmp .prose pre{ white-space:pre-wrap; background:#FFFDF8; border:1px solid var(--border); border-radius:16px; padding:18px 20px; font-size:14.5px; }
.cmp .sec > .prose:first-of-type{ margin-top:14px; }
.cmp .sec > * + .grid, .cmp .sec > * + .steps, .cmp .sec > * + .tbl, .cmp .sec > * + .prose{ margin-top:22px; }
.cmp .sec > h2 + .grid, .cmp .sec > h2 + .steps, .cmp .sec > h2 + .tbl{ margin-top:22px; }

/* cartes et étapes issues des listes */
.cmp .cc h3:first-child{ margin-top:0; }
.cmp .cc p + p{ margin-top:10px; }
.cmp .cc ul, .cmp .cc ol{ margin:10px 0 0; padding-left:20px; font-size:14.5px; color:var(--sub); }
.cmp .cc li{ margin:0 0 6px; }
.cmp .steps .st span strong, .cmp .steps .st span b{ display:inline; margin:0; }
.cmp .steps .st:last-child:nth-child(odd){ grid-column:span 2; }

/* tableaux */
.cmp .tbl table{ width:100%; border-collapse:collapse; }
.cmp .tbl th, .cmp .tbl td{ padding:13px 16px; text-align:left; vertical-align:top; border-top:1px solid var(--border); }
.cmp .tbl td:first-child{ white-space:normal; }
.cmp .tbl thead th{ border-top:none; }

/* modèle à copier */
.cr-model{ margin-top:22px; background:#FFFDF8; border:1px solid var(--border); border-left:6px solid var(--brand); border-radius:20px; padding:26px 30px; box-shadow:0 18px 40px rgba(138,79,43,.10); font-size:15.5px; line-height:1.6; }
.cr-model p{ margin:0 0 12px; }
.cr-model p:last-child{ margin:0; }

/* « À lire aussi » sur trois colonnes */
.cmp .readmore.r3{ grid-template-columns:repeat(3,1fr); }

@media (max-width:980px){
  .hero-visual.toc{ height:auto; min-height:0; padding:18px 0; }
  .cmp .steps .st:last-child:nth-child(odd){ grid-column:auto; }
  .cmp .readmore.r3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .toc .hv-panel{ inset:6px 0 6px 8px; border-radius:22px; }
  .toc-card{ width:92%; padding:18px 18px 12px; transform:none; }
  .cmp .prose{ font-size:16.5px; }
  .cr-model{ padding:20px 18px; }
  .cmp .readmore.r3{ grid-template-columns:1fr; }
  .cmp .tbl table{ min-width:560px; }
}

/* encadré qui contient une liste ou plusieurs paragraphes */
.tip .tip-b{ font-size:15.5px; color:#3B2F25; }
.tip .tip-b > :first-child{ margin-top:0; }
.tip .tip-b > :last-child{ margin-bottom:0; }
.tip .tip-b p{ margin:0 0 10px; }
.tip .tip-b ul, .tip .tip-b ol{ margin:8px 0 0; padding-left:20px; }

/* phrase du bandeau d'origine gardée sous les boutons (articles pour les maîtres : Ouaf) */
.hero-note{ margin:14px 0 0; font-size:14.5px; color:var(--sub); max-width:34em; }

/* ===== Composants des pages sur mesure (20/10/2026) : bandeau d'idée, texte + visuel, bulles, encadré CaniSuivi ===== */
main.cmp .idea{ margin:64px 0 0; background:#211A14; color:#F4ECE0; border-radius:28px; padding:40px 44px; position:relative; overflow:hidden; }
main.cmp .idea:before{ content:""; position:absolute; width:340px; height:340px; right:-110px; top:-150px; border-radius:50%; background:radial-gradient(circle,rgba(240,138,62,.45),transparent 65%); }
.idea-k{ position:relative; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
main.cmp .idea p{ position:relative; margin:12px 0 0; font-family:'Unbounded',sans-serif; font-weight:600; font-size:clamp(20px,2.6vw,30px); line-height:1.3; max-width:30em; }
main.cmp .split.lv{ grid-template-columns:1.25fr .75fr; gap:44px; margin-top:22px; }
main.cmp .split.lv.rev{ grid-template-columns:.75fr 1.25fr; }
main.cmp .split.lv .sec-lede{ margin:0; font-size:17.5px; line-height:1.7; color:#3B2F25; }
main.cmp .split.lv .phone-shot{ width:min(240px,80%); max-height:400px; position:relative; border-bottom:none; border-radius:28px 28px 0 0; box-shadow:0 26px 40px -18px rgba(42,32,26,.35); }
main.cmp .split.lv .phone-shot:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:90px; background:linear-gradient(180deg,rgba(244,237,225,0),var(--pageBg) 92%); }
.chat{ margin-top:18px; max-width:380px; }
.chat-h{ font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--sub); margin:0 0 8px; }
.bubble{ background:#fff; border:1px solid var(--border); border-radius:18px 18px 18px 6px; padding:14px 16px; font-size:15px; line-height:1.5; box-shadow:0 12px 26px rgba(42,32,26,.10); }
.bubble.me{ background:var(--brand); border-color:var(--brand); color:#fff; border-radius:18px 18px 6px 18px; }
.cs-help{ margin-top:22px; background:linear-gradient(135deg,#FFF6E8,#F7E7CF); border:1px solid #EBD6B3; border-radius:24px; padding:28px 32px; }
.cs-k{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:17px; color:var(--brand); margin:0 0 10px; }
.cs-help p{ margin:0; font-size:16px; line-height:1.7; color:#3B2F25; }
.cs-help a{ color:var(--brand); text-decoration:underline; }
.mock{ background:var(--card); border:1px solid var(--border); border-radius:22px; padding:22px 24px; box-shadow:0 18px 40px rgba(42,32,26,.08); }
.mock-k{ font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--sub); margin:0 0 12px; }
@media (max-width:980px){
  main.cmp .split.lv, main.cmp .split.lv.rev{ grid-template-columns:1fr; gap:26px; }
  main.cmp .split.lv.rev > :first-child{ order:2; }
}
@media (max-width:640px){
  main.cmp .idea{ padding:28px 22px; border-radius:22px; margin-top:44px; }
  .cs-help{ padding:22px 20px; }
  .mock{ padding:18px; }
}