/* Page « Qui sommes-nous » (/qui-sommes-nous), plan v3 du 13/11 (partie 5, preuve 6).
   Chargée après v2.css, v2-annonces.css et v2-immat.css (titres .im-h1, .im-lead, .imh-btns, bloc final .im-end).
   Les cartes vidéo (.av-vids, .av-card, .av-vc) viennent de v2.css, le lecteur de js/avis.js. */

/* 1. Héros : texte à gauche, portrait à droite */
.qs-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center;padding-top:64px;padding-bottom:96px}
.qs-hero .im-h1{text-wrap:balance}
.qs-hero .im-lead{max-width:540px;text-wrap:pretty}
.qs-me{margin:0;justify-self:end;width:100%;max-width:420px}
.qs-me img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:28px;background:var(--grey);box-shadow:0 2px 4px rgba(0,0,0,.05),0 34px 70px -38px rgba(0,0,0,.45)}
.qs-me figcaption{display:flex;flex-direction:column;gap:2px;margin-top:16px;padding:0 4px}
.qs-me b{font-family:var(--h);font-weight:600;font-size:1.08rem;letter-spacing:-.02em}
.qs-me small{color:var(--muted);font-size:.9rem}

/* 2. Comment je travaille */
.qs-ws{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1080px;margin-left:auto;margin-right:auto}
.qs-w{padding:28px 26px 26px;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 20px rgba(0,0,0,.04)}
.qs-w i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grey);color:var(--ink)}
.qs-w i svg{width:22px;height:22px}
.qs-w h3{margin:18px 0 0;font-family:var(--h);font-weight:600;font-size:1.1rem;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.qs-w p{margin:8px 0 0;color:var(--muted);font-size:.94rem;line-height:1.5;text-wrap:pretty}
.qs-legal{margin:28px auto 0;max-width:620px;text-align:center;color:var(--muted);font-size:.88rem;text-wrap:pretty}
.qs-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 3. Déjà livrées : 2 cartes photo */
.qs-cars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1080px;margin:0 auto}
.qs-car{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--grey)}
.qs-car-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#111}
.qs-car-img img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;transition:transform .9s var(--ease)}
.qs-car:hover .qs-car-img img{transform:scale(1.03)}
.qs-car-b{display:flex;flex-direction:column;align-items:flex-start;padding:24px 26px 26px}
.qs-car h3{margin:0;font-family:var(--h);font-weight:600;font-size:1.35rem;letter-spacing:-.03em;line-height:1.15}
.qs-car-s{margin:6px 0 0;color:var(--muted);font-size:.88rem;font-weight:500}
.qs-car-p{margin:14px 0 0;color:var(--ink-2);font-size:.96rem;line-height:1.55;text-wrap:pretty}
.qs-car .arrow-link{margin-top:auto;padding-top:18px}

/* 4. Vidéos des clients */
.qs-vids .av-card{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 20px rgba(0,0,0,.04)}
.qs-more{margin:26px 0 0;text-align:center}
.qs-more .arrow-link{margin-top:0}

/* Bloc final */
.qs-pg .im-end{padding-top:96px}
.qs-pg .f-sold .btn svg,.qs-pg .imh-btns .btn svg{width:18px;height:18px}

/* Réaction immédiate à l'appui */
.qs-pg .imh-btns .btn,.qs-car a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.qs-pg .imh-btns .btn:active,.qs-pg .f-sold .btn:active{transform:scale(.97);transition:transform .1s ease-out}

@media (max-width:1000px){
  .qs-hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-bottom:72px}
  .qs-me{justify-self:start;max-width:none;display:flex;align-items:center;gap:16px}
  .qs-me img{width:84px;height:84px;flex:none;border-radius:50%;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
  .qs-me figcaption{margin:0;padding:0}
  .qs-hero .qs-me{order:-1}
  .qs-ws{grid-template-columns:minmax(0,1fr);max-width:620px}
}
@media (max-width:760px){
  .qs-hero{padding-top:36px;gap:28px;padding-bottom:56px}
  .qs-hero .imh-btns{flex-direction:column;align-items:stretch}
  .qs-ws .qs-w{display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:20px}
  .qs-w i{grid-row:span 2}
  .qs-w h3{margin-top:2px}
  .qs-cars{grid-template-columns:minmax(0,1fr);gap:14px}
  .qs-car{border-radius:22px}
  .qs-car-b{padding:20px 20px 22px}
  .qs-pg .im-end{padding-top:64px}
}