/* ------------------------------------------------------------------ *
 *  Module "Code sécurisé" - feuille de style responsive (PWA)         *
 *  Reprend la charte du module d'administration Climbing 3.0          *
 *  (orange #FFA500, carte type "modal", police Verdana).             *
 * ------------------------------------------------------------------ */

:root {
   --orange:      #FFA500;
   --orange-dark: #E08E00;
   --grey:        #848585;
   --grey-dark:   #4D4E4E;
   --input-bg:    #F1F2F2;
   --text:        #2B2B2B;
   --error:       #D32F2F;
}

* { box-sizing: border-box; }

html, body {
   margin: 0;
   padding: 0;
   min-height: 100%;
}

body {
   font: 14px Verdana, Arial, Helvetica, sans-serif;
   color: var(--text);
   /* Fond sombre évoquant l'overlay du module admin */
   background: #2B2B2B linear-gradient(160deg, #3a3a3a 0%, #222 100%) fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   min-height: 100dvh;
   padding: 16px;
   /* Marges de sécurité pour les encoches (PWA plein écran) */
   padding-top: calc(16px + env(safe-area-inset-top));
   padding-bottom: calc(16px + env(safe-area-inset-bottom));
   -webkit-user-select: none;
   user-select: none;
}

/* ---------- Carte centrale (équivalent #div_modal) ---------- */
.card {
   width: 100%;
   max-width: 420px;
   background: #fff;
   border: 1px solid var(--orange);
   border-top: 5px solid var(--orange);
   border-radius: 8px;
   padding: 22px 22px 26px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- En-tête : logo + titre ---------- */
.brand {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 6px;
}
.brand img.lock { width: 46px; height: 46px; }
.brand .titles { line-height: 1.25; }
.brand .app { font-size: 13px; color: var(--grey); font-weight: bold; }
.brand h1 { margin: 2px 0 0; font-size: 17px; color: var(--text); }

.logo-row {
   text-align: center;
   margin-bottom: 18px;
   padding-bottom: 14px;
   border-bottom: 1px solid #eee;
}
.logo-row img { height: 34px; }

/* ---------- Messages ---------- */
.alert-error {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #FDECEA;
   border: 1px solid var(--error);
   border-radius: 6px;
   color: var(--error);
   padding: 10px 12px;
   margin-bottom: 16px;
   font-size: 13px;
   font-weight: bold;
}
.alert-error img { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------- Formulaire ---------- */
.field { margin-bottom: 16px; }
.field label {
   display: block;
   font-size: 13px;
   font-weight: bold;
   color: var(--grey-dark);
   margin-bottom: 6px;
}
.field input {
   width: 100%;
   font-size: 16px; /* >=16px : évite le zoom auto sur iOS */
   color: var(--text);
   background: var(--input-bg);
   border: 1px solid transparent;
   border-bottom: 1px solid var(--orange);
   border-radius: 6px;
   padding: 12px;
   -webkit-user-select: text;
   user-select: text;
}
.field input:focus {
   outline: none;
   border: 1px solid var(--orange);
}

/* ---------- Boutons ---------- */
.actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: 22px;
}
.btn {
   flex: 1;
   border: 1px solid var(--orange);
   background: var(--orange);
   color: #fff;
   font-size: 15px;
   font-weight: bold;
   border-radius: 6px;
   padding: 13px 16px;
   cursor: pointer;
   transition: background-color .15s;
}
.btn:hover, .btn:active { background: var(--orange-dark); }
.btn-link {
   color: var(--orange);
   font-size: 13px;
   font-weight: bold;
   text-decoration: none;
   white-space: nowrap;
}
.btn-link:hover { color: var(--grey-dark); }

/* ---------- Affichage du code ---------- */
.code-box { text-align: center; margin: 6px 0 4px; }
.code-box .label { font-size: 14px; color: var(--grey-dark); margin-bottom: 12px; }
.code {
   font-size: clamp(38px, 14vw, 54px);
   font-weight: bold;
   letter-spacing: 10px;
   color: var(--text);
   background: var(--input-bg);
   border-radius: 8px;
   padding: 14px 10px;
   /* compense le letter-spacing du dernier chiffre pour rester centré */
   text-indent: 10px;
}
.code-box .valid { font-size: 13px; color: var(--grey); margin-top: 14px; }

/* ---------- Bouton d'installation PWA ---------- */
.install {
   display: none;
   margin-top: 18px;
   text-align: center;
}
.install button {
   background: none;
   border: 1px solid var(--orange);
   color: var(--orange);
   font-size: 13px;
   font-weight: bold;
   border-radius: 6px;
   padding: 9px 14px;
   cursor: pointer;
}
.install button:hover { background: var(--orange); color: #fff; }

/* ---------- Pied ---------- */
.foot {
   margin-top: 16px;
   text-align: center;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.55);
}

/* ---------- Grands écrans : on garde la carte compacte ---------- */
@media (min-width: 480px) {
   .card { padding: 26px 30px 30px; }
}