/* VSR Visages — annuaire et fiches. Tout est préfixé .vsr pour cohabiter avec Divi. */
.vsr{--bg:#151517;--bg-2:#1C1C1F;--row:#2A2B26;--ink:#F3F3F0;--ink-2:#B8B8B3;--mute:#7E7E7A;--line:#2C2C2F;--acc:#E9E3D6;--acc-2:#FFFFFF;--acc-ink:#151517;
  --sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.vsr *,.vsr *::before,.vsr *::after{box-sizing:border-box}
.vsr a{color:inherit;text-decoration:none}
.vsr h1,.vsr h2,.vsr h3{margin:0;font-family:var(--sans);font-weight:300;line-height:1.08;letter-spacing:-.02em;color:var(--ink-2);text-wrap:balance}
.vsr h1 b,.vsr h2 b{font-weight:700;color:var(--ink)}
.vsr p{margin:0;color:inherit}
.vsr button{font-family:inherit}
.vsr [hidden]{display:none!important}
.vsr-idx{font-size:13px;color:var(--mute)}
.vsr-idx b{display:block;color:var(--ink);font-weight:500;margin-top:4px;font-size:15px}
.vsr-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--ink);background:transparent;cursor:pointer;white-space:nowrap;line-height:1.2;text-decoration:none}
.vsr-pill:hover{background:var(--bg-2);border-color:var(--ink-2);color:var(--ink)}
.vsr-pill[aria-pressed="true"]{background:var(--row);border-color:var(--acc);color:var(--ink)}
.vsr-pill .c{width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-size:13px;margin:-4px -8px -4px 0}
.vsr-pill.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:700}
.vsr-pill.primary:hover{background:var(--acc-2);border-color:var(--acc-2);color:var(--acc-ink)}
.vsr-pill.primary .c{background:var(--acc-ink);color:var(--acc)}
.circ{width:44px;height:44px;border-radius:50%;border:1px solid var(--mute);display:grid;place-items:center;font-size:16px;color:var(--ink-2);transition:all .15s;flex:none}

/* annuaire */
#vsr-annuaire{padding:28px clamp(16px,4vw,48px) 60px}
.vsr-hero{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:10px 0 40px}
.vsr-h1{font-size:clamp(30px,4.4vw,56px);max-width:16em}
.vsr-sub{margin-top:18px;color:var(--ink-2);max-width:34em;line-height:1.65;font-size:16.5px}
.vsr-sub b{color:var(--ink);font-weight:600}
.vsr-how{display:grid;margin-top:28px;max-width:640px;border-top:1px solid var(--line)}
.vsr-how div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15px;line-height:1.5}
.vsr-how i{font-style:normal;color:var(--mute);font-size:13px;padding-top:3px}
.vsr-how b{color:var(--ink);font-weight:700}
.vsr-search{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 20px;background:var(--bg-2);max-width:640px;margin:26px 0 0}
.vsr-search input{flex:1;background:transparent;border:0;color:var(--ink);font:400 16px var(--sans);outline:none;min-width:0;box-shadow:none;padding:6px 0}
.vsr-search input::placeholder{color:var(--mute)}
.vsr-sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vsr-sugg button{background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:6px 12px;font:400 13px var(--sans);cursor:pointer}
.vsr-sugg button:hover{border-color:var(--ink-2);color:var(--ink)}
.vsr-bar{position:sticky;top:0;z-index:5;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0}
.vsr-cats{display:flex;gap:6px;flex-wrap:wrap}
.vsr-where{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mute)}
.vsr select{font:500 14px var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:9px 34px 9px 14px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.vsr-count{padding:26px 0 6px;color:var(--mute);font-size:14px}
.vsr-count b{color:var(--ink);font-weight:500}
.vsr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px;padding:14px 0 30px}
.vsr-loading,.vsr-empty{color:var(--ink-2);padding:20px 0}
.vsr-tile.wide{grid-column:span 2}
.vsr-ph{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.vsr-tile .vsr-ph{cursor:pointer}
.vsr-tile.wide .vsr-ph{aspect-ratio:16/10}
.vsr-ph .track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vsr-ph .track::-webkit-scrollbar{display:none}
.vsr-ph .slide{flex:0 0 100%;height:100%;scroll-snap-align:start;position:relative}
.vsr .slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.vsr-tile:hover .slide img{transform:scale(1.03)}
.vsr .slide .lbl{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.28);font-weight:600}
.vsr-ph .tags{position:absolute;top:14px;right:14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;pointer-events:none}
.vsr-ph .tags span{font-size:12px;color:#F1EEE6;border:1px solid rgba(255,255,255,.35);padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.25);backdrop-filter:blur(4px)}
.vsr-ph .tags span.f{border-color:rgba(255,255,255,.7);color:#fff}
.vsr-ph .dots{position:absolute;left:16px;bottom:14px;display:flex;gap:5px}
.vsr .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)}
.vsr .dots i.on{background:var(--acc)}
.vsr .arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;font:400 18px/32px var(--sans);text-align:center;cursor:pointer;opacity:0;transition:opacity .15s;padding:0}
.vsr .arr.l{left:10px}.vsr .arr.r{right:10px}
.vsr-ph:hover .arr{opacity:1}
@media (hover:none){.vsr .arr{opacity:1}}
.vsr-cap{display:grid;gap:12px;padding:14px 4px 0;cursor:pointer}
.vsr-cap .n{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.vsr-cap .e{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-top:3px}
.vsr-cap .m{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.vsr-cap .m b{color:var(--ink);font-weight:500}
.vsr-cap .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vsr-tel{background:none;border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:9px 14px;font:500 13.5px var(--sans);cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.vsr-tel:hover{border-color:var(--ink-2);color:var(--ink)}
.vsr-tel.shown{color:var(--ink);border-color:var(--ink)}
.vsr-tel.shown a{color:inherit}

/* fiche */
.vsr-fiche{padding:0 clamp(16px,4vw,48px) 100px}
.vsr-top{padding:36px 0 0}
.vsr-sec{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:52px 0;border-top:1px solid var(--line)}
.vsr-sec:first-of-type{border-top:0;padding-top:16px}
.vsr-lead{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:start}
.vsr-name{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.vsr-name .who{font-size:clamp(30px,3.6vw,44px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.vsr-name .firm{font-size:15px;font-weight:500;color:var(--ink-2);padding-left:14px;border-left:1px solid var(--line)}
.vsr-fiche .vsr-h1{font-size:clamp(24px,3vw,38px);max-width:16em}
.vsr-fiche .vsr-sub{margin-top:18px;max-width:30em;font-size:15.5px}
.vsr-fig{display:grid;gap:12px;margin:0}
.vsr-fig h3{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:0}
.vsr-fig p{color:var(--ink-2);font-size:14px;line-height:1.55;max-width:32em}
.vsr-rows{display:grid}
.vsr-row{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;gap:24px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink-2);transition:background .15s,color .15s;text-decoration:none}
.vsr-row:first-child{border-top:1px solid var(--line)}
.vsr-row .k{font-size:21px;font-weight:300;letter-spacing:-.01em}
.vsr-row .v{font-size:19px;font-weight:400;line-height:1.25}
.vsr-row .v small{display:block;font-size:13.5px;color:var(--mute);margin-top:4px}
.vsr-row .v .num a{color:var(--ink)}
.vsr-row.on,.vsr-row:hover{background:var(--row);color:var(--ink);border-bottom-color:transparent}
.vsr-row.on .k,.vsr-row:hover .k{color:var(--ink)}
.vsr-row.on .circ,.vsr-row:hover .circ,.vsr-tile:hover .circ{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);transform:rotate(-45deg)}
.vsr-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start}
.vsr-split .vsr-fig{position:sticky;top:24px}
.vsr-gtrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vsr-gtrack::-webkit-scrollbar{display:none}
.vsr-gtrack .vsr-ph{flex:0 0 min(64vw,360px);aspect-ratio:4/5;scroll-snap-align:start}
.vsr-galcap{display:flex;justify-content:space-between;color:var(--mute);font-size:13px;margin-top:12px}
.vsr-story{max-width:30em;color:var(--ink-2);font-size:15.5px;line-height:1.7}
.vsr-story p{color:var(--ink-2);margin:0 0 14px}
.vsr-story h2,.vsr-story h3{font-size:17px;font-weight:600;color:var(--ink);margin:26px 0 8px;letter-spacing:0;line-height:1.3}
.vsr-story a{color:var(--acc);border-bottom:1px solid var(--acc)}
.vsr-story ul,.vsr-story ol{margin:0 0 14px 20px}
.vsr-mbar{position:fixed;left:0;right:0;bottom:0;z-index:9;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(21,21,23,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.vsr-mbar .vsr-pill{flex:1;justify-content:space-between}

/* formulaire */
dialog.vsr-dialog{border:0;padding:0;background:transparent;max-width:none;width:100vw;height:100dvh;margin:0;color:var(--ink)}
dialog.vsr-dialog::backdrop{background:rgba(10,10,11,.92)}
.vsr-fm{max-width:720px;margin:0 auto;min-height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:22px 24px 28px;font-family:var(--sans)}
.vsr-fm .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vsr-fm .brand{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.vsr-fm .steps{display:flex;gap:6px}
.vsr-fm .steps i{width:26px;height:3px;border-radius:2px;background:var(--line)}
.vsr-fm .steps i.on{background:var(--ink)}
.vsr-fm .close{background:none;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:8px 14px;font:600 13px var(--sans);cursor:pointer}
.vsr-fm .body{padding:40px 0 20px}
.vsr-fm .q{font-size:clamp(26px,4vw,38px);font-weight:300;letter-spacing:-.02em;line-height:1.1;color:var(--ink-2)}
.vsr-fm .q b{font-weight:700;color:var(--ink)}
.vsr-fm .hint{color:var(--mute);margin-top:10px;font-size:14.5px}
.vsr-fm .err{color:#E0A070;margin-top:10px;font-size:14.5px}
.vsr-fm .opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.vsr-fm .opt{border:1px solid var(--line);background:var(--bg-2);color:var(--ink);border-radius:14px;padding:16px 18px;font:500 15.5px var(--sans);cursor:pointer;text-align:left;min-width:150px}
.vsr-fm .opt small{display:block;color:var(--mute);font-weight:400;font-size:13px;margin-top:3px}
.vsr-fm .opt:hover{border-color:var(--ink-2)}
.vsr-fm .opt[aria-pressed="true"]{border-color:var(--ink);background:var(--row)}
.vsr-fm input[type=text],.vsr-fm input[type=tel],.vsr-fm input[type=email],.vsr-fm textarea{width:100%;font:400 17px var(--sans);color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:22px;outline:none;box-shadow:none}
.vsr-fm input:focus,.vsr-fm textarea:focus{border-color:var(--ink-2)}
.vsr-fm textarea{min-height:120px;resize:vertical}
.vsr-fm .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vsr-fm .grid2 input{margin-top:12px}
.vsr-fm .recap{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;margin-top:26px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.vsr-fm .recap .vsr-ph{width:96px;aspect-ratio:4/5}
.vsr-fm .recap b{font-weight:700;color:var(--ink)}
.vsr-fm .recap p{color:var(--ink-2);font-size:14.5px;line-height:1.5;margin-top:6px}
.vsr-fm .consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:18px;color:var(--ink-2);font-size:14px;line-height:1.5}
.vsr-fm .consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.vsr-fm .bot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.vsr-fm .bot .back{background:none;border:0;color:var(--mute);font:500 14px var(--sans);cursor:pointer}
.vsr-fm .done{padding:40px 0}
.vsr-fm .done h2{font-size:clamp(26px,4vw,40px)}
.vsr-fm .done p{color:var(--ink-2);margin-top:16px;max-width:32em;line-height:1.6}
.vsr-fm .hp{position:absolute;left:-9999px}

@media (max-width:980px){
  .vsr-hero,.vsr-sec{grid-template-columns:1fr;gap:18px}
  .vsr-lead,.vsr-split{grid-template-columns:1fr;gap:24px}.vsr-split .vsr-fig{position:static}
  .vsr-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}.vsr-tile.wide{grid-column:span 2}
  .vsr-row{grid-template-columns:96px minmax(0,1fr) 40px;gap:14px;padding:16px 14px}.vsr-row .k{font-size:16px}.vsr-row .v{font-size:16px}
  .vsr-mbar{display:flex}
}
@media (max-width:600px){
  .vsr-grid{grid-template-columns:1fr}.vsr-tile.wide{grid-column:span 1}.vsr-tile.wide .vsr-ph{aspect-ratio:4/5}
  .vsr-fm .grid2{grid-template-columns:1fr}.vsr-fm .opt{min-width:calc(50% - 5px)}
}

/* confiance */
.vsr-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.vsr-trust .chip{display:inline-flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:12px;padding:9px 13px;background:var(--bg-2);text-decoration:none;color:var(--ink);min-width:110px}
.vsr-trust .chip b{font-size:14px;font-weight:700;line-height:1.2}
.vsr-trust .chip small{font-size:11.5px;color:var(--mute)}
a.chip:hover{border-color:var(--ink-2)}
.vsr-presta{display:grid;gap:10px}
.vsr-presta .item{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--bg-2)}
.vsr-presta .item b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.vsr-presta .item p{color:var(--ink-2);font-size:14.5px;margin-top:4px}
.vsr-pratique{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--bg-2);display:grid;gap:12px;position:sticky;top:24px}
.vsr-pratique h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600}
.vsr-pratique div{display:grid;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.vsr-pratique div span{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.vsr-pratique div b{font-weight:500;color:var(--ink);font-size:15px;line-height:1.4}
.vsr-pratique .vsr-pill{justify-content:space-between;margin-top:4px}
.vsr-note{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:18px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:var(--bg-2);margin-bottom:14px}
.vsr-note .big{font-size:44px;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em}
.vsr-note .big span{font-size:16px;color:var(--mute);font-weight:400;margin-left:4px}
.vsr-note .stars i{font-style:normal;font-size:20px;color:var(--line)}
.vsr-note .stars i.on{color:var(--acc)}
.vsr-note .txt b{display:block;font-size:16px;color:var(--ink)}
.vsr-note .txt small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.vsr-note .txt a{color:var(--ink);border-bottom:1px solid var(--mute)}
.vsr-avis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vsr-avis blockquote{margin:0;border:1px solid var(--line);border-radius:12px;padding:18px 18px 14px;background:var(--bg-2);display:grid;gap:14px;align-content:space-between}
.vsr-avis p{color:var(--ink);font-size:15px;line-height:1.5}
.vsr-avis cite{font-style:normal;display:grid}
.vsr-avis cite b{font-weight:600;font-size:13.5px;color:var(--ink)}
.vsr-avis cite span{font-size:12px;color:var(--mute)}
.vsr-faq{display:grid}
.vsr-faq details{border-bottom:1px solid var(--line)}
.vsr-faq details:first-child{border-top:1px solid var(--line)}
.vsr-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 4px;cursor:pointer;font-size:17px;color:var(--ink);list-style:none}
.vsr-faq summary::-webkit-details-marker{display:none}
.vsr-faq details[open] summary .circ{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);transform:rotate(45deg)}
.vsr-faq p{color:var(--ink-2);padding:0 4px 18px;max-width:40em;font-size:15px}
@media (max-width:980px){.vsr-avis{grid-template-columns:1fr}.vsr-note{grid-template-columns:auto 1fr}.vsr-note .stars{grid-column:1/-1}.vsr-pratique{position:static}}

/* fiche v2 : photo en tête, section claire, mosaïque */
.vsr-hero-photo{margin:0}
.vsr-hero-photo .vsr-ph{aspect-ratio:21/9;border-radius:0;box-shadow:none;cursor:default}
.vsr-hero-photo .vsr-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(21,21,23,.92),rgba(21,21,23,0));pointer-events:none}
.vsr-hero-photo .over{position:absolute;left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);bottom:34px;z-index:2}
.vsr-hero-photo .vsr-name{margin-bottom:8px}
.vsr-hero-photo .vsr-name .who{font-size:clamp(34px,5vw,64px);color:#fff}
.vsr-hero-photo .vsr-name .firm{color:rgba(255,255,255,.85);border-left-color:rgba(255,255,255,.35)}
.vsr-hero-photo .m{font-size:16px;color:rgba(255,255,255,.85)}
.vsr-hero-photo .m b{color:#fff;font-weight:600}
.vsr-hero-photo .dots{left:auto;right:clamp(16px,4vw,48px);bottom:18px}
.vsr-intro.vsr-sec{border-top:0;padding-top:34px}
.vsr-light{background:#F4F0E8;color:#1D1B18;border-top:0}
.vsr-light .vsr-idx{color:#7A756C}.vsr-light .vsr-idx b{color:#1D1B18}
.vsr-light .vsr-avis blockquote{background:#fff;border-color:#E6E0D4}
.vsr-light .vsr-avis p{color:#1D1B18}
.vsr-light .vsr-avis cite b{color:#1D1B18}.vsr-light .vsr-avis cite span{color:#7A756C}
.vsr-avis-foot{margin-top:16px;color:#5B564E;font-size:14px}
.vsr-avis-foot .stars i{font-style:normal;color:#D9D2C4}.vsr-avis-foot .stars i.on{color:#1D1B18}
.vsr-avis-foot b{color:#1D1B18;font-weight:700}
.vsr-avis-foot a{color:#1D1B18;border-bottom:1px solid #9A948A}
.vsr-light + .vsr-sec{border-top:0}
.vsr-mosaic{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.vsr-mosaic .vsr-ph{aspect-ratio:1;cursor:default}
.vsr-mosaic.n1{grid-template-columns:1fr}.vsr-mosaic.n1 .vsr-ph{aspect-ratio:16/9}
.vsr-mosaic.n2{grid-template-columns:1fr 1fr}.vsr-mosaic.n2 .vsr-ph{aspect-ratio:4/3}
.vsr-mosaic.n3 .vsr-ph:first-child,.vsr-mosaic.n4 .vsr-ph:first-child,.vsr-mosaic.n5 .vsr-ph:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.vsr-mosaic.n3{grid-template-columns:2fr 1fr}.vsr-mosaic.n3 .vsr-ph:first-child{grid-column:1;grid-row:span 2}
@media (max-width:980px){.vsr-hero-photo .vsr-ph{aspect-ratio:4/5}.vsr-hero-photo .over{bottom:22px}.vsr-mosaic{grid-template-columns:1fr 1fr}.vsr-mosaic .vsr-ph:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}}
.vsr-back{position:absolute;top:18px;left:clamp(16px,4vw,48px);z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(21,21,23,.55);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13px;font-weight:500;backdrop-filter:blur(6px)}
.vsr-back:hover{background:rgba(21,21,23,.8);border-color:#fff;color:#fff}
.vsr-quote{margin:22px 0 0;padding-left:18px;border-left:2px solid var(--acc);max-width:30em}
.vsr-quote p{font-size:18px;line-height:1.4;color:var(--ink);font-weight:300;letter-spacing:-.01em}
.vsr-quote cite{display:block;font-style:normal;font-size:13px;color:var(--mute);margin-top:8px}
.vsr-quote cite::before{content:"— "}
.vsr-nu-foot{padding:22px clamp(16px,4vw,48px) 40px;font-size:12.5px;color:var(--mute);background:var(--bg)}
.vsr-nu-foot a{color:var(--mute);border-bottom:1px solid var(--line)}
.vsr-vcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vcard{display:grid;gap:10px;color:var(--ink)}
.vcard .vsr-ph{aspect-ratio:4/5;cursor:pointer}
.vcard .t{display:grid;gap:2px}
.vcard .t b{font-size:16px;font-weight:700;line-height:1.2}
.vcard .t small{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.vcard .t span{font-size:13.5px;color:var(--ink-2)}
.vcard .circ{width:36px;height:36px;font-size:14px}
.vcard:hover .circ{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);transform:rotate(-45deg)}
.vcard:hover .slide img{transform:scale(1.03)}
@media (max-width:980px){.vsr-vcards{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------------
   Corrections d'accessibilité et de tenue mobile (audit de septembre).
   ------------------------------------------------------------------ */

/* Le focus clavier doit toujours se voir : sans cela, on ne sait plus où l'on est. */
.vsr :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; }
.vsr-search:focus-within { border-color: var(--ink-2); }

/* Les liens de nom dans l'annuaire restent des liens véritables. */
.vsr-lk { color: inherit; text-decoration: none; }
.vsr-lk:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cibles tactiles : au doigt, en dessous de 44 px on rate. */
.vsr-sugg button, .vsr-pill, .vsr-tel, .vsr-fm .close { min-height: 44px; }
.vsr-sugg button { padding: 11px 16px; font-size: 13.5px; }
@media (max-width: 980px) {
	.vsr .arr { width: 44px; height: 44px; line-height: 42px; }
}

/* La barre de filtres ne doit pas glisser sous l'en-tête fixe du thème. */
.vsr { --vsr-top: 0px; }
.vsr-bar { top: var(--vsr-top); }
#vsr-liste { scroll-margin-top: calc(var(--vsr-top) + 70px); }
/* L'annuaire occupe toute la page : le fond du thème ne doit apparaître nulle part,
   ni en bande blanche sous l'en-tête, ni sur les côtés, ni sous le dernier bloc. */
/* Utile seulement si l'en-tête du thème est réactivé dans les réglages. */
body.post-type-archive-vsr_partenaire #page-container,
body.post-type-archive-vsr_partenaire #et-main-area,
body.post-type-archive-vsr_partenaire #main-content,
.vsr-page { background: #151517; }
body.post-type-archive-vsr_partenaire #et-main-area,
body.post-type-archive-vsr_partenaire #main-content { padding-top: 0 !important; margin-top: 0 !important; }

/* Les pleines largeurs ne doivent jamais créer de défilement horizontal. */
.vsr-annuaire { overflow-x: clip; }

/* Le formulaire en plein écran : le bouton d'envoi reste atteignable sur un petit téléphone. */
dialog.vsr-dialog { width: 100%; overflow-y: auto; overscroll-behavior: contain; }
.vsr-fm .bot { position: sticky; bottom: 0; background: var(--bg); padding-bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 2; }
@media (max-width: 600px) {
	.vsr-fm .recap { grid-template-columns: 64px 1fr; }
	.vsr-fm .recap .vsr-ph { width: 64px; }
}

/* Repli quand le navigateur ne connaît pas les fenêtres modales natives. */
.vsr-dialog[open].vsr-fallback { position: fixed; inset: 0; z-index: 99999; background: var(--bg); overflow-y: auto; display: block; max-width: none; max-height: none; }

/* Les pastilles sur photo doivent rester lisibles sur un ciel clair. */
.vsr-ph .tags span { background: rgba(0,0,0,.55); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.vsr .slide .lbl { color: rgba(255,255,255,.55); font-size: 11.5px; }

/* L'index alphabétique : discret, mais présent pour le clavier et pour les moteurs. */
.vsr-index { padding: 48px clamp(16px,4vw,48px) 64px; border-top: 1px solid var(--line); }
.vsr-index h2 { font-size: 14px; font-weight: 500; color: var(--mute); margin: 0 0 16px; }
.vsr-index ul { list-style: none; margin: 0; padding: 0; columns: 260px; column-gap: 32px; }
.vsr-index li { break-inside: avoid; margin: 0 0 8px; font-size: 14px; }
.vsr-index a { color: var(--ink); text-decoration: none; }
.vsr-index a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vsr-index span { color: var(--mute); font-size: 12.5px; }

/* Sans liste de prestations, l'encadré pratique prend toute la largeur. */
.vsr-split.solo { grid-template-columns: 1fr; }
.vsr-split.solo .vsr-presta { display: none; }

/* ==================================================================
   Mise en page et espacements.

   Trois règles, tenues partout :
   1. Toute valeur est un multiple de 8, ou de 4 pour les réglages fins.
   2. L'interligne du texte courant reste entre 1,4 et 1,7 ; les titres
      entre 1,1 et 1,4.
   3. L'espace entre deux groupes dépasse toujours l'espace à l'intérieur
      d'un groupe, et un titre est plus près de ce qu'il annonce que de
      ce qui le précède.
   ================================================================== */

#vsr-annuaire,
.vsr-fiche,
.vsr-index { max-width: 1240px; margin-left: auto; margin-right: auto; }
#vsr-annuaire { padding: 64px 32px 96px; }
.vsr-fiche { padding: 0 32px 120px; }
.vsr-index { padding: 64px 32px 80px; }

/* Texte courant : 17 px sur 28 px d'interligne, soit 1,65. */
.vsr { font-size: 17px; line-height: 28px; }

/* Le haut de page. La colonne de gauche et le texte forment deux groupes :
   40 px les séparent, plus que tout espace intérieur. */
.vsr-hero { grid-template-columns: 224px minmax(0, 1fr); gap: 40px; padding: 0 0 72px; }
.vsr-hero .vsr-h1 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.1; max-width: 17em; }
.vsr-hero .vsr-sub { margin-top: 24px; font-size: 17px; line-height: 28px; max-width: 40em; }

/* Les trois étapes : 48 px les détachent de l'accroche, 20 px les séparent
   entre elles, 16 px séparent le numéro de sa phrase. Rien ne se touche. */
.vsr-how { margin-top: 48px; max-width: 704px; }
.vsr-how div { padding: 20px 0; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; font-size: 16px; line-height: 28px; }

/* Recherche : détachée des étapes de 40 px, et à l'abri des styles du thème. */
.vsr-search { max-width: 704px; margin-top: 40px; padding: 8px 8px 8px 24px; }
#vsr-annuaire .vsr-search input[type="text"] {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--ink) !important;
	font: 400 16px/24px var(--sans) !important;
	padding: 8px 0 !important;
	height: auto !important;
	min-height: 0 !important;
}
.vsr-sugg { margin-top: 16px; gap: 8px; }
.vsr-sugg button { font-size: 13px; line-height: 20px; }

/* Filtres et compteur. */
.vsr-bar { padding: 16px 0; gap: 16px; }
.vsr-count { padding: 32px 0 8px; font-size: 14px; line-height: 20px; }

/* La grille : 56 px entre les rangées, 24 px entre les colonnes, quand
   l'intérieur d'une carte ne dépasse jamais 16 px. Chaque visage est un bloc. */
.vsr-grid { gap: 56px 24px; padding: 16px 0 48px; }
.vsr-cap { gap: 16px; padding: 16px 0 0; }
.vsr-cap .n { font-size: 19px; line-height: 24px; }
.vsr-cap .e { font-size: 12px; line-height: 16px; margin-top: 4px; }
.vsr-cap .m { font-size: 14px; line-height: 20px; margin-top: 8px; }
.vsr-cap .acts { gap: 8px; }

/* Fiches : 72 px entre deux sections, le double de ce qui vit à l'intérieur. */
.vsr-fiche .vsr-sec { grid-template-columns: 224px minmax(0, 1fr); gap: 40px; padding: 72px 0; }
.vsr-fiche .vsr-h1 { font-size: clamp(26px, 3vw, 40px); line-height: 1.15; max-width: 17em; }
.vsr-fiche .vsr-sub { margin-top: 24px; font-size: 16px; line-height: 24px; max-width: 34em; }
.vsr-story { font-size: 17px; line-height: 28px; max-width: 34em; }
.vsr-story p + p { margin-top: 32px; }
.vsr-story h2, .vsr-story h3 { margin-top: 48px; margin-bottom: 16px; font-size: 20px; line-height: 28px; }

@media (max-width: 980px) {
	#vsr-annuaire { padding: 40px 24px 72px; }
	.vsr-fiche { padding: 0 24px 96px; }
	.vsr-index { padding: 48px 24px 64px; }
	.vsr-hero { gap: 24px; padding-bottom: 48px; }
	.vsr-how { margin-top: 32px; }
	.vsr-search { margin-top: 32px; }
	.vsr-grid { gap: 40px 16px; }
}

/* Approche des lettres. Un serrage de -0,02 em convient à un titre de journal
   en capitales fines ; sur une graisse forte et un écran, il colle les lettres.
   Les grands titres reviennent à une approche neutre, la graisse forte gagne
   même un souffle : c'est elle qui se resserre optiquement. */
.vsr-hero .vsr-h1 { letter-spacing: 0; word-spacing: .02em; }
.vsr-hero .vsr-h1 b { letter-spacing: .004em; }
.vsr-fiche .vsr-h1 { letter-spacing: -.005em; }
.vsr-fiche .vsr-h1 b { letter-spacing: 0; }
.vsr-name .who { letter-spacing: -.005em; }
.vsr-fm .q { letter-spacing: -.005em; }
.vsr-cap .n { letter-spacing: 0; }

/* « En savoir plus » : un vrai lien, qui mène à la fiche complète.
   Second rôle derrière l'appel à l'action du métier, mais visible. */
.vsr-cap .acts .vsr-plus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
}
.vsr-cap .acts .vsr-plus .c {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid currentColor;
	display: inline-grid;
	place-items: center;
	font-size: 11px;
	line-height: 1;
	transition: transform .18s ease;
}
.vsr-tile:hover .vsr-plus .c { transform: translateX(2px); }

/* ------------------------------------------------------------------
   Avis clients. Des cartes blanches encadrées sur fond crème faisaient
   « formulaire » au milieu d'une page éditoriale. On garde le fond clair
   de la section, et les citations deviennent ce qu'elles sont : du texte,
   séparé par un filet, signé dessous.
   ------------------------------------------------------------------ */
.vsr-light .vsr-avis { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.vsr-light .vsr-avis blockquote {
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(29,27,24,.18);
	border-radius: 0;
	padding: 20px 0 0;
	gap: 16px;
	align-content: start;
}
.vsr-light .vsr-avis p {
	font-size: 17px;
	line-height: 28px;
	color: #1D1B18;
	font-weight: 400;
	quotes: "«\00a0" "\00a0»";
}
.vsr-light .vsr-avis p::before { content: open-quote; }
.vsr-light .vsr-avis p::after { content: close-quote; }
.vsr-light .vsr-avis cite { gap: 2px; }
.vsr-light .vsr-avis cite b { font-size: 13px; color: #1D1B18; font-weight: 600; }
.vsr-light .vsr-avis cite span { font-size: 12px; color: #7A756C; letter-spacing: .04em; }

@media (max-width: 980px) {
	.vsr-light .vsr-avis { grid-template-columns: 1fr; gap: 32px; }
}

/* Le reste des photos, déplié à la demande. */
.vsr-mosaic-plus { margin-top: 10px; grid-template-columns: repeat(4, 1fr); }
.vsr-mosaic-plus .vsr-ph { aspect-ratio: 1; }
.vsr-galplus {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ink-2);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.vsr-galplus:hover { color: var(--ink); }

/* ==================================================================
   Avis clients, deuxième version.

   La première citation devient une déclaration : grande, aérée, sur
   deux colonnes. Les suivantes l'accompagnent en plus petit, décalées.
   Un chiffre de note tenu à part, comme une signature de bas de page.
   ================================================================== */

.vsr-light.vsr-sec { padding: 88px 0; }
.vsr-light .vsr-avis {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 48px 56px;
	align-items: start;
}
.vsr-light .vsr-avis blockquote {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 20px;
	align-content: start;
}

/* La première citation porte la section. */
.vsr-light .vsr-avis blockquote:first-child { grid-row: span 2; }
.vsr-light .vsr-avis blockquote:first-child p {
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.42;
	font-weight: 300;
	letter-spacing: -.005em;
}
.vsr-light .vsr-avis blockquote:first-child p::first-letter { font-weight: 400; }

/* Les suivantes, en appui. */
.vsr-light .vsr-avis blockquote + blockquote { padding-top: 24px; border-top: 1px solid rgba(29,27,24,.14); }
.vsr-light .vsr-avis blockquote + blockquote p { font-size: 16px; line-height: 26px; color: #3A3630; }

.vsr-light .vsr-avis p { color: #1D1B18; margin: 0; quotes: "«\00a0" "\00a0»"; }
.vsr-light .vsr-avis p::before { content: open-quote; }
.vsr-light .vsr-avis p::after { content: close-quote; }

.vsr-light .vsr-avis cite { display: flex; align-items: baseline; gap: 10px; font-style: normal; }
.vsr-light .vsr-avis cite b { font-size: 13px; font-weight: 600; color: #1D1B18; }
.vsr-light .vsr-avis cite span {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8A8478;
}
.vsr-light .vsr-avis cite::before {
	content: "";
	width: 24px;
	height: 1px;
	background: #C9C1B2;
	display: block;
	flex: 0 0 24px;
	transform: translateY(-4px);
}

/* Un seul avis : il occupe toute la largeur, sans colonne vide à côté. */
.vsr-light .vsr-avis.n1 { grid-template-columns: 1fr; }
.vsr-light .vsr-avis.n1 blockquote:first-child { grid-row: auto; max-width: 26em; }

/* La note Google : une ligne de pied, détachée, jamais collée à une colonne. */
.vsr-light .vsr-avis-bar {
	grid-column: 1 / -1;
	margin-top: 56px;
	padding-top: 20px;
	border-top: 1px solid rgba(29,27,24,.14);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #5A554C;
}
.vsr-light .vsr-avis-bar b { color: #1D1B18; }
.vsr-light .vsr-avis-bar .stars { letter-spacing: 2px; color: #C9C1B2; }
.vsr-light .vsr-avis-bar .stars .on { color: #1D1B18; }
.vsr-light .vsr-avis-bar a { margin-left: auto; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 980px) {
	.vsr-light.vsr-sec { padding: 56px 0; }
	.vsr-light .vsr-avis { grid-template-columns: 1fr; gap: 32px; }
	.vsr-light .vsr-avis blockquote:first-child { grid-row: auto; }
	.vsr-light .vsr-avis blockquote:first-child p { font-size: 21px; }
	.vsr-light .vsr-avis-bar { margin-top: 32px; }
	.vsr-light .vsr-avis-bar a { margin-left: 0; }
}

/* ------------------------------------------------------------------
   Corrections de mise en page issues de la relecture complète.
   ------------------------------------------------------------------ */

/* Quatre photos pavaient mal : une case restait vide en bas à droite. */
.vsr-mosaic.n4 { grid-template-columns: repeat(2, 1fr); }
.vsr-mosaic.n4 .vsr-ph:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 1; }

/* Les colonnes s'adaptent au nombre réel d'éléments, plus de grands vides. */
.vsr-avis { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vsr-vcards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Sans prestations, l'encadré pratique garde sa largeur de carte. */
.vsr-split.solo { grid-template-columns: minmax(0, 420px); }

/* L'accroche suit la photo de près : la règle de section la repoussait à 72 px. */
.vsr-fiche .vsr-intro.vsr-sec { padding-top: 40px; }

@media (max-width: 980px) {
	/* La barre d'action fixe masquait le pied de page, hors de la fiche. */
	.vsr-nu-foot { padding-bottom: 104px; }
	/* Les photos dépliées restaient en quatre colonnes de 75 px. */
	.vsr-mosaic-plus { grid-template-columns: 1fr 1fr; }
	/* Le métier passait sous les points du carrousel. */
	.vsr-hero-photo .dots { bottom: auto; top: 16px; }
}

/* Le fond sombre couvre la fenêtre entière ; la lecture reste centrée à 1240 px. */
.vsr-page { background: #151517; width: 100%; }
body.vsr-nu { background: #151517; }

/* ------------------------------------------------------------------
   Avis : les uns sous les autres. Une colonne, dans l'ordre de lecture.
   ------------------------------------------------------------------ */
.vsr-light .vsr-avis,
.vsr-light .vsr-avis.n1,
.vsr-light .vsr-avis.n2,
.vsr-light .vsr-avis.n3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 46em;
}
.vsr-light .vsr-avis blockquote,
.vsr-light .vsr-avis blockquote:first-child {
	grid-row: auto;
	padding: 32px 0;
	border-top: 1px solid rgba(29,27,24,.14);
	gap: 16px;
	max-width: none;
}
.vsr-light .vsr-avis blockquote:first-child { border-top: 0; padding-top: 0; }
.vsr-light .vsr-avis blockquote p,
.vsr-light .vsr-avis blockquote:first-child p,
.vsr-light .vsr-avis blockquote + blockquote p {
	font-size: 19px;
	line-height: 32px;
	font-weight: 300;
	color: #1D1B18;
	letter-spacing: 0;
}
.vsr-light .vsr-avis-bar { max-width: 46em; margin-top: 40px; }
@media (max-width: 980px) {
	.vsr-light .vsr-avis blockquote p,
	.vsr-light .vsr-avis blockquote:first-child p { font-size: 17px; line-height: 28px; }
}

/* ==================================================================
   Bandes pleine largeur.

   La fiche n'est plus une colonne de 1240 px posée sur du noir : c'est
   une suite de bandes qui traversent l'écran, chacune ramenant son
   contenu au même axe de lecture. La section claire des avis devient
   une vraie respiration dans la page, pas un carré au milieu.
   ================================================================== */

.vsr-fiche {
	max-width: none;
	padding: 0 0 120px;
	overflow-x: visible;
}
/* Une seule règle donne l'axe de lecture à toutes les bandes. */
.vsr-fiche > .vsr-sec,
.vsr-fiche > .vsr-top,
.vsr-fiche > .vsr-intro {
	padding-left: max(32px, calc(50% - 620px));
	padding-right: max(32px, calc(50% - 620px));
}
/* La photo du bandeau touche les bords, sans marge négative. */
.vsr-fiche > .vsr-hero-photo { margin: 0; padding: 0; }

/* La section claire : sa couleur va d'un bord à l'autre. */
.vsr-fiche > .vsr-light {
	margin: 0;
	background: #F4F0E8;
}

@media (max-width: 980px) {
	.vsr-fiche { padding-bottom: 96px; }
	.vsr-fiche > .vsr-sec,
	.vsr-fiche > .vsr-top,
	.vsr-fiche > .vsr-intro { padding-left: 24px; padding-right: 24px; }
}

/* Les voisins gardent une taille de carte : un seul voisin ne doit pas
   occuper toute la largeur avec une photo géante. */
.vsr-vcards {
	grid-template-columns: repeat(auto-fill, minmax(190px, 232px));
	justify-content: start;
	gap: 20px;
}
@media (max-width: 980px) {
	.vsr-vcards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ==================================================================
   Téléphone. Ce bloc est le dernier de la feuille et sa spécificité
   égale celle des règles de bureau : sans cela, une règle comme
   « .vsr-fiche .vsr-sec » gagnait sur la requête média et la grille
   à deux colonnes restait appliquée sur un écran de 375 px.
   ================================================================== */
@media (max-width: 980px) {
	.vsr .vsr-hero,
	.vsr-fiche .vsr-sec,
	.vsr-fiche .vsr-intro,
	.vsr-fiche .vsr-light {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.vsr-fiche .vsr-sec { padding-top: 48px; padding-bottom: 48px; }
	.vsr .vsr-hero { padding-bottom: 40px; }

	/* Le repère de section devient une ligne d'en-tête, pas une colonne. */
	.vsr .vsr-idx { display: flex; align-items: baseline; gap: 10px; }
	.vsr .vsr-idx b { display: inline; margin-top: 0; font-size: 15px; }

	/* Les textes reprennent toute la largeur disponible. */
	.vsr .vsr-h1,
	.vsr-fiche .vsr-h1,
	.vsr-hero .vsr-h1 { font-size: clamp(26px, 7.4vw, 34px); max-width: none; }
	.vsr .vsr-sub,
	.vsr-hero .vsr-sub,
	.vsr-fiche .vsr-sub,
	.vsr-story,
	.vsr-how,
	.vsr-search,
	.vsr-light .vsr-avis,
	.vsr-light .vsr-avis-bar { max-width: none; }

	/* Contact et prestations : une colonne, des lignes qui respirent. */
	.vsr-split, .vsr-split.solo { grid-template-columns: 1fr; }
	/* Une ligne de contact : l'intitulé au-dessus, le texte dessous,
	   la flèche à droite sur toute la hauteur. */
	.vsr-row { grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 2px 14px; }
	.vsr-row .k { grid-column: 1; grid-row: 1; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
	.vsr-row .v { grid-column: 1; grid-row: 2; font-size: 16px; }
	.vsr-row .v small { font-size: 13.5px; }
	.vsr-row .circ { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

	/* Mosaïque et voisins. */
	.vsr-mosaic, .vsr-mosaic.n4 { grid-template-columns: 1fr 1fr; }
	.vsr-mosaic .vsr-ph:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; }
	.vsr-vcards { grid-template-columns: 1fr 1fr; }

	/* Le bandeau de confiance passe en liste défilante plutôt qu'en pavé. */
	.vsr-trust { gap: 8px; }
	.vsr-trust .chip { font-size: 13px; }
}

@media (max-width: 600px) {
	.vsr-hero .vsr-h1 { font-size: clamp(25px, 8vw, 30px); }
	.vsr-cats { gap: 6px; }
	.vsr-cats .vsr-pill { font-size: 13px; padding: 9px 14px; }
	.vsr-vcards { grid-template-columns: 1fr; }
	.vsr-light .vsr-avis blockquote { padding: 24px 0; }
}

/* ------------------------------------------------------------------
   Extensions de partage. Sur une fiche, elles recouvrent le bouton
   d'appel et détournent le visiteur au moment où il choisit quelqu'un.
   Masquées seulement sur nos pages, jamais ailleurs sur le site.
   ------------------------------------------------------------------ */
body.vsr-nu .et_social_mobile,
body.vsr-nu #et_social_mobile_bar,
body.vsr-nu .et_social_sidebar_networks,
body.vsr-nu .et_social_inline,
body.vsr-nu .et_social_media_wrapper,
body.vsr-nu .et_social_networks,
body.vsr-nu .et_social_pin_images_outer,
body.vsr-nu .addtoany_share_save_container,
body.vsr-nu .a2a_kit,
body.vsr-nu .swp_social_panel,
body.vsr-nu .sharedaddy,
body.vsr-nu .heateor_sss_sharing_container,
body.vsr-nu .social-share,
body.vsr-nu .sharing-buttons,
body.vsr-nu .st-sticky-share-buttons,
body.vsr-nu .st-inline-share-buttons,
body.vsr-nu [id^="st-"],
body.vsr-nu .shareaholic-canvas,
body.vsr-nu .mashsb-container { display: none !important; }

/* Et si le thème garde son en-tête sur ces pages, la règle vaut aussi. */
body.single-vsr_partenaire .st-sticky-share-buttons,
body.single-vsr_partenaire .st-inline-share-buttons,
body.single-vsr_partenaire [id^="st-"],
body.single-vsr_partenaire .et_social_mobile,
body.single-vsr_partenaire #et_social_mobile_bar,
body.single-vsr_partenaire .et_social_sidebar_networks,
body.post-type-archive-vsr_partenaire .st-sticky-share-buttons,
body.post-type-archive-vsr_partenaire .st-inline-share-buttons,
body.post-type-archive-vsr_partenaire [id^="st-"],
body.post-type-archive-vsr_partenaire .et_social_mobile,
body.post-type-archive-vsr_partenaire #et_social_mobile_bar,
body.post-type-archive-vsr_partenaire .et_social_sidebar_networks { display: none !important; }

/* ------------------------------------------------------------------
   Annuaire sur téléphone. Trois éléments dépassaient la largeur de
   l'écran et provoquaient un défilement horizontal : le sélecteur de
   secteur (388 px à cause du plus long libellé), le bouton de demande
   collé au champ de recherche, et la rangée de filtres.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
	#vsr-annuaire { overflow-x: clip; }

	/* Recherche : le champ sur une ligne, le bouton pleine largeur dessous. */
	.vsr .vsr-search { flex-wrap: wrap; gap: 10px; padding: 10px; border-radius: 22px; }
	.vsr .vsr-search input { flex: 1 1 100%; padding: 6px 10px; }
	.vsr .vsr-search .vsr-pill { flex: 1 1 100%; justify-content: center; }

	/* Barre de filtres : les familles défilent, le secteur prend la largeur. */
	.vsr .vsr-bar { flex-direction: column; align-items: stretch; gap: 12px; }
	.vsr .vsr-cats {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		padding-bottom: 4px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		scroll-snap-type: x proximity;
	}
	.vsr .vsr-cats::-webkit-scrollbar { display: none; }
	.vsr .vsr-cats .vsr-pill { flex: 0 0 auto; scroll-snap-align: start; }
	.vsr .vsr-where { display: grid; grid-template-columns: 1fr; gap: 6px; width: 100%; }
	.vsr .vsr-where span { font-size: 13px; color: var(--mute); }
	.vsr .vsr-where select { width: 100%; max-width: 100%; min-width: 0; }

	/* Une seule colonne de visages : la photo est l'argument, autant la voir. */
	.vsr .vsr-grid { grid-template-columns: 1fr; gap: 40px; }
	.vsr .vsr-tile.wide { grid-column: span 1; }
	.vsr .vsr-tile .vsr-ph, .vsr .vsr-tile.wide .vsr-ph { aspect-ratio: 4/5; }
	.vsr .vsr-cap .acts { display: grid; grid-template-columns: 1fr; gap: 8px; }
	.vsr .vsr-cap .acts .vsr-pill,
	.vsr .vsr-cap .acts .vsr-tel { width: 100%; justify-content: center; text-align: center; }

	/* L'index alphabétique tient sur une colonne. */
	.vsr-index ul { columns: 1; }

	/* Le badge reCAPTCHA d'un autre formulaire n'a rien à faire ici. */
	body.vsr-nu .grecaptcha-badge { display: none !important; }
}

/* ==================================================================
   Hiérarchie typographique sur téléphone.

   Sur un petit écran, tout se ressemblait : le titre de section était
   même plus petit que le texte courant. Cinq niveaux nettement séparés,
   avec un rapport d'au moins 1,25 entre deux niveaux voisins, et des
   interlignes multiples de quatre.

   1. Accroche      30 / 36   graisse 300, le gras porte la phrase forte
   2. Titre section 22 / 28   graisse 600
   3. Texte courant 16 / 26   graisse 400
   4. Secondaire    14 / 20   gris, sous-titres et précisions
   5. Repère        12 / 16   capitales espacées, numéro de section
   ================================================================== */
@media (max-width: 980px) {
	.vsr { font-size: 16px; line-height: 26px; }

	/* 1. L'accroche */
	.vsr .vsr-h1,
	.vsr-hero .vsr-h1,
	.vsr-fiche .vsr-h1 { font-size: 30px; line-height: 36px; font-weight: 300; letter-spacing: -.01em; }
	.vsr .vsr-h1 b { font-weight: 700; }

	/* 2. Le titre de section, deux fois plus visible que le texte */
	.vsr .vsr-idx { display: block; margin-bottom: 4px; }
	.vsr .vsr-idx b {
		display: block;
		margin-top: 6px;
		font-size: 22px;
		line-height: 28px;
		font-weight: 600;
		color: var(--ink);
	}

	/* 5. Le repère de section : petit, espacé, discret */
	.vsr .vsr-idx { font-size: 12px; line-height: 16px; letter-spacing: .14em; color: var(--mute); }

	/* Sur l'annuaire, ce repère porte la signature du magazine : il doit rester
	   en retrait, sinon il concurrence l'accroche qui vient juste après. */
	.vsr-hero .vsr-idx { margin-bottom: 18px; }
	.vsr-hero .vsr-idx b {
		font-size: 15px;
		line-height: 22px;
		font-weight: 500;
		letter-spacing: 0;
		color: var(--ink-2);
	}

	/* 3. Le texte courant */
	.vsr .vsr-sub,
	.vsr-hero .vsr-sub,
	.vsr-fiche .vsr-sub,
	.vsr-story,
	.vsr-how div { font-size: 16px; line-height: 26px; }
	.vsr-story p + p { margin-top: 24px; }

	/* 4. Le secondaire */
	.vsr-row .v small,
	.vsr-cap .m,
	.vsr-count,
	.vsr-galcap,
	.vsr-trust .chip small,
	.vsr-presta .item p { font-size: 14px; line-height: 20px; }

	/* Les cartes de l'annuaire suivent la même échelle */
	.vsr-cap .n { font-size: 20px; line-height: 26px; }
	.vsr-cap .e { font-size: 11.5px; line-height: 16px; letter-spacing: .1em; }

	/* Les citations d'avis se détachent du texte courant */
	.vsr-light .vsr-avis blockquote p,
	.vsr-light .vsr-avis blockquote:first-child p { font-size: 18px; line-height: 30px; }
	.vsr-light .vsr-avis cite b { font-size: 14px; }
	.vsr-light .vsr-avis cite span { font-size: 11.5px; letter-spacing: .1em; }

	/* Respiration : un titre est plus près de ce qu'il annonce que de ce qui précède */
	.vsr .vsr-hero,
	.vsr-fiche .vsr-sec,
	.vsr-fiche .vsr-intro { gap: 8px; }
	.vsr-fiche .vsr-sec { padding-top: 56px; padding-bottom: 56px; }
	.vsr-hero .vsr-sub { margin-top: 20px; }
	.vsr-how { margin-top: 36px; }
	.vsr-how div { padding: 18px 0; }
	.vsr-search { margin-top: 32px; }
	.vsr-trust { margin-top: 28px; }
	.vsr-rows { margin-top: 8px; }
}

@media (max-width: 400px) {
	.vsr .vsr-h1,
	.vsr-hero .vsr-h1,
	.vsr-fiche .vsr-h1 { font-size: 27px; line-height: 34px; }
	.vsr .vsr-idx b { font-size: 20px; line-height: 26px; }
}