/* QUALITE24 — guide vidéo « Comment ça marche ? » (pages Modèles et Créer ma villa).
   La vidéo n'est chargée qu'au clic (guide-video.js) ; verticale sur téléphone, 16:9 sur ordinateur. */
.gv-zone { padding: clamp(40px, 6vw, 72px) 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.gv-texte h2 { font: 400 clamp(32px, 4vw, 48px)/1.08 var(--serif); margin: 0 0 14px; }
.gv-texte > p:not(.eyebrow) { color: var(--ink-soft); margin: 0 0 18px; max-width: 46ch; }
.gv-etapes { list-style: none; counter-reset: gv; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; font-size: 15px; }
.gv-etapes li { counter-increment: gv; display: flex; gap: 10px; align-items: center; }
.gv-etapes li::before { content: counter(gv); flex: none; width: 26px; height: 26px; display: grid; place-items: center; background: var(--red); color: #fff; font: 500 13px/1 var(--sans); border-radius: 3px; }
.gv-media { margin: 0; }
.gv-lancer, .gv-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--ink); box-shadow: 0 18px 40px rgba(35, 38, 43, 0.12); }
.gv-video { height: auto; object-fit: contain; }
.gv-lancer img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gv-lancer:hover img { transform: scale(1.02); }
.gv-bouton { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--red); box-shadow: 0 8px 24px rgba(158, 16, 34, 0.35); transition: transform 0.2s, background 0.2s; }
.gv-bouton::after { content: ''; position: absolute; left: 33px; top: 26px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; }
.gv-lancer:hover .gv-bouton, .gv-lancer:focus-visible .gv-bouton { transform: scale(1.08); background: var(--red-dark); }
.gv-lancer:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.gv-duree { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 253, 249, 0.94); color: var(--ink); font: 500 13px/1 var(--sans); padding: 7px 10px; border-radius: 999px; }
.gv-media figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 860px) { .gv { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .gv-lancer, .gv-video { aspect-ratio: 9 / 16; width: min(100%, calc(80vh * 9 / 16)); margin: 0 auto; }
  .gv-etapes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .gv-lancer img, .gv-bouton { transition: none; } .gv-lancer:hover img { transform: none; } }