/* PWA du travailleur (maquettes 02 à 06) : pensée pour un téléphone, centrée sur grand écran. */

.corps-pwa {
    min-height: 100vh;
    min-height: 100dvh;
}

.pwa {
    max-width: 480px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
}

.vue {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(48px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
}

.vue[hidden] {
    display: none;
}

.vue-centree {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.vue h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    outline: none;
}

.texte-doux {
    margin: 0;
    color: var(--gris);
    font-size: 16px;
    line-height: 1.5;
}

.logo-pwa {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.logo-pwa svg {
    width: 28px;
    height: 28px;
}

/* Boutons */
.bouton-pwa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: var(--vert);
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.bouton-pwa:active {
    background: var(--vert-fonce);
}

.bouton-pwa:disabled {
    opacity: 0.7;
}

.bouton-pwa:focus-visible,
.bouton-pointer:focus-visible,
.lien-discret:focus-visible {
    outline: 3px solid rgba(31, 111, 74, 0.4);
    outline-offset: 2px;
}

.bouton-pwa-secondaire {
    border: 1px solid var(--bordure-champ);
    background: #fff;
    color: var(--encre);
}

.bouton-pwa-secondaire:active {
    background: var(--neutre-fond);
}

.lien-discret {
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--gris);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Connexion (maquette 02) */
.entete-connexion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.formulaire-pwa {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.formulaire-pwa .champ input:not([type="checkbox"]) {
    height: 52px;
    border-radius: 12px;
    padding: 0 16px;
    font-size: 17px;
}

.formulaire-pwa .champ-pin {
    font-size: 22px !important;
    letter-spacing: 8px;
}

.formulaire-pwa .bouton-pwa {
    margin-top: 8px;
}

.encadre {
    margin: auto 0 0;
    padding: 16px;
    border: 1px solid var(--bordure);
    border-radius: 14px;
    background: #fff;
    color: var(--neutre-texte);
    font-size: 14px;
    line-height: 1.5;
}

.encadre-icone {
    display: flex;
    gap: 12px;
}

.encadre-icone svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--vert);
}

/* Installation sur iPhone */
.etapes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.etapes li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    line-height: 1.5;
}

.etape-numero {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--vert);
    color: #fff;
    font-weight: 800;
}

.icone-en-ligne {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
    color: #0A64D6;
}

/* Icône ronde des écrans de message */
.pastille-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
}

.pastille-icone svg {
    width: 56px;
    height: 56px;
}

.pastille-icone-alerte {
    background: var(--absent-fond);
    color: var(--absent-texte);
}

.pastille-icone-info {
    background: var(--ok-fond);
    color: var(--vert);
}

/* Accueil connecté (animation du parcours) */
.vue-accueil {
    align-items: center;
    gap: 8px;
    text-align: center;
}

.vue-accueil h1 {
    font-size: 24px;
}

.bouton-pointer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(220px, 60vw);
    aspect-ratio: 1;
    margin: 48px 0 24px;
    border: 0;
    border-radius: 50%;
    background: var(--vert);
    color: #fff;
    font: inherit;
    font-size: 26px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(31, 111, 74, 0.35);
    cursor: pointer;
    touch-action: manipulation;
}

.bouton-pointer:active {
    background: var(--vert-fonce);
    transform: scale(0.98);
}

.dernier-pointage {
    font-size: 15px;
}

.actions-accueil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: auto;
    padding-top: 24px;
}

/* Couleur de fond selon l'écran affiché */
body[data-vue="scanner"] {
    background: #0E1411;
}

body[data-vue="succes"] {
    background: var(--vert);
}

/* Scanner (maquette 03) */
.vue-sombre {
    gap: 20px;
    padding-right: 20px;
    padding-left: 20px;
    color: #fff;
}

.entete-scanner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.entete-scanner > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.entete-scanner h1 {
    font-size: 22px;
}

.texte-scanner {
    color: #B8C4BD;
    font-size: 14px;
}

.pastille-heure {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--vert);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.viseur {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    overflow: hidden;
    border-radius: 24px;
    background: #26302B;
}

.lecteur {
    position: absolute;
    inset: 0;
    border: 0 !important;
}

.lecteur video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Le cadre gris de html5-qrcode est remplacé par les coins verts de la maquette. */
.lecteur #qr-shaded-region {
    display: none !important;
}

.cadre-visee {
    position: relative;
    width: 250px;
    height: 250px;
    max-width: 75%;
    aspect-ratio: 1;
    pointer-events: none;
}

.cadre-visee i {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 0 solid #5FD39A;
}

.cadre-visee i:nth-child(1) { top: 0; left: 0; border-width: 5px 0 0 5px; border-radius: 20px 0 0 0; }
.cadre-visee i:nth-child(2) { top: 0; right: 0; border-width: 5px 5px 0 0; border-radius: 0 20px 0 0; }
.cadre-visee i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 5px 5px; border-radius: 0 0 0 20px; }
.cadre-visee i:nth-child(4) { right: 0; bottom: 0; border-width: 0 5px 5px 0; border-radius: 0 0 20px 0; }

.consigne-scanner {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}

.puces-scanner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.puce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #2F4A3B;
    border-radius: 999px;
    background: #1C2A22;
    color: #CDE9D9;
    font-size: 13px;
    font-weight: 600;
}

.puce svg {
    width: 14px;
    height: 14px;
}

.actions-scanner {
    display: flex;
    gap: 12px;
}

.actions-scanner .bouton-pwa {
    min-height: 52px;
    font-size: 16px;
}

.bouton-pwa-contour {
    border: 1px solid #4A5A51;
    background: transparent;
}

.bouton-pwa-sombre {
    background: #33403A;
}

/* Pointage enregistré (maquette 04) */
.vue-succes {
    padding-top: max(72px, env(safe-area-inset-top));
    background: var(--vert);
    color: #fff;
}

.succes-haut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.rond-succes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #fff;
    color: var(--vert);
}

.rond-succes svg {
    width: 60px;
    height: 60px;
}

.texte-succes {
    color: #D6EDE0;
    font-size: 17px;
    font-weight: 600;
}

.vue-succes h1 {
    font-size: 30px;
    line-height: 1.15;
}

.heure-succes {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pilule-succes {
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--ok-texte);
    font-size: 15px;
    font-weight: 700;
}

.verifications {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: auto 0 0;
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    color: var(--encre);
    list-style: none;
}

.verifications li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.verifications svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--vert);
}

.bouton-pwa-succes {
    border: 1px solid #5E9C7D;
    background: var(--vert-fonce);
}

.lien-clair {
    align-self: center;
    color: #D6EDE0;
}

/* Pointage refusé (maquette 05) */
.refus-haut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 24px;
    text-align: center;
}

.message-refus {
    margin: 0;
    color: var(--neutre-texte);
    font-size: 17px;
    line-height: 1.5;
}

.message-refus strong {
    color: var(--absent-texte);
}

.raisons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--bordure);
    border-radius: 18px;
    background: #fff;
}

.raisons-titre {
    color: var(--gris);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.raisons p {
    display: flex;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.raisons p::before {
    content: "·";
    color: var(--absent-texte);
    font-weight: 800;
}

.pied-refus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    text-align: center;
}

/* Mes pointages (maquette 06) */
.vue-liste {
    gap: 20px;
    padding-right: 20px;
    padding-left: 20px;
}

.entete-liste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.entete-liste > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.entete-liste h1 {
    font-size: 26px;
}

.texte-petit-pwa {
    font-size: 14px;
}

.choix-mois select {
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--bordure-champ);
    border-radius: 12px;
    background: #fff;
    color: var(--encre);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
}

.resume-mois {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.resume-mois > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
    border: 1px solid var(--bordure);
    border-radius: 14px;
    background: #fff;
}

.resume-mois > div > span:first-child {
    font-size: clamp(18px, 6vw, 24px);
    white-space: nowrap;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.resume-mois > div > span:last-child {
    color: var(--gris);
    font-size: 13px;
}

.resume-mois .resume-retards {
    color: #7A4B00;
}

.liste-journees {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bordure);
    border-radius: 16px;
    background: #fff;
    list-style: none;
}

.liste-journees:empty {
    display: none;
}

.journee {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--separateur);
}

.journee:last-child {
    border-bottom: 0;
}

.journee-date {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 48px;
}

.journee-date span {
    color: var(--gris);
    font-size: 13px;
}

.journee-date strong {
    font-size: 18px;
    font-weight: 800;
}

.journee-texte {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px;
    min-width: 0;
}

.journee-horaires {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.journee-detail {
    color: var(--gris);
    font-size: 13px;
}

/* Pastilles (mêmes couleurs que l'administration) */
.pastille {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.pastille-ok { background: var(--ok-fond); color: var(--ok-texte); }
.pastille-retard { background: var(--retard-fond); color: var(--retard-texte); }
.pastille-absent { background: var(--absent-fond); color: var(--absent-texte); }
.pastille-neutre { background: var(--neutre-fond); color: var(--neutre-texte); }
.pastille-site { background: #E3ECF7; color: #1D4E89; }

.liste-vide {
    text-align: center;
}