/* ==================================================================
 * Page d'information du parcours joueur
 *
 * « Ce jeu est terminé », « ce lien ne mène à rien » : le message
 * s'affichait dans un encadré gris colle en haut a droite, herite du
 * theme d'origine. Il prend la forme d'une carte centree, lisible sur
 * telephone comme sur ecran large.
 *
 * Feuille autonome : elle ne s'appuie sur aucune classe du theme, pour
 * que le reste du formulaire joueur ne bouge pas.
 * ================================================================== */

/* Le message est pose dans le gabarit du formulaire joueur, dont le fond
   sombre et le conteneur etroit debordaient de chaque cote de la carte. On
   les neutralise, mais seulement sur les pages qui portent ce message. */
body:has(.lg-message){
    background: #f6f5f2;
}
body:has(.lg-message) .top-content,
body:has(.lg-message) .top-content > .container{
    padding: 0;
    background: none;
}
body:has(.lg-message) .top-content > .container{
    width: 100%;
    max-width: none;
    margin: 0;
}

.lg-message{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    background: #f6f5f2;
    /* Bootstrap 3 pose html{font-size:10px} : toute taille en rem y serait
       divisee par 1,6. Cette feuille s'en tient donc aux pixels, et fixe sa
       propre hauteur de ligne, le theme imposant 30px a tout le corps. */
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

.lg-message__carte{
    width: 100%;
    max-width: 520px;
    padding: 40px 36px 36px;
    border-radius: 18px;
    background: #fff;
    color: #23211c;
    text-align: center;
    box-shadow: 0 16px 46px rgba(24, 30, 38, .12);
}

/* Pastille d'icone, dessinee plutot qu'issue d'une police : le formulaire
   joueur charge Font Awesome depuis un CDN, absent hors ligne. */
/* L'icone est dessinee en degrades : pas de pastille de fond, l'image se
   suffit. */
.lg-message__icone{
    display: block;
    width: 104px;
    height: 104px;
    margin: 0 auto 22px;
}
.lg-message__icone svg{ display: block; width: 100%; height: 100%; }

.lg-message__logo{
    display: block;
    max-width: 190px;
    max-height: 80px;
    margin: 0 auto 18px;
    object-fit: contain;
}

.lg-message__titre{
    margin: 0 0 14px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.25;
    color: #14161a;
}

.lg-message__texte{
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #4a463d;
}
.lg-message__texte p{ margin: 0 0 10px; }
.lg-message__texte p:last-child{ margin-bottom: 0; }

.lg-message__note{
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6f6a5e;
}

.lg-message__actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 22px;
}

.lg-message__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 34px;
    border: 1px solid #d9d5cd;
    border-radius: 12px;
    background: #fff;
    color: #23211c;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lg-message__btn:hover,
.lg-message__btn:focus{ background: #f1efe9; color: #23211c; text-decoration: none; }

/* Bouton principal : bleu de l'horloge, pour que la carte tienne d'une
   seule couleur. Le noir plein faisait un pave sans rapport avec l'icone. */
.lg-message__btn--primaire{
    border-color: #4b5fd6;
    background: #4b5fd6;
    color: #fff;
    box-shadow: 0 8px 20px rgba(75, 95, 214, .28);
}
.lg-message__btn--primaire:hover,
.lg-message__btn--primaire:focus{
    background: #3f51bd;
    border-color: #3f51bd;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(75, 95, 214, .34);
}
.lg-message__btn--primaire:focus-visible{ outline: 3px solid rgba(75,95,214,.35); outline-offset: 2px; }

@media (max-width: 420px){
    .lg-message__carte{ padding: 30px 22px 26px; }
    .lg-message__icone{ width: 84px; height: 84px; margin-bottom: 18px; }
    .lg-message__titre{ font-size: 23px; }
    .lg-message__texte{ font-size: 16px; }
    .lg-message__btn{ width: 100%; }
}