/* ==================================================================
   Vide Maison Carolo — styles propres au blog « Conseils »
   Chargé après site.css, seulement par blog/index.html et les articles.
   Réutilise les jetons et composants de site.css (hero, svc-carte, faq-liste,
   zones, bandeau-appel, cta-final). Mobile d'abord, rien ne déborde à 390 px.
   ================================================================== */

/* ---------- Menu : « Conseils » reste actif sur un article ---------- */
.nav a[aria-current="true"]{border-bottom-color:var(--rouge)}
@media (max-width:1100px){
  .nav a[aria-current="true"]{border-bottom-color:var(--ligne);color:var(--rouge)}
}

/* ---------- Index : cartes d'articles ---------- */
.blog-meta{font-size:.9rem;color:var(--gris);font-weight:500}
.svc-carte .blog-meta{margin-bottom:-4px}
.blog-services{margin-top:64px}
.blog-services h2{margin-bottom:16px}

/* ---------- Article : en-tête (dans le héros) ---------- */
.art-meta{margin-top:4px;font-size:.95rem;color:var(--gris-clair)}

/* ---------- Article : grille sommaire | texte ---------- */
.art-section{padding:64px 0 88px}
.art-grille{display:grid;grid-template-columns:minmax(0,16.5rem) minmax(0,70ch);justify-content:center;gap:0 64px;align-items:start}
.art-lateral{position:sticky;top:calc(var(--entete) + 24px)}
.art-sommaire{border-left:4px solid var(--rouge);padding:2px 0 2px 20px}
.art-sommaire-titre{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:12px}
.art-sommaire ol{list-style:none;counter-reset:som;display:grid;gap:2px}
.art-sommaire li{counter-increment:som}
.art-sommaire a{display:flex;gap:10px;padding:6px 0;text-decoration:none;font-weight:600;font-size:.95rem;line-height:1.35;color:var(--noir)}
.art-sommaire a::before{content:counter(som) ".";flex:none;min-width:1.4em;color:var(--rouge);font-weight:700}
.art-sommaire a:hover{color:var(--rouge)}
.art-lateral-appel{margin-top:28px}
.art-lateral-appel .btn{width:100%;min-height:50px;padding:0 16px;font-size:.98rem}

/* ---------- Article : texte (≈ 70 caractères par ligne) ---------- */
.art-corps{min-width:0;font-size:1.0625rem}
.art-corps > * + *{margin-top:1.1em}
.art-corps h2{margin-top:2.4em;scroll-margin-top:calc(var(--entete) + 16px)}
.art-corps h2 + *{margin-top:.9em}
.art-corps .zones a{text-decoration:none;font-weight:600}
.art-corps .liste-points li{padding:5px 0 5px 22px}
.art-corps .liste-points li::before{top:.95em}

.art-resume .liste-points li{padding:5px 0 5px 22px}

.art-corps .citation{max-width:none;margin-top:2em;margin-bottom:2em}

.art-figure{margin-top:2em}
.art-figure img{width:100%;height:auto;border-radius:var(--rayon);background:var(--noir)}
.art-figure figcaption{margin-top:10px;font-size:.9rem;color:var(--gris)}

/* Encadré « bon à savoir » / « à garder » */
.art-note{padding:22px 26px;background:#fff;border:1px solid var(--ligne);border-left:6px solid var(--noir);border-radius:var(--rayon)}
.art-note-titre{font-weight:700;color:var(--noir);margin-bottom:6px}
.art-note p{color:var(--gris)}

/* Bloc de liens vers les services */
.art-liens{margin-top:2.4em;padding:28px 30px;background:var(--noir);color:#fff;border-radius:var(--rayon)}
.art-liens .sur-titre{color:#fff;margin-bottom:10px}
.art-liens .sur-titre::before{content:"";display:inline-block;width:.7em;height:.7em;background:var(--rouge);margin-right:.6em;vertical-align:-.02em}
.art-liens p{color:var(--gris-clair);margin-top:8px}
.art-liens :focus-visible{outline-color:#fff}

/* Bloc d'appel en fin d'article */
.art-appel{padding:32px 34px;background:var(--noir);color:#fff;border-radius:var(--rayon);margin-top:2.4em}
.art-appel h2{margin-top:0;color:#fff}
.art-appel p{margin-top:10px;color:var(--gris-clair)}
.art-appel .actions{margin-top:22px}
.art-appel :focus-visible{outline-color:#fff}

/* Zones d'intervention et lecture suivante */
.art-zones{padding:22px 26px;background:var(--creme);border-radius:var(--rayon)}
.art-zones h3{margin-bottom:10px}
.art-zones p{color:var(--gris);margin-bottom:14px}
.art-suite{display:grid;gap:10px;margin-top:2.4em}
.art-suite-titre{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.art-retour{margin-top:2em}

/* ================= Tablette ================= */
@media (max-width:1100px){
  .art-grille{grid-template-columns:minmax(0,1fr);max-width:70ch;margin:0 auto}
  .art-lateral{position:static;margin-bottom:36px}
  .art-lateral-appel{display:none}
}

/* ================= Téléphone ================= */
@media (max-width:680px){
  .art-section{padding:40px 0 56px}
  .art-resume{padding:20px 20px}
  .art-liens{padding:24px 22px}
  .art-appel{padding:26px 22px}
  .art-note,.art-zones{padding:20px 20px}
  .blog-services{margin-top:44px}
}

/* ======================================================================
   V3 — animations du blog (préfixe vb-). Mécanismes repris de Com'in Clean / Nemelec
   et des pages V3 déjà faites : titre mot par mot + trait tracé (services), cartes inclinables
   (relief3d), cascade d'entrée, accordéon animé (accueil.*), sommaire qui suit la lecture.
   Les états « cachés » (.vb-pre) ne sont posés que par blog.js : sans JS tout reste visible.
   Transform / opacity uniquement. Aucun reflet qui balaie une photo.
   La barre de progression de lecture est dans le socle commun (site.js) : pas ici.
   ====================================================================== */
.vb-page{--vb-ease:cubic-bezier(.2,.8,.2,1);--vb-spring:cubic-bezier(.34,1.56,.64,1)}

@keyframes vb-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vb-mot{from{opacity:0;transform:translateY(.55em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes vb-trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vb-pop{from{opacity:0;transform:translateY(14px) scale(.8)}to{opacity:1;transform:none}}
@keyframes vb-respire{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes vb-carte-in{from{opacity:0;transform:perspective(900px) translateY(42px) rotateX(-18deg) scale(.95)}to{opacity:1;transform:perspective(900px) translateY(0) rotateX(0) scale(1)}}
@keyframes vb-barre{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vb-carre{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes vb-secoue{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg) scale(1.08)}65%{transform:rotate(7deg) scale(1.08)}}

/* ---------- 1. Bandeau : titre mot par mot, trait rouge tracé, photo qui se pose ---------- */
.vb-page .hero-contenu > *{animation:none}
.vb-page .hero-contenu > .fil{animation:vb-monte .7s var(--vb-ease) both}
.vb-page .hero-contenu > .sur-titre{animation:vb-monte .7s var(--vb-ease) .08s both}
.vb-page .hero-contenu > .hero-sous{animation:vb-monte .8s var(--vb-ease) 1.05s both}
.vb-page .hero-contenu > .hero-actions{animation:vb-monte .8s var(--vb-ease) 1.2s both}
.vb-page .hero h1{margin-bottom:18px}
.vb-w{display:inline-block}
.vb-w > i{display:inline-block;font-style:normal;animation:vb-mot .85s var(--vb-ease) both;animation-delay:calc(var(--i,0) * 70ms + .25s)}
/* le point final du titre reste collé au dernier mot (jamais seul à la ligne) */
.vb-page .hero h1.sq::after{content:none}
.vb-page .hero h1 .vb-w:last-child > i::after{content:".";color:var(--rouge-clair)}
.vb-fil{display:block;width:92px;height:5px;margin:0 0 24px;background:var(--rouge-logo);transform-origin:left center;animation:vb-trace 1s var(--vb-ease) .9s both}
.vb-page .hero-photo img{animation:vb-respire 10s var(--vb-ease) both;transform-origin:70% 50%}

/* méta en pastilles (article et cartes) */
.art-meta.vb-pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
.art-meta.vb-pastilles span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#f1efea;font-size:.88rem;font-weight:600;line-height:1;white-space:nowrap}
.art-meta.vb-pastilles span:first-child::before{content:"";width:7px;height:7px;background:var(--rouge-clair)}
.vb-page .art-meta.vb-pastilles span{animation:vb-pop .6s var(--vb-spring) both}
.vb-page .art-meta.vb-pastilles span:nth-child(1){animation-delay:1.3s}
.vb-page .art-meta.vb-pastilles span:nth-child(2){animation-delay:1.4s}
.vb-page .art-meta.vb-pastilles span:nth-child(3){animation-delay:1.5s}
.vb-page .hero-contenu > .art-meta{animation:none}

/* ---------- 2. Index : cartes d'articles en relief ---------- */
.vb-cartes{perspective:1200px;align-items:stretch}
.vb-carte{position:relative;border-bottom:3px solid var(--rouge);box-shadow:0 2px 4px rgba(0,0,0,.05),0 22px 34px -22px rgba(0,0,0,.5)}
.vb-carte .svc-corps{gap:14px}
.blog-meta.vb-pastilles{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.blog-meta.vb-pastilles span{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--creme);border:1px solid var(--ligne);color:var(--gris);font-size:.82rem;font-weight:600;line-height:1}
.vb-carte h3 a,.vb-etire{color:inherit;text-decoration:none;transition:color .25s}
.vb-etire::after{content:"";position:absolute;inset:0;z-index:2}
.vb-etire:focus-visible{outline:none}
.vb-etire:focus-visible::after{outline:3px solid var(--noir);outline-offset:-3px}
.vb-lire{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-weight:700;color:var(--rouge-fonce)}
.vb-fl{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--vb-ease)}
@media (hover:hover){
  .vb-carte:hover{box-shadow:0 3px 6px rgba(0,0,0,.06),0 36px 48px -26px rgba(0,0,0,.6)}
  .vb-carte:hover h3 a{color:var(--rouge)}
  .vb-carte:hover .vb-fl,.carte-suite:hover .vb-fl{transform:translateX(6px)}
  /* zoom doux de l'image (pas de reflet) */
  .vb-carte .photo img{transition:transform 1s var(--vb-ease)}
  .vb-carte:hover .photo img{transform:scale(1.08)}
  .vb-carte.vb-on{transition:transform .12s linear,box-shadow .35s,border-color .35s}
}
/* entrée en cascade (états posés par blog.js) */
.vb-pre{opacity:0}
.vb-carte.vb-pre{transform:perspective(900px) translateY(42px) rotateX(-18deg) scale(.95);transition:none}
.vb-carte.vb-go{animation:vb-carte-in .9s var(--vb-ease) var(--d,0ms) backwards}

/* ---------- 3. Article : sommaire qui surligne la section en cours (ordinateur) ---------- */
.art-sommaire ol{position:relative}
.art-sommaire a{transition:color .25s,transform .35s var(--vb-ease)}
.vb-som-marque{display:none}
@media (min-width:1101px){
  .vb-som-marque{display:block;position:absolute;left:-24px;top:0;width:4px;height:0;background:var(--noir);opacity:0;transition:transform .45s var(--vb-ease),height .45s var(--vb-ease),opacity .3s;pointer-events:none}
  .vb-som-marque.vb-visible{opacity:1}
  .art-sommaire a.vb-actif{color:var(--rouge);transform:translateX(6px)}
}

/* ---------- 4. Article : « L'essentiel » animé ---------- */
.art-resume{position:relative;margin-top:0;padding:24px 28px 24px 34px;background:var(--creme);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;box-shadow:0 18px 30px -24px rgba(0,0,0,.45)}
.art-resume::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--rouge);transform-origin:top}
.art-resume-titre{display:flex;align-items:center;gap:.6em;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge-fonce);margin-bottom:10px}
.art-resume-titre::before{content:"";width:.7em;height:.7em;background:var(--rouge)}
.art-resume.vb-pre{transform:translateY(26px)}
.art-resume.vb-pre::before{transform:scaleY(0)}
.art-resume.vb-go{animation:vb-monte .8s var(--vb-ease) backwards}
.art-resume.vb-go::before{animation:vb-barre .9s var(--vb-ease) .15s backwards}
.art-resume.vb-go .art-resume-titre::before{animation:vb-carre .5s var(--vb-spring) .3s backwards}
.art-resume.vb-go .liste-points li::before{animation:vb-carre .5s var(--vb-spring) backwards}
.art-resume.vb-go .liste-points li:nth-child(1)::before{animation-delay:.45s}
.art-resume.vb-go .liste-points li:nth-child(2)::before{animation-delay:.6s}
.art-resume.vb-go .liste-points li:nth-child(3)::before{animation-delay:.75s}

/* ---------- 5. Article : FAQ en accordéon animé (mécanique de l'accueil) ---------- */
.vb-faq{margin-top:.6em}
.vb-q{position:relative;border-bottom:1px solid #d6d1c6}
.vb-q:first-child{border-top:1px solid #d6d1c6}
.vb-q::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:4px;background:var(--rouge);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--vb-ease)}
.vb-q[open]::before{transform:scaleY(1)}
.vb-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 0 22px 14px;font-weight:700;font-size:1.1rem;line-height:1.35;color:var(--noir);transition:padding .4s var(--vb-ease),color .3s}
.vb-q summary::-webkit-details-marker{display:none}
.vb-q summary:hover{color:var(--rouge)}
.vb-q[open] summary{padding-left:22px}
.vb-q summary:focus-visible{outline:3px solid var(--noir);outline-offset:-3px}
.vb-q-n{flex:none;min-width:2ch;font-family:var(--titre);font-weight:400;font-size:1.3rem;color:#85807a;transition:color .3s}
.vb-q[open] .vb-q-n{color:var(--rouge)}
.vb-q-t{flex:1}
.vb-q-p{position:relative;flex:none;width:16px;height:16px;transition:transform .45s var(--vb-spring)}
.vb-q-p::before,.vb-q-p::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--noir);transition:background .3s}
.vb-q-p::after{transform:rotate(90deg)}
.vb-q[open] .vb-q-p{transform:rotate(135deg)}
.vb-q[open] .vb-q-p::before,.vb-q[open] .vb-q-p::after{background:var(--rouge)}
.vb-rep{overflow:hidden;padding:0 40px 24px 22px;max-width:none}
.vb-q.vb-pre{transform:translateY(24px)}
.vb-q.vb-go{animation:vb-monte .6s var(--vb-ease) var(--d,0ms) backwards}

/* ---------- 6. Article : liens services en cartes ---------- */
.vb-svc-cartes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 0;padding:0}
.vb-svc-cartes > li{margin:0;padding:0}
body .art-corps .vb-svc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;height:100%;padding:18px 16px 16px;background:rgba(255,255,255,.07);background-image:none;border:1px solid rgba(255,255,255,.2);border-bottom:3px solid var(--rouge);border-radius:var(--rayon);color:#fff;font-weight:700;line-height:1.25;text-decoration:none;transition:transform .35s var(--vb-ease),background-color .3s,border-color .3s,box-shadow .35s}
body .art-corps .vb-svc:hover,body .art-corps .vb-svc:focus-visible{color:#fff;background-image:none;background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);border-bottom-color:var(--rouge-clair);transform:translateY(-5px);box-shadow:0 18px 28px -16px rgba(0,0,0,.85)}
.vb-svc-ic{display:grid;place-items:center;width:46px;height:46px;background:var(--rouge);border-radius:var(--rayon)}
.vb-svc-ic .ico{width:26px;height:26px;stroke:#fff;stroke-width:1.9}
.vb-svc:hover .vb-svc-ic .ico{animation:vb-secoue .6s ease-out 1}
.vb-svc .vb-fl{margin-top:auto;color:var(--rouge-clair)}
.vb-svc:hover .vb-fl{transform:translateX(6px)}
.vb-svc.vb-pre{transform:translateY(26px) scale(.92)}
.vb-svc.vb-go{animation:vb-pop .7s var(--vb-spring) var(--d,0ms) backwards}

/* ---------- 7. Article : « À lire aussi » en carte ---------- */
.art-suite{gap:12px}
.art-suite a.carte-suite{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);align-items:stretch;overflow:hidden;background:#fff;border:1px solid var(--ligne);border-bottom:3px solid var(--rouge);border-radius:var(--rayon);color:var(--noir);text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.05),0 20px 30px -22px rgba(0,0,0,.5);transition:transform .35s var(--vb-ease),box-shadow .35s,border-color .3s}
.vb-suite-ph{position:relative;display:block;min-height:100%;background:var(--noir);overflow:hidden}
.vb-suite-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--vb-ease)}
.vb-suite-corps{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:20px 24px}
.vb-suite-t{font-weight:700;font-size:1.1rem;line-height:1.35;transition:color .25s}
@media (hover:hover){
  .art-suite a.carte-suite:hover{transform:translateY(-4px);border-color:#cfc9bc;border-bottom-color:var(--rouge);box-shadow:0 3px 6px rgba(0,0,0,.06),0 32px 44px -26px rgba(0,0,0,.6)}
  .art-suite a.carte-suite:hover .vb-suite-ph img{transform:scale(1.08)}
  .art-suite a.carte-suite:hover .vb-suite-t{color:var(--rouge)}
}
.art-suite a.carte-suite:focus-visible{outline:3px solid var(--noir);outline-offset:3px}

/* ---------- Tablette / téléphone ---------- */
@media (max-width:900px){
  .vb-svc-cartes{grid-template-columns:minmax(0,1fr)}
  body .art-corps .vb-svc{flex-direction:row;align-items:center;gap:16px;padding:14px 16px}
  .vb-svc .vb-fl{margin:0 0 0 auto}
}
@media (max-width:680px){
  .art-resume{padding:20px 20px 20px 26px}
  .art-suite a.carte-suite{grid-template-columns:minmax(0,1fr)}
  .vb-suite-ph{aspect-ratio:16/9;min-height:0}
  .vb-suite-corps{padding:18px 20px 20px}
  .vb-q summary{font-size:1.02rem;padding:18px 0 18px 12px;gap:12px}
  .vb-q[open] summary{padding-left:18px}
  .vb-rep{padding:0 6px 22px 18px}
  .vb-fil{margin-bottom:20px}
}

/* ---------- Mouvement réduit : tout est visible, rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  .vb-page .hero-contenu > *,.vb-w > i,.vb-fil,.vb-page .hero-photo img,.vb-page .art-meta.vb-pastilles span{animation:none!important}
  .vb-pre{opacity:1!important;transform:none!important}
  .vb-go,.vb-go::before,.vb-go *{animation:none!important}
  .vb-carte:hover,.art-suite a.carte-suite:hover,body .art-corps .vb-svc:hover{transform:none}
  .vb-carte:hover .photo img,.art-suite a.carte-suite:hover .vb-suite-ph img{transform:none}
  .art-sommaire a.vb-actif{transform:none}
}