/* What is specific to lexxika.com. The look (menu, footer, search landing, section titles, "modèles" band) is the one of textes.lexxika.com:
   css/site.css is a copy of it (tools/sync_shared.py), so this file only adds the rest. Names start with vt- to never collide with it. */
.vt-center { max-width: 760px; margin: 0 auto; text-align: center; font-size: 18px; }
.vt-center .button { margin-top: 8px; }
/* Title of the video guides, as on the old site: a pale blue badge behind the title, the link to the channel under it, then the blue bar */
.vt-guides-title { position: relative; display: inline-block; isolation: isolate; }
.vt-guides-logo { position: absolute; z-index: -1; left: -36px; top: -16px; width: 78px; height: 60px; transform: rotate(-10deg); }
.vt-guides-sub { display: block; margin-top: -4px; font: 700 18px/1.3 var(--body); color: var(--blue-surface); text-decoration: none; }
.vt-guides-sub:hover { text-decoration: underline; color: var(--action); }
.vt-videos { position: relative; max-width: 1000px; margin: 0 auto 36px; }
.vt-videos__track { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 4px 8px; margin: -4px; scroll-padding: 0 4px; outline-offset: 4px; }
.vt-videos__track::-webkit-scrollbar { display: none; }
.vt-video { flex: 0 0 calc((100% - 32px) / 2); scroll-snap-align: start; margin: 0; }  /* two videos in view, a swipe or the arrows slide the others in */
@media (max-width: 700px) { .vt-video { flex-basis: 100%; } }
.vt-video__play { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #111; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.vt-video__play img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }  /* the thumbnail has black bars: "cover" crops them */
.vt-video__play:hover img { transform: scale(1.04); }
.vt-video__button { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); transition: transform .2s ease; }
.vt-video__play:hover .vt-video__button, .vt-video__play:focus-visible .vt-video__button { transform: scale(1.12); }
.vt-video figcaption { margin-top: 14px; text-align: center; font: 700 18px/1.4 var(--body); }
.vt-video figcaption a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vt-video figcaption a:hover { color: var(--link); }
.vt-videos__arrow { position: absolute; top: 28%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3); cursor: pointer; transition: opacity .2s, background .2s; }
.vt-videos__arrow:hover { background: #fff; color: var(--action); }
.vt-videos__arrow:disabled { opacity: .3; cursor: default; }
.vt-videos__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vt-videos__arrow--prev { left: 10px; }
.vt-videos__arrow--next { right: 10px; }
.vt-videos__dots { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.vt-videos__dots button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: #c9ced4; cursor: pointer; }
.vt-videos__dots button[aria-current="true"] { background: var(--ink); }

.vt-news-intro { max-width: 860px; margin: 0 auto 50px; font-size: 18px; }
.vt-news-intro p { margin: 0 0 14px; }
.vt-news { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; max-width: 1100px; margin: 0 auto; }
.vt-news__col { display: flex; flex-direction: column; gap: 36px; }
.vt-news__item { display: flex; gap: 22px; align-items: flex-start; }
.vt-news__icon { flex: none; width: 72px; height: 72px; margin-top: 6px; color: var(--blue); }
.vt-news__text time { font-size: 14px; color: var(--muted); }
.vt-news__text h3 { margin: 2px 0 8px; font: 500 26px/1.2 var(--body); color: var(--link); }
.vt-news__text p { margin: 0 0 8px; line-height: 1.5; }
@media (max-width: 760px) { .vt-news { display: flex; flex-direction: column; gap: 36px; } .vt-news__col { display: contents; } }
@media (max-width: 480px) { .vt-news__icon { width: 56px; height: 56px; } }

.vt-page { max-width: 820px; margin: 0 auto; padding: 50px 20px 0; }
.vt-page h1 { margin: 0; font: 600 35px/45.5px var(--display); text-align: center; color: var(--ink); }
.vt-page h1::after { content: ""; display: block; width: 25%; height: 3px; background: var(--blue); margin: 15px auto 40px; }
.vt-page h2 { margin-top: 2em; font-size: 24px; }
.vt-page h3 { margin-top: 1.6em; font-size: 19px; }
.vt-page h4 { margin-top: 1.4em; font-size: 16px; }
.vt-page table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.vt-page th, .vt-page td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.vt-error { padding: 12px 16px; background: #fdecea; border-left: 4px solid #b3261e; color: #5f1410; }

form.vt-contact { display: grid; gap: 16px; margin-top: 8px; }
.vt-contact label { display: grid; gap: 6px; font-weight: 500; }
.vt-contact input, .vt-contact select, .vt-contact textarea { font: 400 16px var(--body); color: var(--ink); background: var(--grey); border: 1px solid transparent; border-radius: 2px; padding: 10px 12px; width: 100%; }
.vt-contact textarea { min-height: 180px; resize: vertical; }
.vt-contact .vt-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vt-contact button { justify-self: end; }

/* More air between the big sections of the home (the textes site uses 150px) */
:root { --section-gap: 220px; }
@media (max-width: 700px) { :root { --section-gap: 130px; } }
.home > .hero + .zone { margin-top: 110px; }

/* Contact page: the form card (the photo and the text beside it are styled below) */
.vt-contact-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px; }
.vt-contact-card h2 { margin: 0 0 8px; font: 600 24px/1.3 var(--display); }
.vt-contact-card h2::after { content: ""; display: block; width: 60px; height: 3px; background: var(--blue); margin: 10px 0 18px; }
.vt-small { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .vt-contact-card { padding: 22px 18px; } }

/* Contact page: the photo fills the page under a blue veil, the text on the left, the form card on the right */
.cp-stage { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--header-h)); padding: 56px 20px 72px; background: #3f7fa8 center / cover no-repeat; }
.cp-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 38, 62, .86) 0%, rgba(0, 62, 100, .72) 45%, rgba(26, 133, 195, .45) 100%); }
.cp-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; align-items: center; width: min(100%, 1180px); margin: 0 auto; }
.cp-text { color: #fff; }
.cp-eyebrow { margin: 0; font: 400 20px var(--body); opacity: .95; }
.cp-text h1 { margin: 4px 0 16px; color: #fff; font: 700 clamp(32px, 4.4vw, 48px)/1.15 var(--display); text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.cp-text h1::after { content: ""; display: block; width: 90px; height: 3px; background: var(--orange); margin-top: 14px; }
.cp-lead { margin: 0 0 20px; font-size: 18px; max-width: 540px; }
.cp-help { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.cp-help a { display: block; padding: 12px 16px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); border-left: 4px solid var(--orange); border-radius: 2px; backdrop-filter: blur(2px); }
.cp-help a:hover { background: rgba(255, 255, 255, .22); }
.cp-direct { margin: 0; font-size: 17px; }
.cp-direct a { color: #fff; font-weight: 600; text-decoration: underline; }
.cp-form { box-shadow: 0 8px 32px rgba(0, 0, 0, .35); }
.cp-stage .hero-credit { z-index: 2; }
@media (max-width: 900px) { .cp-inner { grid-template-columns: 1fr; gap: 28px; } .cp-stage::before { background: rgba(0, 45, 75, .78); } }
#guides + .zone { margin-top: 130px; }  /* under the carousel (its dots and titles already leave air): less than the usual gap between sections */