/* Proposition D · la greffe. Base B (« Tout pour l'enfant ») : un Tama géant pour entrer, une tige géante qui
   répond seule, la seule chose à faire en tête de l'espace parent, la nuit pour finir.
   Pris à C : le coupon de la liste d'attente sous le héros et son tampon « noté », le dessin de la réponse
   (5 + 2) dans l'aide. Pris à A : le carnet de tampons de la séance, la page légale numérotée avec sommaire.
   Couleurs : variables de tama.css seulement. */

/* La barre collante ne cache jamais le bloc visé par un lien (#liste…). */
[id] { scroll-margin-top: 86px; }
.nw { white-space: nowrap; }

/* ===== Vitrine : le coupon sous le héros (pris à C) ===== */
.d-vitrine .coupon-sec { padding: 0 0 64px; }
.coupon { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px 40px; align-items: center; padding: 30px 40px; border: 3px dashed var(--encre); border-radius: 26px; background: var(--blanc); }
.coupon::before, .coupon::after { content: ""; position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--papier); border: 3px dashed var(--encre); }
.coupon::before { left: -19px; clip-path: inset(0 0 0 50%); }
.coupon::after { right: -19px; clip-path: inset(0 50% 0 0); }
.coupon .gauche { display: grid; gap: 10px; }
.coupon .gauche .tete { display: flex; align-items: center; gap: 10px; }
.coupon h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.coupon .promesse { font-size: 1.15rem; font-weight: 700; color: var(--encre-2); }
.coupon .note { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; align-items: center; }
.coupon .note .rond { grid-row: span 3; width: 120px; height: 120px; --rot: -12deg; }
.coupon .note .rond b { font-size: 1.6rem; }
.coupon .note h3 { font-size: 1.9rem; }
.coupon .note p { font-weight: 600; color: var(--encre-2); }
.coupon .note .lien { grid-column: 2; justify-self: start; }
@media (max-width: 860px) {
  .coupon { grid-template-columns: 1fr; padding: 24px 20px; }
  .coupon::before, .coupon::after { display: none; }
  .coupon .note { grid-template-columns: 1fr; justify-items: start; }
  .coupon .note .rond { grid-row: auto; }
  .coupon .note .lien { grid-column: 1; }
  .coupon .inscription .ligne-envoi .btn { width: 100%; }
}
.d-vitrine .appel .btn { margin-top: 10px; }

/* ===== Connexion : la nuit d'un côté, le formulaire de l'autre (B) ===== */
.d-porte .porte { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - 38px); }
.d-porte .cote-nuit { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 40px; text-align: center; }
.d-porte .cote-nuit .logo { color: var(--nuit-texte); }
.d-porte .cote-nuit p { font-family: var(--display); font-size: 1.6rem; font-weight: 600; max-width: 14em; color: var(--nuit-texte); line-height: 1.25; }
.d-porte .cote-nuit .tama { animation: bob 3.2s ease-in-out infinite; }
.d-porte .cote-form { display: grid; align-content: center; padding: 40px 56px; }
.d-porte .cote-form section { display: grid; gap: 16px; max-width: 440px; width: 100%; }
.d-porte .cote-form form { display: grid; gap: 16px; }
.d-porte h1 { font-size: 2.4rem; }
.d-porte .sous { font-weight: 600; color: var(--encre-2); }
.d-porte .invitation { padding: 14px 18px; border-radius: 18px; background: var(--papier-2); border: 2.5px dashed var(--encre); font-weight: 600; color: var(--encre-2); }
.d-porte .rond { --rot: -10deg; }
.d-porte .retour { display: none; }
@media (max-width: 860px) {
  .d-porte .porte { grid-template-columns: 1fr; min-height: 0; }
  .d-porte .cote-nuit { grid-template-columns: auto 1fr; justify-content: start; align-items: center; padding: 12px 18px; gap: 12px; text-align: left; }
  .d-porte .cote-nuit .tama { width: 72px; height: auto; }
  .d-porte .cote-nuit p { font-size: 1.15rem; }
  .d-porte .cote-nuit .logo { display: none; }
  .d-porte .cote-form { padding: 22px 18px 40px; }
  .d-porte h1 { font-size: 2rem; }
  .d-porte .retour { display: inline-flex; }
}

/* ===== Qui joue ? Un Tama géant par enfant ; le parent garde le doigt appuyé (B) ===== */
.d-qui { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 18px 16px 22px; gap: 10px;
  background: radial-gradient(circle at 50% 46%, var(--soleil-doux) 0 34%, transparent 34.2%), radial-gradient(var(--point) 1.4px, transparent 1.8px) 0 0 / 22px 22px, var(--papier); }
.d-qui h1.bulle { font-size: 2rem; padding: 6px 22px; }
.d-qui h1.bulle::before { content: ""; position: absolute; left: 50%; bottom: -11px; width: 18px; height: 18px; margin-left: -9px; background: var(--blanc); border-right: var(--trait); border-bottom: var(--trait); transform: rotate(45deg); border-radius: 0 0 4px 0; }
.d-qui .enfants { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; }
.d-qui .geant { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--encre); padding: 10px 14px 16px; border-radius: 36px; }
.d-qui .geant .tama { width: min(300px, 70vw, 40svh); height: auto; animation: bob 3s ease-in-out infinite; }
.d-qui .geant:active .tama { transform: scale(.93); animation: none; }
.d-qui .geant b { font-family: var(--display); font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1; padding: 8px 34px; border: var(--trait); border-radius: 999px; background: var(--tomate); box-shadow: 0 6px 0 var(--encre); }
.d-qui .parent { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 64px; min-width: 270px; padding: 8px 20px 8px 10px; border: var(--trait); border-radius: 20px; background: var(--blanc); box-shadow: 0 4px 0 var(--encre); text-decoration: none; color: var(--encre); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.d-qui .parent > [data-tama] { grid-row: span 2; }
.d-qui .parent b { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }
.d-qui .parent small { font-size: 1rem; font-weight: 800; color: var(--doux); }
.d-qui .parent .jauge { position: absolute; inset: 0; background: var(--sakura); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.d-qui .parent.appuie .jauge { transform: scaleX(1); transition: transform 1.5s linear; }
.d-qui .parent > :not(.jauge) { position: relative; z-index: 1; }
.d-qui .parent.rappel small { color: var(--encre); background: var(--soleil); border-radius: 6px; padding: 0 4px; }
.d-qui .bas { display: grid; justify-items: center; gap: 6px; }

/* ===== Espace famille : d'abord la seule chose à faire (B) ===== */
.d-famille main { padding: 22px 0 70px; }
.d-famille .grille { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.d-famille .ce-soir { grid-row: span 2; align-self: stretch; padding: 26px 26px 28px; background: var(--tomate-doux); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.d-famille .ce-soir .avec { margin-top: auto; padding-top: 10px; }
.d-famille .ce-soir { position: relative; }
.d-famille .ce-soir .deco { position: absolute; right: 26px; bottom: 80px; }
.d-famille .ce-soir .deco .tama { animation: bob 3.4s ease-in-out infinite; }
@media (max-width: 1180px) { .d-famille .ce-soir .deco { display: none; } }
.d-famille .ce-soir .etiquette { justify-self: start; }
.d-famille .ce-soir h1 { font-size: clamp(2rem, 4vw, 2.9rem); max-width: 12em; }
.d-famille .ce-soir p { font-weight: 600; color: var(--encre-2); max-width: 30em; }
.d-famille .ce-soir .avec { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--encre); }
.d-famille .ce-soir .btn { justify-self: start; }
.d-famille .carte { padding: 20px 22px; display: grid; gap: 12px; }
.d-famille .carte h2 { font-size: 1.45rem; }
.d-famille .rang { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 2.5px dashed var(--point); }
.d-famille .rang:first-of-type { border-top: 0; }
.d-famille .rang .nom { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.d-famille .rang .semaine { grid-column: 2 / -1; }
/* Sur un petit téléphone, la rangée rétrécit les pastilles : elles restent rondes (avant : 28 × 32 en 360 de large). */
.d-famille .rang .semaine { align-items: center; }
.d-famille .rang .semaine li { width: 32px; height: auto; aspect-ratio: 1; min-height: 0; line-height: 1; }
.d-famille .rang .nb { font-weight: 900; }
.d-famille .chacun .l { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px 0; }
.d-famille .chacun .l + .l { border-top: 2.5px dashed var(--point); }
.d-famille .chacun .rond { width: 62px; height: 62px; }
.d-famille .chacun .rond b { font-size: 1.05rem; }
.d-famille .chacun strong { font-family: var(--display); font-weight: 700; font-size: 1.15rem; display: block; line-height: 1.25; }
.d-famille .chacun span { font-weight: 600; color: var(--encre-2); }
.d-famille .jardin-mini { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: center; margin-top: 24px; padding: 16px; }
.d-famille .jardin-mini .jardin { aspect-ratio: 5 / 4; border: var(--trait); border-radius: 16px; overflow: hidden; }
.d-famille .jardin-mini svg { width: 100%; height: 100%; }
.d-famille .jardin-mini .flower circle { stroke: var(--encre); stroke-width: 1.4; }
.d-famille .jardin-mini h2 { font-size: 1.45rem; }
.d-famille .jardin-mini .legende-j { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.d-famille .jardin-mini .legende-j span { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 2.5px solid var(--encre); border-radius: 999px; background: var(--blanc); font-weight: 900; font-size: 1rem; }
.d-famille .reglages { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (max-width: 860px) {
  .d-famille .grille { grid-template-columns: 1fr; }
  .d-famille .ce-soir { grid-row: auto; }
  .d-famille .ce-soir .btn { align-self: stretch; }
  .d-famille .jardin-mini { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .d-famille main { padding-top: 16px; } .d-famille .ce-soir { padding: 20px 18px 22px; } .d-famille .carte { padding: 16px; } }

/* ===== La leçon : une tige géante qui répond seule (B), le carnet de tampons (A), le dessin de l'aide (C) ===== */
.d-lecon .lecon { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding: 10px 14px 14px; }
.lecon-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.progres { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.progres li { width: 34px; height: 22px; border-radius: 50%; border: 2.5px solid var(--encre); background: var(--blanc); }
.progres li.fait { background: var(--tomate); }
.progres li.cours { background: var(--soleil); }
.d-lecon .scene { display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: start; gap: 4px; }
.d-lecon .dit { display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 120px; }
.d-lecon .dit .tama { flex: none; }
.d-lecon .dit .bulle { margin-bottom: 24px; font-size: 1.5rem; line-height: 1.2; max-width: 230px; }
.d-lecon .dit .bulle b { font-size: 2.6rem; line-height: 1; }
.d-lecon .picto { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 1.3rem; white-space: nowrap; }
.d-lecon .picto i { flex: none; display: inline-block; width: 40px; height: 24px; border-radius: 50%; border: 3px solid var(--encre); background: var(--tomate); }
@media (max-width: 380px) { .d-lecon .picto i { width: 34px; height: 21px; } .d-lecon .picto { gap: 5px; } }
.d-lecon .picto i.h { background: var(--prune); }
/* Deux tiges : chaque chiffre dessiné sur sa petite tige (boule de 5 au-dessus de la barre, boules de 1 dessous,
   collées à la barre comme sur le boulier), le chiffre en dessous ; le point jaune marque les unités comme sur le boulier.
   Hauteur fixe (place de 4 boules de 1) : la bulle ne change pas de taille d'un nombre à l'autre. */
.d-lecon .picto.deux { gap: 18px; align-items: flex-start; justify-content: center; margin-top: 6px; }
.d-lecon .tm { --bh: 12px; --bw: 32px; position: relative; display: grid; grid-template-rows: var(--bh) 4px calc(var(--bh) * 4 + 6px) auto; row-gap: 2px; justify-items: center; width: calc(var(--bw) + 6px); }
.d-lecon .tm::before { content: ""; position: absolute; left: 50%; top: 0; height: calc(var(--bh) * 5 + 14px); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--encre); }
.d-lecon .tm-haut, .d-lecon .tm-bas { position: relative; display: grid; gap: 2px; justify-items: center; }
.d-lecon .tm-haut { align-content: end; }
.d-lecon .tm-bas { align-content: start; }
.d-lecon .tm-barre { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--encre); }
.d-lecon .tm.u .tm-barre::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--soleil); }
.d-lecon .picto .tm i { width: var(--bw); height: var(--bh); border-width: 2.5px; }
.d-lecon .dit .picto .tm b { font-size: 1.6rem; line-height: 1; margin-top: 2px; background: none; }
/* Tablette et ordinateur : la bulle est plus grande, le dessin aussi. */
@media (min-width: 600px) { .d-lecon .tm { --bh: 15px; --bw: 40px; } .d-lecon .dit .picto .tm b { font-size: 2rem; } .d-lecon .picto.deux { gap: 24px; } }
.d-lecon #boulier { align-self: start; width: min(100%, 260px, calc((100svh - 308px) / 2.52 + 44px)); }
/* Deux tiges sur téléphone : place réservée à la bulle de l'aide (elle grandit sans pousser le boulier),
   puis deux tiges côte à côte aussi larges que la hauteur le permet : 2 × tige + 44 de cadre, hauteur = 3,3 × tige + 62. */
.d-lecon .deux-tiges .dit { min-height: 194px; }
.d-lecon .deux-tiges #boulier { width: min(100%, 360px, calc((100svh - 346px) / 1.65 + 44px)); }
.d-lecon .sb { --g: calc(var(--b) * .5); }
.d-lecon .carnet-t { display: none; }
.d-lecon .bravo { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 22px; background: color-mix(in srgb, var(--papier) 92%, transparent); text-align: center; }
.d-lecon .bravo .tampon-reussite { width: 220px; height: 220px; }
.d-lecon .bravo .tampon-reussite b { font-size: 4rem; }
.d-lecon .fin { position: fixed; inset: 0; z-index: 25; display: grid; justify-items: center; align-content: center; gap: 14px; padding: 22px 18px; text-align: center; overflow: auto; }
.d-lecon .fin h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.d-lecon .fin .bulle { color: var(--encre); max-width: 20em; }
.d-lecon .fin .tampons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 360px; }
.d-lecon .fin [data-l=bilan] { color: var(--nuit-doux); font-size: 1.15rem; }
.d-lecon .fin .fleur { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 2.5px solid var(--nuit-doux); border-radius: 999px; font-weight: 900; }
@media (max-width: 380px) and (max-height: 760px) { .d-lecon .fin .tama { width: 130px; height: auto; } }
/* Carnet de tampons (A) : caché sur téléphone, montré sur tablette (en haut à droite) et sur ordinateur (à droite du boulier). */
.d-lecon .carnet-t h2 { font-size: 1.2rem; }
.d-lecon .carnet-t ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 72px); gap: 12px; }
.d-lecon .carnet-t li { width: 72px; height: 72px; border-radius: 50%; border: 3px dashed var(--doux); background: var(--papier); }
.d-lecon .carnet-t li.cours { border-color: var(--encre); background: var(--soleil-doux); }
.d-lecon .carnet-t li.fait { border: 3px solid var(--tampon); background: var(--tampon-fond); box-shadow: inset 0 0 0 4px var(--tampon-fond), inset 0 0 0 6.5px var(--tampon); transform: rotate(-10deg); }
.d-lecon .carnet-t li.fait:nth-child(even) { transform: rotate(8deg); }
/* Tablette debout (820 × 1180, 768 × 1024…) : Tama et sa bulle en haut à gauche, le carnet en haut à droite,
   et le boulier en dessous, sur toute la hauteur qui reste (comme sur ordinateur, où il prend les trois quarts). */
@media (min-width: 600px) and (max-width: 899.98px) and (min-height: 900px) {
  .d-lecon .lecon { padding: 14px 24px 22px; }
  .d-lecon .scene { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; justify-items: stretch; gap: 20px 24px; }
  .d-lecon .dit { grid-column: 1; grid-row: 1; justify-self: start; min-height: 160px; }
  .d-lecon .dit .tama { width: 150px; height: auto; }
  .d-lecon .dit .bulle { font-size: 2rem; max-width: 300px; }
  .d-lecon .dit .bulle b { font-size: 3.6rem; }
  .d-lecon .carnet-t { display: grid; grid-column: 2; grid-row: 1; gap: 10px; padding: 14px 18px 16px; margin-bottom: 6px; }
  .d-lecon .carnet-t ol { grid-template-columns: repeat(5, 52px); gap: 10px; }
  .d-lecon .carnet-t li { width: 52px; height: 52px; }
  .d-lecon #boulier { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: start; width: min(100%, 420px, calc((100svh - 340px) / 2.52 + 44px)); }
  .d-lecon .deux-tiges .dit { min-height: 228px; }
  .d-lecon .deux-tiges #boulier { width: min(100%, 540px, calc((100svh - 408px) / 1.65 + 44px)); }
}
@media (min-width: 900px) {
  .d-lecon .lecon { padding: 14px 26px 18px; }
  .d-lecon .scene { grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr; align-items: center; justify-items: stretch; column-gap: 48px; }
  .d-lecon .dit { flex-direction: column-reverse; align-items: center; justify-self: end; }
  .d-lecon .dit .tama { width: 190px; height: auto; }
  .d-lecon .dit .bulle { margin: 0 0 12px; font-size: 2rem; max-width: 300px; }
  .d-lecon .dit .bulle b { font-size: 3.6rem; }
  .d-lecon .dit .bulle.gauche::before { left: 50%; bottom: -11px; margin-left: -9px; border-left: 0; border-right: var(--trait); border-bottom: var(--trait); border-radius: 0 0 4px 0; }
  /* Une tige : la tige reste à 240 de large au plus (maxRod est plus large pour la tablette) ; la marge rend
     à la colonne la largeur qu'elle avait (min(320 px, …)), pour que rien ne bouge autour. */
  .d-lecon #boulier { width: min(284px, calc((100svh - 150px) / 2.52 + 44px)); margin-inline: calc((min(320px, calc((100svh - 150px) / 2.52 + 44px)) - min(284px, calc((100svh - 150px) / 2.52 + 44px))) / 2); align-self: center; }
  /* Deux tiges : boules aussi hautes que celle de la tige unique (101 px en 1440 × 900). */
  .d-lecon .deux-tiges #boulier { width: min(410px, calc((100svh - 150px) / 1.65 + 44px)); margin-inline: 0; }
  .d-lecon .carnet-t { display: grid; gap: 12px; justify-self: start; padding: 18px 20px; }
}

/* ===== Confidentialité : L'essentiel (B), sommaire et parties numérotées (A), « en clair » (C) ===== */
.d-legal main { padding: 30px 0 80px; }
.d-legal .entete { display: grid; gap: 12px; margin-bottom: 22px; max-width: 760px; }
.d-legal .entete .provisoire { justify-self: start; }
.d-legal .essentiel { max-width: 760px; padding: 20px 24px; margin-bottom: 30px; background: var(--soleil-doux); }
.d-legal .essentiel h2 { font-size: 1.5rem; margin-bottom: 8px; }
.d-legal .essentiel ul { display: grid; gap: 6px; padding-left: 1.2em; margin: 0; font-weight: 700; }
.d-legal .grille { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: start; }
.d-legal .sommaire { position: sticky; top: 90px; padding: 18px 18px 14px; }
.d-legal .sommaire h2 { font-size: 1.2rem; margin-bottom: 6px; }
.d-legal .sommaire ol { list-style: none; margin: 0; padding: 0; }
.d-legal .sommaire .lien { font-size: 1rem; text-decoration: none; line-height: 1.25; padding: 4px 0; }
.d-legal .sommaire .lien:hover { text-decoration: underline; }
.d-legal .texte-legal { padding: 30px 40px 36px 74px; background: linear-gradient(90deg, transparent 50px, var(--sakura) 50px 53px, transparent 53px), var(--blanc); display: grid; gap: 34px; }
.d-legal .sec { display: grid; gap: 12px; }
.d-legal .sec h2 { display: flex; align-items: center; gap: 14px; }
.d-legal .sec h2 .rond { width: 50px; height: 50px; }
.d-legal .sec h2 .rond b { font-size: 1.3rem; }
.d-legal .en-clair { justify-self: start; padding: 6px 14px; border-radius: 12px; background: var(--soleil-doux); color: var(--encre); font-weight: 700; }
@media (max-width: 900px) {
  .d-legal .grille { grid-template-columns: 1fr; }
  .d-legal .sommaire { position: static; }
  .d-legal .texte-legal { padding: 24px 18px 28px 40px; background: linear-gradient(90deg, transparent 24px, var(--sakura) 24px 27px, transparent 27px), var(--blanc); }
}