/* Vide Maison Carolo V3 — page questions fréquentes (préfixe vf-). Chargé APRÈS site.css, cette page seulement.
   Mécanismes copiés de l'accueil V3 (accueil.css, repris de Com'in Clean / Nemelec) : apparitions variées,
   bandeau d'appel, accordéon numéroté animé ; pastilles de thèmes, recherche instantanée et filtrage propres à cette page.
   Bandeau de page : titre mot par mot et trait rouge tracé en CSS seul (comme les pages de service).
   Les états « cachés » (.vf-h…) ne sont posés que par faq.js : sans JS tout reste visible.
   Transform / opacity / filter uniquement. Aucun reflet qui balaie une photo. Mouvement réduit coupé en bas. */

/* ================= 0. Bandeau de page : titre animé ================= */
@keyframes vf-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vf-mot{from{opacity:0;transform:translateY(.55em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes vf-trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vf-pop{from{opacity:0;transform:translateY(14px) scale(.8)}to{opacity:1;transform:none}}
@keyframes vf-respire{from{transform:scale(1.1)}to{transform:scale(1)}}
.vf-page .hero-contenu > *{animation:none}
.vf-page .hero-contenu > .fil{animation:vf-monte .7s var(--vf-ease) both}
.vf-page .hero-contenu > .hero-sous{animation:vf-monte .8s var(--vf-ease) 1.05s both}
.vf-page .hero-contenu > .hero-actions{animation:vf-monte .8s var(--vf-ease) 1.2s both}
.vf-page .hero h1{margin-bottom:18px}
.vf-w{display:inline-block}
.vf-w > i{display:inline-block;font-style:normal;animation:vf-mot .85s var(--vf-ease) both;animation-delay:calc(var(--i,0) * 85ms + .25s)}
/* point final du titre collé au dernier mot (jamais seul à la ligne) */
.vf-page .hero h1.sq::after{content:none}
.vf-page .hero h1 .vf-w:last-child > i::after{content:".";color:var(--rouge-clair,#ff6b66)}
.vf-trait{display:block;width:92px;height:5px;margin:0 0 26px;background:var(--rouge-logo);transform-origin:left center;animation:vf-trace 1s var(--vf-ease) .95s both}
.vf-page .hero-photo img{animation:vf-respire 10s var(--vf-ease) both;transform-origin:70% 50%}


:root{
  --vf-ease:cubic-bezier(.2,.8,.2,1);
  --vf-spring:cubic-bezier(.34,1.56,.64,1);
  --vf-clair:#ff8a80;          /* accent éclairci pour fond sombre : 7,1:1 sur #202020 */
  --vf-nuit:#171717;
}

/* ================= 1. Apparitions variées ================= */
.vf-h{opacity:0}
.vf-h-haut{transform:translateY(40px)}
.vf-h-gauche{transform:translateX(-60px)}
.vf-h-droite{transform:translateX(60px)}
.vf-h-zoom{transform:scale(.88)}
.vf-h-pivot{transform:perspective(1000px) rotateY(-24deg) rotateX(8deg) translateY(46px) scale(.94)}
.vf-h-flou{transform:translateY(22px);filter:blur(8px)}
.vf-in{opacity:1;transform:none;filter:none;
  transition:opacity .8s ease var(--vf-d,0ms),transform 1s var(--vf-ease) var(--vf-d,0ms),filter .8s ease var(--vf-d,0ms)}

/* titres de section : trait rouge qui se trace */
.vf-tete{max-width:52rem;margin-bottom:44px}
.vf-tete > p:not(.sur-titre):not(.vf-eyebrow){margin-top:16px;color:var(--gris);font-size:1.1rem}
.vf-barre{display:block;width:72px;height:4px;margin-top:18px;background:var(--rouge);transform-origin:left}
.vf-tete.vf-in .vf-barre,.vf-cote.vf-in .vf-barre{animation:vfTrait .9s var(--vf-ease) .4s both}
@keyframes vfTrait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vf-tete-centre{margin-left:auto;margin-right:auto;text-align:center}
.vf-tete-centre .vf-barre{margin-left:auto;margin-right:auto;transform-origin:center}
.vf-eyebrow{display:block;font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;margin-bottom:14px;color:var(--vf-clair)}
.vf-eyebrow::before{content:"";display:inline-block;width:.7em;height:.7em;background:var(--rouge);margin-right:.6em;vertical-align:-.02em}
.vf-tete-clair .vf-barre{background:var(--vf-clair)}

/* ================= 2. Bandeau d'appel ================= */
/* bandeau d'appel */
.vf-appel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 28px;align-items:center;margin-top:28px;padding:26px 30px;background:var(--noir);color:#fff;border-radius:var(--rayon);overflow:hidden}
.vf-appel::before{content:"";position:absolute;inset:-40% -10% auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(196,39,39,.5),transparent 68%);pointer-events:none;animation:vfDerive 14s ease-in-out infinite alternate}
.vf-appel > *{position:relative}
.vf-appel p{color:var(--gris-clair);margin-top:4px}
.vf-appel .h-m{color:#fff}
.vf-appel .q{color:var(--vf-clair)}
.vf-appel-ic{position:relative;width:56px;height:56px;border-radius:50%;background:var(--rouge);display:grid;place-items:center;font-size:26px}
.vf-appel-ic::before,.vf-appel-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--vf-clair);animation:vfOnde 2.6s ease-out infinite}
.vf-appel-ic::after{animation-delay:1.3s}
.vf-appel-ic .ico{animation:vfSonne 2.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes vfSonne{0%,60%,100%{transform:rotate(0)}6%{transform:rotate(-14deg)}12%{transform:rotate(12deg)}18%{transform:rotate(-10deg)}24%{transform:rotate(8deg)}30%{transform:rotate(0)}}
@keyframes vfDerive{from{transform:translate3d(0,0,0)}to{transform:translate3d(-60px,40px,0)}}

/* ================= 3. Accordéon numéroté ================= */
/* ================= 10. FAQ animée ================= */
.vf-q{border-bottom:1px solid #d6d1c6;position:relative}
.vf-q:first-child{border-top:1px solid #d6d1c6}
.vf-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(--vf-ease)}
.vf-q[open]::before{transform:scaleY(1)}
.vf-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(--vf-ease),color .3s}
.vf-q summary::-webkit-details-marker{display:none}
.vf-q summary::after{content:none}
.vf-q summary:hover{color:var(--rouge)}
.vf-q[open] summary{padding-left:22px}
.vf-q-n{flex:none;min-width:2ch;font-family:var(--titre);font-weight:400;font-size:1.3rem;color:var(--gris-clair);-webkit-text-stroke:0;color:#9b968b;transition:color .3s}
.vf-q[open] .vf-q-n{color:var(--rouge)}
.vf-q-t{flex:1}
.vf-q-p{position:relative;flex:none;width:16px;height:16px;transition:transform .45s var(--vf-spring)}
.vf-q-p::before,.vf-q-p::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--noir);transition:background .3s}
.vf-q-p::after{transform:rotate(90deg)}
.vf-q[open] .vf-q-p{transform:rotate(135deg)}
.vf-q[open] .vf-q-p::before,.vf-q[open] .vf-q-p::after{background:var(--rouge)}
.vf-rep{overflow:hidden;padding:0 40px 24px 22px}
.vf-q summary:focus-visible{outline:3px solid var(--noir);outline-offset:-3px}
/* ================= 7. Outils : recherche + pastilles de thèmes ================= */
.vf-outils{background:var(--creme);padding:34px 0 30px;border-bottom:1px solid var(--ligne)}
.vf-outils-in{display:flex;flex-direction:column;gap:18px}
.vf-recherche{position:relative;max-width:560px}
.vf-recherche svg{position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;fill:none;stroke:var(--noir);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.vf-recherche input{display:block;width:100%;height:56px;padding:0 18px 0 52px;border:2px solid var(--noir);border-radius:var(--rayon);background:#fff;color:var(--noir);font:inherit;font-size:1.02rem;transition:box-shadow .3s,border-color .3s}
.vf-recherche input::placeholder{color:#6d6a63;opacity:1}
.vf-recherche input:focus{border-color:var(--rouge)}
.vf-recherche input:focus-visible{outline:3px solid var(--noir);outline-offset:3px}
.vf-recherche:focus-within svg{stroke:var(--rouge)}
.vf-pastilles{display:flex;flex-wrap:wrap;gap:10px}
.vf-pastille{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 9px 0 18px;border:2px solid var(--noir);border-radius:999px;background:#fff;color:var(--noir);font:inherit;font-weight:700;font-size:.95rem;line-height:1.2;cursor:pointer;
  transition:background-color .3s,color .3s,transform .4s var(--vf-spring),box-shadow .3s;animation:vf-pop .6s var(--vf-spring) backwards;animation-delay:calc(var(--i,0) * 70ms + .1s)}
.vf-pastille b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:99px;background:var(--creme);color:var(--noir);font-size:.82rem;font-weight:700;transition:background-color .3s,color .3s,transform .4s var(--vf-spring)}
.vf-pastille:hover{transform:translateY(-3px);box-shadow:0 10px 18px -12px rgba(0,0,0,.55)}
.vf-pastille:hover b{transform:scale(1.12)}
.vf-pastille[aria-pressed="true"]{background:var(--noir);color:#fff}
.vf-pastille[aria-pressed="true"] b{background:var(--rouge);color:#fff}
.vf-pastille.vf-clic{animation:vf-rebond .5s var(--vf-spring)}
.vf-compte{font-size:.95rem;font-weight:600;color:var(--gris)}
@keyframes vf-rebond{0%{transform:scale(1)}40%{transform:scale(.92)}100%{transform:scale(1)}}

/* ================= 8. Liste : groupes de thèmes + accordéon numéroté ================= */
.vf-liste{padding:72px 0 88px}
.vf-groupes{display:grid;gap:64px;counter-reset:vfq}
.vf-groupe{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:64px;align-items:start}
.vf-cote{position:sticky;top:calc(var(--entete) + 24px)}
.vf-cote p{margin-top:16px;color:var(--gris)}
.vf-q{counter-increment:vfq}
.vf-q-n::before{content:counter(vfq,decimal-leading-zero)}
.vf-entre{animation:vf-entre .6s var(--vf-ease) var(--d,0ms) backwards}
@keyframes vf-entre{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.vf-vide{margin-top:8px;padding:26px 28px;background:var(--creme);border-left:5px solid var(--rouge);border-radius:var(--rayon);font-weight:600;color:var(--noir)}
.vf-appel{margin-top:64px}
.vf-appel-act{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  .vf-groupe{grid-template-columns:minmax(0,1fr);gap:26px}
  .vf-cote{position:static}
  .vf-groupes{gap:52px}
  .vf-liste{padding:56px 0 64px}
}
@media (max-width:680px){
  .vf-tete{margin-bottom:32px}
  .vf-outils{padding:26px 0 22px}
  .vf-pastille{min-height:44px;font-size:.9rem;padding:0 8px 0 15px}
  .vf-appel{grid-template-columns:auto minmax(0,1fr);padding:22px 20px;margin-top:44px}
  .vf-appel-act{grid-column:1 / -1}
  .vf-appel .btn{width:100%}
  .vf-q summary{font-size:1.02rem;padding:18px 0 18px 12px;gap:12px}
  .vf-q[open] summary{padding-left:18px}
  .vf-rep{padding:0 6px 22px 18px}
}
@media (prefers-reduced-motion:reduce){
  .vf-h,.vf-in{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .vf-barre{animation:none!important}
  .vf-w > i,.vf-trait,.vf-page .hero-photo img,.vf-page .hero-contenu > *,.vf-pastille,.vf-entre,.vf-pastille.vf-clic{animation:none!important}
  .vf-appel::before,.vf-appel-ic::before,.vf-appel-ic::after,.vf-appel-ic .ico{animation:none!important}
  .vf-pre .vf-ic *,.vf-h .vf-ic *{stroke-dashoffset:0!important;opacity:1!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}