/* Espace clients La Vitrine des Artisans : complète app.css */
/* Bandeau pro tout en haut ; sur l'accueil l'en-tête flotte sur la photo, il descend donc de la hauteur du bandeau */
.bandeau-pro{position:relative;z-index:30;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;background:var(--ink);color:#fff;font-size:14px;line-height:1;text-decoration:none;white-space:nowrap}
.bandeau-pro b{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bandeau-pro:hover b{text-decoration-thickness:2px}
body.accueil header.top{top:40px}
@media(max-width:400px){.bandeau-pro{font-size:13px;gap:5px}}
.logo img{height:44px;width:auto}
@media(max-width:400px){.logo img{height:38px}}
.v-hero::before{background-image:url(/media/photos/famille-artisan.jpg);background-position:70% 50%}
/* Photo sous le titre : seulement sur mobile et tablette, toute la largeur de l'écran (sur ordinateur, la même photo est en fond à droite) */
.v-photo{display:none}
/* Slogan de marque au-dessus de la photo (mobile) ou du titre (ordinateur) */
.v-slogan{max-width:560px;margin:0 0 10px;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--ember);text-transform:uppercase}
@media(max-width:959px){
  /* Slogan sur 2 lignes équilibrées (« Vos travaux méritent » / « les bons artisans. »), titre sur une ligne ; tailles calculées sur la largeur du texte */
  .v-slogan{margin:0 auto;font-size:min(32px,calc((100vw - 36px) / 10));font-weight:800;line-height:1.15;letter-spacing:-.02em;text-transform:none;color:var(--ink);white-space:nowrap}
  .v-slogan span{display:block}
  .v-hero h1{font-size:min(26px,calc((100vw - 36px) / 17.2));letter-spacing:-.02em;white-space:nowrap;margin-bottom:14px}
  .v-photo{display:block;margin:14px calc(50% - 50vw) 18px;width:100vw;max-width:none;aspect-ratio:16/9;overflow:hidden}
  .v-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block}
  .v-hero .lead{display:none}
}
/* Accueil : la phrase d'accroche s'affiche une fois, sous le titre sur ordinateur, sous la barre sur mobile */
@media(min-width:960px){.v-cherche .v-rassure{display:none}}
.v-secteur{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:2px solid var(--line,#e4e8ee);border-radius:6px;color:var(--ink);text-decoration:none;min-height:64px}
.v-secteur:hover{border-color:var(--ember)}
.v-secteur span{flex:1;min-width:0}
.v-secteur b{display:block;font-size:16px}
.v-secteur small{display:block;font-size:13px;color:var(--muted,#66758a);margin-top:1px}
.v-secteur .chev{flex:none;width:16px;height:16px;color:var(--ember)}

/* Accueil : la recherche dans le premier écran, sous le titre et le sous-titre */
.v-hero{padding-bottom:40px;overflow:visible;z-index:5}
/* La liste des métiers déborde du hero : la photo, elle, reste dans son cadre */
@media(min-width:960px){.v-hero::before{bottom:0;height:auto}}
.v-hero h1{max-width:560px}
.v-hero .lead{margin-bottom:22px}
.v-combo{position:relative;max-width:560px;text-align:left}
.v-recherche{display:flex;align-items:center;gap:10px;margin:0;padding:0 18px;background:#fff;border:2px solid var(--line,#e4e8ee);border-radius:6px;box-shadow:0 8px 24px rgba(3,26,50,.09);color:var(--muted,#66758a);cursor:text}
.v-recherche:focus-within{border-color:var(--ember)}
.v-recherche svg{flex:none;width:22px;height:22px}
.v-recherche input{flex:1;min-width:0;height:58px;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.v-recherche input::-webkit-search-cancel-button{-webkit-appearance:none}
.v-liste{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);max-height:min(380px,55vh);overflow-y:auto;background:#fff;border:2px solid var(--line,#e4e8ee);border-radius:8px;box-shadow:0 18px 40px rgba(3,26,50,.16);padding:6px;overscroll-behavior:contain}
.v-liste .v-secteur{border:0;border-radius:6px;min-height:56px;padding:8px 10px}
.v-liste .v-secteur:hover,.v-liste .v-secteur:focus,.v-liste .v-secteur.actif{background:var(--sand,#f5f2ea);outline:0}
.v-secteur[hidden],.v-aucun[hidden],.v-liste[hidden]{display:none}
.v-aucun p{margin:0;padding:12px 12px 6px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.v-puces{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;max-width:560px}
.v-puce{display:inline-flex;align-items:center;padding:7px 11px;border:1.5px solid var(--line,#e4e8ee);border-radius:6px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.v-puce:hover{border-color:var(--ember)}
/* Galerie de travaux (accueil) : défilement au doigt sur mobile, grille sur grand écran */
.v-chantiers{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin:0 -2px;scrollbar-width:none}
.v-chantiers::-webkit-scrollbar{display:none}
@media(min-width:760px){.v-chantiers{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);overflow:visible}}
.v-chantier{scroll-snap-align:start;color:var(--ink);text-decoration:none}
.v-ch-photo{position:relative;display:block;aspect-ratio:4/5;border:3px solid var(--ember);border-radius:8px;overflow:hidden;background:var(--ember-soft)}
.v-ch-photo>img:first-child{width:100%;height:100%;object-fit:cover;display:block}
.v-ch-travaux{position:absolute;left:10px;bottom:10px;background:var(--ember);color:#fff;font-weight:800;font-size:14px;padding:6px 11px;border-radius:6px}
.v-ch-nom{display:flex;flex-direction:column;gap:2px;padding:10px 4px 0}
.v-ch-nom small{color:var(--ember);font-weight:700;font-size:14px}
.v-chantier:hover .v-ch-nom small{text-decoration:underline}
.v-rassure{max-width:520px;margin:16px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2);text-shadow:0 0 10px #fff}
@media(max-width:959px){
  .v-hero{padding-top:88px;padding-bottom:30px}
  .v-puce{font-size:13px;padding:6px 10px}
  .v-hero .wrap{text-align:center}
  .v-hero h1,.v-hero .lead,.v-combo,.v-puces,.v-rassure{margin-left:auto;margin-right:auto}
  .v-puces{justify-content:center}
}

/* Bas de l'accueil : tous les métiers par section, pour qui préfère cliquer */
#metiers .v-groupe{margin:26px 0 10px;font-size:17px;color:var(--ink)}
#metiers .v-secteurs{display:grid;gap:10px}
@media(min-width:700px){#metiers .v-secteurs{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){#metiers .v-secteurs{grid-template-columns:1fr 1fr 1fr}}

/* Pages métiers : une fois le questionnaire commencé, la question passe devant le titre commercial */
.hero .note:empty{display:none}
@media(min-width:960px){
  body.q-actif .hero-copy .lead,body.q-actif .hero-copy .checks,body.q-actif .hero-copy .note{display:none}
  body.q-actif .hero-copy h1{font-size:30px}
}
/* Dernière étape : erreurs près des champs, échec d'envoi sous le bouton */
#fConsent .consent{margin:0}
#fConsent.bad .consent{outline:2px solid #c62828;outline-offset:4px;border-radius:6px}
.err-envoi{margin:10px 0 0;color:#b3261e;font-size:14px;font-weight:600}
#fineTxt b{color:var(--ink)}
/* Mobile : « Étape 1 sur 4 » visible dès la première question */
@media(max-width:959px){.quiz .q-head:has(.q-back:not(.show)){display:flex;justify-content:flex-end}}
/* Récapitulatif de la demande (avant l'envoi et sur l'écran de remerciement) */
.recap{margin:0 0 16px;padding:14px 16px;background:var(--sand,#f5f2ea);border-radius:6px;font-size:15px}
.recap-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
.recap-t .lnk{flex:none;font-size:15px}
.recap dl{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:4px 14px;margin:0}
.recap dt{color:var(--muted,#66758a)}
.recap dd{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
/* Projet complémentaire après l'envoi */
.suite-projet{margin-top:18px;padding-top:18px;border-top:1px solid var(--line,#e4e8ee)}
.suite-projet .opts{margin-top:10px}
/* Reprise d'un formulaire commencé */
.reprise{margin:0 0 14px;padding:14px 16px;background:var(--sand,#f5f2ea);border-radius:6px;font-size:15px}
.reprise p{margin:0 0 10px}
.reprise-b{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Bas des formulaires : une ligne « Gratuit et sans engagement », une ligne sur les coordonnées, les liens */
.fin-court{text-align:center;margin-top:12px}.fin-court p{margin:0 0 6px}
.fin-gratuit{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink-2)}
.fin-gratuit svg{width:18px;height:18px;flex:none;color:var(--ember)}

/* Arrondis sobres (Ismail 04/11 : « trop rond, ça fait IA ») : 8 px au plus pour les blocs, 6 px pour boutons, champs et pastilles.
   app.css est partagé avec Rénover mon habitat : ses arrondis sont réduits ici, seulement pour la Vitrine. */
:root{--radius:8px}
.btn-rappel{border-radius:6px}
.menu summary{border-radius:6px}
.menu nav{border-radius:8px}
.menu nav a{border-radius:6px}
.eyebrow::before{border-radius:6px}
.eyebrow{border-radius:6px}
/* Quiz */
.quiz{border-radius:8px}
.bar{border-radius:6px}
.bar span{border-radius:6px}
.q-info{border-radius:6px}
.opt{border-radius:6px}
.tuile{border-radius:8px}
.field input{border-radius:6px}
.field textarea{border-radius:6px}
.btn{border-radius:6px}
.good{border-radius:6px}
.consent{border-radius:6px}
.step .n{border-radius:6px}
.faq details{border-radius:6px}
.hub-card{border-radius:8px}
.hub-card .ico{border-radius:6px}
.hub-card .tag{border-radius:6px}
dialog{border-radius:8px}
/* Bandeau cookies : Accepter et Refuser au même niveau (CNIL) */
#cookies{border-radius:6px}
.cookies-btns button{border-radius:6px}
.g-note{border-radius:6px}
.g-art details{border-radius:6px}
.g-carte{border-radius:8px}
.porte{border-radius:8px}
.cote-tag{border-radius:6px}
.a-badge{border-radius:6px}
.a-porte{border-radius:8px}
.a-porte-btn{border-radius:6px}
.a-porte-btn{border-radius:6px}
.a-carte{border-radius:8px}
.a-onglets{border-radius:6px}
.a-onglets button{border-radius:6px}
.a-tuile{border-radius:6px}
.a-cta{border-radius:6px}
.a-bandeau{border-radius:8px}
.quiz{border-radius:8px}
.a-metiers a{border-radius:6px}
.a-metiers .plus{border-radius:6px}
.inclus-photo img{border-radius:8px}

/* Pied de page : logo centré, liens alignés, copyright */
footer.pied-vitrine{background:var(--sand);border-top:1px solid var(--line);padding:44px 0 72px;text-align:center;font-size:14px}
.pied-logo{display:inline-block}
.pied-logo img{display:block;height:48px;width:auto;margin:0 auto}
.pied-phrase{margin:12px 0 24px;color:var(--ink-2);font-weight:600}
footer.pied-vitrine .frenov-banner{display:inline-block;margin:0 auto 10px}
footer.pied-vitrine .links{justify-content:center;gap:10px 24px;max-width:860px;margin:0 auto;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
footer.pied-vitrine .lnk{color:var(--ink-2);font-weight:600;text-decoration:none}
footer.pied-vitrine .lnk:hover{color:var(--ink);text-decoration:underline}
.pied-copy{margin:18px 0 0;font-size:13px;color:var(--muted)}

/* Bloc « Dites-nous ce que vous cherchez » : le téléphone de démonstration (assets/vitrine/telephone.css) */
.v-parler .wrap{display:grid;gap:22px;align-items:center}
.v-parler-txt h2{margin-bottom:8px}
.v-parler-txt .sub{margin:0}
@media(min-width:860px){.v-parler .wrap{grid-template-columns:1fr 1fr;gap:48px}}

/* Avant / après (accueil) : « avant » par-dessus, rogné par le curseur ; tout glissé sur « après », le bouton apparaît */
.v-aa{--aa:70%;position:relative;aspect-ratio:4/3;max-width:900px;margin:0 auto;border-radius:8px;overflow:hidden;border:3px solid var(--ember);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.v-aa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.v-aa-avant{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--aa)) 0 0)}
.v-aa-etiq{position:absolute;top:12px;z-index:2;padding:5px 12px;border-radius:6px;background:rgba(11,31,58,.78);color:#fff;font-size:13px;font-weight:800;pointer-events:none;transition:opacity .2s}
.v-aa-etiq.avant{left:12px}
.v-aa-etiq.apres{right:12px;background:var(--ember)}
.v-aa-poignee{position:absolute;top:0;bottom:0;left:var(--aa);z-index:2;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.35);pointer-events:none}
.v-aa-poignee i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.v-aa-poignee i::before,.v-aa-poignee i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent}
.v-aa-poignee i::before{left:7px;border-right-color:var(--ink)}
.v-aa-poignee i::after{right:7px;border-left-color:var(--ink)}
.v-aa{cursor:ew-resize}
.v-aa-curseur{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.v-aa-cta{position:absolute;left:50%;bottom:18px;z-index:4;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;width:auto;min-width:0;padding:0 26px;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.v-aa.fini .v-aa-cta{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.v-aa.fini .v-aa-poignee,.v-aa.fini .v-aa-etiq.avant{opacity:0}
.v-aa-choix{display:flex;justify-content:center;gap:8px;margin:0 0 14px}
.v-aa-choix .chip{min-height:40px;padding:0 16px;border:1.5px solid var(--line);border-radius:6px;background:#fff;font:inherit;font-size:15px;font-weight:800;color:var(--ink-2);cursor:pointer}
.v-aa-choix .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* Bouton de fin de glissement : arrivée en rebond, halo qui pulse, reflet qui passe (demande d'Ismail du 04/11) */
.v-aa-cta{overflow:hidden}
.v-aa.fini .v-aa-cta{animation:aaArrivee .55s cubic-bezier(.34,1.56,.64,1) both,aaHalo 1.8s ease-out .6s infinite}
.v-aa-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.v-aa.fini .v-aa-cta::after{animation:aaReflet 2.4s ease-in-out .8s infinite}
@keyframes aaArrivee{0%{opacity:0;transform:translate(-50%,24px) scale(.7)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes aaHalo{0%{box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 0 0 rgba(70,125,37,.7)}70%{box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 0 16px rgba(70,125,37,0)}100%{box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 0 0 rgba(70,125,37,0)}}
@keyframes aaReflet{0%{left:-60%}55%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){.v-aa.fini .v-aa-cta,.v-aa.fini .v-aa-cta::after{animation:none}}
/* Questionnaire des pages métiers : rebond et halo quand un bouton y ramène (assets/vitrine/client-ia.js) */
.quiz.ia-appel{animation:quizAppel .9s cubic-bezier(.34,1.56,.64,1) 2}
@keyframes quizAppel{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(70,125,37,.55)}30%{transform:scale(1.02)}60%{transform:scale(.995)}100%{transform:scale(1);box-shadow:0 0 0 18px rgba(70,125,37,0)}}
@media(prefers-reduced-motion:reduce){.quiz.ia-appel{animation:none}}
/* Flèches sous l'avant/après */
.v-aa-nav{display:flex;justify-content:center;gap:14px;margin:14px 0 0}
.v-aa-nav button{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.v-aa-nav button:hover{border-color:var(--ink)}
.v-aa-nav svg{width:22px;height:22px}
/* Avant/après fluide : déplacements en transform (calculés par la carte graphique), plus de rognage repeint à chaque image */
.v-aa-avant{clip-path:none;overflow:hidden;transform:translateX(calc(var(--aa) - 100%));will-change:transform}
.v-aa-avant img{transform:translateX(calc(100% - var(--aa)));will-change:transform}
.v-aa-poignee{left:0;width:100%;margin-left:0;background:none;box-shadow:none;transform:translateX(var(--aa));will-change:transform}
.v-aa-poignee::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.35)}
.v-aa-poignee i{left:0}

/* Tableaux de blog en texte (points à vérifier, étapes) : retour à la ligne permis, contrairement aux tableaux de prix */
.g-art .g-tab.texte table{min-width:0}
.g-art .g-tab.texte td{white-space:normal}