/* Pages villes, Entreprise Verstraet : même identité que le site (site.css), mais une page d'artisan, simple et directe.
   Toutes les animations sont en CSS : elles se déclenchent une fois, quand l'élément arrive à l'écran (classe .est-vu, posée par ville.js). */
@property --h{syntax:"<number>";inherits:true;initial-value:0}
@property --b{syntax:"<number>";inherits:true;initial-value:0}

/* apparitions */
.js .rv{filter:blur(5px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease)}
.js .rv.est-vu{opacity:1;transform:none;filter:none}
.rm .rv{filter:none}
.hl{transition:--h .9s var(--ease2) .25s}
.hl.est-vu{--h:1}
/* surlignage net sur cette page : pas de bord en dégradé, qui devient flou sur un très grand titre */
.v-page .hl{background-image:linear-gradient(var(--terre),var(--terre))}
.vh .hl{background-size:calc(var(--h)*100%) .14em;background-position:0 94%;transition-delay:.7s}
.js .reveal-img{transition:clip-path 1.3s var(--ease)}
.js .reveal-img.est-vu{clip-path:inset(0)}
.reveal-img img{transition:transform 1.8s var(--ease)}
.js .reveal-img:not(.est-vu) img{transform:scale(1.1)}

/* arrivée depuis une autre page du site : le rideau orange se retire */
.vt-arrive .rideau{clip-path:inset(0)}
.vt-arrive .rideau.part{clip-path:inset(100% 0 0 0);transition:clip-path .85s cubic-bezier(.76,0,.24,1) .1s}

/* titres : simples, une seule couleur, alignés à gauche */
.v-page main h2{font-size:clamp(32px,4.4vw,68px);line-height:1.03;text-wrap:balance}
.v-page main p a:not(.btn):not(.link){text-decoration:underline;text-underline-offset:3px;font-weight:600;transition:color .3s}
.v-page main p a:not(.btn):not(.link):hover{color:var(--terre-deep)}

/* ===== haut de page ===== */
.vh{display:grid}
.vh__texte{padding:clamp(92px,9vw,120px) var(--gut) clamp(34px,5vw,60px);min-width:0}
.fil{display:flex;flex-wrap:wrap;gap:4px 8px;margin-bottom:clamp(16px,2.8vw,44px);font-size:14.5px;font-weight:500;color:var(--muted)}
.fil a{text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.fil a:hover{color:var(--terre-deep)}
.vh h1{font-size:18vw;line-height:.94;letter-spacing:-.05em}
.ligne{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.08em}
.ligne>span{display:block;animation:vh-monte 1.1s var(--ease) both}
.ligne:nth-child(2)>span{animation-delay:.08s}
@keyframes vh-monte{from{transform:translateY(112%)}}
.vh__accroche{margin-top:clamp(16px,2vw,28px);font:700 clamp(24px,2.7vw,40px)/1.12 var(--display);letter-spacing:-.025em}
.vh__sub{margin-top:12px;max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5}
.vh__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.2vw,30px)}
.vh__cta .btn{font-size:clamp(17px,1.3vw,19px)}
.vh__cta .btn--terre{font-size:clamp(19px,1.6vw,23px)}
.vh__note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:18px;font-size:16px;color:var(--muted)}
.vh__note b{color:var(--ink)}
.vh .etoiles{color:var(--terre-deep)}
.vh__photo{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3;background:#a9c4dd}
.vh__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos-m,50% 62%)}
@media(max-width:380px){.vh__cta .btn{width:100%;min-height:50px}}
@media(max-width:360px){.vh__texte{padding-top:84px;padding-bottom:26px}.vh h1{font-size:16vw}.vh__accroche{margin-top:8px;font-size:22px}.vh__sub{margin-top:8px;font-size:15.5px;line-height:1.42}.vh__cta{margin-top:14px;gap:8px}}
.vh .rv:nth-child(3){transition-delay:.08s}.vh .rv:nth-child(4){transition-delay:.16s}.vh .rv:nth-child(5){transition-delay:.24s}
@media(min-width:960px){
  .vh{grid-template-columns:1.12fr 1fr;height:100svh;min-height:640px;max-height:1100px}
  .vh__texte{align-self:end;padding-left:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));padding-bottom:clamp(40px,5vh,70px);padding-right:clamp(24px,3vw,56px)}
  .vh h1{font-size:clamp(84px,min(9vw,17vh),172px)}
  .vh__photo{aspect-ratio:auto;min-height:0}
  .vh__photo img{object-position:var(--pos-d,50% 70%)}
}

/* ===== les problèmes, dans les mots des gens ===== */
.vs{padding:clamp(60px,8vw,120px) 0}
.vs h2{max-width:15ch}
/* une ligne par problème : texte et image côte à côte, l'image change de côté d'une ligne à l'autre */
.vs__l{margin-top:clamp(28px,3.4vw,52px)}
.vs__p{display:grid;gap:clamp(18px,2.4vw,28px);padding:clamp(28px,4vw,64px) 0;border-top:1px solid var(--line)}
.vs__p:last-child{border-bottom:1px solid var(--line)}
.vs__p h3{font-size:clamp(23px,2.5vw,38px);line-height:1.08;letter-spacing:-.028em}
.vs__p p{margin-top:12px;max-width:52ch;color:var(--muted)}
.vs__p strong{color:var(--ink)}
.vs__m{margin:0;width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#cbbfae}
figure.vs__m img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:960px){
  .vs__p{grid-template-columns:1fr 1.25fr;align-items:center;column-gap:clamp(40px,6vw,100px)}
  .vs__p:nth-child(even){grid-template-columns:1.25fr 1fr}
  .vs__p:nth-child(even) .vs__m{order:-1}
}

/* ===== réparer plutôt que remplacer ===== */
.vr{background:var(--chaux);padding:clamp(60px,8vw,120px) 0}
.v-page main .vr__titre{font-size:clamp(44px,8vw,136px);line-height:.98;letter-spacing:-.045em}
.vr__barre{position:relative;display:inline-block;color:var(--ardoise);transition:color .6s .9s}
.vr__barre::after{content:"";position:absolute;left:-.03em;right:-.03em;top:56%;height:.08em;border-radius:.04em;background:var(--terre);transform-origin:left;transform:scaleX(var(--b));transition:--b 1s var(--ease2) .55s}
.vr__titre.est-vu .vr__barre{--b:1;color:rgba(37,34,31,.42)}
.no-js .vr__barre,.rm .vr__barre{--b:1}
.vr__t{margin-top:clamp(18px,2vw,26px);max-width:56ch;font-size:clamp(18px,1.5vw,22px)}

/* ===== les toits de Douai : photo à bord perdu, texte en colonne ===== */
.vt{display:grid}
.vt__photo{margin:0;overflow:hidden;aspect-ratio:4/5;background:#cbbfae}
.vt__photo img{width:100%;height:100%;object-fit:cover}
.vt__texte{padding:clamp(40px,6vw,90px) var(--gut);min-width:0}
.vt__texte p{margin-top:16px;max-width:54ch;font-size:clamp(17px,1.25vw,19px)}
@media(min-width:960px){
  .vt{grid-template-columns:1fr 1.15fr;align-items:center}
  .vt__photo{aspect-ratio:auto;height:min(100svh,860px)}
  .vt__texte{padding-left:clamp(40px,6vw,110px);padding-right:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}
}

/* ===== fuite : le numéro, en grand ===== */
.vu{background:var(--ardoise);color:var(--creme);padding:clamp(60px,8vw,110px) 0}
.vu ::selection{background:var(--terre-deep);color:#fff}
.v-page .vu h2{font-size:clamp(26px,3vw,44px);max-width:none}
.vu__tel{display:block;width:max-content;max-width:100%;margin-top:clamp(14px,2vw,26px);font:700 clamp(40px,13.4vw,210px)/.95 var(--display);letter-spacing:-.05em;white-space:nowrap;color:var(--terre-l);transition:color .4s}
.vu__tel:hover{color:var(--creme)}
.vu__bas{display:grid;gap:14px clamp(30px,5vw,80px);margin-top:clamp(20px,3vw,40px)}
.vu__bas p{max-width:52ch;color:rgba(255,243,226,.88);font-size:clamp(17px,1.25vw,19px)}
.vu__bas strong{color:var(--creme)}
.vu__bas a:hover{color:var(--terre-l)!important}
@media(min-width:800px){.vu__bas{grid-template-columns:1fr 1fr}}

/* ===== avis : une grande phrase, puis une liste sobre ===== */
.va{padding:clamp(66px,9vw,130px) 0}
.va__grid{display:grid;gap:clamp(30px,5vw,90px);align-items:start}
.va__grid>*{min-width:0}
.va__une{margin-top:clamp(20px,3vw,40px);font:700 clamp(26px,3.1vw,48px)/1.14 var(--display);letter-spacing:-.028em}
.va__une cite{display:block;margin-top:18px;font:500 16.5px/1.4 var(--sans);letter-spacing:0;font-style:normal;color:var(--muted)}
.va__une cite b,.va__l b{color:var(--ink)}
.va__l figure{margin:0;padding:clamp(16px,1.6vw,24px) 0;border-top:1px solid var(--line)}
.va__l blockquote{font-size:clamp(17px,1.3vw,20px);line-height:1.45}
.va__l figcaption{margin-top:8px;font-size:15.5px;color:var(--muted)}
.va__google{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:18px;border-top:1px solid var(--line)}
.va .etoiles{color:var(--terre-deep)}
@media(min-width:960px){.va__grid{grid-template-columns:1.2fr 1fr}}

/* ===== comment ça se passe, et la carte ===== */
.vz{background:var(--papier);padding:clamp(60px,8vw,120px) 0}
.vz__grid{display:grid;gap:clamp(26px,5vw,80px);align-items:center}
.vz__grid>*{min-width:0}
.vz p{margin-top:16px;max-width:52ch;font-size:clamp(17px,1.25vw,19px)}
.vz b{font-weight:700}
.vz__carte{margin:0;width:100%;max-width:540px;justify-self:center}
.vz__d{margin-top:14px;max-width:52ch}
.vz__d summary{cursor:pointer;font-weight:700;padding:8px 0;list-style-position:inside}
.vz__d summary:hover{color:var(--terre-deep)}
.vz__d ul{list-style:none;padding:6px 0 4px;font-size:16px;line-height:1.65}
.vz__d li{display:inline}
.vz__d li:not(:last-child)::after{content:", "}
@media(min-width:960px){.vz__grid{grid-template-columns:1.1fr 1fr}}
/* la carte se dessine une fois, à l'arrivée, puis le trajet */
.zcarte__dep{cursor:default;transition:stroke-dashoffset 1.3s var(--ease2),fill-opacity .9s .5s}
.js .zcarte:not(.est-vu) .zcarte__dep{fill-opacity:0}
.zcarte__trait{stroke-width:2.4;transition:stroke-dashoffset .9s var(--ease2) .9s}
.zcarte__ville,.zcarte__siege{transition:opacity .6s .7s}
.js .zcarte:not(.est-vu) .zcarte__ville,.js .zcarte:not(.est-vu) .zcarte__siege{opacity:0}
.zcarte__cible{transition-delay:1.5s}
.zcarte__cible circle:not(.zcarte__onde){fill:var(--terre-deep);stroke:#fff;stroke-width:2}
.zcarte__cible text{font:700 22px var(--display);fill:var(--terre-deep)}
.zcarte__dep.on{fill:#FBD9C2}
@media(max-width:599px){.zcarte__cible text{font-size:32px}.zcarte__cible circle:not(.zcarte__onde){r:8px}}

/* ===== questions ===== */
.v-page .faq h2{max-width:12ch}

/* ===== contact ===== */
.v-page .contact .contact__tel{margin-top:0}
.vc__t{margin-top:16px;max-width:38ch;font-size:clamp(17px,1.35vw,20px)}
.vc__t a{white-space:nowrap}
@media(max-width:380px){.vc__t a{white-space:normal;word-break:break-word}}

/* ===== dock : deux gestes seulement ===== */
.v-page .dock__appel{flex:1}
.v-page .dock__devis{flex:1.25}
@media(min-width:900px){.v-page .dock{width:400px}}


/* le dock fixe ne doit pas couvrir les liens du pied de page */
@media(min-width:960px){.v-page .pied{padding-bottom:120px}}