/* ============================================
   GÉNÉRALE CARROSSERIE AUTO CHABI DJAFAR
   admin.css — la page de gestion du stock.

   style.css est chargé AVANT celle-ci : les
   couleurs (var(--bleu)…), les polices et le
   .conteneur viennent de là. Ce fichier
   n'ajoute que ce qui est propre à l'admin.

     1. En-tête
     2. La barre de commande
     3. Les compteurs
     4. Les filtres en pastilles
     5. Le bandeau de résultats
     6. La grille de pièces
     7. « Afficher plus » et « rien trouvé »
     8. Le panneau ajouter / modifier
     9. La bulle de confirmation
    10. Sur téléphone
    11. L'écran de verrouillage
   ============================================ */

/* Cette page est un outil de travail, pas une vitrine : fond
   blanc cassé, tout est lisible, rien ne cherche à séduire. */
.page-admin {
    background-color: var(--gris-fond);
}

/* ⚠️ Règle à ne pas retirer.

   L'attribut « hidden » du HTML cache un élément… sauf si une
   règle CSS lui donne un display (flex, grid…) : la règle écrite
   ici l'emporte alors, et l'élément reste visible pour toujours.
   Plusieurs blocs de cette page (le panneau, la croix de la
   recherche, le message « rien trouvé ») sont dans ce cas.

   Cette ligne rétablit le comportement attendu une bonne fois
   pour toutes : « hidden » cache, quoi qu'il arrive. */
[hidden] {
    display: none !important;
}


/* --------------------------------------------
   1. EN-TÊTE
-------------------------------------------- */
.admin-entete {
    background-color: var(--bleu);
    color: var(--blanc);
    padding: 18px 28px;
}

.admin-entete-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.admin-identite {
    display: flex;
    align-items: center;
    gap: 13px;
}

/* Le carré « CD » : le même repère que la favicon de l'onglet. */
.admin-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    background-color: var(--bleu-logo);
    font-family: "Bricolage Grotesque", "Archivo", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.admin-entete h1 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -0.4px;
}

.admin-sous-titre {
    margin: 1px 0 0;
    font-size: 12.5px;
    color: var(--bleu-clair);
}

.admin-entete-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* La pastille d'état. Elle remplace l'ancien bandeau
   d'avertissement : au lieu d'un pavé à lire une fois, une
   information courte visible en permanence. */
.admin-etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 100px;
    background-color: rgba(226, 239, 229, 0.16);
    color: #b9e2c8;
    font-size: 12.5px;
    font-weight: 600;
}

/* Rouge quand le navigateur refuse d'enregistrer (navigation
   privée, tiroir plein) : il faut le savoir tout de suite. */
.admin-etat.erreur {
    background-color: rgba(150, 32, 31, 0.28);
    color: #ffc9c8;
}

.admin-lien-site {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    color: var(--blanc);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}

.admin-lien-site:hover {
    border-color: var(--blanc);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Le même costume que le lien voisin : ce sont deux façons de
   quitter la page, elles n'ont pas à se ressembler à moitié. */
.admin-verrouiller {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    background-color: transparent;
    color: var(--blanc);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.admin-verrouiller:hover {
    border-color: var(--blanc);
    background-color: rgba(255, 255, 255, 0.1);
}

.admin-contenu {
    padding: 22px 28px 60px;
}


/* --------------------------------------------
   2. LA BARRE DE COMMANDE
-------------------------------------------- */
.admin-commande {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* position: relative = le repère qui permet de poser la loupe et
   la croix PAR-DESSUS le champ, aux bons endroits. */
.admin-recherche {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 240px;
}

.admin-loupe {
    position: absolute;
    left: 16px;
    color: var(--gris-clair);
    pointer-events: none;   /* la loupe ne doit pas voler le clic */
}

.admin-recherche input {
    width: 100%;
    height: 50px;
    padding: 0 48px 0 46px;    /* 46px à gauche : la place de la loupe */
    border: 1.5px solid var(--bordure);
    border-radius: 12px;
    background-color: var(--blanc);
    font-family: inherit;
    font-size: 15px;
    color: var(--encre);
}

.admin-recherche input:focus {
    border-color: var(--bleu);
    outline: none;
}

.admin-vider {
    position: absolute;
    right: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 100px;
    background-color: var(--gris-carte);
    color: var(--gris-texte);
    cursor: pointer;
}

.admin-vider:hover {
    background-color: var(--bordure);
    color: var(--encre);
}

.admin-btn-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 24px;
    border: none;
    border-radius: 12px;
    background-color: var(--bleu);
    color: var(--blanc);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    flex: none;
}

.admin-btn-principal:hover {
    background-color: #1f3a5c;
}


/* --------------------------------------------
   3. LES COMPTEURS

   Plus petits que dans l'ancienne version : ce sont des repères,
   pas le sujet de la page. Ils tiennent sur une seule ligne.
-------------------------------------------- */
.admin-compteurs {
    display: flex;
    gap: 9px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.admin-compteur {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--bordure);
    border-radius: 11px;
    background-color: var(--blanc);
}

.admin-compteur-nombre {
    font-family: "Bricolage Grotesque", "Archivo", sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    color: var(--bleu);
}

.admin-compteur-nombre.vert  { color: var(--vert); }
.admin-compteur-nombre.ambre { color: var(--ambre); }

.admin-compteur-libelle {
    font-size: 13px;
    color: var(--gris-texte);
}


/* --------------------------------------------
   4. LES FILTRES EN PASTILLES
-------------------------------------------- */
/* Avant, les deux groupes de pastilles (familles + disponibilité)
   tenaient sur une seule ligne. Avec 16 familles au lieu de 6, ils
   s'emmêlaient : la ligne débordait et « En stock » se retrouvait
   coincé au milieu des familles.
   On les empile donc : les familles occupent autant de lignes
   qu'il faut, la disponibilité passe dessous, bien à part. */
.admin-filtres {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 20px;
}

/* Les trois menus de la recherche par voiture, côte à côte ;
   ils passent l'un sous l'autre sur un écran étroit. */
.admin-voiture {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.admin-voiture select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    background-color: var(--blanc);
    color: var(--encre-douce);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.admin-voiture select:hover {
    border-color: var(--bleu-clair);
}

/* Un menu choisi se colore : on voit qu'un filtre est actif. */
.admin-voiture select.actif {
    border-color: var(--bleu);
    color: var(--bleu);
}

.admin-voiture select:disabled {
    opacity: 0.55;
    cursor: default;
}

.admin-pastilles {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Le séparateur était un trait VERTICAL entre deux groupes côte à
   côte. Les groupes étant maintenant l'un au-dessus de l'autre,
   il devient un trait HORIZONTAL qui les sépare. */
.admin-separateur {
    width: 100%;
    height: 1px;
    background-color: var(--bordure);
    margin: 2px 0;
}

.admin-pastille {
    padding: 8px 15px;
    border: 1.5px solid var(--bordure);
    border-radius: 100px;
    background-color: var(--blanc);
    color: var(--encre-douce);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.admin-pastille:hover {
    border-color: var(--bleu-clair);
}

/* La pastille active se remplit de bleu : on voit d'un coup
   d'œil quel filtre est en cours, même en bas de page. */
.admin-pastille.active {
    border-color: var(--bleu);
    background-color: var(--bleu);
    color: var(--blanc);
}


/* --------------------------------------------
   5. LE BANDEAU DE RÉSULTATS
-------------------------------------------- */
.admin-resultats {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.admin-resultats h2 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
}

.admin-resultats p {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--gris-texte);
}

.admin-resultats-compteur {
    font-size: 13px;
    color: var(--gris-clair);
    white-space: nowrap;
}


/* --------------------------------------------
   6. LA GRILLE DE PIÈCES

   « auto-fill » + « minmax(240px, 1fr) » : le navigateur met
   autant de colonnes de 240 px minimum qu'il peut, et les
   étire pour remplir la largeur. Une seule règle sert donc du
   grand écran au téléphone, sans compter les colonnes à la main.
-------------------------------------------- */
.admin-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.admin-carte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bordure);
    border-radius: 14px;
    background-color: var(--blanc);
    overflow: hidden;      /* le contenu suit les coins ronds */
}

.admin-carte:hover {
    border-color: var(--bleu-clair);
}

.admin-carte-corps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px 10px;
    flex-grow: 1;          /* pousse le pied de carte vers le bas */
}

.admin-carte-corps h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
}

/* Le nom arabe a besoin de sa propre police : les deux autres
   ne savent pas dessiner les lettres arabes. */
.admin-carte-ar {
    margin: 0;
    font-family: "Cairo", "Archivo", sans-serif;
    font-size: 13px;
    color: var(--encre-douce);
}

.admin-carte-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.admin-carte-marque {
    padding: 3px 9px;
    border-radius: 100px;
    background-color: var(--gris-fond);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bleu);
}

.admin-carte-suite {
    font-size: 11.5px;
    color: var(--gris-texte);
}

.admin-carte-pied {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    border-top: 1px solid var(--gris-fond);
}

/* Le bouton de disponibilité : mêmes couleurs que les pastilles
   du catalogue, pour qu'on reconnaisse tout de suite ce que voit
   le client. C'est le geste le plus fréquent de la page, donc il
   prend toute la place restante. */
.admin-stock {
    flex-grow: 1;
    height: 32px;
    border: 1.5px solid transparent;
    border-radius: 100px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.admin-stock.en-stock {
    background-color: var(--vert-fond);
    color: var(--vert);
}

.admin-stock.sur-commande {
    background-color: var(--ambre-fond);
    color: var(--ambre);
}

.admin-stock:hover {
    border-color: currentColor;   /* le contour prend la couleur du texte */
}

/* Les trois petits boutons carrés : modifier, dupliquer, supprimer. */
.admin-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    flex: none;
    border: 1.5px solid var(--bordure);
    border-radius: 9px;
    background: none;
    color: var(--gris-texte);
    font-family: inherit;
    cursor: pointer;
}

.admin-icone:hover {
    border-color: var(--bleu-clair);
    color: var(--bleu);
}

.admin-icone.danger:hover {
    border-color: #b03030;
    color: #b03030;
}

/* Le bouton poubelle une fois ARMÉ : il devient rouge, s'élargit
   et affiche « Sûr ? ». Il faut un second clic pour effacer —
   avec des milliers de pièces, un clic de trop ne doit pas
   pouvoir supprimer une ligne sans prévenir. */
.admin-icone.arme {
    width: auto;
    padding: 0 10px;
    border-color: #b03030;
    background-color: #f7e6e6;
    color: #b03030;
    font-size: 12px;
    font-weight: 700;
}


/* --------------------------------------------
   7. « AFFICHER PLUS » ET « RIEN TROUVÉ »
-------------------------------------------- */
.admin-plus {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.admin-btn-fantome {
    height: 46px;
    padding: 0 26px;
    border: 1.5px solid var(--bordure);
    border-radius: 12px;
    background-color: var(--blanc);
    color: var(--bleu);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}

.admin-btn-fantome:hover {
    background-color: var(--gris-carte);
}

.admin-rien {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 54px 20px;
    border: 1.5px dashed var(--bordure);
    border-radius: 14px;
    background-color: var(--blanc);
}

.admin-rien p {
    margin: 0;
    font-size: 15px;
    color: var(--gris-texte);
}

.admin-rien .admin-btn-principal {
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
}


/* --------------------------------------------
   8. LE PANNEAU AJOUTER / MODIFIER

   Il glisse depuis la droite par-dessus la page. On reste donc
   « au même endroit » : en le fermant, on retrouve la grille
   exactement comme on l'avait laissée.
-------------------------------------------- */
.admin-voile {
    position: fixed;
    inset: 0;                  /* raccourci pour top/right/bottom/left: 0 */
    display: flex;
    justify-content: flex-end;
    background-color: rgba(22, 40, 63, 0.44);
    z-index: 60;
}

.admin-panneau {
    display: flex;
    flex-direction: column;
    width: 432px;
    max-width: 100%;
    height: 100%;
    background-color: var(--blanc);
    box-shadow: -18px 0 46px rgba(22, 40, 63, 0.24);
}

.admin-panneau-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--bordure);
}

.admin-panneau-entete h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.admin-panneau-entete .admin-icone {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

/* overflow: auto = si les champs dépassent la hauteur de
   l'écran (petit portable, téléphone couché), c'est CE bloc qui
   défile, pas la page entière : l'en-tête et les boutons du bas
   restent toujours visibles. */
.admin-panneau-corps {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 22px;
    overflow-y: auto;
    flex-grow: 1;
}

.admin-champ-bloc {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-champ-bloc label,
.admin-faux-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--encre-douce);
}

.admin-facultatif {
    font-weight: 400;
    color: var(--gris-clair);
}

.admin-champ-bloc input,
.admin-champ-bloc select {
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    background-color: var(--blanc);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--encre);
}

.admin-champ-bloc input:focus,
.admin-champ-bloc select:focus {
    border-color: var(--bleu);
    outline: none;
}

/* Le menu « Modèle » avant qu'une marque ne soit choisie, ou le
   menu « Année » pour un modèle dont le magasin ne distingue pas
   les générations (« C15 », « Daily »). Il reste VISIBLE mais
   éteint : la personne qui saisit voit qu'il n'y a rien à choisir
   ici, plutôt que de chercher un menu qui aurait disparu. */
.admin-champ-bloc select:disabled {
    background-color: var(--gris-carte, #f4f6f8);
    color: #9aa3b0;
    cursor: not-allowed;
}

.admin-champ-arabe {
    font-family: "Cairo", "Archivo", sans-serif;
}

.admin-aide-champ {
    font-size: 12px;
    line-height: 1.5;
    color: var(--gris-clair);
}

.admin-aide-champ code {
    background-color: var(--gris-fond);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 11.5px;
    color: var(--bleu);
}

/* Deux champs côte à côte (catégorie + voiture). */
.admin-champ-duo {
    display: flex;
    gap: 12px;
}

.admin-champ-duo .admin-champ-bloc {
    flex: 1;
    min-width: 0;      /* sans ça, un menu large ferait déborder la ligne */
}

.admin-duo-boutons {
    display: flex;
    gap: 9px;
}

/* Les deux gros boutons « En stock » / « Sur commande » : plus
   sûrs que deux petits ronds à cocher, surtout au doigt. */
.admin-seg {
    flex: 1;
    height: 44px;
    border: 1.5px solid var(--bordure);
    border-radius: 11px;
    background-color: var(--blanc);
    color: var(--gris-clair);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#btn-en-stock[aria-pressed="true"] {
    border-color: var(--vert);
    background-color: var(--vert-fond);
    color: var(--vert);
}

#btn-sur-commande[aria-pressed="true"] {
    border-color: var(--ambre);
    background-color: var(--ambre-fond);
    color: var(--ambre);
}

.admin-panneau-pied {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 22px 18px;
    border-top: 1px solid var(--bordure);
}

/* « Prend toute la largeur ». Attention à ne PAS mettre flex: 1
   ici : le pied de panneau empile ses boutons en colonne, et
   flex: 1 y voudrait dire « prend toute la HAUTEUR restante ».
   Le partage en largeur ne concerne que la ligne du bas, d'où la
   seconde règle. */
.admin-btn-large {
    width: 100%;
}

.admin-duo-boutons .admin-btn-large {
    flex: 1;
}

.admin-panneau-pied .admin-btn-principal {
    height: 48px;
}

.admin-panneau-pied .admin-btn-fantome {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
}

.admin-aide-pied {
    font-size: 12px;
    text-align: center;
    color: var(--gris-clair);
}

.admin-btn-texte {
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 11px;
    background: none;
    color: var(--gris-texte);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    flex: none;
}

.admin-btn-texte:hover {
    background-color: var(--gris-carte);
}


/* --------------------------------------------
   9. LA BULLE DE CONFIRMATION

   Même principe que le toast du site : posée en bas, elle
   apparaît puis s'efface toute seule.
-------------------------------------------- */
.admin-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    background-color: var(--bleu);
    color: var(--blanc);
    padding: 11px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--ombre-carte);
    opacity: 0;
    visibility: hidden;        /* évite qu'elle reste cliquable */
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    z-index: 80;
}

.admin-toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Rouge quand l'enregistrement a échoué */
.admin-toast.erreur {
    background-color: #96201f;
}


/* --------------------------------------------
   10. SUR TÉLÉPHONE

   La grille se débrouille toute seule (auto-fill). Il ne reste
   qu'à resserrer les marges et à faire prendre au panneau tout
   l'écran : à 375 px de large, un panneau « à côté » n'aurait
   plus de sens.
-------------------------------------------- */
@media (max-width: 860px) {

    .admin-entete {
        padding: 14px 16px;
    }

    .admin-contenu {
        padding: 18px 16px 60px;
    }

    /* Deux colonnes de cartes plutôt qu'une seule : on voit plus
       de pièces d'un coup d'œil sans avoir à défiler. */
    .admin-grille {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    .admin-carte-corps h3 {
        font-size: 13.5px;
    }

    /* Sur une carte de ~170 px, la pastille et les trois boutons
       ne tiennent pas sur une seule ligne : « Sur commande » se
       coupait en deux. On passe donc à deux lignes — la pastille
       seule en haut (c'est le bouton le plus utilisé, il mérite
       toute la largeur), les trois petits boutons en dessous. */
    .admin-carte-pied {
        flex-wrap: wrap;
    }

    .admin-carte-pied .admin-stock {
        flex-basis: 100%;
        height: 36px;
        white-space: nowrap;
    }

    /* 36 px plutôt que 32 : au doigt, chaque pixel compte. */
    .admin-carte-pied .admin-icone {
        width: 36px;
        height: 36px;
    }

    .admin-btn-principal,
    .admin-recherche {
        width: 100%;
        flex: none;
    }

    .admin-panneau {
        width: 100%;
    }

    /* Les libellés des compteurs prennent trop de place : on les
       raccourcit en cachant le mot le plus long. */
    .admin-compteur {
        flex: 1;
        min-width: 0;
        justify-content: center;
        padding: 9px 10px;
    }

    .admin-compteur-libelle {
        font-size: 12px;
    }

    /* L'en-tête est déjà serré : le cadenas dit la même chose que
       le mot, et il tient dans un quart de la place. */
    .admin-verrouiller {
        gap: 0;
        padding: 9px 11px;
        font-size: 0;
    }
}


/* --------------------------------------------
   11. L'ÉCRAN DE VERROUILLAGE

   Le mot de passe demandé à l'ouverture de la page. Le détail
   de ce qu'il protège — et de ce qu'il ne protège pas — est
   écrit en haut de js/verrou.js.
-------------------------------------------- */

/* ⚠️ LA RÈGLE QUI FAIT TOUT LE TRAVAIL.

   Tant que le corps porte « page-verrouillee », TOUT ce qu'il
   contient est caché, sauf l'écran de mot de passe. La classe
   est écrite dans admin.html, pas posée par le JavaScript :
   la page est donc déjà noire avant que le moindre script ne
   tourne, et il n'y a aucun clignotement pendant lequel le
   stock s'apercevrait.

   « noscript » est mis à part : sans JavaScript, c'est le seul
   texte qui doit rester lisible. */
.page-verrouillee > *:not(.verrou-ecran):not(noscript) {
    display: none !important;
}

.verrou-noscript {
    max-width: 460px;
    margin: 80px auto;
    padding: 0 24px;
    text-align: center;
    color: var(--encre);
    font-size: 15px;
    line-height: 1.6;
}

.verrou-ecran {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--bleu);
    z-index: 90;
}

.verrou-boite {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 352px;
    padding: 32px 28px 24px;
    border-radius: 18px;
    background-color: var(--blanc);
    box-shadow: var(--ombre-forte);
    text-align: center;
}

.verrou-cadenas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-color: var(--gris-carte);
    color: var(--bleu);
}

.verrou-titre {
    margin: 0;
    font-family: "Bricolage Grotesque", "Archivo", sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--bleu);
}

.verrou-sous-titre {
    margin: 6px 0 22px;
    font-size: 14px;
    color: var(--gris-texte);
}

.verrou-label {
    margin-bottom: 6px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--encre-douce);
}

.verrou-champ {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    background-color: var(--blanc);
    font-family: inherit;
    font-size: 15px;
    color: var(--encre);
}

.verrou-champ:focus {
    outline: none;
    border-color: var(--bleu-logo);
}

/* Le message d'erreur garde sa place même quand il est vide :
   sinon la boîte sursaute d'une ligne au premier essai raté. */
.verrou-message {
    min-height: 19px;
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: transparent;
}

.verrou-message.visible {
    color: #a03030;
}

.verrou-bouton {
    margin-top: 14px;
    padding: 13px 18px;
    border: none;
    border-radius: 10px;
    background-color: var(--bleu);
    color: var(--blanc);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.verrou-bouton:hover:not(:disabled) {
    background-color: var(--bleu-nuit);
}

/* Pendant le calcul et pendant l'attente qui suit un essai raté :
   le bouton doit AVOIR L'AIR inutilisable, pas seulement l'être. */
.verrou-bouton:disabled {
    background-color: var(--gris-clair);
    cursor: default;
}

.verrou-retour {
    margin-top: 16px;
    color: var(--gris-texte);
    font-size: 13px;
    text-decoration: none;
}

.verrou-retour:hover {
    color: var(--bleu);
    text-decoration: underline;
}