/* =====================================================================
   PROTO 11/10 (?proto=1) — « Why pay when a theme is free? », le bento des
   preuves vivantes (RECHERCHE-PALIERS.md §4.1). Gabarit :
   tpl/v2/proto-pourquoi.php ; script : proto-pourquoi.js. Préfixe pp-.
   Noir et blanc, un seul accent (le violet assombri de cmp2, 5,05:1 sur
   blanc), aucune ombre douce, aucun dégradé pastel. Mouvement forcé sur le
   site (DA du 10/10) : rien n'est coupé en mouvement réduit, rien ne clignote.
   Sans JS : tout est posé, lisible ; le guide et les paliers marchent (:has).
   ===================================================================== */

/* Toute variable du prototype porte le préfixe pp- : un @property enregistre
   un nom pour TOUTE la page (un --g en <length> cassait le --g, nombre, de la
   scène du zoom de v2.css). */
@property --pp-n { syntax: "<number>"; inherits: true; initial-value: 4; }
@property --pp-r { syntax: "<number>"; inherits: true; initial-value: .8; }
@property --pp-g { syntax: "<length>"; inherits: true; initial-value: 12px; }

.pp {
  --pp-acc: #992CFF;          /* 5,05:1 sur blanc */
  --pp-acc-clair: #C08AFF;    /* sur le noir de la tuile 01 : 7,9:1 */
  --pp-faible: #666666;       /* petit texte sur le papier : 5,0:1 sur #F5F5F5 */
  --pp-courbe: cubic-bezier(.22, 1, .36, 1);
  --pp-rayon: 24px;
  padding: clamp(88px, 13vh, 150px) 0;
  background: var(--blanc);
}
.pp-wrap { --col: 1200px; }
.pp-tete { max-width: 820px; }
.pp-sub { max-width: 38em; margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--gris-f); }
/* 11/10 (Théo) : le titre sur une ligne, sans italique, pour l'impact ; le
   chapeau plus court, plus grand, plus noir. Au téléphone le titre se replie
   (une ligne y serait illisible). */
.pp-tete:has(.pp-titre) { max-width: none; }
@media (min-width: 900px) { .pp-titre { white-space: nowrap; font-size: min(var(--d2), 4.6vw); } }
.pp-tete:has(.pp-titre) .pp-sub { margin-top: 22px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--noir); max-width: 32em; }

/* ---- La grille ----------------------------------------------------------- */
.pp-bento { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .pp-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .pp-t1 { grid-column: span 5; }
  .pp-t2 { grid-column: span 7; }
  .pp-t3 { grid-column: span 7; }
  .pp-t4 { grid-column: span 5; }
}

.pp-tuile {
  position: relative; isolation: isolate; min-width: 0;
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(20px, 2.3vw, 30px);
  background: var(--papier); color: var(--encre);
  border-radius: var(--pp-rayon); overflow: hidden;
}
.pp-tuile--noir { background: #0B0B0B; color: #FFFFFF; }

/* La ligne de lumière : un filet qui s'allume sous le pointeur, sur le bord
   seulement (masque), à la manière de Resend. Le pointeur pose --px / --py. */
.pp-tuile::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: radial-gradient(360px circle at var(--px, 50%) var(--py, 0%), rgba(0,0,0,.42), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s var(--pp-courbe);
}
.pp-tuile--noir::after { background: radial-gradient(360px circle at var(--px, 50%) var(--py, 0%), rgba(255,255,255,.55), transparent 70%); }
.pp-tuile:hover::after { opacity: 1; }

/* L'entrée : chaque tuile à son tour. Seulement si le script a pris la main
   (.pp-pret) : sans lui, tout est posé. */
.pp.pp-pret .pp-tuile { opacity: 0; transform: translateY(28px) scale(.985); }
.pp.pp-pret .pp-tuile.is-vu {
  opacity: 1; transform: none;
  transition: opacity .8s var(--pp-courbe) calc(var(--k, 0) * 110ms), transform 1s var(--pp-courbe) calc(var(--k, 0) * 110ms);
}

.pp-texte { position: relative; }
.pp-n { display: block; font: 500 12px/1 var(--font-body); letter-spacing: .14em; color: var(--pp-faible); font-variant-numeric: tabular-nums; }
.pp-tuile--noir .pp-n { color: #A3A3A3; }
.pp-h {
  margin-top: 14px; font-family: var(--f-titre); font-weight: 800; font-stretch: 125%;
  font-size: clamp(21px, 1.75vw, 25px); line-height: 1.1; letter-spacing: -.02em; color: inherit; text-wrap: balance;
}
.pp-p { margin-top: 8px; max-width: 34em; font-size: 15.5px; line-height: 1.5; color: var(--gris-f); text-wrap: pretty; }
.pp-tuile--noir .pp-p { color: #B5B5B5; }
.pp-pied { margin-top: -6px; font-size: 12.5px; line-height: 1.45; color: var(--pp-faible); text-wrap: pretty; }

/* Les commandes segmentées (radios) : une pilule qui glisse sous le choix
   (posée par le script) ; sans script, le libellé coché est plein. */
.pp-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.pp-seg {
  position: relative; display: inline-flex; padding: 3px; gap: 0;
  background: #EBEBEB; border-radius: 999px; max-width: 100%;
}
.pp-seg label {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px;
  font: 500 14px/1 var(--font-body); color: #3D3D3D; white-space: nowrap; cursor: pointer;
  transition: color .35s var(--pp-courbe), background-color .35s var(--pp-courbe);
}
.pp-seg label:hover { color: var(--noir); }
.pp-seg input:checked + label { background: var(--noir); color: var(--blanc); }
.pp-seg input:focus-visible + label { outline: 2px solid var(--noir); outline-offset: 2px; }
.pp-seg .pp-seg-glisse { display: none; }
.pp-seg.has-glisse input:checked + label { background: transparent; }
.pp-seg.has-glisse .pp-seg-glisse {
  display: block; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0;
  border-radius: 999px; background: var(--noir);
  transform: translateX(var(--gl, 3px)); width: var(--gw, 0px);
  transition: transform .5s var(--pp-courbe), width .5s var(--pp-courbe);
}
.pp-seg.has-glisse.is-net .pp-seg-glisse { transition: none; }

/* ==== 01. Le journal des versions (tuile noire) =========================== */
.pp-log { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.pp-log-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-log-v { display: flex; flex-direction: column; gap: 8px; }
.pp-log-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #A3A3A3; }
.pp-odo {
  display: inline-block; min-width: 4.3ch;
  font-family: var(--f-titre); font-weight: 800; font-stretch: 125%;
  font-size: clamp(54px, 5.6vw, 84px); line-height: .9; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; color: #FFFFFF;
}
.pp-odo.is-tic { animation: pp-tic .16s var(--pp-courbe); }
@keyframes pp-tic { from { transform: translateY(14%); opacity: .55; } to { transform: none; opacity: 1; } }
.pp-live {
  display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 13px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: 13px; color: #E6E6E6;
}
.pp-pouls { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-acc-clair); }
.pp-pouls::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--pp-acc-clair);
  animation: pp-pouls 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pp-pouls { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.pp-log-range { font-size: 14px; line-height: 1.45; color: #B5B5B5; }

.pp-log-fen {
  position: relative; flex: 1; min-height: 230px; max-height: 300px; overflow-y: auto;
  -webkit-mask-image: linear-gradient(transparent 0, #000 16%, #000 80%, transparent 100%);
          mask-image: linear-gradient(transparent 0, #000 16%, #000 80%, transparent 100%);
  border-radius: 6px; overscroll-behavior: contain;
}
.pp-log-fen:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
html.js .pp-log-fen { scrollbar-width: none; }
html.js .pp-log-fen::-webkit-scrollbar { display: none; }
html:not(.js) .pp-dup { display: none; }
.pp-log-liste { list-style: none; margin: 0; padding: 0; }
.pp-log-liste li {
  display: grid; grid-template-columns: 4.6em 3.6em minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 1.4;
  transition: color .3s;
}
.pp-lv { font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.pp-ld { color: #8F8F8F; font-variant-numeric: tabular-nums; font-size: 13px; }
.pp-ll { color: #CFCFCF; }
.pp-log-liste li.is-courante .pp-lv { color: var(--pp-acc-clair); }
.pp-log-liste li:hover .pp-ll { color: #FFFFFF; }
.pp-log-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pp-log-pied p { font-size: 13px; line-height: 1.45; color: #B5B5B5; max-width: 30em; }
.pp-pause {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: transparent; color: #FFFFFF;
  font: 500 13px/1 var(--font-body); cursor: pointer; transition: border-color .3s, background-color .3s;
}
.pp-pause[hidden] { display: none; }
.pp-pause:hover { border-color: #FFFFFF; }
.pp-pause:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.pp-pause-i { width: 10px; height: 10px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.pp-pause.is-arret .pp-pause-i { background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }

/* ==== 02. L'éditeur ======================================================= */
.pp-ed {
  --pp-r: .8; --pp-g: 12px;
  position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0;
  background: #FFFFFF; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden;
  container-type: inline-size;
  transition: --pp-n .7s var(--pp-courbe), --pp-r .7s var(--pp-courbe), --pp-g .5s var(--pp-courbe);
}
/* Les valeurs des réglages, sans script : le CSS lit l'option cochée. */
.pp-ed:has(#pp-ratio option[value="portrait_3_4"]:checked)  { --pp-r: .75; }
.pp-ed:has(#pp-ratio option[value="portrait_2_3"]:checked)  { --pp-r: .6667; }
.pp-ed:has(#pp-ratio option[value="square"]:checked)        { --pp-r: 1; }
.pp-ed:has(#pp-ratio option[value="landscape_5_4"]:checked) { --pp-r: 1.25; }
.pp-ed:has(#pp-ratio option[value="landscape_4_3"]:checked) { --pp-r: 1.3333; }
.pp-ed:has(#pp-ratio option[value="landscape_3_2"]:checked) { --pp-r: 1.5; }
.pp-ed:has(#pp-gap option[value="tight"]:checked)    { --pp-g: 3px; }
.pp-ed:has(#pp-gap option[value="generous"]:checked) { --pp-g: 26px; }

.pp-ed-barre {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px; border-bottom: 1px solid var(--hair); background: #FAFAFA;
}
.pp-ed-pts { display: flex; gap: 6px; }
.pp-ed-pts i { width: 9px; height: 9px; border-radius: 50%; background: #DADADA; }
.pp-ed-fil { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--hair); font-size: 12px; color: #3D3D3D; }
.pp-ed-fil::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.pp-ed-ex { justify-self: end; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-faible); white-space: nowrap; }

.pp-ed-corps { flex: 1; display: grid; grid-template-columns: minmax(200px, 238px) minmax(0, 1fr); min-height: 380px; }
.pp-ed-panneau { position: relative; z-index: 1; padding: 10px 12px 14px; border-right: 1px solid var(--hair); background: #FCFCFC; }
.pp-ed-section { display: flex; align-items: center; gap: 8px; padding: 8px 4px 12px; font-size: 13px; font-weight: 600; color: var(--noir); border-bottom: 1px solid var(--hair-2); }
.pp-ed-chev { width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 3px; }
.pp-f { position: relative; padding: 10px 6px 12px; border-radius: 10px; transition: background-color .35s var(--pp-courbe); }
.pp-f::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--pp-acc); transform: scaleY(0); transition: transform .4s var(--pp-courbe); }
.pp-f.is-actif { background: rgba(153, 44, 255, .07); }
.pp-f.is-actif::before { transform: scaleY(1); }
.pp-f label, .pp-f-tete { font-size: 13px; line-height: 1.3; font-weight: 500; color: #1A1A1A; }
.pp-f > label { display: block; margin-bottom: 6px; }
.pp-f-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-f-val { min-width: 2.2em; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--hair); background: #FFFFFF; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }

.pp-range {
  --fill: 33.33%;
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.pp-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--noir) var(--fill), #E2E2E2 var(--fill)); }
.pp-range::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--noir) var(--fill), #E2E2E2 var(--fill)); }
.pp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid var(--noir); transition: transform .25s var(--pp-courbe); }
.pp-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid var(--noir); }
.pp-range:active::-webkit-slider-thumb, .pp-f.is-presse .pp-range::-webkit-slider-thumb { transform: scale(1.18); }
.pp-range:focus-visible { outline: none; }
.pp-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--noir); }
.pp-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--noir); }

.pp-select { position: relative; display: block; }
.pp-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid #3D3D3D; border-bottom: 1.5px solid #3D3D3D; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pp-select select {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 44px; padding: 0 34px 0 12px;
  border: 1px solid #CFCFCF; border-radius: 10px; background: #FFFFFF; color: var(--noir);
  font: 400 14px/1.2 var(--font-body); text-overflow: ellipsis; cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}
.pp-select select:hover { border-color: #8F8F8F; }
.pp-select select:focus-visible { outline: 2px solid var(--noir); outline-offset: 1px; }
.pp-f.is-presse select { border-color: var(--pp-acc); box-shadow: 0 0 0 3px rgba(153, 44, 255, .16); }

.pp-f--chk { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.pp-chk {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 6px;
  border: 1.5px solid #8F8F8F; background: #FFFFFF; display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.pp-chk::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .3s var(--pp-courbe); }
.pp-chk:checked { background: var(--noir); border-color: var(--noir); }
.pp-chk:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.pp-chk:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.pp-f--chk label { flex: 1; display: flex; align-items: center; min-height: 44px; margin: 0; cursor: pointer; }

.pp-ed-main {
  margin: 12px 6px 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.35; font-weight: 500;
  color: var(--pp-acc); background: rgba(153, 44, 255, .07);
  animation: pp-monte .5s var(--pp-courbe);
}
@keyframes pp-monte { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pp-ed-apercu { position: relative; min-width: 0; overflow: hidden; background: #FFFFFF; display: flex; flex-direction: column; }
.pp-ed-page { flex: 1; padding: 18px 18px 0; display: flex; flex-direction: column; gap: 14px; }
/* Les sections voisines, en squelette : on est dans une page, la section
   choisie est cernée comme dans l'éditeur, avec son nom. */
.pp-ed-sk { position: relative; border-radius: 4px; }
.pp-ed-sk--haut { flex: 1 1 86px; min-height: 86px; max-height: 210px; background: #F2F2F2; padding: 18px; display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; }
.pp-ed-sk i { display: block; height: 7px; border-radius: 4px; background: #DCDCDC; width: 38%; }
.pp-ed-sk i + i { width: 24%; }
.pp-ed-sk b { position: absolute; right: 18px; bottom: 18px; width: 64px; height: 20px; border-radius: 999px; background: #DCDCDC; }
.pp-ed-sk--bas { display: flex; flex-direction: column; gap: 7px; padding: 6px 4px 18px; }
.pp-ed-sk--bas i { width: 52%; background: #EBEBEB; }
.pp-ed-sk--bas i + i { width: 34%; }
.pp-ed-sel { position: relative; padding: 14px 12px 12px; margin: 0 -6px; border-radius: 6px; outline: 1.5px solid var(--pp-acc); outline-offset: -1.5px; }
.pp-ed-tag { position: absolute; left: -1px; top: -21px; padding: 3px 8px; border-radius: 5px 5px 5px 0; background: var(--pp-acc); color: #FFFFFF; font: 500 11px/1.3 var(--font-body); }
.pp-ed-h { font: 600 14px/1.2 var(--font-body); color: var(--noir); margin-bottom: 12px; letter-spacing: -.01em; }
.pp-rail { display: flex; gap: var(--pp-g); align-items: flex-start; }
/* Chaque carte est un conteneur : son nom rapetisse avec elle (8 colonnes
   au téléphone), l'ellipse ne reste qu'en dernier recours. */
.pp-carte { flex: 0 0 calc((100% - (var(--pp-n) - 1) * var(--pp-g)) / var(--pp-n)); min-width: 0; container-type: inline-size; }
.pp-carte-m { aspect-ratio: var(--pp-r); display: grid; place-items: center; background: #F2F2F2; border-radius: 3px; overflow: hidden; }
.pp-carte-m img { width: 82%; height: 82%; object-fit: contain; }
.pp-carte-n { margin-top: 8px; font-size: clamp(9px, 17cqi, 12px); line-height: 1.3; font-weight: 500; color: var(--noir); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-carte-p { font-size: clamp(9px, 17cqi, 12px); line-height: 1.3; color: #4D4D4D; max-height: 1.4em; overflow: hidden; transition: max-height .45s var(--pp-courbe), opacity .3s, transform .45s var(--pp-courbe); }
.pp-ed:has(#pp-price:not(:checked)) .pp-carte-p { max-height: 0; opacity: 0; transform: translateY(-4px); }

/* Le pointeur fantôme : il joue les réglages tant que le visiteur ne touche
   à rien ; le premier geste du visiteur l'efface pour de bon. */
.pp-fantome {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  transform: translate(var(--fx, 70%), var(--fy, 70%)); opacity: 0;
  transition: transform .8s var(--pp-courbe), opacity .4s;
}
.pp-fantome svg { display: block; transition: transform .2s var(--pp-courbe); transform-origin: 5px 3px; }
.pp-ed.is-jeu .pp-fantome { opacity: 1; }
.pp-ed.is-glisse .pp-fantome { transition: transform .26s cubic-bezier(.3, .7, .4, 1), opacity .4s; }
.pp-ed.is-clic .pp-fantome svg { transform: scale(.82); }

/* Au téléphone, l'aperçu passe au-dessus et se resserre (les squelettes
   voisins se réduisent à un filet) : la glissière des colonnes vient juste
   sous la rangée, le geste et son effet tiennent ensemble dans l'écran. */
@container (max-width: 560px) {
  .pp-ed-corps { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pp-ed-apercu { order: -1; border-bottom: 1px solid var(--hair); }
  .pp-ed-panneau { border-right: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; padding-top: 4px; }
  .pp-ed-section, [data-pp-f="cols"], .pp-ed-main { grid-column: 1 / -1; }
  .pp-ed-section { padding: 6px 4px 8px; }
  .pp-ed-page { padding: 30px 14px 12px; gap: 10px; }
  .pp-ed-sk--haut { flex: none; min-height: 0; height: 26px; padding: 0 12px; justify-content: center; }
  .pp-ed-sk--haut i + i, .pp-ed-sk--haut b { display: none; }
  .pp-ed-sk--bas { display: none; }
  .pp-ed-ex { display: none; }
  .pp-ed-barre { grid-template-columns: auto 1fr; }
}
/* Très étroit (320 à 360 de fenêtre) : les listes passent sur une colonne
   pleine largeur, leurs valeurs entières (« Portrait 4:5 », « Regular »). */
@container (max-width: 300px) {
  .pp-ed-panneau { grid-template-columns: minmax(0, 1fr); }
  .pp-select select { padding: 0 30px 0 10px; }
}

/* ==== 03. Le guide des tailles ============================================ */
.pp-sg { flex: 1; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; padding: 14px; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 14px; container-type: inline-size; }
.pp-sg-cmd { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-sg-corps { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.pp-sg-scene { position: relative; width: min(100%, 340px); aspect-ratio: 5 / 6; justify-self: center; }
.pp-sg-fig {
  position: absolute; inset: 0; margin: 0;
  transition: opacity .5s var(--pp-courbe), transform .7s var(--pp-courbe), visibility 0s;
}
.pp-sg-fig img { width: 100%; height: 100%; object-fit: contain; }
.pp-sg-ex {
  position: absolute; left: 0; bottom: 0; padding: 5px 9px; border-radius: 999px; background: #F2F2F2;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #4D4D4D;
}
.pp-mk {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  padding: 5px 8px; border-radius: 999px; background: var(--noir); color: var(--blanc);
  font: 600 11.5px/1 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color .3s var(--pp-courbe), transform .35s var(--pp-courbe);
}
.pp-mk.is-chaud { background: var(--pp-acc); transform: translate(-50%, -50%) scale(1.12); }

/* Une valeur roule : tous ses états sont empilés dans la même case (la
   largeur ne bouge pas), seul celui de la taille et de l'unité cochées se
   voit ; les autres sont cachés aux lecteurs d'écran aussi (visibility). */
.pp-roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.pp-v {
  grid-area: 1 / 1; text-align: right;
  transition: opacity .32s var(--pp-courbe), transform .5s var(--pp-courbe), filter .32s, visibility 0s;
}
.pp-mk .pp-v { text-align: center; }
.pp-sg:has(#pp-s-S:checked)  .pp-v:not([data-s="S"]),
.pp-sg:has(#pp-s-M:checked)  .pp-v:not([data-s="M"]),
.pp-sg:has(#pp-s-L:checked)  .pp-v:not([data-s="L"]),
.pp-sg:has(#pp-s-XL:checked) .pp-v:not([data-s="XL"]),
.pp-sg:has(#pp-u-in:checked) .pp-v:not([data-u="in"]),
.pp-sg:has(#pp-u-cm:checked) .pp-v:not([data-u="cm"]) {
  opacity: 0; transform: translateY(75%); filter: blur(2px); visibility: hidden;
  transition: opacity .25s, transform .4s var(--pp-courbe), filter .25s, visibility 0s .4s;
}
.pp-sg:has(#pp-g-tee:checked)   .pp-sg-fig:not([data-g="tee"]),
.pp-sg:has(#pp-g-jeans:checked) .pp-sg-fig:not([data-g="jeans"]),
.pp-sg:has(#pp-g-dress:checked) .pp-sg-fig:not([data-g="dress"]) {
  opacity: 0; transform: translateY(10px) scale(.96); visibility: hidden;
  transition: opacity .3s, transform .5s var(--pp-courbe), visibility 0s .5s;
}
.pp-sg:has(#pp-g-tee:checked)   .pp-sg-liste:not([data-g="tee"]),
.pp-sg:has(#pp-g-jeans:checked) .pp-sg-liste:not([data-g="jeans"]),
.pp-sg:has(#pp-g-dress:checked) .pp-sg-liste:not([data-g="dress"]) { display: none; }

.pp-sg-droite { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-sg-droite .pp-seg { display: flex; }
.pp-sg-droite .pp-seg label { flex: 1; padding: 0 8px; }
.pp-sg-liste { margin: 0; }
.pp-sg-ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--hair-2); font-size: 15px; line-height: 1.3;
  transition: background-color .3s;
}
.pp-sg-ligne:first-child { border-top: 1px solid var(--hair-2); }
.pp-sg-ligne dt { color: #4D4D4D; display: flex; align-items: center; gap: 8px; }
.pp-sg-ligne dt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-acc); transform: scale(0); transition: transform .3s var(--pp-courbe); }
.pp-sg-ligne dd { margin: 0; font-weight: 600; color: var(--noir); font-variant-numeric: tabular-nums; }
.pp-sg-ligne.is-chaud dt { color: var(--noir); }
.pp-sg-ligne.is-chaud dt::before { transform: scale(1); }

@container (max-width: 520px) {
  .pp-sg-corps { grid-template-columns: minmax(0, 1fr); }
  .pp-sg-scene { width: min(100%, 260px); }
  .pp-sg-cmd { justify-content: flex-start; }
  /* Robe : à cette taille la cote Length (à droite, au niveau des hanches)
     touchait celle des hanches ; elle descend le long de la jupe. */
  .pp-sg-fig[data-g="dress"] .pp-mk[data-m="length"] { top: 64%; left: 76%; }
  /* Et la manche monte d'un cran : à 320 elle effleurait la poitrine. */
  .pp-sg-fig[data-g="dress"] .pp-mk[data-m="sleeve"] { top: 16%; left: 27%; }
}

/* 11/10 (Théo) : la vue « Chart », le tableau complet des tailles, à côté du
   dessin. Sans script : deux radios et :has, comme le reste du guide. */
.pp-sg-droits { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-sg-tables { display: none; }
.pp-sg:has(#pp-v-table:checked) .pp-sg-corps { display: none; }
.pp-sg:has(#pp-v-table:checked) .pp-sg-tables { display: grid; align-content: center; flex: 1; overflow-x: auto; animation: pp-table-in .45s var(--pp-courbe); }
@keyframes pp-table-in { from { opacity: 0; translate: 0 8px; } }
.pp-sg-table { display: none; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pp-sg:has(#pp-g-tee:checked)   .pp-sg-table[data-g="tee"],
.pp-sg:has(#pp-g-jeans:checked) .pp-sg-table[data-g="jeans"],
.pp-sg:has(#pp-g-dress:checked) .pp-sg-table[data-g="dress"] { display: table; }
.pp-sg-table th, .pp-sg-table td { padding: 12px 10px; text-align: right; border-bottom: 1px solid var(--hair-2); font-size: 15px; white-space: nowrap; }
.pp-sg-table thead th { font-weight: 600; color: var(--noir); border-bottom-color: var(--noir); }
.pp-sg-table tbody th { text-align: left; font-weight: 400; color: #4D4D4D; }
.pp-sg-table td { font-weight: 600; color: var(--noir); }
.pp-sg:has(#pp-s-S:checked)  .pp-sg-table :is(th, td):nth-child(2),
.pp-sg:has(#pp-s-M:checked)  .pp-sg-table :is(th, td):nth-child(3),
.pp-sg:has(#pp-s-L:checked)  .pp-sg-table :is(th, td):nth-child(4),
.pp-sg:has(#pp-s-XL:checked) .pp-sg-table :is(th, td):nth-child(5) { background: rgba(153, 44, 255, .06); color: var(--pp-acc); }
.pp-sg:has(#pp-u-in:checked) .pp-tv[data-u="cm"], .pp-sg:has(#pp-u-cm:checked) .pp-tv[data-u="in"] { display: none; }
@container (max-width: 420px) { .pp-sg-table th, .pp-sg-table td { padding: 10px 6px; font-size: 13px; } }

/* ==== 04. Sans app payante ================================================ */
.pp-apps { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 14px; container-type: inline-size; }
.pp-apps .pp-seg { display: flex; width: 100%; margin-bottom: 6px; }
.pp-apps .pp-seg label { flex: 1; min-width: 0; padding: 0 6px; font-size: 13px; }
/* Étroit : « GRID / CORE / STUDIO », comme la barre des paliers ; le
   « GRID » de tête reste lu par les lecteurs d'écran (masqué à l'œil). */
@container (max-width: 340px) {
  .pp-apps .pp-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* 11/10 (Théo : « pas assez de comparaison », « entre GRID CORE et GRID
   STUDIO rien ne change », « un truc de couleur ») : chaque palier ne montre
   que ce qu'il AJOUTE ; en face, le prix mensuel de l'app qu'il remplace,
   barré, et « In the theme » à l'accent. Sans script : radios + :has. */
.pp-apps-tete { display: none; margin: 4px 4px 2px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-faible); }
.pp-apps-liste { list-style: none; margin: 0; padding: 0; }
.pp-app {
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 4px; border-bottom: 1px solid var(--hair-2);
}
.pp-apps:has(#pp-p-grid:checked)        :is(.pp-apps-tete[data-p="grid"], .pp-app[data-rang="1"]),
.pp-apps:has(#pp-p-grid-core:checked)   :is(.pp-apps-tete[data-p="grid-core"], .pp-app[data-rang="2"]),
.pp-apps:has(#pp-p-grid-studio:checked) :is(.pp-apps-tete[data-p="grid-studio"], .pp-app[data-rang="3"]) { display: flex; }
.pp-apps:has(#pp-p-grid:checked) .pp-apps-tete[data-p="grid"],
.pp-apps:has(#pp-p-grid-core:checked) .pp-apps-tete[data-p="grid-core"],
.pp-apps:has(#pp-p-grid-studio:checked) .pp-apps-tete[data-p="grid-studio"] { display: block; }
.pp-app { animation: pp-app-in .5s var(--pp-courbe) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes pp-app-in { from { opacity: 0; translate: 0 10px; } }
.pp-app:last-child { border-bottom: 0; }
.pp-app-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-app-n { font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--noir); }
.pp-app-c { font-size: 12.5px; line-height: 1.35; color: var(--pp-faible); }
.pp-app-etat { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.pp-app-prix { font-size: 13px; color: #8A8A8A; text-decoration-thickness: 1.5px; text-decoration-color: #8A8A8A; font-variant-numeric: tabular-nums; }
.pp-app-oui { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--pp-acc); }
.pp-coche {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pp-acc); color: #FFFFFF;
}
.pp-coche svg { width: 12px; height: 12px; }
@supports not selector(:has(*)) { .pp-app { display: flex; } }
/* Étroit (téléphone de 320) : la coche seule dit « dans le thème », le nom
   de la fonction garde la largeur. */
@container (max-width: 300px) {
  .pp-app-oui-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pp-app { gap: 10px; }
}

/* ==== L'appel ============================================================= */
.pp-cta {
  margin-top: clamp(28px, 4vw, 44px); padding-top: 26px; border-top: 1px solid var(--filet);
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
}
.pp-cta-l { font-family: var(--f-titre); font-weight: 800; font-stretch: 125%; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; letter-spacing: -.02em; color: var(--noir); text-wrap: balance; }
.pp-cta-b { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-cta .bt span { transition: transform .35s var(--pp-courbe); }
.pp-cta .bt:hover span { transform: translateY(3px); }

@media (max-width: 599px) {
  .pp-sub { font-size: 17px; }
  .pp-tuile { border-radius: 20px; }
  .pp-log-fen { min-height: 210px; max-height: 240px; }
  .pp-log-pied { flex-direction: column; align-items: flex-start; }
  .pp-cta-b { width: 100%; }
  .pp-cta-b .bt { flex: 1 1 100%; }
  .pp-seg label { padding: 0 13px; }
}

/* ==== 02. L'éditeur : le sélecteur de pages (11/10) =========================
   Bloc à part, propre à la tuile 02. La pilule « Home page » devient un vrai
   sélecteur de gabarit (bouton + menu, comme celui de Shopify) : Home page
   (Product rail), Product page (section Product), Collection page (section
   Collection). Sans script : la pilule reste une étiquette, la page d'accueil
   seule est montrée, et les réglages des autres pages se lisent en CSS (:has)
   dès qu'elles sont affichées. */
@property --pp-cn { syntax: "<number>"; inherits: true; initial-value: 4; }

/* La pilule et son menu */
.pp-ed-pages { position: relative; justify-self: center; min-width: 0; }
.pp-ed-fil[hidden], .pp-ed-menu[hidden], .pp-ed-corps[hidden] { display: none; }
.pp-ed-fil--bt {
  min-height: 30px; font: inherit; font-size: 12px; font-weight: 500; color: #1A1A1A; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.pp-ed-fil--bt:hover { border-color: #8F8F8F; }
.pp-ed-fil--bt:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.pp-ed-fil--bt::after { transition: transform .3s var(--pp-courbe); }
.pp-ed-fil--bt[aria-expanded="true"] { border-color: var(--pp-acc); background: #FFFFFF; }
.pp-ed-fil--bt[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }

.pp-ed-menu {
  position: absolute; z-index: 7; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; min-width: 236px; max-width: calc(100cqi - 24px);
  list-style: none; margin: 0; padding: 6px; border-radius: 12px;
  background: #FFFFFF; border: 1px solid #CFCFCF;
  animation: pp-ed-menu .22s var(--pp-courbe);
}
@keyframes pp-ed-menu { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pp-ed-menu-i {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px 0 32px; position: relative;
  border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer;
  font: 500 13px/1.25 var(--font-body); color: #1A1A1A;
}
.pp-ed-menu-i::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 5px; margin-top: -4px;
  border-left: 1.75px solid var(--pp-acc); border-bottom: 1.75px solid var(--pp-acc);
  transform: rotate(-45deg) scale(0); transition: transform .25s var(--pp-courbe);
}
.pp-ed-menu-i[aria-checked="true"] { font-weight: 600; }
.pp-ed-menu-i[aria-checked="true"]::before { transform: rotate(-45deg) scale(1); }
.pp-ed-menu-i:hover, .pp-ed-menu-i:focus-visible { background: #F2F2F2; outline: none; }
.pp-ed-menu-i:focus-visible { box-shadow: inset 0 0 0 2px var(--noir); }
.pp-ed-menu-s { margin-left: auto; padding-left: 14px; font-size: 11.5px; font-weight: 400; color: var(--pp-faible); white-space: nowrap; }

/* L'arrivée d'une page : panneau puis aperçu, courts. */
.pp-ed-corps.is-entre .pp-ed-panneau > * { animation: pp-monte .38s var(--pp-courbe) backwards; }
.pp-ed-corps.is-entre .pp-ed-panneau > :nth-child(2) { animation-delay: .03s; }
.pp-ed-corps.is-entre .pp-ed-panneau > :nth-child(3) { animation-delay: .06s; }
.pp-ed-corps.is-entre .pp-ed-panneau > :nth-child(4) { animation-delay: .09s; }
.pp-ed-corps.is-entre .pp-ed-panneau > :nth-child(5) { animation-delay: .12s; }
.pp-ed-corps.is-entre .pp-ed-apercu { animation: pp-ed-vue .45s var(--pp-courbe) backwards; }
@keyframes pp-ed-vue { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* Le badge de palier, pour un réglage qui n'est pas du palier GRID */
.pp-f-palier {
  display: inline-block; margin-left: 4px; padding: 2px 6px 1px; border-radius: 999px; vertical-align: 1px;
  border: 1px solid var(--pp-acc); color: var(--pp-acc); font-size: 9.5px; line-height: 1.2; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
}

/* Les aperçus des deux pages ne pèsent pas sur la hauteur : la colonne des
   réglages la donne, l'aperçu s'y loge et rogne (on y devine la suite). */
.pp-ed-corps--abs .pp-ed-page { position: absolute; inset: 0; padding: 14px 18px 16px; gap: 12px; }
.pp-ed-sk--fil { flex: none; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: #F2F2F2; }
.pp-ed-sk--fil i { width: 22%; }
.pp-ed-sk--fil b { position: static; width: 42px; height: 8px; }
.pp-ed-corps--abs .pp-ed-sel { flex: 1; min-height: 0; margin: 10px -6px 0; }

/* ---- La fiche produit ------------------------------------------------------ */
.pp-pf { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; padding: 12px; }
.pp-pg { position: relative; min-height: 0; margin: -4px; padding: 4px; overflow: hidden; container-type: inline-size; }
.pp-pg-fen {
  display: flex; flex-direction: column; gap: 6px; overflow: hidden; border-radius: 3px;
  max-height: calc(375cqi + 12px); outline: 1px solid transparent; outline-offset: 3px;
  transition: max-height .55s var(--pp-courbe), outline-color .35s;
}
.pp-pg-m { flex: none; aspect-ratio: .8; display: grid; place-items: center; background: #F2F2F2; border-radius: 3px; overflow: hidden; }
.pp-pg-m img { width: 82%; height: 82%; object-fit: contain; }
.pp-pg-m:nth-child(2) img { transform: scaleX(-1); }
.pp-pg-m:nth-child(3) img { width: 130%; height: 130%; transform: translateY(16%); }
/* « One frame » : un seul cadre, les images y glissent de côté (la direction
   par défaut du thème, « Sideways ») ; les points disent où l'on est. */
.pp-pg-ind {
  position: absolute; left: 50%; top: calc(110cqi + 16px); display: flex; gap: 5px; align-items: center;
  transform: translate(-50%, -4px); opacity: 0; transition: opacity .3s, transform .45s var(--pp-courbe);
}
.pp-pg-ind i { width: 5px; height: 5px; border-radius: 50%; background: #BDBDBD; }
.pp-pg-ind i:first-child { width: 16px; border-radius: 3px; background: var(--noir); }
.pp-pg-fen { animation: pp-pg-a .5s var(--pp-courbe); }
.pp-ed:has(#pp-p-gal option[value="frame"]:checked) .pp-pg-fen { flex-direction: row; gap: 4px; max-height: 110cqi; outline-color: #DCDCDC; animation-name: pp-pg-b; }
.pp-ed:has(#pp-p-gal option[value="frame"]:checked) .pp-pg-m { flex: 0 0 88%; }
.pp-ed:has(#pp-p-gal option[value="frame"]:checked) .pp-pg-ind { opacity: 1; transform: translate(-50%, 0); }
@keyframes pp-pg-a { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pp-pg-b { from { opacity: .35; transform: scale(.96); } to { opacity: 1; transform: none; } }

.pp-pi { min-width: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; padding-top: 4px; }
.pp-pi > * { max-width: 100%; }
.pp-pi-n { font: 600 clamp(11px, 8cqi, 15px)/1.2 var(--font-body); letter-spacing: -.01em; color: var(--noir); }
.pp-pi-p {
  margin-top: 4px; font-size: clamp(10px, 6.5cqi, 13px); line-height: 1.3; color: #3D3D3D; max-height: 1.4em; overflow: hidden;
  transition: max-height .4s var(--pp-courbe), opacity .25s, margin .4s var(--pp-courbe);
}
.pp-pi-k { margin-top: 14px; font-size: clamp(9px, 5.5cqi, 11px); letter-spacing: .06em; text-transform: uppercase; color: var(--pp-faible); }
.pp-pi-t { display: flex; gap: 4px; margin-top: 6px; }
.pp-pi-t span { min-width: clamp(20px, 15cqi, 28px); padding: 4px 0; text-align: center; border: 1px solid #DCDCDC; border-radius: 4px; font-size: clamp(9px, 5.5cqi, 11px); line-height: 1.2; color: #3D3D3D; }
.pp-pi-t .is-on { border-color: var(--noir); color: var(--noir); font-weight: 600; }
.pp-pi-g {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: clamp(9.5px, 5.8cqi, 11.5px); line-height: 1.3; color: var(--noir);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
  max-height: 2em; overflow: hidden; transition: max-height .4s var(--pp-courbe), opacity .25s, margin .4s var(--pp-courbe), transform .4s var(--pp-courbe);
}
.pp-pi-regle { flex: none; width: 14px; height: 7px; border: 1.25px solid currentColor; border-radius: 1px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3.5px) 1.5px 0 / calc(100% - 3px) 45% no-repeat; }
.pp-ed:has(#pp-p-sg:not(:checked)) .pp-pi-g { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-4px); }

.pp-pi-b {
  align-self: stretch; display: flex; justify-content: center; align-items: center; min-height: 32px; margin-top: 14px; padding: 3px 8px;
  border: 1.5px solid var(--noir); border-radius: 6px; background: var(--noir); color: #FFFFFF; text-align: center;
  flex-wrap: wrap; font-size: clamp(10px, 6cqi, 12px); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden;
  transition: background-color .3s, color .3s, border-color .3s, padding .45s var(--pp-courbe);
}
.pp-pi-b > span:first-child { text-decoration: underline transparent; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color .3s; }
.pp-pi-bp { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; vertical-align: bottom; transition: max-width .45s var(--pp-courbe), opacity .3s; }
.pp-ed:has(#pp-p-btn option[value="outline"]:checked) .pp-pi-b { background: transparent; color: var(--noir); }
.pp-ed:has(#pp-p-btn option[value="underline"]:checked) .pp-pi-b { background: transparent; color: var(--noir); border-color: transparent; padding: 0; justify-content: flex-start; }
.pp-ed:has(#pp-p-btn option[value="underline"]:checked) .pp-pi-b > span:first-child { text-decoration-color: currentColor; }
.pp-ed:has(#pp-p-prix option[value="in_button"]:checked) .pp-pi-p { max-height: 0; margin-top: 0; opacity: 0; }
.pp-ed:has(#pp-p-prix option[value="in_button"]:checked) .pp-pi-bp { max-width: 6em; opacity: 1; }
.pp-pi-l { align-self: stretch; display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.pp-pi-l i { display: block; height: 6px; border-radius: 3px; background: #EBEBEB; }
.pp-pi-l i:nth-child(2) { width: 86%; }
.pp-pi-l i:nth-child(3) { width: 58%; }

/* ---- La collection ---------------------------------------------------------- */
.pp-co { display: flex; flex-direction: column; padding: 12px 12px 0; }
.pp-co-h { font: 600 15px/1.2 var(--font-body); letter-spacing: -.01em; color: var(--noir); }
.pp-co-d { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--pp-courbe), opacity .3s, margin .45s var(--pp-courbe); }
.pp-co-d > span { overflow: hidden; min-height: 0; max-width: 36em; font-size: 11.5px; line-height: 1.4; color: #4D4D4D; }
.pp-ed:has(#pp-c-desc:checked) .pp-co-d { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; }
.pp-co-barre {
  display: flex; align-items: center; min-height: 30px; max-height: 30px; margin: 10px 0; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2);
  font-size: 11px; color: #3D3D3D; overflow: hidden;
  transition: max-height .4s var(--pp-courbe), min-height .4s var(--pp-courbe), margin .4s var(--pp-courbe), border-color .3s;
}
.pp-co-nb, .pp-co-tri { white-space: nowrap; transition: opacity .3s, transform .4s var(--pp-courbe); }
.pp-co-tri { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pp-co-tri::after { content: ""; width: 5px; height: 5px; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.pp-ed:has(#pp-c-count:not(:checked)) .pp-co-nb { opacity: 0; transform: translateX(-6px); }
.pp-ed:has(#pp-c-sort:not(:checked)) .pp-co-tri { opacity: 0; transform: translateX(6px); }
.pp-ed:has(#pp-c-count:not(:checked)):has(#pp-c-sort:not(:checked)) .pp-co-barre { min-height: 0; max-height: 0; margin: 4px 0 6px; border-color: transparent; }
.pp-co-grille {
  flex: 1; min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px 8px;
  transition: --pp-cn .55s var(--pp-courbe);
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
.pp-co-carte { flex: 0 0 calc((100% - (var(--pp-cn) - 1) * 8px) / var(--pp-cn) - .1px); }
.pp-co .pp-carte-m { aspect-ratio: .8; }
.pp-co-carte .pp-carte-n { margin-top: 6px; }
.pp-co-p { font-size: clamp(9px, 17cqi, 12px); line-height: 1.3; color: #4D4D4D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Au téléphone : l'aperçu passe au-dessus à hauteur fixe, les listes
   prennent toute la largeur (leurs valeurs sont longues), les cases se
   rangent deux par deux. */
@container (max-width: 560px) {
  .pp-ed-corps--abs .pp-ed-apercu { height: 290px; flex: none; }
  .pp-ed-corps--abs .pp-ed-page { padding: 10px 12px 12px; gap: 8px; }
  .pp-ed-corps--abs .pp-f { grid-column: 1 / -1; }
  .pp-pf { gap: 10px; padding: 10px; }
  .pp-ed-menu { left: 0; transform: none; animation-name: pp-ed-menu-g; }
}
@keyframes pp-ed-menu-g { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@container (max-width: 300px) {
  .pp-ed-corps--abs .pp-ed-apercu { height: 250px; }
  .pp-ed-menu { min-width: 0; width: calc(100cqi - 24px); }
  .pp-ed-menu-s { display: none; }
}
/* ==== fin 02. sélecteur de pages ========================================== */

/* Storyboard du 11/10 : trois tuiles, chacune sur toute la largeur, et un
   lien discret vers le comparatif à la place du double bouton. */
@media (min-width: 1000px) {
  .pp-bento--trois .pp-t2 { grid-column: 1 / -1; }
}
/* Trois tuiles : les numéros (02, 03, 04) ne disent plus une suite. */
.pp-bento--trois .pp-n { display: none; }
.pp-comparer { margin: clamp(28px, 4vw, 44px) 0 0; text-align: center; font-size: 16px; }
.pp-comparer a { color: var(--noir); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: color-mix(in srgb, var(--noir) 35%, transparent); transition: text-decoration-color .3s; }
.pp-comparer a:hover { text-decoration-color: var(--noir); }