/* =========================================================================
   MUSLIMA WORK — L'INVITATION À INSTALLER

   Un panneau qui monte du bas, posé sur la page et non par-dessus elle : pas
   de voile, pas de fond assombri. Il n'en a pas besoin — il est opaque, cerné
   d'un filet et détaché par une ombre très courte, et on lit parfaitement ce
   qu'il dit sans rien éteindre derrière. Un voile aurait fait de cette
   proposition une interruption, ce qu'elle n'est pas.

   Les couleurs sont celles de la maison, reprises de style.css : l'ivoire rosé
   du fond, le prune du texte, le dégradé du bouton principal, le rose très
   pâle du filet. Rien n'est inventé ici.

   Elle ne paraît pas au-delà de 1024 px. Le composant le sait aussi — il ne se
   rend pas —, et cette feuille le redit : deux barrières valent mieux qu'une
   quand la fenêtre change de taille en cours de route.

   Voir components/public/InvitationInstallation.tsx.
   ========================================================================= */
.inst{display:none}

@media (max-width:1024px){
  .inst{
    /* Rallumé : la règle de base, hors media, éteint le panneau pour les
       grands écrans. C'est ici, et seulement ici, qu'il paraît. */
    display:block;
    position:fixed;z-index:480;
    /* Sous la carte de consentement (500) et sous le tiroir de contact (540) :
       l'ordre d'empilement dit la même chose que la règle de conduite — cette
       invitation passe après tout le reste. */
    left:14px;right:14px;
    /* Le repli d'écran des iPhone, et quatorze pixels en plus : le panneau ne
       se glisse jamais sous la barre du navigateur. */
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    /* Jamais plus haut que l'écran, même mode d'emploi ouvert sur un petit
       téléphone : il défile alors de lui-même plutôt que de déborder. */
    max-height:calc(100dvh - 88px);
    overflow-y:auto;overscroll-behavior:contain;
    padding:20px 18px 18px;
    background:#FDFAFC;
    border:1px solid #F2E2EB;
    border-radius:18px;
    /* Une ombre courte et claire, pour décoller le panneau du contenu. Ni
       halo, ni diffusion large : il est posé, il ne flotte pas. */
    box-shadow:0 6px 22px rgba(50,23,42,.11);
    color:var(--plum,#32172A);
    /* L'apparition : un fondu et seize pixels. Rien d'autre, et une seule
       fois — aucune animation ne tourne ensuite, ni sur l'icône ni ailleurs. */
    animation:inst-entre 300ms cubic-bezier(.22,.61,.36,1) both;
  }

  /* --- La croix ---------------------------------------------------------
     Posée dans l'angle, à la mesure d'un doigt — quarante-quatre pixels de
     cible pour un signe de vingt-deux. */
  .inst__x{
    position:absolute;top:8px;right:8px;
    display:grid;place-items:center;
    width:44px;height:44px;padding:0;
    background:none;border:0;border-radius:10px;
    color:#8C7683;cursor:pointer;
  }
  .inst__x:hover{color:var(--plum,#32172A)}
  .inst__x:focus-visible{outline:2px solid var(--rose,#C32371);outline-offset:-2px}

  /* --- La tête : l'icône, le sur-titre, le titre ------------------------ */
  /* L'icône se cale en haut, non au milieu : le sur-titre tient sur deux
     lignes dès que l'écran est étroit — trente-deux signes en capitales
     espacées ne passent pas en une seule sous 430 px — et une icône centrée
     sur trois lignes de texte flotte sans rien aligner.

     Le rembourrage de droite réserve la place de la croix : le sur-titre est
     la seule ligne qui monte à sa hauteur, et il ne doit pas passer dessous. */
  .inst__tete{display:flex;align-items:flex-start;gap:13px;padding-right:44px}
  /* L'icône est montrée comme une icône d'application : une tuile arrondie au
     rayon des icônes de téléphone, et rien autour. */
  .inst__ico{
    flex:none;display:block;width:52px;height:52px;margin-top:2px;
    border-radius:13px;overflow:hidden;
    box-shadow:0 2px 8px rgba(50,23,42,.14);
  }
  .inst__ico img{display:block;width:100%;height:100%}
  .inst__dire{min-width:0}
  .inst__sur{
    margin:0;
    font-size:10px;line-height:1.5;
    font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--rose,#C32371);
    /* Quand il se replie, que ce soit en deux lignes de longueur voisine
       plutôt qu'une longue et un mot seul. */
    text-wrap:balance;
  }
  .inst__t{
    margin:4px 0 0;
    font-size:17px;line-height:1.26;letter-spacing:-.022em;font-weight:600;
    color:var(--plum,#32172A);
  }

  .inst__p{
    margin:13px 0 0;
    font-size:14.5px;line-height:1.6;color:var(--ink-2,#5A5058);
  }

  /* --- Les actions ------------------------------------------------------ */
  .inst__actions{display:flex;flex-direction:column;gap:9px;margin-top:18px}
  .inst__btn{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:48px;padding:0 18px;
    border-radius:10px;border:1px solid transparent;
    font:inherit;font-size:15px;font-weight:600;line-height:1;letter-spacing:-.008em;
    cursor:pointer;
  }
  /* Le principal porte le dégradé officiel, celui de style.css. */
  .inst__btn--plein{
    background:var(--grad-rose,linear-gradient(110deg,#901E56 0%,#C32371 55%,#D3458C 100%));
    color:#FFFFFF;
  }
  /* Le secondaire ne dispute rien : blanc, un filet rose pâle, le texte prune. */
  .inst__btn--clair{
    background:#FFFFFF;border-color:#F0DDE7;color:var(--plum,#32172A);
    font-weight:500;
  }
  .inst__btn--clair:hover{border-color:#E3C4D5;background:#FFFCFD}
  .inst__btn:focus-visible{outline:2px solid var(--plum,#32172A);outline-offset:2px}

  /* --- Le mode d'emploi iPhone -----------------------------------------
     Trois lignes, chacune ouverte par son geste. Les pastilles sont du rose
     très pâle de la marque : elles signalent l'icône, elles ne l'encadrent
     pas. Aucune capture d'écran — le dessin d'iOS change, le geste non. */
  .inst__pas{
    list-style:none;counter-reset:pas;
    margin:16px 0 0;padding:0;
    display:flex;flex-direction:column;gap:12px;
  }
  .inst__pas li{
    display:flex;align-items:flex-start;gap:12px;
    font-size:14.5px;line-height:1.5;color:var(--plum,#32172A);
  }
  .inst__pas-ico{
    flex:none;display:grid;place-items:center;
    width:34px;height:34px;margin-top:-3px;
    border-radius:10px;
    background:var(--rose-pale,#FBEAF2);
    color:var(--rose,#C32371);
  }
  .inst__note{
    margin:15px 0 0;padding-top:13px;
    border-top:1px solid #F2E2EB;
    font-size:13px;line-height:1.55;color:var(--ink-2,#5A5058);
  }

  /* --- La petite tablette ------------------------------------------------
     Au-delà de 480 px, le panneau cesse de s'étirer d'un bord à l'autre : à
     768 px il aurait fait sept cent quarante de large pour trois lignes de
     texte, et la lecture s'y perdait. Il garde sa mesure et se centre. */
  @media (min-width:480px){
    .inst{
      left:0;right:0;
      width:min(420px,calc(100% - 32px));
      margin-inline:auto;
    }
  }

  /* --- Les écrans les plus étroits --------------------------------------
     À 320 px, la colonne n'offre que 256 pixels une fois les marges et le
     rembourrage retirés. Le titre et l'icône se resserrent d'un cran ; rien
     n'est retiré, et rien ne déborde. */
  @media (max-width:359px){
    .inst{left:12px;right:12px;padding:18px 15px 16px}
    .inst__tete{gap:11px}
    .inst__ico{width:46px;height:46px;border-radius:12px}
    .inst__t{font-size:16px}
    .inst__p,.inst__pas li{font-size:14px}
  }
}

@keyframes inst-entre{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* Mouvement réduit : le panneau est là, à sa place, sans fondu ni glissement.
   Il reste entièrement utilisable — c'est la seule chose qui compte. */
@media (prefers-reduced-motion:reduce){
  .inst{animation:none}
}