/* « Ce que disent nos clients » (sections/proofs, partials/proof-card, partials/proofs-product; SocialProof). Loaded
   with the section only. Text: ink / muted on paper, ink on surface, soft-text on brand-soft (the proof badge),
   brand-ink on brand (the play button): the page's own pairs, swapped on the dark themes (SocialProof::CONTRAST,
   tested). A screenshot is shown whole in its phone frame (object-fit: contain), a video too. Nothing moves by
   itself here: the entrances are the theme's (.reveal); « Discrètes », reduced motion: nothing moves. */
.pv{color:var(--ink)}
.pv__head{flex-wrap:wrap}
.pv__score{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:8px 0 0;font-size:var(--t-sm)}
.pv__score-n{font-size:var(--t-xl);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.pv__score-stars{position:relative;display:inline-block;color:color-mix(in srgb,var(--ink) 22%,transparent);font-size:1.1rem;letter-spacing:.1em;line-height:1}
.pv__score-stars span{position:absolute;inset:0 auto 0 0;width:var(--p,100%);overflow:hidden;color:var(--ink);white-space:nowrap}
.pv__score-stars span::before{content:"★★★★★"}
.pv__score-t{color:var(--muted)}
.pv__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr));align-items:start;gap:14px;margin:0 0 var(--s2);padding:0;list-style:none}
.pv--rail .pv__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;margin:0 var(--edge) var(--s2);padding:6px var(--gutter) 14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
@media (min-width:700px){.pv--rail .pv__list{grid-auto-columns:calc((100% - 2 * var(--gutter) - 28px) / 2.3)}}
@media (min-width:1100px){.pv--rail .pv__list{grid-auto-columns:calc((100% - 2 * var(--gutter) - 42px) / 3.3)}}
.pv__card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:16px;border-radius:var(--r-md);background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 12px 28px -22px rgb(0 0 0 / .45);scroll-snap-align:start}
/* The screenshot, in a phone. */
.pv__phone{position:relative;align-self:center;width:100%;max-width:290px;margin:0;padding:26px 9px 12px;border-radius:32px;background:var(--ink);box-shadow:0 18px 36px -20px rgb(0 0 0 / .55)}
.pv__notch{position:absolute;top:10px;left:50%;width:60px;height:7px;margin-left:-30px;border-radius:4px;background:var(--paper);opacity:.4}
.pv__shot{display:block;width:100%;height:auto;max-height:540px;object-fit:contain;border-radius:18px;background:var(--paper)}
.pv__stars{margin:0;color:var(--ink);font-size:var(--t-sm);letter-spacing:.12em}
.pv__off{opacity:.25}
.pv__quote{margin:0;font-size:var(--t-md);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.pv__quote::before{content:"« "}
.pv__quote::after{content:" »"}
/* The audio player. */
.pv__audio{display:flex;align-items:center;gap:12px;min-width:0;padding:6px 14px 6px 6px;border-radius:var(--pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pv__play{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--brand);color:var(--brand-ink);cursor:pointer}
.pv__play:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pv__i-pause,.is-playing .pv__i-play{display:none}
.is-playing .pv__i-pause{display:block}
.pv__wave{position:relative;flex:1;min-width:40px;height:26px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 28%,transparent) 0 3px,transparent 3px 6px) center / 100% 54% no-repeat}
.pv__fill{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 6px) center / 100% 54% no-repeat;clip-path:inset(0 100% 0 0)}
.pv__time{min-width:2.6em;color:var(--ink);font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
/* The video: whole (a portrait interview stays whole), nothing before a tap. */
.pv__video video{display:block;width:100%;max-height:min(480px,62svh);aspect-ratio:9 / 16;object-fit:contain;border-radius:var(--r-sm);background:var(--ink)}
.pv__transcript{font-size:var(--t-sm)}
.pv__transcript>summary{display:flex;align-items:center;min-height:44px;font-weight:700;cursor:pointer}
.pv__transcript p{margin:0;line-height:1.5;white-space:pre-line}
.pv__foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:auto}
.pv__face{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden}
.pv__face img{display:block;width:100%;height:100%;object-fit:cover}
.pv__who{margin:0;min-width:0;font-size:var(--t-sm);overflow-wrap:anywhere}
.pv__who span{color:var(--muted)}
.pv__proof{display:inline-flex;align-items:center;gap:.35em;max-width:100%;margin:0;padding:3px 10px;border-radius:var(--pill);background:var(--brand-soft);color:var(--soft-text);font-size:var(--t-sm);font-weight:700}
/* The founder's word. */
.pv__founder{display:grid;gap:16px;margin:0 0 var(--s3);padding:18px;border-radius:var(--r-lg);background:var(--surface);color:var(--ink)}
@media (min-width:800px){.pv__founder{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:var(--s3);padding:var(--s3)}.pv__founder:not(:has(.pv__founder-media)){grid-template-columns:minmax(0,46rem)}}
.pv__founder-pic{aspect-ratio:4 / 5;border-radius:var(--r-md);overflow:hidden}
.pv__founder-pic img{display:block;width:100%;height:100%;object-fit:cover}
.pv__founder-kicker{margin:0 0 8px;font-size:var(--t-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pv__founder-text{margin:0;font-size:var(--t-lg);line-height:1.5}
.pv__founder-text p{margin:0 0 .6em}
.pv__founder-name{display:flex;flex-direction:column;margin-top:12px;font-size:var(--t-sm)}
.pv__leave{margin-top:var(--s1)}
#avis{scroll-margin-top:var(--bar-h,64px)}

/* ——— The staging of each theme ——— */
/* Aurora: a luminous carousel, each word in a soft light. */
.pv--aurora .pv__card{box-shadow:inset 0 0 0 1px var(--line),0 24px 48px -30px var(--brand)}
/* Sable: the words pile up, slightly askew. */
.pv--sable .pv__card:nth-child(4n+1){rotate:-1.6deg}.pv--sable .pv__card:nth-child(4n+2){rotate:1.2deg}.pv--sable .pv__card:nth-child(4n+3){rotate:-.8deg}.pv--sable .pv__card:nth-child(4n){rotate:1.8deg}
.pv--sable .pv__card:nth-child(3n+2){background:var(--surface)}
/* Immersion: one big quote per screen, in a cinema rail. */
.pv--immersion .pv__card{padding:var(--s3) var(--s2);border-radius:0;box-shadow:inset 0 0 0 1px var(--line)}
.pv--immersion .pv__quote{font-size:var(--t-xl);font-weight:600;line-height:1.3;letter-spacing:-.01em}
.pv--immersion .pv__quote::before,.pv--immersion .pv__quote::after{content:none}
.pv--immersion .pv__card::before{content:"“";display:block;height:.5em;margin-bottom:8px;font:700 4.5rem/1 var(--serif,serif);color:var(--brand-text)}
/* Marché: tags pinned on the stall. */
.pv--marche .pv__card{border:var(--mk-line,2px solid var(--ink));border-radius:var(--r-sm);box-shadow:var(--mk-shadow,4px 4px 0 var(--ink));background:var(--surface)}
.pv--marche .pv__card:nth-child(odd){rotate:-1deg}.pv--marche .pv__card:nth-child(even){rotate:.8deg}
.pv--marche .pv__card::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--brand);box-shadow:0 2px 0 rgb(0 0 0 / .25)}
/* Atelier: a gallery wall: framed prints and their museum labels. */
.pv--atelier .pv__card{padding:0;background:none;box-shadow:none;gap:8px}
.pv--atelier .pv__phone,.pv--atelier .pv__video,.pv--atelier .pv__audio{box-shadow:0 0 0 1px var(--at-line,var(--line))}
.pv--atelier .pv__phone{border-radius:4px;padding:12px;background:var(--surface)}
.pv--atelier .pv__shot{border-radius:2px}
.pv--atelier .pv__quote{font-family:var(--serif);font-weight:300;font-size:var(--t-lg)}
.pv--atelier .pv__foot{padding-top:8px;border-top:1px solid var(--at-line,var(--line))}
/* Frais: a clean list, nothing that moves. */
.pv--frais .pv__list{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:0 24px}
.pv--frais .pv__card{border-radius:0;box-shadow:none;border-bottom:1px solid var(--line);padding:16px 0}
/* Maison: the guest book: italic serif words between hairlines. */
.pv--maison .pv__card{background:none;box-shadow:none;border-top:1px solid var(--ms-hair,var(--line));border-radius:0;padding:20px 4px}
.pv--maison .pv__quote{font-family:var(--serif);font-style:italic;font-size:var(--t-lg);font-weight:400}
.pv--maison .pv__quote::before,.pv--maison .pv__quote::after{content:none}
/* Vestiaire: a lookbook of words, square and in capitals. */
.pv--vestiaire .pv__card{border-radius:0;box-shadow:inset 0 0 0 1px var(--line)}
.pv--vestiaire .pv__who strong{font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.pv--vestiaire .pv__phone{border-radius:0}
/* Éclat: speech bubbles with a soft rosy glow. */
.pv--eclat .pv__card{border-radius:var(--r-xl);box-shadow:var(--ec-glow,0 16px 40px -24px var(--brand))}
.pv--eclat .pv__quote{position:relative;padding:14px 16px;border-radius:var(--r-lg);background:var(--surface)}
.pv--eclat .pv__quote::after{content:" »"}
/* Récolte: notes of the season, a little sun in their corner. */
.pv--recolte .pv__card{border:var(--rc-line,1px solid var(--line));box-shadow:none}
.pv--recolte .pv__card::after{content:"";position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--accent) 40%,transparent 42%),radial-gradient(circle,color-mix(in srgb,var(--accent) 35%,transparent) 0 70%,transparent 72%)}
/* Rétro: each word in a message window. */
.pv--retro .pv__card{padding:0 12px 12px;border-radius:0;background:var(--surface);box-shadow:inset -2px -2px 0 var(--rt-lo,var(--line)),inset 2px 2px 0 var(--rt-hi,var(--paper))}
.pv--retro .pv__card::before{content:"✉";display:block;margin:0 -12px 4px;padding:4px 10px;background:var(--brand);color:var(--brand-ink);font-size:var(--t-xs);font-weight:700}
.pv--retro .pv__phone,.pv--retro .pv__audio,.pv--retro .pv__proof,.pv--retro .pv__play{border-radius:0}
/* Journal: the readers' letters, in columns, the first letter dropped. */
.pv--journal .pv__list{display:block;columns:2 300px;column-gap:32px;column-rule:1px solid var(--line)}
.pv--journal .pv__card{display:inline-flex;width:100%;margin:0 0 20px;padding:0 0 16px;border-radius:0;background:none;box-shadow:none;border-bottom:var(--jn-rule,1px solid var(--ink));break-inside:avoid}
.pv--journal .pv__quote{font-family:var(--serif)}
.pv--journal .pv__quote::before,.pv--journal .pv__quote::after{content:none}
.pv--journal .pv__quote::first-letter{float:left;margin:4px 8px 0 0;font-size:3em;font-weight:700;line-height:.8}
.pv--journal .pv__proof{border-radius:0}
/* Néon: the words lit like signs, a soft glow, no flicker. */
.pv--neon .pv__card{background:var(--surface);box-shadow:0 0 0 1px var(--ne-dim,var(--line)),0 0 30px -12px var(--ne-glow,transparent)}
.pv--neon .pv__play{box-shadow:0 0 16px var(--ne-glow,transparent)}
/* Carnet: polaroids taped on the page. */
.pv--carnet .pv__card{padding:12px 12px 18px;border-radius:3px;background:var(--cr-cream,var(--surface));box-shadow:var(--cr-shadow,0 10px 22px -12px rgb(0 0 0 / .5))}
.pv--carnet .pv__card::before{content:"";position:absolute;top:-9px;left:50%;width:80px;height:22px;margin-left:-40px;background:var(--cr-tape,rgb(255 250 235 / .7));rotate:-2deg}
.pv--carnet .pv__card:nth-child(odd){rotate:-1.4deg}.pv--carnet .pv__card:nth-child(even){rotate:1.1deg}
.pv--carnet .pv__phone{border-radius:3px;padding:8px;background:var(--paper);box-shadow:none}
.pv--carnet .pv__quote{font-family:var(--serif);font-size:var(--t-lg)}
/* Brut: the terminal: monospace, thick lines, no curve. */
.pv--brut .pv__card,.pv--brut .pv__phone,.pv--brut .pv__audio,.pv--brut .pv__proof,.pv--brut .pv__play,.pv--brut .pv__founder{border-radius:0}
.pv--brut .pv__card{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.pv--brut .pv__quote{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm)}
.pv--brut .pv__quote::before{content:"> "}
.pv--brut .pv__quote::after{content:none}
/* Wax: each word framed by a strip of the cloth. */
.pv--wax .pv__card{padding-top:24px;overflow:hidden}
.pv--wax .pv__card::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--wx-b)}
.pv--wax .pv__founder{border-top:10px solid transparent;border-image:var(--wx-b) 10}
/* Fil: the conversation: the words as chat bubbles, one screen after the other. */
.pv--fil .pv__card{background:none;box-shadow:none;padding:4px 0}
.pv--fil .pv__quote{position:relative;align-self:flex-start;max-width:92%;padding:10px 14px;border-radius:4px 18px 18px 18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pv--fil .pv__quote::before,.pv--fil .pv__quote::after{content:none}
/* Univers: each word a small world: round edges and an orbit. */
.pv--univers .pv__card{border-radius:var(--r-xl);padding:20px;overflow:hidden}
.pv--univers .pv__card::after{content:"";position:absolute;top:-38px;right:-38px;width:96px;height:96px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line),0 0 0 14px color-mix(in srgb,var(--brand-soft) 60%,transparent);pointer-events:none}
/* Reduced motion, « Discrètes »: no tilt changes on hover, nothing moves. */
@media (prefers-reduced-motion:reduce){.pv *{transition:none!important}}
/* « Donner mon avis » (store/review): the product, then the form. */
.pv--page{padding-top:calc(var(--bar-h,64px) + var(--s3))}
.pv__page{display:grid;gap:var(--s3);max-width:980px}
@media (min-width:800px){.pv__page{grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:start}}
.pv__page-media{position:relative;display:block;aspect-ratio:4 / 5;max-width:320px;border-radius:var(--r-lg);overflow:hidden}
.pv__page-lead{color:var(--muted)}
.pv__page .pv__proof{margin:4px 0 12px}