/* =====================================================================
   11/10 (?pourquoi=apple) — la tuile 04 « Built in », d'après les grilles
   « Built-in » d'Apple. Gabarit : tpl/v2/proto-builtin.php ; script :
   proto-builtin.js. Préfixe pp-bi-. Langue des tuiles : proto-pourquoi.css
   (--pp-acc, --pp-courbe, .pp-seg, .pp-texte, .pp-pied).
   Sans JS : le palier marche (radios + :has), le compteur roule en CSS, le
   dos de chaque carte est écrit sous sa face. Avec JS (.is-3d) : la carte se
   retourne (survol, appui, Entrée, Espace).
   ===================================================================== */

/* En mode « apple », la tuile 03 et celle-ci tiennent toute la rangée. */
.pp-bento--apple .pp-t3,
.pp-bento--apple .pp-bi { grid-column: 1 / -1; }

/* L'état d'une carte, de 0 (éteinte) à 1 (allumée) : un seul nombre,
   enregistré pour que la transition passe par toutes les valeurs, et dont
   la couleur, l'opacité de l'icône et l'échelle dépendent. */
@property --bi-on { syntax: "<number>"; inherits: true; initial-value: 0; }

.pp-bi { --bi-eteint: #EDEDED; gap: 26px; }

/* ---- La tête : le texte à gauche, le compteur et le palier à droite ----- */
.pp-bi-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px 48px; flex-wrap: wrap; }
.pp-bi-tete .pp-texte { flex: 1 1 320px; }
.pp-bi-h { font-size: clamp(24px, 2.3vw, 34px); }
.pp-bi-cmd { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; min-width: 0; }

.pp-bi-compte {
  display: flex; align-items: center; gap: .3em; margin: 0;
  font-family: var(--f-titre); font-weight: 800; font-stretch: 125%;
  font-size: clamp(44px, 4.6vw, 68px); line-height: 1; letter-spacing: -.045em; color: var(--noir);
}
.pp-bi-roll {
  display: inline-block; height: 1.16em; overflow: hidden; line-height: 1.16;
  font-variant-numeric: tabular-nums;
  -webkit-mask-image: linear-gradient(transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(transparent 0, #000 9%, #000 91%, transparent 100%);
}
.pp-bi-bande { display: flex; flex-direction: column; text-align: right; translate: 0 0; transition: translate 1.1s var(--pp-courbe); }
.pp-bi-bande > span { display: block; height: 1.16em; }
.pp-bi:has(#pp-bi-grid:checked)        .pp-bi-bande { translate: 0 calc(var(--bi-n-grid, 0) * -1.16em); }
.pp-bi:has(#pp-bi-grid-core:checked)   .pp-bi-bande { translate: 0 calc(var(--bi-n-grid-core, 0) * -1.16em); }
.pp-bi:has(#pp-bi-grid-studio:checked) .pp-bi-bande { translate: 0 calc(var(--bi-n-grid-studio, 0) * -1.16em); }
.pp-bi-mot { font-family: var(--font-body); font-weight: 500; font-stretch: 100%; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -.005em; color: var(--gris-f); }
.pp-bi-sr { display: none; }
.pp-bi:has(#pp-bi-grid:checked)        .pp-bi-sr[data-p="grid"],
.pp-bi:has(#pp-bi-grid-core:checked)   .pp-bi-sr[data-p="grid-core"],
.pp-bi:has(#pp-bi-grid-studio:checked) .pp-bi-sr[data-p="grid-studio"] { display: block; }

.pp-bi-seg { display: flex; }
.pp-bi-seg label { font-size: 13.5px; }

/* ---- La grille : 2, 4 puis 5 colonnes, selon la place de la tuile ------- */
.pp-bi-zone { container-type: inline-size; }
.pp-bi-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 560px) { .pp-bi-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@container (min-width: 900px) { .pp-bi-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }

.pp-bi-c {
  --bi-carte: color-mix(in srgb, #FFFFFF calc(var(--bi-on) * 100%), var(--bi-eteint));
  min-width: 0; display: grid;
  transition: --bi-on .6s var(--pp-courbe) var(--d, calc(var(--i, 0) * 40ms));
}
/* Allumées : les cartes du palier choisi et des paliers en dessous. */
.pp-bi:has(#pp-bi-grid:checked)        .pp-bi-c[data-rang="1"],
.pp-bi:has(#pp-bi-grid-core:checked)   .pp-bi-c:is([data-rang="1"], [data-rang="2"]),
.pp-bi:has(#pp-bi-grid-studio:checked) .pp-bi-c { --bi-on: 1; }

.pp-bi-carte {
  -webkit-appearance: none; appearance: none; display: grid; width: 100%; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: 18px; -webkit-tap-highlight-color: transparent;
  scale: calc(.96 + var(--bi-on) * .04);
}
.pp-bi-carte:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }
.pp-bi-in { position: relative; display: grid; border-radius: inherit; }
.pp-bi-face {
  grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column;
  border-radius: inherit; padding: 16px 16px 15px;
}
.pp-bi-avant { position: relative; min-height: 164px; background: var(--bi-carte); }

/* La face : l'icône en haut, le nom en bas, la pastille du palier. */
.pp-bi-ic {
  display: block; width: 48px; height: 48px; overflow: visible;
  fill: none; stroke: #0B0B0B; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: calc(.25 + var(--bi-on) * .75);
}
.pp-bi-ic .m { fill: var(--bi-carte); }
.pp-bi-ic > * { stroke-dasharray: 1 1.1; stroke-dashoffset: 0; }
.pp-bi-nom {
  margin-top: auto; padding-top: 18px; font-size: 15px; line-height: 1.3; font-weight: 500; letter-spacing: -.005em;
  color: color-mix(in srgb, #0B0B0B calc(var(--bi-on) * 100%), #666666);
  text-wrap: balance;
}
.pp-bi-neuf {
  position: absolute; top: 14px; right: 14px; display: none; align-items: center;
  min-height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--pp-acc); color: #FFFFFF; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.pp-bi:has(#pp-bi-grid-core:checked)   .pp-bi-c[data-rang="2"] .pp-bi-neuf,
.pp-bi:has(#pp-bi-grid-studio:checked) .pp-bi-c[data-rang="3"] .pp-bi-neuf {
  display: inline-flex; animation: pp-bi-pastille .55s var(--pp-courbe) calc(var(--d, 0ms) + 260ms) both;
}
@keyframes pp-bi-pastille { from { opacity: 0; transform: translateY(-4px) scale(.85); } }

/* Le dos : l'app qu'elle remplace. Sans JS, il est écrit sous la face. */
.pp-bi-dos { gap: 4px; padding-top: 0; color: #4D4D4D; font-size: 13px; line-height: 1.35; }
.pp-bi:not(.is-3d) .pp-bi-in { background: var(--bi-carte); }
.pp-bi:not(.is-3d) .pp-bi-face { grid-area: auto; background: transparent; }
.pp-bi:not(.is-3d) .pp-bi-avant { min-height: 150px; }
.pp-bi-k { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #666666; }
.pp-bi-app { font-weight: 600; color: var(--noir); text-wrap: balance; }
.pp-bi-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-variant-numeric: tabular-nums; }
.pp-bi-prix s { text-decoration-thickness: 1.5px; }
.pp-bi-note { font-size: 12px; }
.pp-bi-etat { margin-top: auto; padding-top: 10px; }
.pp-bi-oui { display: none; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--pp-acc); }
.pp-bi-des { display: block; font-size: 12.5px; color: #666666; }
/* « In the theme » sur les cartes allumées, « From GRID … » sur les autres. */
.pp-bi:has(#pp-bi-grid:checked)        .pp-bi-c[data-rang="1"] .pp-bi-oui,
.pp-bi:has(#pp-bi-grid-core:checked)   .pp-bi-c:is([data-rang="1"], [data-rang="2"]) .pp-bi-oui,
.pp-bi:has(#pp-bi-grid-studio:checked) .pp-bi-c .pp-bi-oui { display: inline-flex; }
.pp-bi:has(#pp-bi-grid:checked)        .pp-bi-c[data-rang="1"] .pp-bi-des,
.pp-bi:has(#pp-bi-grid-core:checked)   .pp-bi-c:is([data-rang="1"], [data-rang="2"]) .pp-bi-des,
.pp-bi:has(#pp-bi-grid-studio:checked) .pp-bi-c .pp-bi-des { display: none; }

/* ---- Avec JS : la carte se retourne ------------------------------------ */
.pp-bi.is-3d .pp-bi-in {
  transform-style: preserve-3d; transform: perspective(1100px) rotateY(0deg);
  transition: transform .6s var(--pp-courbe);
}
.pp-bi.is-3d .pp-bi-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* WebKit ignore parfois backface-visibility (le dos, retourné, se lisait en
   miroir par-dessus la face) : chaque face s'efface aussi d'un cran au
   passage des 90° (≈ 70 ms sur cette courbe). Opacité et non visibility :
   le dos reste lu par les lecteurs d'écran (aria-describedby). */
.pp-bi.is-3d .pp-bi-avant { transform: translateZ(1px); transition: opacity 0s linear 70ms; }
.pp-bi.is-3d .pp-bi-dos { opacity: 0; transition: opacity 0s linear 70ms; }
.pp-bi.is-3d .pp-bi-carte:is([aria-pressed="true"], .is-survol) .pp-bi-avant { opacity: 0; }
.pp-bi.is-3d .pp-bi-carte:is([aria-pressed="true"], .is-survol) .pp-bi-dos { opacity: 1; }
.pp-bi.is-3d .pp-bi-dos {
  justify-content: flex-start; padding-top: 16px; gap: 5px;
  background: #0B0B0B; color: #B5B5B5; transform: rotateY(180deg) translateZ(1px);
}
.pp-bi.is-3d .pp-bi-k { color: #A3A3A3; }
.pp-bi.is-3d .pp-bi-app { color: #FFFFFF; font-size: 15px; line-height: 1.25; margin-top: 2px; }
.pp-bi.is-3d .pp-bi-app--seul { margin-top: 0; font-size: 16px; }
.pp-bi.is-3d .pp-bi-prix { flex-direction: column; gap: 3px; margin-top: 8px; font-size: 13px; color: #CFCFCF; }
.pp-bi.is-3d .pp-bi-prix s { font-family: var(--f-titre); font-weight: 800; font-stretch: 125%; font-size: 24px; line-height: 1; letter-spacing: -.03em; color: #FFFFFF; text-decoration-thickness: 2px; }
.pp-bi.is-3d .pp-bi-prix s { text-decoration-color: rgba(255,255,255,.75); }
.pp-bi.is-3d .pp-bi-note { color: #A3A3A3; }
.pp-bi.is-3d .pp-bi-oui { color: var(--pp-acc-clair); }
.pp-bi.is-3d .pp-bi-oui .pp-coche { background: var(--pp-acc-clair); color: #0B0B0B; }
.pp-bi.is-3d .pp-bi-des { color: #A3A3A3; }
.pp-bi.is-3d .pp-bi-carte:is([aria-pressed="true"], .is-survol) .pp-bi-in { transform: perspective(1100px) rotateY(180deg); }

/* Le trait se dessine quand la carte s'allume (l'animation part dès que la
   règle s'applique : au changement de palier, à l'entrée dans l'écran). */
.pp-bi.is-3d:has(#pp-bi-grid:checked)        .pp-bi-c[data-rang="1"] .pp-bi-ic > *,
.pp-bi.is-3d:has(#pp-bi-grid-core:checked)   .pp-bi-c:is([data-rang="1"], [data-rang="2"]) .pp-bi-ic > *,
.pp-bi.is-3d:has(#pp-bi-grid-studio:checked) .pp-bi-c .pp-bi-ic > * {
  animation: pp-bi-trait .95s var(--pp-courbe) calc(var(--d, 0ms) + var(--j, 0) * 55ms);
}
@keyframes pp-bi-trait { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }

/* Avant l'entrée dans l'écran : tout est éteint, le compteur est à zéro. */
.pp-bi.is-attente .pp-bi-c { --bi-on: 0 !important; }
.pp-bi.is-attente .pp-bi-ic > * { animation: none !important; }
.pp-bi.is-attente .pp-bi-neuf { animation: none !important; opacity: 0; }
.pp-bi.is-attente .pp-bi-bande { translate: 0 0 !important; }

/* ---- Étroit ------------------------------------------------------------ */
@media (max-width: 999px) {
  .pp-bi-cmd { width: 100%; flex-direction: row; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; }
}
@media (max-width: 599px) {
  .pp-bi-cmd { flex-direction: column; align-items: stretch; gap: 16px; }
  .pp-bi-compte { order: -1; }
  .pp-bi-seg label { flex: 1; min-width: 0; padding: 0 6px; }
  .pp-bi-c .pp-bi-face { padding: 13px 13px 12px; }
  .pp-bi-avant { min-height: 150px; }
  .pp-bi-ic { width: 42px; height: 42px; }
  .pp-bi-nom { font-size: 14px; }
  /* La pastille passe sous le nom : à côté de l'icône, elle la touchait. */
  .pp-bi-neuf { position: static; align-self: flex-start; margin-top: 8px; padding: 0 8px; font-size: 10.5px; }
  .pp-bi.is-3d .pp-bi-dos { padding-top: 13px; }
  .pp-bi.is-3d .pp-bi-app { font-size: 14px; }
  .pp-bi.is-3d .pp-bi-prix s { font-size: 20px; }
  .pp-bi-oui { font-size: 12px; gap: 6px; }
  .pp-bi-oui .pp-coche { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
  .pp-bi-seg .pp-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}