/* Proposition D : la greffe. Scène de A (Tama, bulle, plaque « Ton nombre », invitation « pouce ↑ »),
   onglets des jeux collés au boulier (C), bande des chiffres et noms des tiges dès la tablette (C),
   loupe de 4 tiges au téléphone pour 9 et 13 tiges (B), nombre à dire en lettres pour le parent (B). */
.pd .wrap { max-width: 1060px; }
.d-scene { padding: 22px 0 60px; }
.d-scene h1 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); text-align: center; margin-bottom: 12px; }
.d-onglets { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; border: var(--trait); border-bottom: 0; border-radius: 20px 20px 0 0; overflow: hidden; background: var(--papier-2); }
.d-onglets button { min-height: 54px; padding: 6px 10px; border: 0; border-right: 2.5px solid var(--encre); background: none; font: 700 1.12rem/1.15 var(--display); color: var(--encre); cursor: pointer; }
.d-onglets button:last-child { border-right: 0; }
.d-onglets button[aria-pressed="true"] { background: var(--blanc); box-shadow: inset 0 -5px 0 var(--tomate); }
.d-table { max-width: 1000px; margin: 0 auto; padding: 14px 24px 24px; background: var(--blanc); border: var(--trait); border-radius: 0 0 26px 26px; box-shadow: 0 7px 0 var(--encre);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "raconte jeu lecture" "boulier boulier boulier" "outils outils outils"; column-gap: 16px; align-items: end; }
/* La rangée du haut se partage : Tama et sa bulle, le jeu en cours (au milieu, au-dessus du boulier), la plaque. */
.d-haut { display: contents; }
.raconte { grid-area: raconte; display: flex; align-items: flex-end; gap: 2px; min-width: 0; height: 96px; }
.raconte .tama { animation: bob 3.2s ease-in-out infinite; flex: none; }
.raconte .bulle { margin-bottom: 30px; line-height: 1.2; }
.d-haut .lecture { grid-area: lecture; justify-self: end; display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.d-haut .lecture small { display: inline; }
.lecture.cache strong { color: var(--doux); }
.d-mini { display: none; grid-area: raconte; min-width: 0; max-width: 260px; align-self: center; }
.loupe-on .d-mini { display: block; }
.loupe-on .d-haut .raconte { display: none; }
#boulier { grid-area: boulier; margin-top: 42px; }
.d-jeu { grid-area: jeu; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-bottom: 6px; padding: 10px; border: 2.5px dashed var(--encre); border-radius: 18px; background: var(--soleil-doux); }
.d-jeu .btn { min-height: 52px; padding: 0 18px; }
.d-retour { display: none; flex-basis: 100%; text-align: center; font: 600 1.15rem/1.25 var(--display); }
.loupe-on .d-retour { display: block; }
.d-dire { display: grid; justify-items: center; line-height: 1.15; padding: 0 6px; }
.d-dire small { font: 900 15px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
.d-dire span { font: 700 1.3rem/1.15 var(--display); }
.d-lis { width: 160px; }
.d-outils { grid-area: outils; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
.d-plafond { display: none; }
body:not([data-mode="libre"]) .d-plafond { display: inline-flex; }

.d-texte { padding: 70px 0 80px; }
.d-page { max-width: 760px; margin: 0 auto; padding: 36px 40px; display: grid; gap: 14px; background: var(--blanc); border: var(--trait); border-radius: var(--r); box-shadow: 0 6px 0 var(--encre); }
.d-page h2 { font-size: 1.7rem; margin-top: 8px; }
.d-page p { font-weight: 600; color: var(--encre-2); }
.d-page a { text-decoration-color: var(--tomate); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.d-suite { margin-top: 10px; padding-top: 16px; border-top: 2.5px dashed var(--encre); font: 700 1.25rem/1.3 var(--display); color: var(--encre) !important; }
.d-suite a { display: inline-flex; min-height: 44px; align-items: center; }
.d-suite a::after { content: " →"; white-space: pre; }

@media (max-width: 760px) {
  .d-table { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "raconte lecture" "boulier boulier" "jeu jeu" "outils outils"; }
  .d-jeu { margin: 20px 0 0; padding: 12px; }
}
@media (max-width: 560px) {
  .pd .wrap { padding: 0 14px; }
  .d-scene { padding: 10px 0 40px; }
  .d-scene h1 { margin-bottom: 10px; }
  .d-onglets { border-radius: 18px 18px 0 0; }
  .d-onglets button { min-height: 50px; font-size: 1rem; padding: 4px 6px; }
  .d-table { padding: 8px 12px 18px; border-radius: 0 0 22px 22px; column-gap: 8px; }
  .raconte { height: 84px; }
  .loupe-on .d-mini { height: 74px; display: flex; align-items: center; }
  .loupe-on .d-mini svg { width: 100%; }
  .raconte .tama { width: 54px; height: auto; }
  .raconte .bulle { font-size: 1.05rem; padding: 6px 11px; margin-bottom: 26px; }
  .d-haut .lecture { margin-bottom: 4px; padding: 2px 10px 4px; display: grid; justify-items: center; gap: 0; min-width: 76px; }
  .loupe-on .d-haut .lecture { margin-bottom: 0; }
  .d-haut .lecture small { font-size: 15px; line-height: 1.2; }
  .lecture strong { font-size: 1.6rem; }
  #boulier { margin-top: 44px; }
  .pd .sb-frame { padding: 10px; border-radius: 22px; }
  /* Au téléphone, ni bande ni noms des tiges : le boulier entier tient sous le titre. */
  .pd .bl-bande, .pd .bl-place { display: none; }
  .pd .bl.bl-etiq .sb-rods { padding-bottom: 6px; }
  .d-page { padding: 26px 20px; }
  /* Pendant un jeu, au téléphone : la plaque (qui montre « ? ») cède sa place aux boutons du jeu,
     pour que « C'est posé » reste dans le premier écran avec tout le boulier. Le nombre à poser est dans la bulle. */
  body:not([data-mode="libre"]) .d-haut .lecture { display: none; }
  body:not([data-mode="libre"]).loupe-on .d-mini { display: none; }
  body:not([data-mode="libre"]).loupe-on .d-haut .raconte { display: flex; }
  .d-jeu { grid-area: lecture; margin: 0; padding: 0; flex-direction: column; align-items: stretch; gap: 6px; border: 0; background: none; }
  .d-jeu .btn { min-height: 44px; font-size: 1.02rem; padding: 0 14px; border-radius: 14px; box-shadow: 0 4px 0 var(--encre); }
  body:not([data-mode="libre"]) #boulier { margin-top: 40px; }
  .d-dire, .d-retour { display: none !important; }
  .d-lis { width: 128px; }
  .d-lis .saisie { min-height: 44px; font-size: 1.3rem; }
}