/* jour.css — la boucle du jour : fondu, bulle « Bienvenue », bilan, port, dépli « Pour aller plus loin », boutons.
 * Jetons : css/app-core.css. Rien ne décore le texte du livre (puces comprises). */

/* Fondu (descente et remontée, stand-in du zoom) */
#jour-fondu{position:fixed;inset:0;z-index:5;background:var(--papier);opacity:0;pointer-events:none;
  transition:opacity var(--t-court,300ms) var(--c-camera,ease)}
#jour-fondu.on{opacity:1}

/* Bulle « Bienvenue » : ne bloque rien, 3 s */
.jour-bulle{position:fixed;z-index:8;left:50%;top:calc(var(--h-entete,78px) + var(--e3));margin:0;max-width:calc(100% - 32px);
  transform:translateX(-50%);padding:var(--e2) var(--e4);background:var(--feuille);color:var(--noir);
  border:1.5px solid var(--noir);border-radius:var(--r-m);font:700 1rem var(--f-titre);pointer-events:none;opacity:0;
  transition:opacity var(--t-court,300ms) var(--c-encre,ease)}
.jour-bulle.on{opacity:1}

/* Boutons des panneaux (cibles ≥ 48 px, libellé constant, passe à la ligne plutôt que de sortir du cadre) */
.jour-boutons{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e4)}
.jour-bouton{min-height:48px;width:100%;padding:12px 16px 10px;border:1.5px solid var(--noir);border-radius:var(--r-s);cursor:pointer;
  background:var(--noir);color:var(--papier);font:800 1rem/1.15 var(--f-titre);font-stretch:75%;text-transform:uppercase;letter-spacing:.01em;
  text-align:center;overflow-wrap:anywhere;
  transition:transform var(--t-eclat) var(--c-encre),background-color var(--t-eclat) var(--c-encre)}
/* Toucher (geste 1) : à l'appui, tout de suite ; au relâché, 180 ms. */
.jour-bouton:active{transition:none;transform:translateY(2px)}
.jour-bouton-2{background:var(--feuille);color:var(--noir)}
.jour-bouton:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}
.jour-reco{margin-top:var(--e4);width:auto;min-width:48px}
/* Réglages : un bouton posé là a toujours de l'air des deux côtés, quoi qu'il y ait dessous (un trait ne le colle jamais). */
.reglages > .jour-bouton{margin-top:var(--e4);margin-bottom:var(--e4)}

/* Port */
.port-principe{margin:0 0 var(--e3);font-size:1.0625rem;line-height:1.45}
.port-mention{margin:0 0 var(--e4);font-size:.75rem;color:var(--texte-3)}
.port-question{margin:0 0 var(--e2);font-weight:700}
.port-iles{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--e2)}
.port-iles .jour-bouton{text-transform:none;text-align:left;font-weight:700}

/* Bilan */
.bilan-lignes{margin:0 0 var(--e4)}
.bilan-ligne{margin:0 0 var(--e2);font-size:1rem}
.bilan-gros{font:800 1.5rem/1.05 var(--f-titre);font-stretch:75%;text-transform:uppercase}
.bilan-quai{color:var(--texte-2);font-size:.875rem}
.bilan-jeu{margin:var(--e4) 0 0}
.bilan-jeu-nouveau{margin:0 0 var(--e1,4px);font-size:.875rem;font-weight:700;text-transform:uppercase}
.bilan-jeu-nom{margin:0 0 var(--e1,4px);font:800 1.25rem/1.1 var(--f-titre)}
.bilan-lignes + .jour-boutons{margin-top:0}
.port-ouverts{margin:var(--e4) 0 0}
.port-ouverts-titre{margin:0 0 var(--e2);font:800 1.25rem/1.1 var(--f-titre)}

/* Dépli « Pour aller plus loin » : le texte du livre reste net */
.carte-plus{margin:0 0 var(--e3);border-top:1px solid var(--ligne);padding-top:var(--e2)}
.carte-plus summary{display:flex;align-items:center;min-height:48px;cursor:pointer;font-weight:700;font-size:.9375rem}
.carte-plus summary:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}
.carte-puces{margin:var(--e2) 0 var(--e3);padding-left:1.25rem;font:italic 400 1rem/1.42 var(--f-livre)}
.carte-puces li{margin:0 0 var(--e2);overflow-wrap:anywhere}
.carte-puces ul{margin:var(--e1) 0 0;padding-left:1rem}
.carte-plus .carte-src{border-top:0;padding-top:0}
.reduit #jour-fondu,.reduit .jour-bulle{transition-duration:var(--t-court)}
/* Toucher en version réduite : le fond change, aucun déplacement. */
.reduit .jour-bouton:active{transform:none;background:var(--texte-2)}
.reduit .jour-bouton-2:active{background:var(--ligne)}

/* Épingles (dans la carte), planche 16 : pastille de 40 px dans une cible de 48, nom écrit dessous. */
.ep-barre{display:flex;gap:6px;margin:var(--e3) 0}
.ep{appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer;min-width:48px;min-height:48px;flex:1;
  display:flex;flex-direction:column;align-items:center;gap:var(--e1);padding:2px 0}
.ep .rond{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--papier);border:1.5px solid var(--noir);color:var(--texte-3)}
.ep svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ep svg .plein{fill:currentColor;stroke:none}
.ep .lib{font-size:.75rem;font-weight:700;color:var(--texte-2);line-height:1.2;text-align:center;overflow-wrap:anywhere}
.ep[aria-pressed="true"] .rond{background:var(--noir);color:var(--papier);transform:rotate(var(--a,0deg))}
.ep[aria-pressed="true"] .lib{color:var(--noir)}
.ep:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}
/* Pose et retrait : 2 crans en --t-eclat (12 images/s). Le texte du livre ne bouge jamais. */
@keyframes ep-tombe{0%{transform:rotate(var(--a)) scale(1.06);box-shadow:3px 3px 0 var(--noir)}100%{transform:rotate(var(--a)) scale(1);box-shadow:none}}
@keyframes ep-coin{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}100%{clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}}
.ep.anim-pose .rond{animation:ep-tombe var(--t-eclat) steps(2,jump-none) both}
.ep.anim-retrait .rond{background:var(--noir);color:var(--papier);animation:ep-coin var(--t-eclat) steps(1,jump-start) both}
.reduit .ep .rond{animation:none!important}
/* Carnet (planche 16). Tout passe à la ligne, aucun titre coupé ; l'en-tête d'île et celui de hameau se collent en haut de #ecrans. */
.carnet{display:flex;flex-direction:column;gap:var(--e3);min-width:0}
.carnet-pages{display:flex;gap:6px}
.carnet-page{appearance:none;flex:1;min-width:0;min-height:48px;padding:0 var(--e3);border:1.5px solid var(--noir);border-radius:8px;
  background:var(--feuille);color:var(--noir);font:700 .9rem/1.15 var(--f-texte);overflow-wrap:anywhere;cursor:pointer}
.carnet-page[aria-selected="true"]{background:var(--noir);color:var(--papier);transform:rotate(-2deg);box-shadow:2px 2px 0 var(--tournesol)}
.carnet-page:focus-visible,.ile:focus-visible,.ligne-c:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}
.carnet-page-corps{display:flex;flex-direction:column;gap:var(--e3);min-width:0}
.carnet-compte{margin:0;font-size:.95rem}
.carnet-filtres{display:flex;flex-direction:column;gap:var(--e2);padding-bottom:var(--e3);border-bottom:1.5px solid var(--noir)}
.f-ep{display:flex;flex-wrap:wrap;gap:4px}
.ep.petit{flex:1 1 auto;flex-direction:row;gap:6px;justify-content:flex-start;padding:0 var(--e2) 0 6px;border-radius:24px}
.ep.petit .rond{width:32px;height:32px;flex:none}
.ep.petit svg{width:19px;height:19px}
.ep.petit .lib{text-align:left}
.ep.petit .lib b{display:block;font:800 .875rem/1.2 var(--f-titre)}
.f-ile{display:flex;flex-wrap:wrap;gap:6px}
.ile{appearance:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--noir);background:var(--ink);color:var(--papier);cursor:pointer;
  font:800 1.125rem/1 var(--f-titre);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ile small{font:700 .625rem/1 var(--f-texte);opacity:.9}
.ile.num-noir,.b-ile .n.num-noir{color:var(--noir)}
.ile.on{box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--noir)}
.liste{display:flex;flex-direction:column;min-width:0}
.b-ile{display:flex;gap:10px;align-items:center;margin:var(--e3) 0 4px;padding:6px 0;background:var(--papier);border-bottom:3px solid var(--ink);
  font:800 1rem/1.15 var(--f-titre);font-stretch:80%;overflow-wrap:anywhere;position:sticky;top:0;z-index:2}
.b-ile .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--papier);border:1.5px solid var(--noir);
  display:flex;align-items:center;justify-content:center;font-size:1rem}
.b-ham{margin:10px 0 2px;padding:5px 0 5px 8px;background:var(--papier);border-left:4px solid var(--ink);box-shadow:0 1px 0 var(--ligne);
  font:700 .75rem/1.3 var(--f-texte);color:var(--texte-2);overflow-wrap:anywhere;position:sticky;top:var(--h-ile,46px);z-index:1}
.ligne-c{appearance:none;border:0;background:none;width:100%;min-height:56px;padding:8px 2px;border-bottom:1px solid var(--ligne);cursor:pointer;
  display:flex;gap:10px;align-items:center;justify-content:space-between;text-align:left;font:400 .9375rem/1.35 var(--f-texte);color:var(--noir)}
.ligne-c .t{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.ligne-c .m{flex:none;display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-end;max-width:45%}
.mini{width:22px;height:22px;border-radius:50%;background:var(--noir);color:var(--papier);display:flex;align-items:center;justify-content:center}
.mini:nth-of-type(odd){transform:rotate(-3deg)} .mini:nth-of-type(even){transform:rotate(2deg)}
.mini svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mini svg .plein{fill:currentColor;stroke:none}
.quai{position:relative;padding:3px 8px 3px 14px;background:#EFE6D2;font:700 .6875rem/1.2 var(--f-texte);color:var(--texte-2);white-space:nowrap;
  clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%)}
.quai::before{content:"";position:absolute;left:6px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--papier)}
.carnet-vide{margin:0;padding:var(--e6) var(--e4);text-align:center;color:var(--texte-2);line-height:1.5;overflow-wrap:anywhere}
.carnet-vide svg{width:120px;height:90px;fill:none;stroke:var(--texte-3);stroke-width:1.5;margin-bottom:var(--e3)}
.panneau.sans-scotch .scotch-panneau{display:none}

/* ---------- Port et bilan : les vignettes de jeux (décision DA 16, planche 18 D2) ----------
 * Grille de 2 colonnes à 390 comme à 320 px. Encre de l'île = --encre (décision 2), posée par ui-port.js. Geste 4 (autocollant qu'on décolle). */
.vignettes{list-style:none;margin:0;padding:0 4px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
.vig{display:flex;flex-direction:column;color:var(--noir);text-decoration:none;transform:rotate(var(--a,0deg));
  filter:drop-shadow(3px 3px 0 color-mix(in srgb,var(--encre) 60%,transparent))}
.vig-ill{height:104px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--noir);border-bottom:0;
  background:var(--papier) radial-gradient(circle,color-mix(in srgb,var(--encre) 45%,transparent) 1px,transparent 1.5px) 0 0/6px 6px;
  transition:scale var(--t-eclat) var(--c-encre),box-shadow var(--t-eclat) var(--c-encre)}
.vig-pic{width:62px;height:62px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vig-pic .p-encre{stroke:var(--encre);stroke-width:3.2;transform:translate(1.3px,1.1px);opacity:.9}
.vig-pic .p-noir{stroke:var(--noir);stroke-width:1.7}
.vig-eti{flex:1;min-height:76px;display:flex;flex-direction:column;gap:3px;padding:8px 10px 12px;background:var(--feuille);
  border:1.5px solid var(--noir);border-top:1.5px dashed var(--noir);
  clip-path:polygon(0 0,100% 0,100% 94%,88% 100%,74% 95%,60% 100%,45% 95%,30% 100%,15% 95%,0 100%)}
.vig-nom{font:800 15.5px/1.12 var(--f-titre);font-stretch:85%;overflow-wrap:anywhere}
.vig-lieu{font-size:12.5px;color:var(--texte-2)}
a.vig:focus-visible{outline:3px solid var(--tournesol);outline-offset:3px}
a.vig:active .vig-ill{scale:1.06;box-shadow:3px 3px 0 var(--noir);transition:none;position:relative;z-index:1}
.reduit a.vig:active .vig-ill{scale:1;box-shadow:inset 0 0 0 1.5px var(--noir)}
/* Bilan : une seule vignette, couchée (planche 18 D1) : carré illustré à gauche, étiquette à droite au bord droit déchiré. Même ombre, même geste 4. */
.vignettes-bilan{grid-template-columns:minmax(0,1fr)}
.vig-couchee{flex-direction:row;min-height:88px;transform:rotate(calc(var(--a,0deg) / 2))}
.vig-couchee .vig-ill{flex:none;width:88px;height:auto;border-right:0;border-bottom:1.5px solid var(--noir)}
.vig-couchee .vig-pic{width:54px;height:54px}
.vig-couchee .vig-eti{min-width:0;justify-content:center;padding:10px 22px 12px 14px;border-top:1.5px solid var(--noir);border-left:1.5px dashed var(--noir);
  clip-path:polygon(0 0,100% 0,97% 14%,100% 28%,96.5% 43%,100% 57%,97% 72%,100% 86%,96.5% 100%,0 100%)}
.vig-couchee .vig-nom{font-size:17px}
.vig-couchee .vig-lieu{font-size:13px}

/* ---------- « D'autres programmes sur ce thème » (décision DA 19, planche 26 piste A) ---------- */
/* Encres fixes, ≥ 4,5:1 sur papier et feuille. Citations en Atkinson droit, en noir : Literata reste au livre seul. */
.carte-autres{--ap-rp:#C2410C;--ap-mac:#7D6B5D;--ap-rn:#5A6B7A;margin:var(--e2) 0 0;border-top:1px solid var(--ligne)}
.carte-autres summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font-weight:700;font-size:.9375rem}
.carte-autres summary::-webkit-details-marker{display:none}
.carte-autres summary:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}
.ca-titre{flex:1;text-wrap:balance}
.ca-pastilles{display:flex;gap:3px}
.ca-pastilles i{display:block;width:10px;height:10px}
.ca-pastilles .ca-rp{background:var(--ap-rp)}.ca-pastilles .ca-mac{background:var(--ap-mac)}.ca-pastilles .ca-rn{background:var(--ap-rn)}
.ca-chev{width:8px;height:8px;margin:0 4px 0 2px;border-right:2px solid var(--noir);border-bottom:2px solid var(--noir);transform:rotate(-45deg)}
.carte-autres[open] .ca-chev{transform:rotate(45deg)}
.ca-liste{list-style:none;margin:0;padding:var(--e1) 0 0}
.carte-autres[open] .ca-liste{animation:ca-crans var(--t-eclat) steps(2,jump-none) both}
@keyframes ca-crans{from{opacity:0}to{opacity:1}}
.ca{border-left:4px solid var(--ap);padding:2px 0 2px 12px;margin:0 0 var(--e4)}
.ca-rp{--ap:var(--ap-rp)}.ca-mac{--ap:var(--ap-mac)}.ca-rn{--ap:var(--ap-rn)}
.ca-nom{margin:0 0 2px;font:700 .8125rem/1.3 var(--f-texte);color:var(--ap)}
.ca-cit{margin:0 0 var(--e1);font:400 1rem/1.45 var(--f-texte);color:var(--noir);overflow-wrap:anywhere}
.ca-src{margin:0 0 var(--e2);font-size:.75rem;line-height:1.45;color:var(--texte-2)}
.ca-src:last-child{margin-bottom:0}
.ca-src a{color:var(--noir);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;display:inline-block;max-width:100%;overflow-wrap:anywhere;
  transition:text-decoration-thickness var(--t-eclat) var(--c-encre),text-decoration-color var(--t-eclat) var(--c-encre)}
.ca-src a:hover,.ca-src a:focus-visible{text-decoration-thickness:2.5px}
.ca-src a:active{transition:none;text-decoration-thickness:3px;text-decoration-color:var(--partie)}
.reduit .carte-autres[open] .ca-liste{animation:none}