/* Accueil vitrine d'every-where.fr (04/10) : le mot EVERY / WHERE dont chaque lettre montre un savoir-faire, le mur des
   savoir-faire, les preuves mesurées et la maison. Couleurs et polices de la maison (everywhere.css). */

/* Le haut. La hauteur du mot est fixée par la feuille de style ; le script règle la taille des lettres pour remplir
   cette boîte (et non l'inverse) : rien ne bouge quand les masques arrivent. */
.avec-rail main section.vt-haut,.vt-haut{position:relative;padding:clamp(108px,15vh,150px) 0 clamp(54px,8vh,96px);background:var(--noir);color:var(--creme);overflow:hidden}
/* Le fond (fond-vitrine.js) : traits de lumière qui dérivent ; le contenu passe devant. */
.vt-fond{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vt-haut .wrap{position:relative;z-index:1;display:grid;gap:clamp(18px,2.8vh,30px);justify-items:center;text-align:center}
.vt-mot{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-items:flex-end;gap:var(--ecart,8px) 0;width:100%;
  height:min(34vh,24vw);filter:drop-shadow(0 0 1px rgba(243,239,230,.85)) drop-shadow(0 0 1px rgba(243,239,230,.5))}
.vt-rupture{flex-basis:100%;height:0}
/* Le masque vit sur le .vt-m intérieur (créé par vitrine.js) : le contour de focus du lien n'est pas rogné. */
.vt-l{position:relative;display:block;flex:none;width:var(--w,1ch);height:var(--h,1em);font-size:0;color:transparent;text-decoration:none;transition:transform .35s var(--ease),filter .35s}
.vt-m{position:absolute;inset:0;overflow:hidden;background:var(--noir2);-webkit-mask:var(--masque) center/100% 100% no-repeat;mask:var(--masque) center/100% 100% no-repeat}
.vt-l video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.3) saturate(1.15)}
@media(hover:hover){.vt-mot:hover .vt-l:not(:hover){filter:brightness(.42) saturate(.5)}.vt-l:hover{transform:translateY(-6px) scale(1.03)}}
.vt-mot:has(.vt-l:focus-visible) .vt-l:not(:focus-visible){filter:brightness(.42) saturate(.5)}
.vt-l:focus-visible{transform:translateY(-6px) scale(1.03)}
.vt-l:focus-visible{outline:3px solid var(--orange);outline-offset:5px;border-radius:6px}
/* Sans script : le mot en lettres pleines. */
html:not(.vt-js) .vt-l{width:auto;height:auto;font-family:var(--disp);font-weight:900;font-stretch:125%;font-size:min(13vw,15vh);line-height:.8;color:var(--creme)}
/* Le nom de la lettre survolée : discret, il n'apparaît qu'au geste (aucune consigne affichée). */
.vt-nom{margin:-6px 0 0;min-height:1.4em;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.vt-nom.vt-nom-vu{opacity:1;transform:none}
.vt-haut .oeil{color:#c9c3b6;justify-content:center}
.vt-titre{font-family:var(--disp);font-weight:880;font-stretch:112%;letter-spacing:-.035em;line-height:.98;font-size:clamp(38px,5.2vw,80px);text-wrap:balance;max-width:16ch}
.vt-titre em{font-style:normal;color:var(--orange)}
.vt-haut .lead{color:#c9c3b6;margin-inline:auto}
.vt-haut .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.vt-haut .reperes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;margin-top:6px}
.vt-pause{justify-self:center;margin-top:-10px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--trait-n);background:var(--noir2);color:#c9c3b6;font-family:var(--mono);font-size:12px;cursor:pointer}
.vt-pause[hidden]{display:none}

/* Le mur des savoir-faire. */
.avec-rail main section.vt-savoirs,.vt-savoirs{padding:clamp(64px,10vh,120px) 0;background:var(--noir2);color:var(--creme)}
.vt-savoirs .tete{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(26px,4vh,44px)}
.vt-savoirs .lead,.vt-savoirs .oeil,.vt-maison .oeil{color:#c9c3b6}
.vt-mur{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vt-tuile{position:relative;border-radius:18px;overflow:hidden;background:var(--noir);border:1px solid var(--trait-n);aspect-ratio:4/5;display:grid}
.vt-tuile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt-tuile>div{position:relative;align-self:end;padding:40px 16px 18px;background:linear-gradient(180deg,rgba(13,13,11,0),rgba(13,13,11,.92) 28px)}
.vt-tuile h3{font-family:var(--disp);font-weight:800;font-stretch:110%;font-size:clamp(19px,1.5vw,23px);letter-spacing:-.02em;line-height:1.05}
.vt-tuile p{margin-top:6px;font-size:15px;line-height:1.45;color:#c9c3b6}
.vt-tuile .vt-pour{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#c9c3b6}
.vt-mention{margin-top:16px;font-family:var(--mono);font-size:12px;color:#a29d92}
@media(max-width:759px){.vt-mot{height:31vw}}
@media(max-width:1000px){.vt-mur{grid-template-columns:repeat(3,1fr)}.vt-savoirs .tete{grid-template-columns:1fr}}
@media(max-width:700px){.vt-mur{grid-template-columns:1fr 1fr;gap:10px}.vt-tuile p:not(.vt-pour){display:none}.vt-tuile>div{padding:36px 12px 14px}.vt-tuile h3{font-size:17px;hyphens:auto;overflow-wrap:break-word}}

/* Les preuves : nos propres mesures, datées. */
.avec-rail main section.vt-preuves,.vt-preuves{padding:clamp(64px,10vh,120px) 0;background:var(--creme);color:var(--encre)}
.vt-preuves .tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end}
.vt-chiffres{list-style:none;margin:clamp(28px,5vh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vt-chiffres li{padding:22px 20px;border-radius:18px;background:#fff;border:1px solid var(--trait);display:grid;gap:8px;align-content:start}
.vt-chiffres b{font-family:var(--disp);font-weight:900;font-stretch:112%;font-size:clamp(34px,3.1vw,48px);line-height:.9;letter-spacing:-.04em;white-space:nowrap}
.vt-chiffres b small{font-size:.4em;letter-spacing:0;color:var(--encre2)}
.vt-chiffres li>span{font-weight:700}
.vt-chiffres p{font-size:15px;line-height:1.5;color:var(--encre2)}
.vt-source{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--encre2)}
.vt-preuves .cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:1000px){.vt-chiffres{grid-template-columns:1fr 1fr}.vt-preuves .tete{grid-template-columns:1fr}}
@media(max-width:560px){.vt-chiffres{grid-template-columns:1fr}.vt-chiffres li{padding:18px}}

/* La maison : les outils et les maisons qui travaillent avec votre site. */
.avec-rail main section.vt-maison,.vt-maison{padding:clamp(64px,10vh,120px) 0;background:var(--noir);color:var(--creme)}
.vt-outils{list-style:none;margin:clamp(28px,5vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vt-outils li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start;padding:20px;border-radius:18px;background:var(--noir2);border:1px solid var(--trait-n)}
.vt-outils img{grid-row:span 3;width:56px;height:56px;border-radius:14px}
.vt-outils h3{font-family:var(--disp);font-weight:800;font-stretch:110%;font-size:21px;letter-spacing:-.02em}
.vt-outils p{font-size:15.5px;line-height:1.5;color:#c9c3b6}
.vt-outils a{white-space:nowrap;color:var(--creme);font-weight:700;text-underline-offset:4px;font-size:15px}
.vt-outils .vt-inclus{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
@media(max-width:1000px){.vt-outils{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.vt-l,.vt-nom{transition:none}}
@media(forced-colors:active){.vt-mot{filter:none}.vt-l{background:CanvasText}}
/* Phrase sous le mot (06/10, validée par Flavien avec le thème de nuit de WHERE). */
.vt-ligne{margin:10px 0 0;font-family:var(--disp);font-weight:700;font-stretch:110%;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.01em;color:#c9c3b6}
.vt-ligne em{font-style:normal;color:var(--orange)}

/* « Votre métier ? » (06/10) : une ligne de choix sous le texte ; les lettres prennent la photo du métier. */
.vt-metiers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:1180px}
.vt-metiers-q{font-family:var(--mono,monospace);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#c9c3b6;margin-right:4px}
.vt-metiers ul{display:contents;list-style:none}
.vt-metiers a{display:inline-flex;align-items:center;min-height:34px;padding:5px 12px;white-space:nowrap;border:1px solid rgba(243,239,230,.28);border-radius:999px;color:#f3efe6;text-decoration:none;font-size:14px;background:rgba(13,13,11,.55);transition:background .2s,border-color .2s,color .2s}
.vt-metiers a:hover{border-color:#f0532a}
.vt-metiers a[aria-current="true"]{background:#f0532a;border-color:#f0532a;color:#0d0d0b}
.vt-metiers a:focus-visible{outline:3px solid #f0532a;outline-offset:3px}
.vt-m{background-repeat:no-repeat}
.vt-photo .vt-l video{opacity:0;transition:opacity .45s}
@media (max-width:700px){.vt-metiers{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;padding:2px 2px 8px;scrollbar-width:none}.vt-metiers-q{flex:none}.vt-metiers a{flex:none}}

/* Fond « vrais sites en miniature » (06/10) : colonnes inclinées qui montent et descendent lentement, très pâles,
   effacées au centre (titre, texte, boutons). Arrêt : bouton « Arrêter les animations » (html.anim-gelees) et mouvement réduit. */
.vt-minis{position:absolute;inset:-14% -8%;z-index:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;transform:rotate(-9deg);pointer-events:none;opacity:.26;
  -webkit-mask-image:radial-gradient(ellipse 42% 50% at 50% 56%,transparent 0 38%,#000 82%);mask-image:radial-gradient(ellipse 42% 50% at 50% 56%,transparent 0 38%,#000 82%)}
.vt-col{display:flex;flex-direction:column;gap:22px;animation:vt-monte var(--d) linear infinite;animation-delay:calc(var(--o) * -1s);will-change:transform}
.vt-col:nth-child(even){animation-direction:reverse}
.vt-col img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:10px;box-shadow:0 24px 48px -24px #000;filter:saturate(.75)}
@keyframes vt-monte{to{transform:translateY(-50%)}}
.anim-gelees .vt-col{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.vt-col{animation:none}}
@media (max-width:700px){.vt-minis{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;opacity:.2}.vt-col{gap:12px}.vt-col:nth-child(n+4){display:none}}

/* Pause en icône (07/10, Flavien : « on enlève le bouton Arrêter les animations ») : 2.2.2 reste tenu par une petite icône. */
.vt-haut{position:relative}
.vt-pause.vt-pause-icone{position:absolute;right:var(--gut);top:calc(84px + 14px);bottom:auto;z-index:5;margin:0;width:36px;height:36px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(13,13,11,.6);border:1px solid rgba(243,239,230,.22)}
.vt-pause-icone span{position:relative;width:10px;height:12px;border-left:3px solid #c9c3b6;border-right:3px solid #c9c3b6}
.vt-pause-icone.en-pause span{width:0;height:0;border-left:11px solid #c9c3b6;border-right:0;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.vt-pause-icone:hover{border-color:var(--orange)}
.vt-pause.vt-pause-icone[hidden],html:not(.vt-js) .vt-pause{display:none}
html:not(.vt-js) .vt-col{animation:none}
.vt-haut .vt-titre{margin-bottom:clamp(14px,2.5vh,28px)}