/* installer.css — l'invitation à installer (bande sous l'en-tête) et la feuille « Comment ? » (décision DA 18, planche 25).
 * Jetons : css/app-core.css. Script : js/ui/ui-installer.js (pose la bande, mesure --h-invitation). */

/* La bande : papier, contour et ombre noirs, scotch tournesol, sous l'en-tête. Au-dessus de la carte et des écrans, sous le voile. */
.invitation{position:fixed;left:12px;right:12px;top:calc(var(--h-entete, 78px) + 10px);z-index:4;
  display:grid;grid-template-columns:44px 1fr auto;grid-template-rows:auto auto;column-gap:var(--e3);align-items:center;
  padding:8px 4px 6px 10px;background:var(--papier);border:1.5px solid var(--noir);box-shadow:3px 3px 0 var(--noir)}
.invitation[hidden]{display:none}
.invit-scotch{position:absolute;left:50%;top:-8px;width:60px;height:16px;margin-left:-30px;background:var(--tournesol);opacity:.6;
  transform:rotate(4deg);pointer-events:none}
.invit-icone{grid-row:1 / 3;width:44px;height:44px;border-radius:8px;box-shadow:2px 2px 0 var(--noir)}
.invit-texte{grid-row:1 / 3;margin:0;font:700 .9375rem/1.25 var(--f-texte);color:var(--noir);text-wrap:balance}
.invit-fermer{grid-column:3;grid-row:1;justify-self:end;width:48px;height:40px;margin:-6px 0 -6px;padding:0;border:0;background:none;cursor:pointer;
  position:relative;-webkit-tap-highlight-color:transparent}
/* croix carrée : carré papier, croix noire ; au toucher (geste 2, coup de tampon) le carré passe au noir, la croix au papier */
.invit-fermer::before{content:"";position:absolute;right:8px;top:9px;width:22px;height:22px;box-sizing:border-box;
  border:1.2px solid var(--noir);background:var(--papier);transition:background-color var(--t-eclat) var(--c-encre)}
.invit-fermer::after{content:"";position:absolute;right:8px;top:9px;width:22px;height:22px;background:var(--noir);
  -webkit-mask:linear-gradient(45deg,transparent 46%,#000 46%,#000 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#000 46%,#000 54%,transparent 54%);
  -webkit-mask-size:60% 60%,60% 60%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;
  mask:linear-gradient(45deg,transparent 46%,#000 46%,#000 54%,transparent 54%) center/60% 60% no-repeat,linear-gradient(-45deg,transparent 46%,#000 46%,#000 54%,transparent 54%) center/60% 60% no-repeat;
  transition:background-color var(--t-eclat) var(--c-encre)}
.invit-fermer:active::before{background:var(--noir);transition:none}
.invit-fermer:active::after{background:var(--papier);transition:none}
.invit-fermer:focus-visible{outline:3px solid var(--tournesol);outline-offset:-4px}
/* « Comment ? » : trait qui s'encre (geste 3) */
.invit-comment{grid-column:3;grid-row:2;justify-self:end;display:flex;align-items:center;min-height:40px;padding:0 8px;white-space:nowrap;
  font:700 .875rem/1 var(--f-texte);color:var(--noir);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:text-decoration-thickness var(--t-eclat) var(--c-encre)}
.invit-comment:active{text-decoration-thickness:3px;transition:none}
@media (hover:hover){.invit-comment:hover{text-decoration-thickness:2.5px}}
.invit-comment:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}

/* Tant que la bande est là, elle pousse ce qui était juste sous l'en-tête */
body.invite #ecrans{top:calc(var(--h-entete, 78px) + var(--h-invitation, 0px))}
body.invite[data-vue="quartier"] .act-retour,body.invite[data-vue="hameau"] .act-retour{top:calc(var(--h-entete, 78px) + var(--h-invitation, 0px) + 10px)}

/* La feuille « Comment ? » */
.installer{display:flex;flex-direction:column;gap:var(--e5);max-width:34rem}
.inst-intro,.inst-deja{margin:0;font:700 1rem/1.4 var(--f-texte);color:var(--noir);text-wrap:balance}
.inst-ordi{margin:0;font:400 .875rem/1.4 var(--f-texte);color:var(--texte-3);text-wrap:pretty}
.inst-bloc{display:flex;flex-direction:column;gap:var(--e3)}
.inst-titre{align-self:flex-start;margin:0;padding:4px 12px 3px;background:var(--noir);color:var(--papier);
  font:800 1.25rem/1.1 var(--f-titre);font-stretch:80%;text-transform:lowercase;transform:rotate(-1deg)}
.inst-etapes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--e3)}
.inst-etapes[hidden]{display:none}
.inst-etapes li{display:flex;align-items:center;gap:var(--e3);min-height:32px;font:400 1rem/1.3 var(--f-texte);color:var(--noir);text-wrap:pretty}
.inst-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tournesol);
  font:800 1rem/1 var(--f-titre);color:var(--noir)}
.inst-pic{flex:none;width:28px;height:28px;margin-left:auto;fill:none;stroke:var(--noir);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inst-bloc[data-os="android"] .inst-pic circle{fill:var(--noir);stroke:none}
.inst-bouton[hidden]{display:none}