/* =====================================================================
   /pro/ — ESPACE PRO · « Le devis de votre réseau, en 3 réponses »
   ---------------------------------------------------------------------
   La page n'expose pas une offre volume suivie d'un formulaire : elle EST
   le formulaire de devis, mené comme le configurateur. Trois questions
   (adresses, supports, logo), une feuille qui s'écrit à droite au fur et
   à mesure, le barème réel dessiné dessous, puis les coordonnées.

   Préfixe unique .pr- : zéro collision avec styles.css (qui porte déjà
   .pro-form / .pro-chip pour la section #pro de l'accueil), avec
   commun/panier.css et avec les feuilles de famille.

   Trois plans seulement : --pr-panel (fond exact des packshots), #FFF,
   --surface-sunken ; deux blocs encaissés en radius 28 (l'atelier, la
   clôture sombre). Aucune couture dégradée, des coupes franches.

   TOUT chiffre affiché sort de window.KKPanier.price(). Les seules
   formulations tarifaires écrites en dur sont celles du site : 24,99 €,
   49,99 €, +9,00 € le logo, plafond −30 % du panier, jusqu'à −50 % sur
   devis multi-établissements, réponse sous 24 h ouvrées.
   ===================================================================== */

.pr{
  --pr-panel:#F1F5FB;         /* fond EXACT de ../produits/*.webp */
  --pr-photo:#EDEEF7;         /* fond EXACT de ../home/multi-etablissements.webp */
  --pr-seam:clamp(58px,6.4vw,96px);
  --pr-card-r:22px;
  --pr-block-r:28px;
  background:var(--surface);
}
.pr-sec{padding:var(--pr-seam) 0}
.pr-sec[id]{scroll-margin-top:92px}
/* La bande des portes vit sur le même plan blanc que l'atelier : elle
   consomme déjà la moitié de la couture, le seam du haut se réduit. */
.pr-sec--after-doors{padding-top:clamp(36px,4vw,58px)}

/* En-tête : la pilule canon vit dans .kktop, mais sans le contrat
   « hauteur d'un viewport » du hero de l'accueil. Le plan continue
   simplement dans le hero. */
.pr-top.kktop{display:block;min-height:0;height:auto;background:var(--pr-panel)}

/* =====================================================================
   1 · TYPOGRAPHIE DE LA PAGE
   ===================================================================== */
.pr-eyebrow{
  display:inline-flex;align-items:flex-start;gap:8px;margin:0 0 16px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
}
.pr-eyebrow--light{color:var(--ku-blue-200)}
.pr-eyebrow .pr-hex{width:13px;height:13px;margin-top:2px;fill:currentColor}
.pr-h1{
  font-family:var(--font-display);font-weight:700;margin:0;
  font-size:clamp(33px,4.3vw,55px);line-height:1.03;letter-spacing:-.03em;
  color:var(--text);text-wrap:balance;
}
.pr-h2{
  font-family:var(--font-display);font-weight:700;margin:0;
  font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.025em;
  color:var(--text);text-wrap:balance;
}
.pr-h2--light{color:#fff}
.pr-hl{color:var(--brand)}
.pr-lede{
  margin:18px 0 0;font-size:clamp(16px,1.35vw,17.5px);line-height:1.62;
  color:var(--text-soft);max-width:40em;
}
.pr-lede--light{color:var(--text-on-dark)}
.pr-head{max-width:46em;margin:0 0 clamp(28px,3.2vw,44px)}
.pr-nb{white-space:nowrap}

.pr-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 26px;
  font-size:13px;color:var(--text-muted)}
/* Le seul lien isolé de la page qui ne fasse pas 44 px de haut : on lui donne
   la surface, on retire la hauteur par une marge négative (même geste que
   .hv-more .link-more de l'accueil), donc le fil d'Ariane ne bouge pas. */
.pr-crumb a{color:var(--text-muted);border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;min-height:44px;margin-block:-11px}
.pr-crumb a:hover{color:var(--brand);border-bottom-color:var(--ku-blue-200)}
.pr-crumb b{color:var(--text);font-weight:600}
.pr-crumb svg{width:13px;height:13px;color:var(--ku-ink-300);fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   2 · BOUTONS
   ===================================================================== */
.pr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 28px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-weight:600;font-size:15.5px;
  box-shadow:0 8px 24px -8px rgba(44,75,255,.55);
  transition:background var(--dur-fast) var(--curve-easyease),transform var(--dur-fast) var(--curve-easyease);
}
.pr-btn:hover{background:var(--brand-hover)}
.pr-btn:active{transform:translateY(1px)}
.pr-btn[hidden]{display:none}
.pr-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.pr-btn--ghost{
  background:transparent;color:var(--brand);border:1px solid var(--ku-blue-200);
  box-shadow:none;font-variant-numeric:tabular-nums;
}
.pr-btn--ghost:hover{background:var(--ku-blue-50);border-color:var(--brand)}
.pr-btn--light{background:#fff;color:var(--brand);box-shadow:none}
.pr-btn--light:hover{background:var(--ku-blue-50)}
.pr-btn--ondark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none}
.pr-btn--ondark:hover{background:rgba(255,255,255,.1)}

/* =====================================================================
   3 · HERO
   ===================================================================== */
.pr-hero{background:var(--pr-panel);padding:clamp(26px,3.2vw,44px) 0 var(--pr-seam)}
.pr-hero__grid{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr);
  gap:clamp(28px,3.2vw,48px);align-items:center;
}
.pr-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:30px 0 0}

.pr-facts{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin:30px 0 0;padding:22px 0 0;
  border-top:1px solid var(--ku-blue-100);font-size:14px;color:var(--text-soft);
}
.pr-fact{display:inline-flex;align-items:center;gap:9px}
.pr-fact svg{width:14px;height:14px;fill:var(--brand);flex:none}
.pr-fact b{color:var(--text);font-weight:700}

/* Photo réseau : cadre dessiné, fond du cadre = fond exact de l'image,
   donc aucun bord visible sous la photo. */
.pr-shotframe{
  background:var(--pr-photo);border:1px solid var(--ku-blue-100);
  border-radius:var(--pr-card-r);padding:12px;margin:0;
  box-shadow:0 22px 44px -30px rgba(14,24,69,.5);
}
/* Le fichier 1400×933 est composé bas : la rangée de plaques n'occupe que
   y[36 %..86 %], il reste ~36 % de plan vide AU-DESSUS. Affiché entier
   (height:auto), l'encart paraissait à moitié vide et le sujet posé trop bas.
   On recadre donc à la prise de vue : bande 1.85, ancrée en bas — le vide du
   haut part, le sujet se recentre, rien n'est tranché (18,9 % rognés en haut
   pour 36 % de marge disponible). */
.pr-shotframe img{width:100%;height:auto;border-radius:14px;
  aspect-ratio:1.85;object-fit:cover;object-position:50% 100%}
.pr-shotframe figcaption{
  display:flex;align-items:center;gap:9px;margin:12px 4px 2px;
  font-size:13px;color:var(--text-muted);line-height:1.4;
}
.pr-shotframe figcaption svg{width:12px;height:12px;fill:var(--ku-blue-300);flex:none}

/* =====================================================================
   4 · BANDE DE RÉASSURANCE B2B (sobre, filets dessinés)
   ===================================================================== */
.pr-trust{background:var(--pr-panel);padding:0 0 clamp(30px,3.4vw,48px)}
.pr-trust__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ku-blue-100);
}
.pr-trust__it{padding:24px 30px 0;border-left:1px solid var(--ku-blue-100)}
.pr-trust__it:first-child{padding-left:0;border-left:0}
.pr-trust__ic{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:#fff;border:1px solid var(--ku-blue-100);color:var(--brand);margin:0 0 12px;
}
.pr-trust__ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pr-trust__t{margin:0 0 5px;font-size:15.5px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.pr-trust__s{margin:0;font-size:14px;line-height:1.55;color:var(--text-muted)}

/* =====================================================================
   5 · PORTES DE PROFIL — trois cartes de TRI, pas trois arguments.
   Chaque porte descend à l'atelier en pré-réglant la réponse qui va de
   soi pour ce profil, et pose son nom dans la feuille et dans le mailto.
   ===================================================================== */
.pr-doors{background:var(--surface);padding:clamp(38px,4.2vw,60px) 0 0}
.pr-doors__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 20px}
.pr-doors__t{margin:0;font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.pr-doors__s{margin:0;font-size:14px;line-height:1.5;color:var(--text-muted)}
.pr-doors__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.pr-door{
  position:relative;display:flex;flex-direction:column;height:100%;width:100%;text-align:left;
  background:#fff;border:1px solid var(--ku-blue-100);border-radius:20px;
  padding:20px 20px 18px;box-shadow:var(--el-4);
  transition:transform .22s var(--curve-easyease),box-shadow .22s var(--curve-easyease),border-color .22s var(--curve-easyease);
}
.pr-door:hover{transform:translateY(-4px);box-shadow:var(--el-16);border-color:var(--brand)}
.pr-door:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.pr-door[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 1.4px var(--brand),var(--el-8)}
/* Le contenu de la porte est un empilement de <span> : un bouton n'accepte
   pas de <p>, chaque bloc doit donc reprendre son display. */
.pr-door__n{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--brand);
  font-variant-numeric:tabular-nums}
.pr-door__glyph{width:46px;height:46px;margin:12px 0 14px;display:block}
.pr-door__glyph .pr-g-fill{fill:var(--ku-blue-100)}
.pr-door__glyph .pr-g-line{fill:none;stroke:var(--brand);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pr-door__glyph .pr-g-mark{fill:var(--brand)}
/* La piqûre de l'ourlet garde SON pointillé : elle reste hors du tracé
   animé, qui réquisitionne stroke-dasharray. */
.pr-door__glyph .pr-g-stitch{fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:1.6 3.4;opacity:.55}
.pr-door__t{display:block;font-family:var(--font-display);font-size:18px;font-weight:700;
  letter-spacing:-.015em;color:var(--text);line-height:1.22}
.pr-door__p{display:block;margin:7px 0 16px;font-size:13.5px;line-height:1.5;color:var(--text-muted)}
.pr-door__go{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--ku-blue-50);font-size:13.5px;font-weight:700;color:var(--brand)}
.pr-door__go span{flex:1;min-width:0}
.pr-door__go svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--curve-easyease)}
.pr-door:hover .pr-door__go svg{transform:translateX(3px)}

/* Les trois portes se posent l'une après l'autre et leur glyphe se TRACE.
   État final par défaut : sans JS et en reduced-motion, tout est là. */
@media (prefers-reduced-motion:no-preference){
  .pr-doors__list.in .pr-door{opacity:0;transform:translateY(18px);
    animation:prDoorIn .62s var(--curve-decel) forwards;animation-delay:calc(var(--i) * .11s)}
  .pr-doors__list.in .pr-door .pr-g-line{stroke-dasharray:var(--dash,190);stroke-dashoffset:var(--dash,190);
    animation:prDraw .9s var(--curve-decel) forwards;animation-delay:calc(.24s + var(--i) * .11s)}
  .pr-doors__list.in .pr-door .pr-g-mark,
  .pr-doors__list.in .pr-door .pr-g-fill{opacity:0;
    animation:prFade .5s var(--curve-decel) forwards;animation-delay:calc(.72s + var(--i) * .11s)}
}
@keyframes prDoorIn{to{opacity:1;transform:none}}
@keyframes prDraw{to{stroke-dashoffset:0}}
@keyframes prFade{to{opacity:1}}

/* =====================================================================
   6 · L'ATELIER — deux colonnes : les questions, la feuille de devis
   Un seul plan encaissé qui tient les deux. Les cartes blanches se
   détachent dessus, la feuille encore plus.
   ===================================================================== */
.pr-lab{
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(26px,3.2vw,44px);align-items:start;
  background:var(--surface-sunken);border:1px solid var(--border);
  border-radius:var(--pr-block-r);padding:clamp(22px,2.8vw,38px);
}

/* ---- Le rail des trois questions ---- */
.pr-steps{position:relative}
.pr-steps__list{margin:0;padding:0;list-style:none}
.pr-step fieldset{border:0;margin:0;padding:0;min-width:0}
.pr-steps__rail,.pr-steps__fill{
  position:absolute;left:21px;top:44px;bottom:34px;width:2px;border-radius:2px;
}
.pr-steps__rail{background:var(--ku-blue-100)}
.pr-steps__fill{
  background:var(--brand);bottom:auto;height:0;
  transition:height var(--dur-slower) var(--curve-decel);
}
.pr-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;
  padding:0 0 clamp(28px,3vw,40px)}
.pr-step:last-child{padding-bottom:0}
.pr-pin{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.pr-pin__hex{position:absolute;inset:0;width:44px;height:44px}
.pr-pin__shape{fill:#fff;stroke:var(--ku-blue-200);stroke-width:1.4}
.pr-pin__n{position:relative;font-size:13px;font-weight:700;color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pr-pin__ok{position:absolute;width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);
  transition:opacity var(--dur-gentle) var(--curve-decel),transform var(--dur-gentle) var(--curve-decel)}
.pr-step.is-done .pr-pin__shape{fill:var(--brand);stroke:var(--brand)}
.pr-step.is-done .pr-pin__n{opacity:0}
.pr-step.is-done .pr-pin__ok{opacity:1;transform:scale(1)}
.pr-step__q{
  display:block;width:100%;margin:0;padding:0;border:0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,1.9vw,24px);line-height:1.2;letter-spacing:-.02em;color:var(--text);
}
.pr-step__body{padding-top:9px;min-width:0}
.pr-step__hint{
  display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:12px 15px;
  background:#fff;border:1px dashed var(--border-strong);border-radius:12px;
  font-size:13.5px;line-height:1.5;color:var(--text-muted);
}
.pr-step__hint svg{width:15px;height:15px;margin-top:2px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pr-step__hint.is-set{background:var(--ku-blue-25);border-style:solid;border-color:var(--ku-blue-100);
  color:var(--brand-active)}

/* ---- Q1 · les tranches ---- */
.pr-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:0;border:0}
.pr-chip{position:relative;display:block;cursor:pointer}
.pr-chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pr-chip__face{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;padding:10px 6px;border-radius:14px;background:#fff;
  border:1.4px solid var(--border-strong);text-align:center;
  transition:border-color var(--dur-fast) var(--curve-easyease),background var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.pr-chip__n{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pr-chip__u{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.pr-chip:hover .pr-chip__face{border-color:var(--ku-blue-300)}
.pr-chip input:checked ~ .pr-chip__face{
  background:var(--brand);border-color:var(--brand);box-shadow:0 8px 22px -10px rgba(44,75,255,.7);
}
.pr-chip input:checked ~ .pr-chip__face .pr-chip__n{color:#fff}
.pr-chip input:checked ~ .pr-chip__face .pr-chip__u{color:var(--ku-blue-100)}
.pr-chip input:focus-visible ~ .pr-chip__face{outline:3px solid var(--focus-ring);outline-offset:3px}

/* ---- Q2 · les supports, avec les packshots ---- */
.pr-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:0;border:0}
/* Un seul support en vente : la grille passe en colonne unique, bornée à
   335 px. La colonne de l'étape mesure 463 px à 1440 : un choix unique
   étiré dessus se lirait comme une bannière, pas comme une réponse. Sous
   335 px de place, minmax rend la largeur disponible (243 px mesurés à
   390). Retour des cartes : applySalesScope() ne pose plus la classe,
   ces deux règles dorment. */
.pr-picks--solo{grid-template-columns:minmax(0,335px)}
.pr-pick[hidden]{display:none}
.pr-pick{position:relative;display:block;cursor:pointer}
.pr-pick input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pr-pick__face{
  display:flex;flex-direction:column;height:100%;border-radius:16px;overflow:hidden;
  background:#fff;border:1.4px solid var(--border-strong);
  transition:border-color var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.pr-pick__shot{
  position:relative;background:var(--pr-panel);aspect-ratio:5/4;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:0;
}
.pr-pick__shot img{position:relative;height:136%;width:auto;max-width:none;object-fit:contain}
/* Le duo : la plaque en retrait derrière, la carte devant, posées sur le
   même sol. Même fond exact, donc la superposition ne montre aucune découpe.
   nth-of-type et NON first/last-child : le dernier ENFANT de .pr-pick__shot
   est le <span class="pr-pick__mark"> de la coche. `img:last-child` ne
   matchait donc jamais — la carte retombait sur la règle générique (136 % /
   112 %), le couple débordait et la plaque était tranchée. */
.pr-pick__shot--duo img:nth-of-type(1){height:96%;margin-right:-14%;transform:translateY(-3%)}
.pr-pick__shot--duo img:nth-of-type(2){height:110%;z-index:1}
/* min-width:0 + break-word : la colonne de texte est un enfant de flex, elle
   doit pouvoir rétrécir sous la largeur de son mot le plus long — sinon le
   overflow:hidden de la face coupe le titre au lieu de le passer à la ligne
   (constaté à 320 px : « Des plaqu|es »). */
.pr-pick__txt{padding:13px 14px 15px;display:flex;flex-direction:column;gap:4px;flex:1;
  min-width:0;overflow-wrap:break-word}
.pr-pick__t{font-size:15.5px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.pr-pick__p{font-size:13px;font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums}
.pr-pick__s{font-size:12.5px;line-height:1.45;color:var(--text-muted)}
.pr-pick:hover .pr-pick__face{border-color:var(--ku-blue-300)}
.pr-pick input:checked ~ .pr-pick__face{border-color:var(--brand);
  box-shadow:0 0 0 1.4px var(--brand),0 14px 30px -18px rgba(44,75,255,.8)}
.pr-pick input:focus-visible ~ .pr-pick__face{outline:3px solid var(--focus-ring);outline-offset:3px}
.pr-pick__mark{
  position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;
  background:var(--brand);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);
  transition:opacity var(--dur-fast) var(--curve-decel),transform var(--dur-fast) var(--curve-decel);
}
.pr-pick__mark svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pr-pick input:checked ~ .pr-pick__face .pr-pick__mark{opacity:1;transform:scale(1)}

/* ---- Q3 · le logo ---- */
.pr-yn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:0;border:0}
.pr-yn__face{
  display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:14px;background:#fff;
  border:1.4px solid var(--border-strong);height:100%;
  transition:border-color var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.pr-yn__t{display:flex;align-items:baseline;gap:9px;font-size:15.5px;font-weight:700;color:var(--text)}
.pr-yn__t em{font-style:normal;font-size:13px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.pr-yn__s{font-size:12.8px;line-height:1.5;color:var(--text-muted)}
.pr-yn label{position:relative;display:block;cursor:pointer}
.pr-yn input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pr-yn label:hover .pr-yn__face{border-color:var(--ku-blue-300)}
.pr-yn input:checked ~ .pr-yn__face{border-color:var(--brand);box-shadow:0 0 0 1.4px var(--brand)}
.pr-yn input:focus-visible ~ .pr-yn__face{outline:3px solid var(--focus-ring);outline-offset:3px}

/* =====================================================================
   7 · LA FEUILLE DE DEVIS (colonne collante)
   ===================================================================== */
.pr-sheetcol{position:sticky;top:22px;align-self:start}
.pr-sheet{
  background:#fff;border:1px solid var(--border);border-radius:var(--pr-card-r);
  box-shadow:0 26px 54px -34px rgba(14,24,69,.55);overflow:hidden;
}
.pr-sheet__hd{
  display:flex;align-items:center;gap:11px;padding:16px 20px;
  background:var(--surface-dark);color:#fff;
}
.pr-sheet__hd .pr-hex{width:16px;height:16px;fill:var(--ku-blue-200);flex:none}
.pr-sheet__ttl{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pr-sheet__count{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--ku-blue-200);font-variant-numeric:tabular-nums;
}
.pr-sheet__dots{display:flex;gap:4px}
.pr-sheet__dot{width:9px;height:9px;fill:none;stroke:var(--ku-blue-300);stroke-width:1.6;
  transition:fill var(--dur-gentle) var(--curve-decel),stroke var(--dur-gentle) var(--curve-decel)}
.pr-sheet__dot.is-on{fill:var(--ku-blue-200);stroke:var(--ku-blue-200)}

.pr-sheet__body{padding:18px 20px 20px}
.pr-ln{display:flex;align-items:baseline;gap:8px;padding:11px 0;border-bottom:1px dashed var(--ku-blue-100)}
.pr-ln[hidden]{display:none}
.pr-ln__k{font-size:13px;color:var(--text-muted);flex:none}
.pr-ln__dots{flex:1;border-bottom:1px dotted var(--ku-ink-200);transform:translateY(-3px);min-width:14px}
.pr-ln__v{font-size:13.5px;font-weight:700;color:var(--text);text-align:right;max-width:60%}
/* « à choisir » est du contenu, pas un ornement : il tient l'AA (--ku-ink-300
   ne donnait que 2,14:1 sur blanc). C'est la graisse, pas la pâleur, qui le
   distingue d'une réponse déjà écrite. */
.pr-ln__v.is-empty{color:var(--text-muted);font-weight:500}
.pr-ln__v.is-fresh{animation:prWrite var(--dur-slow) var(--curve-decel)}
@keyframes prWrite{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Réglage fin du volume : deux compteurs, pas une quatrième question. */
.pr-vol{margin:16px 0 0;padding:15px 16px;background:var(--surface-sunken);
  border:1px solid var(--border);border-radius:14px}
.pr-vol[hidden]{display:none}
.pr-vol__r{display:flex;align-items:center;gap:12px;padding:6px 0}
.pr-vol__l{flex:1;min-width:0;font-size:13px;color:var(--text-soft);line-height:1.35}
.pr-step2{display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--border-strong);
  border-radius:var(--r-pill);padding:2px;flex:none}
.pr-step2 button{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--brand);transition:background var(--dur-fast) var(--curve-easyease);
}
.pr-step2 button:hover:not(:disabled){background:var(--ku-blue-50)}
.pr-step2 button:disabled{color:var(--ku-ink-300);cursor:not-allowed}
.pr-step2 button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.pr-step2 button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pr-step2 output{min-width:36px;text-align:center;font-size:15px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}
.pr-vol__sum{margin:9px 0 0;padding-top:10px;border-top:1px solid var(--border);
  font-size:12.8px;line-height:1.5;color:var(--text-muted)}
.pr-vol__sum b{color:var(--text)}

/* Cartouche de prix */
.pr-quote{margin:16px 0 0;border:1px solid var(--ku-blue-100);border-radius:16px;overflow:hidden;
  background:var(--ku-blue-25)}
.pr-quote[hidden]{display:none}
.pr-quote__hd{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--ku-blue-100)}
.pr-quote__chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.pr-quote__chip svg{width:12px;height:12px;fill:currentColor}
.pr-quote__chip.is-devis{background:var(--surface-dark)}
.pr-quote__body{padding:13px 15px 15px;background:#fff}
.pr-qline{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--ku-blue-50)}
.pr-qline__id{flex:1;min-width:0}
.pr-qline__t{display:block;font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
.pr-qline__s{display:block;margin-top:3px;font-size:12.2px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.pr-qline__off{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--r-pill);
  background:var(--ku-blue-50);color:var(--brand);font-size:11px;font-weight:700}
.pr-qline__v{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-qtot{display:flex;align-items:baseline;gap:10px;padding:13px 0 0}
.pr-qtot__k{font-size:13px;font-weight:600;color:var(--text-soft);flex:1}
.pr-qtot__v{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pr-qtot__ht{margin:3px 0 0;text-align:right;font-size:12.2px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.pr-quote__note{margin:12px 0 0;padding:11px 13px;border-radius:11px;background:var(--ku-blue-25);
  border:1px solid var(--ku-blue-100);font-size:12.6px;line-height:1.5;color:var(--brand-active)}
.pr-quote__note b{font-weight:700}
.pr-quote__foot{margin:11px 0 0;font-size:12.2px;line-height:1.5;color:var(--text-muted)}

/* Pont vers le panier : proposé seulement quand le barème en ligne suffit
   ET que le logo n'est pas demandé (le module panier ne pose jamais le
   logo — c'est le configurateur qui le fait). */
.pr-bridge{margin:14px 0 0;padding:13px 0 0;border-top:1px solid var(--border)}
.pr-bridge[hidden]{display:none}
.pr-bridge .pr-btn{width:100%}
.pr-bridge__note{margin:9px 0 0;font-size:12.2px;line-height:1.5;color:var(--text-muted)}
.pr-bridge__note a{color:var(--brand);font-weight:600;border-bottom:1px solid var(--ku-blue-200)}

.pr-sheet__go{margin:16px 0 0;width:100%}
.pr-sheet__go[hidden]{display:none}
.pr-sheet__wait{margin:16px 0 0;padding:13px 15px;border-radius:12px;background:var(--surface-sunken);
  border:1px dashed var(--border-strong);font-size:12.8px;line-height:1.5;color:var(--text-muted)}
.pr-sheet__wait[hidden]{display:none}

/* =====================================================================
   8 · LE BARÈME DESSINÉ — la courbe EST la fonction du panier.
   La zone hachurée n'est pas une courbe : un devis n'est pas une formule.
   ===================================================================== */
.pr-bareme{
  margin:clamp(22px,2.6vw,34px) 0 0;background:#fff;border:1px solid var(--border);
  border-radius:var(--pr-card-r);padding:clamp(18px,2.2vw,28px);--pr-k:1;
}
.pr-bareme__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 14px}
.pr-bareme__t{margin:0;font-size:15.5px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.pr-bareme__s{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-muted)}
.pr-bareme__svg{display:block;width:100%;height:auto}
.pr-bareme__grid{stroke:var(--ku-blue-100);stroke-width:1;stroke-dasharray:2 5}
.pr-bareme__area{fill:var(--brand);opacity:.07}
.pr-bareme__curve{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pr-bareme__zone{fill:url(#prHatch);stroke:var(--ku-blue-300);stroke-width:1.1;stroke-dasharray:4 4}
.pr-bareme__sep{stroke:var(--ku-blue-200);stroke-width:1.1;stroke-dasharray:3 4}
.pr-bareme__ax{fill:var(--text-muted);font-weight:600;font-size:calc(12px * var(--pr-k))}
.pr-bareme__zlb{fill:var(--brand);font-weight:800;font-size:calc(12px * var(--pr-k))}
.pr-bareme__drop{stroke:var(--brand);stroke-width:1.2;stroke-dasharray:3 3;opacity:.5}
.pr-bareme__dot{fill:#fff;stroke:var(--brand);stroke-width:3.2}
.pr-bareme__mklb{fill:var(--brand);font-weight:800;font-size:calc(13px * var(--pr-k))}
.pr-bareme__mk{transition:transform .18s var(--curve-easyease)}
.pr-bareme__mk[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.pr-bareme__mk{transition:none}}
.pr-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:12px 0 0;padding:0;list-style:none}
.pr-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-muted)}
.pr-legend i{width:16px;height:10px;flex:none;border-radius:3px;display:block}
.pr-legend .pr-legend__a{background:var(--brand)}
.pr-legend .pr-legend__b{background:repeating-linear-gradient(45deg,var(--ku-blue-200) 0 2px,transparent 2px 5px);
  border:1px solid var(--ku-blue-300)}

/* =====================================================================
   9 · COORDONNÉES
   ===================================================================== */
.pr-contact{
  margin:clamp(30px,3.6vw,52px) 0 0;background:#fff;border:1px solid var(--border);
  border-radius:var(--pr-card-r);padding:clamp(22px,2.6vw,34px);
}
.pr-contact__hd{display:flex;align-items:flex-start;gap:16px;margin:0 0 22px;
  padding:0 0 20px;border-bottom:1px solid var(--border)}
.pr-contact__n{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:relative}
.pr-contact__n svg{position:absolute;inset:0;width:44px;height:44px;fill:var(--ku-blue-25);
  stroke:var(--ku-blue-200);stroke-width:1.4}
.pr-contact__n span{position:relative;font-size:12.5px;font-weight:700;color:var(--brand);letter-spacing:.06em}
.pr-contact__t{margin:0;font-family:var(--font-display);font-size:clamp(19px,1.8vw,23px);
  font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1.2}
.pr-contact__s{margin:6px 0 0;font-size:14.2px;line-height:1.55;color:var(--text-muted);max-width:44em}
.pr-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pr-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.pr-field label{font-size:13px;font-weight:600;color:var(--text-soft)}
.pr-field label em{font-style:normal;font-weight:500;color:var(--text-muted)}
.pr-input{
  width:100%;min-height:48px;padding:12px 15px;border-radius:12px;background:#fff;
  border:1.4px solid var(--border-strong);font-family:inherit;font-size:16px;color:var(--text);
  transition:border-color var(--dur-fast) var(--curve-easyease),box-shadow var(--dur-fast) var(--curve-easyease);
}
.pr-input::placeholder{color:var(--text-muted)}   /* même encre que .pro-input de l'accueil */
.pr-input:hover{border-color:var(--ku-blue-300)}
.pr-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,75,255,.16)}
/* La case fait 24 px, mais la cible réelle est l'étiquette : on lui donne
   44 px de haut pour que le doigt ait la surface exigée. */
.pr-consent{display:flex;align-items:flex-start;gap:11px;margin:16px 0 0}
.pr-consent input{
  appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:10px 0 0;
  border:1.6px solid var(--border-strong);border-radius:6px;background:#fff;cursor:pointer;
  transition:background var(--dur-fast) var(--curve-easyease),border-color var(--dur-fast) var(--curve-easyease);
}
.pr-consent input:checked{
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/15px no-repeat;
  border-color:var(--brand);
}
.pr-consent input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pr-consent label{display:flex;align-items:center;min-height:44px;font-size:14px;line-height:1.5;
  color:var(--text-soft);cursor:pointer}
.pr-rgpd{margin:4px 0 0;padding-left:35px;font-size:12.4px;line-height:1.5;color:var(--text-muted)}
.pr-rgpd a{color:var(--brand);border-bottom:1px solid var(--ku-blue-200)}
.pr-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:24px 0 0;
  padding:22px 0 0;border-top:1px solid var(--border)}
.pr-send__note{font-size:12.8px;line-height:1.55;color:var(--text-muted);max-width:34em}
.pr-send__note a{color:var(--brand);font-weight:600;border-bottom:1px solid var(--ku-blue-200);white-space:nowrap}
.pr-sent{margin:16px 0 0;padding:13px 16px;border-radius:12px;background:var(--ku-blue-25);
  border:1px solid var(--ku-blue-100);font-size:13.5px;color:var(--brand-active)}
.pr-sent[hidden]{display:none}
.pr-sent a{font-weight:700;border-bottom:1px solid var(--ku-blue-200)}

/* Mention d'honnêteté tarifaire, sous l'atelier. */
.pr-honest{margin:clamp(20px,2.2vw,28px) 0 0;padding:16px 18px;border-radius:14px;
  background:var(--surface-sunken);border:1px solid var(--border);
  font-size:13px;line-height:1.6;color:var(--text-muted);max-width:62em}
.pr-honest b{color:var(--text);font-weight:700}

/* =====================================================================
   10 · MARQUE BLANCHE REVENDEUR
   Le packshot Personnalisée affleure le plan (même #F1F5FB cuit dans le
   fichier) : aucun cadre, aucun liseré. Une amorce tracée désigne
   l'emplacement du logo.
   ===================================================================== */
.pr-wl{background:var(--pr-panel);padding:var(--pr-seam) 0}
.pr-wl__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,3vw,48px);align-items:center}
.pr-wl__fig{position:relative;margin:0;order:-1}
/* 330 px : au-delà, le packshot (ratio 2:3) dépasse la colonne de texte de
   près de 200 px et ouvre un trou sous elle. */
.pr-wl__fig img{display:block;width:100%;max-width:330px;height:auto;margin:0 auto}
/* L'amorce vit dans le repère de l'image (viewBox 0 0 800 1200 = le
   fichier), donc elle reste collée au bon pixel à toutes les largeurs. */
.pr-wl__wrap{position:relative;max-width:330px;margin:0 auto}
.pr-wl__call{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pr-call__line{fill:none;stroke:var(--brand);stroke-width:5;stroke-linecap:round}
.pr-call__ring{fill:none;stroke:var(--brand);stroke-width:6}
.pr-call__pill{fill:var(--brand)}
.pr-call__txt{fill:#fff;font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:.02em}
@media (prefers-reduced-motion:no-preference){
  .pr-wl__fig.in .pr-call__line{stroke-dasharray:260;stroke-dashoffset:260;
    animation:prDraw .8s var(--curve-decel) .1s forwards}
  .pr-wl__fig.in .pr-call__ring{transform-box:fill-box;transform-origin:center;
    animation:prRing 3.6s var(--curve-easyease) .9s infinite}
  .pr-wl__fig.in :is(.pr-call__pill,.pr-call__txt){opacity:0;
    animation:prFade .5s var(--curve-decel) .8s forwards}
}
@keyframes prRing{0%,70%,100%{opacity:1;transform:scale(1)}12%{opacity:.55;transform:scale(1.07)}}

.pr-pain{margin:20px 0 0;padding:16px 18px;border-radius:14px;background:#fff;
  border:1px solid var(--ku-blue-100);font-size:15px;line-height:1.6;color:var(--text-soft)}
.pr-pain b{color:var(--text);font-weight:700}

/* La chaîne marque blanche : trois temps reliés par un chevron dessiné,
   posé DANS la gouttière (jamais un pointillé qui affleure sous les cartes). */
.pr-flux{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.4vw,34px);margin:clamp(30px,3.4vw,44px) 0 0;padding:0;list-style:none}
.pr-flux li{position:relative;background:#fff;border:1px solid var(--ku-blue-100);
  border-radius:18px;padding:0 20px 20px;box-shadow:var(--el-2)}
.pr-flux__jn{position:absolute;top:22px;right:calc(-1 * clamp(22px,2.4vw,34px));
  width:clamp(22px,2.4vw,34px);height:14px;display:grid;place-items:center;pointer-events:none}
.pr-flux__jn svg{width:15px;height:14px;fill:none;stroke:var(--ku-blue-300);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.pr-flux__hd{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding-top:14px}
.pr-flux__n{position:relative;flex:none;width:30px;height:30px;display:grid;place-items:center}
.pr-flux__n svg{position:absolute;inset:0;width:30px;height:30px;fill:var(--brand)}
.pr-flux__n span{position:relative;color:#fff;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.pr-flux__t{font-size:15px;font-weight:700;color:var(--text);line-height:1.3}
.pr-flux__p{margin:0;font-size:14px;line-height:1.55;color:var(--text-soft)}
.pr-flux__p a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.pr-wl__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin:clamp(26px,3vw,38px) 0 0;padding:clamp(20px,2.2vw,26px) 0 0;border-top:1px solid var(--ku-blue-100)}
.pr-wl__cta p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-muted);flex:1 1 260px}

/* =====================================================================
   11 · CLÔTURE — bloc sombre inséré + constellation du réseau
   ===================================================================== */
.pr-final{background:var(--surface-sunken);padding:var(--pr-seam) 0}
.pr-final__band{
  background:var(--surface-dark);border-radius:var(--pr-block-r);
  padding:clamp(30px,3.6vw,54px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(24px,3vw,48px);align-items:center;overflow:hidden;
}
.pr-final__args{margin:26px 0 0;padding:0;display:grid;gap:11px;list-style:none}
.pr-final__arg{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.5;color:var(--text-on-dark)}
.pr-final__arg svg{width:19px;height:19px;margin-top:1px;flex:none;color:var(--ku-blue-300);
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pr-final__cta{display:flex;flex-wrap:wrap;gap:12px 14px;margin:30px 0 0}
.pr-final .kpro-net{margin:0}

/* Reprise de la boucle de la constellation, gated sur .pr-final.in :
   les keyframes vivent dans styles.css, on ne redéclare que le déclencheur. */
@media (prefers-reduced-motion:no-preference){
  .pr-final.in .kpro-net__comet{animation:kproNetComet 12s linear infinite}
  .pr-final.in .kpro-net__glowline{animation:kproNetSurge 12s var(--curve-easyease) infinite}
  .pr-final.in .kpro-net__line{animation:kproNetLine 12s var(--curve-easyease) infinite}
  .pr-final.in .kpro-net__bubble{animation:kproNetBubble 12s var(--curve-decel) infinite}
  .pr-final.in :is(.kpro-net__comet--2,.kpro-net__thread--2 *,.kpro-net__bubble--2){animation-delay:2.4s}
  .pr-final.in :is(.kpro-net__comet--3,.kpro-net__thread--3 *){animation-delay:4.8s}
  .pr-final.in :is(.kpro-net__comet--4,.kpro-net__thread--4 *,.kpro-net__bubble--3){animation-delay:7.2s}
  .pr-final.in :is(.kpro-net__comet--5,.kpro-net__thread--5 *){animation-delay:9.6s}
  .pr-final.in .kpro-net__hubglow{animation:kproNetHub 2.4s var(--curve-decel) 1.86s infinite}
  .pr-final.in .kpro-net__hubring{animation:kproNetRing 2.4s var(--curve-decel) 1.86s infinite}
}

/* =====================================================================
   12 · ENTRÉES ANIMÉES (une par section, état final par défaut)
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .pr [data-up]{opacity:0;transform:translateY(16px);
    transition:opacity .6s var(--curve-decel),transform .6s var(--curve-decel)}
  .pr [data-up].in{opacity:1;transform:none}
  .pr [data-up][data-d="1"]{transition-delay:.08s}
  .pr [data-up][data-d="2"]{transition-delay:.16s}
  .pr [data-up][data-d="3"]{transition-delay:.24s}
}
@media (prefers-reduced-motion:reduce){
  .pr-steps__fill{transition:none}
  .pr-ln__v.is-fresh{animation:none}
  .pr-pin__ok,.pr-pick__mark{transition:none}
}

/* =====================================================================
   13 · RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  .pr-doors__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pr-door{padding:18px 16px 16px}
}
@media (max-width:940px){
  .pr-hero__grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .pr-hero__media{order:-1}
  .pr-lab{grid-template-columns:minmax(0,1fr)}
  .pr-sheetcol{position:static}
  .pr-final__band{grid-template-columns:minmax(0,1fr)}
  .pr-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-wl__grid{grid-template-columns:minmax(0,1fr)}
  .pr-flux{grid-template-columns:minmax(0,1fr)}
  .pr-flux__jn{top:auto;bottom:calc(-1 * clamp(22px,2.4vw,34px) - 1px);right:auto;left:34px;
    width:14px;height:clamp(22px,2.4vw,34px)}
  .pr-flux__jn svg{transform:rotate(90deg)}
}
@media (max-width:820px){
  .pr-doors__list{grid-template-columns:minmax(0,1fr)}
  .pr-door__glyph{margin:10px 0 12px}
}
@media (max-width:760px){
  .pr-trust__grid{grid-template-columns:minmax(0,1fr)}
  .pr-trust__it{padding:20px 0 0;border-left:0;border-top:1px solid var(--ku-blue-100)}
  .pr-trust__it:first-child{border-top:0}
}
@media (max-width:680px){
  /* Le rail disparaît : le numéro passe en badge dans l'en-tête de question. */
  .pr-steps__rail,.pr-steps__fill{display:none}
  .pr-step{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .pr-pin,.pr-pin__hex{width:34px;height:34px}
  .pr-pin__n{font-size:11.5px}
  .pr-pin__ok{width:14px;height:14px}
  .pr-step__body{padding-top:4px}
  .pr-picks{grid-template-columns:minmax(0,1fr);gap:10px}
  .pr-pick__face{flex-direction:row;align-items:stretch}
  /* La vignette est fluide : elle rend de la largeur au texte quand la carte
     rétrécit, au lieu de garder ses 118 px et de l'étrangler. */
  .pr-pick__shot{aspect-ratio:auto;width:clamp(76px,32%,118px);flex:none}
  .pr-pick__shot img{height:auto;width:112%}
  /* Les 112 % rognent 6 % par côté : calibré sur les cartes (15,9 % de marge
     morte), mais les fichiers plaque n'en ont que 1 % à gauche — la plaque y
     était tranchée dans le produit. Elle s'affiche donc à 100 %. */
  .pr-pick__shot:not(.pr-pick__shot--duo) img[src*="/plaque-"]{width:100%}
  .pr-pick__shot--duo img:nth-of-type(1){width:52%;height:auto;margin-right:-14%}
  .pr-pick__shot--duo img:nth-of-type(2){width:60%;height:auto}
  .pr-pick__txt{padding:12px 13px}
  .pr-yn{grid-template-columns:minmax(0,1fr)}
  .pr-fields{grid-template-columns:minmax(0,1fr)}
  .pr-facts{gap:9px 0;flex-direction:column;align-items:flex-start}
  .pr-contact__hd{gap:12px}
  .pr-ln{flex-wrap:wrap}
  .pr-ln__v{max-width:100%;text-align:right;margin-left:auto}
}
@media (max-width:420px){
  .pr-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-pick__txt{padding:11px 11px 12px}
  /* Le prix du logo passe SOUS son intitulé : côte à côte, à cette largeur,
     les deux se disputent 70 px et s'empilent en escalier. */
  .pr-yn__t{flex-direction:column;align-items:flex-start;gap:2px}
}