/* ==================================================================
 * Formulaire joueur « v2 » — servi avec les loading pages modeles 4 et 5.
 *
 * Feuille posee APRES le bundle Bootstrap 3, qui reste charge pour ses
 * fenetres modales : tout ce qui touche au formulaire est donc redefini
 * ici, souvent avec une specificite superieure a la sienne.
 *
 * ⚠ Bootstrap 3 pose html{font-size:10px} sur ce gabarit : une taille en
 * rem y serait divisee par 1,6. Cette feuille s'en tient aux pixels.
 * ================================================================== */

:root{
    --pm-titre:       #ffffff;
    --pm-texte:       #e9e6e1;
    --pm-fond:        #0d1013;
    --pm-voile:       rgba(8, 10, 14, .55);
    --pm-carte-fond:  rgba(14, 16, 20, .92);
    --pm-carte-texte: #f4f2ee;
    --pm-bouton:      #d81b45;
    --pm-bouton-txt:  #ffffff;
    --pm-rayon:       14px;
    --pm-font-titre:  'Varela Round', system-ui, sans-serif;
    --pm-font-texte:  'Nunito', system-ui, sans-serif;
}

body.pm{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background-color: var(--pm-fond);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    color: var(--pm-texte);
    font-family: var(--pm-font-texte);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Voile entre la photo et le texte : sans lui, un fond clair rend le titre
   blanc illisible. */
body.pm::before{
    content: "";
    position: fixed;
    inset: 0;
    background: var(--pm-voile);
    pointer-events: none;
    z-index: 0;
}

body.pm > .pm-main,
body.pm > .pm-pied{ position: relative; z-index: 1; }

.pm-main{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Marges resserrees : sur un ordinateur portable, le formulaire complet
       plus le pied depassaient d'un cheveu et la page defilait. */
    padding: 14px 16px 2px;
}

.pm-scene{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

/* ------------------------------------------------------------------
 * En-tete : logo, titre, texte de presentation.
 * ---------------------------------------------------------------- */
.pm-logo{
    display: block;
    max-width: 190px;
    max-height: 110px;
    width: auto;
    height: auto;
    margin: 0 auto 18px;
}

.pm-titre{
    margin: 0 0 10px;
    color: var(--pm-titre);
    font-family: var(--pm-font-titre);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.pm-intro{
    margin: 0 0 22px;
    color: var(--pm-texte);
    font-size: 16px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.pm-intro p{ margin: 0 0 8px; }
.pm-intro p:last-child{ margin-bottom: 0; }

/* ------------------------------------------------------------------
 * La carte du formulaire.
 * ---------------------------------------------------------------- */
.pm-carte{
    padding: 20px 20px 20px;
    border-radius: 20px;
    /* L'image de fond de la carte, reglee sur la loading page, est reprise
       ici ; la couleur reste le repli et borde l'image. */
    background-color: var(--pm-carte-fond);
    background-image: var(--pm-carte-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--pm-carte-texte);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    text-align: left;
}

.pm-carte__accroche{
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.pm-erreur{
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(216, 27, 69, .14);
    color: #ff8ba6;
    font-size: 15px;
    font-weight: 600;
}

.pm-champ{ margin: 0 0 10px; }

.pm-label{
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    opacity: .85;
}

/* Champs : Bootstrap 3 impose sa hauteur, son ombre interne et son bleu de
   focus — on reprend la main sur les trois. */
body.pm .pm-input,
body.pm input.pm-input.form-control{
    width: 100%;
    height: auto;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
    color: var(--pm-carte-texte);
    font-family: inherit;
    font-size: 16px;   /* moins de 16px, iOS zoome au focus */
    line-height: 1.3;
    transition: border-color .15s ease, background-color .15s ease;
}

body.pm .pm-input::placeholder{ color: rgba(244, 242, 238, .55); }

body.pm .pm-input:focus{
    outline: none;
    border-color: var(--pm-bouton);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(216, 27, 69, .18);
}

.pm-erreur-champ{
    margin: 6px 0 0;
    color: #ff8ba6;
    font-size: 14px;
}

/* Cases a cocher et boutons radio */
.pm-choix{ border: 0; padding: 0; margin: 0 0 12px; }
.pm-choix legend{ border: 0; margin: 0 0 6px; padding: 0; font-size: 14px; }

.pm-option{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 0 0;
    font-weight: 600;
}

.pm-consentement{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}
.pm-consentement input{ margin: 3px 0 0; flex: 0 0 auto; }
.pm-consentement a{ color: inherit; text-decoration: underline; }

.pm-photo{
    max-width: 60%;
    height: auto;
    border-radius: 10px;
}

/* ------------------------------------------------------------------
 * Boutons.
 * ---------------------------------------------------------------- */
body.pm .pm-bouton{
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--pm-bouton);
    color: var(--pm-bouton-txt);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}
body.pm .pm-bouton:hover,
body.pm .pm-bouton:focus{ filter: brightness(1.08); color: var(--pm-bouton-txt); }
body.pm .pm-bouton:active{ transform: translateY(1px); }
body.pm .pm-bouton[disabled]{ opacity: .5; cursor: not-allowed; }

/* Bouton secondaire — « prendre une photo », « recommencer la saisie ».
   Sans cadre lui non plus : c'est un aplat discret qui le distingue du
   bouton principal. */
body.pm .pm-bouton--second{
    background: rgba(255, 255, 255, .12);
    color: var(--pm-carte-texte);
}

/* ------------------------------------------------------------------
 * Pied : partage et signature, comme au bas de la loading page.
 * ---------------------------------------------------------------- */
.pm-pied{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 6px 16px calc(8px + env(safe-area-inset-bottom, 0px));
}

.pm-pied .lg-share{ margin: 0; }

.pm-marque{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #23211c;
    font-size: 12px;
    font-weight: 700;
}
.pm-marque__logo{ display: block; width: auto; height: 15px; }

/* ------------------------------------------------------------------
 * Fenetres modales : Bootstrap 3 les pilote, on les rhabille.
 * ---------------------------------------------------------------- */
.pm-modale .modal-content{
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    color: #23211c;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    overflow: hidden;
}
/* Titre centre sur toute la largeur : la croix est posee par-dessus, et
   non alignee a cote, sans quoi elle decalait le titre vers la gauche. */
.pm-modale .modal-header{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 52px;
    border-bottom: 1px solid #eceae4;
}
.pm-modale .modal-header .close{
    position: absolute;
    top: 50%;
    right: 16px;
    float: none;
    margin: 0;
    transform: translateY(-50%);
    font-size: 26px;
    line-height: 1;
    opacity: .5;
}
.pm-modale .modal-title{
    margin: 0;
    font-family: var(--pm-font-titre);
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}
.pm-modale .modal-body{
    padding: 18px 20px;
    max-height: 60vh;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
}
.pm-modale .modal-body img{ max-width: 100%; height: auto; }
.pm-modale .modal-footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid #eceae4;
}

/* Les fenetres ne sont pas le jeu : leurs boutons restent sobres et
   discrets, en noir, et ne reprennent ni la couleur ni la largeur du
   bouton de participation. */
.pm-modale .modal-footer .pm-bouton{
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 9px 22px;
    background: #14161a;
    color: #ffffff;
    font-size: 14px;
}
.pm-modale .modal-footer .pm-bouton:hover,
.pm-modale .modal-footer .pm-bouton:focus{ color: #ffffff; }

.pm-modale .modal-footer .pm-bouton--second{
    background: rgba(35, 33, 28, .08);
    color: #23211c;
}
.pm-modale .modal-footer .pm-bouton--second:hover,
.pm-modale .modal-footer .pm-bouton--second:focus{ color: #23211c; }
.pm-modale .error__modal{
    margin: 0;
    color: #c11f3f;
    font-weight: 700;
}

/* ------------------------------------------------------------------
 * Ecrans larges.
 * ---------------------------------------------------------------- */
@media (min-width: 768px){
    .pm-titre{ font-size: 34px; }
    .pm-carte{ padding: 24px 30px 26px; }
    .pm-main{ padding: 22px 16px 6px; }
}


/* ------------------------------------------------------------------
 * Ecrans peu hauts (portables 720/768 px, telephones) : le formulaire
 * complet plus le pied depassaient de quelques dizaines de pixels, ce qui
 * suffit a faire defiler la page et a cacher la barre de partage.
 * ---------------------------------------------------------------- */
@media (max-height: 820px){
    body.pm{ font-size: 15px; }
    .pm-titre{ font-size: 24px; margin-bottom: 8px; }
    .pm-carte{ padding: 14px 18px 16px; }
    .pm-carte__accroche{ margin-bottom: 10px; font-size: 15px; }
    .pm-champ{ margin-bottom: 8px; }
    body.pm .pm-input{ padding: 10px 14px; }
    .pm-consentement{ margin-bottom: 8px; padding: 8px 12px; font-size: 13px; }
    body.pm .pm-bouton{ margin-top: 12px; padding: 12px 20px; }
    .pm-main{ padding: 10px 16px 2px; }
    .pm-pied{ padding: 4px 16px calc(6px + env(safe-area-inset-bottom, 0px)); }
    .pm-label{ margin-bottom: 4px; }
}


/* ------------------------------------------------------------------
 * Barre de partage : sous la carte, pas collee au bas de l'ecran.
 *
 * Le pied gardait sa place tout en bas et la scene absorbait le reste :
 * sur un grand ecran, les boutons se retrouvaient a plusieurs centimetres
 * du formulaire, comme detaches. On centre desormais l'ensemble — carte et
 * pied — et le pied suit la carte.
 *
 * Reserve aux ecrans assez hauts : plus bas, le contenu occupe deja toute
 * la hauteur, et centrer un contenu plus grand que la fenetre en rendrait
 * le haut inaccessible.
 * ---------------------------------------------------------------- */
@media (min-height: 700px){
    body.pm{ justify-content: center; }
    body.pm > .pm-main{ flex: 0 1 auto; }
    body.pm > .pm-pied{ padding-top: 16px; }
}