/* ==========================================================================
   ECOLAX — pages autonomes (verification de recu, connexion)
   Complete ecolax.css. Volontairement legere : la page de verification est
   ouverte depuis un SMS, sur un telephone d'entree de gamme et en data
   mobile. Aucune police distante n'y est indispensable, aucun script.
   ========================================================================== */

body.ecx-min {
    font-family: var(--ecolax-police-chiffres);   /* Inter : des chiffres */
    background: var(--ecolax-fond);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px 36px;
}

.min { width: 100%; max-width: 420px; }
.min h1, .min h2 { font-family: var(--ecolax-police); }

/* Signature de bas de page : le parent voit qui edite le recu. */
.min__marque {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 22px; color: var(--ecolax-gris); font-size: .76rem;
}
.min__marque:hover { text-decoration: none; color: var(--ecolax-vert); }
.min__marque img { height: 17px; width: auto; opacity: .75; }

.min__note {
    margin-top: 16px; text-align: center;
    font-size: .78rem; line-height: 1.55; color: var(--ecolax-gris);
}
.min__retour {
    display: block; text-align: center; margin-top: 18px;
    font-size: .84rem; color: var(--ecolax-gris);
}

/* ===================================================== le recu verifie === */
.recu {
    background: #fff;
    border-radius: var(--ecolax-rayon) var(--ecolax-rayon) 0 0;
    box-shadow: var(--ecolax-ombre-forte);
    overflow: hidden;
}

/* Le verdict, avant tout le reste : c'est la seule chose que le parent
   cherche en ouvrant le lien. Couleur pleine, pas un simple badge. */
.recu__verdict {
    padding: 26px 22px 24px;
    text-align: center;
    color: #fff;
    background: var(--ecolax-vert);
}
.recu__verdict--ko { background: var(--ecolax-alerte); }

.recu__pastille {
    width: 54px; height: 54px; margin: 0 auto 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .17);
    display: flex; align-items: center; justify-content: center;
}
.recu__verdict h1 {
    font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; color: #fff;
}
.recu__no {
    margin-top: 7px;
    font-family: var(--ecolax-police-chiffres);
    font-size: .8rem; font-variant-numeric: tabular-nums;
    letter-spacing: .04em; color: rgba(255, 255, 255, .82);
}

.recu__corps { padding: 4px 22px 22px; }

.recu__montant {
    text-align: center;
    padding: 22px 0 18px;
    border-bottom: 1px dashed var(--ecolax-filet);
}
.recu__montant b {
    display: block;
    font-size: 2.35rem; font-weight: 600; line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ecolax-encre);
}
.recu__montant span {
    display: block; margin-top: 3px;
    font-size: .72rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ecolax-gris);
}

/* Recu annule : le montant doit cesser de ressembler a une confirmation.
   Un bandeau rouge en haut ne suffit pas — le parent lit le gros chiffre
   avant de lire le titre. On le barre et on l'eteint. */
.recu--ko .recu__montant b {
    color: var(--ecolax-gris);
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--ecolax-alerte);
}

.recu__lignes { margin: 0; }
.recu__l {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ecolax-filet);
}
.recu__l:last-child { border-bottom: 0; }
.recu__l dt { font-size: .79rem; color: var(--ecolax-gris); flex: none; }
.recu__l dd {
    margin: 0; text-align: right; font-size: .89rem; font-weight: 500;
    font-variant-numeric: tabular-nums; color: var(--ecolax-encre);
    min-width: 0; word-break: break-word;
}

.recu__alerte {
    margin: 0 22px 20px;
    padding: 13px 15px;
    border-radius: 10px;
    background: var(--ecolax-alerte-fond);
    color: var(--ecolax-alerte);
    font-size: .82rem; line-height: 1.55;
}

/* Bas dentele : le recu se termine comme un ticket, jamais au carre. */
.recu__dent {
    height: 14px;
    background:
        linear-gradient(-45deg, transparent 50%, #fff 50%) 0 0 / 14px 14px repeat-x,
        linear-gradient(45deg, transparent 50%, #fff 50%) 0 0 / 14px 14px repeat-x;
    /* Le fond de page est presque blanc : sans ombre portee marquee, les
       dents disparaissent et le recu se termine au carre. */
    filter: drop-shadow(0 3px 4px rgba(15, 46, 36, .22));
}

/* Horodatage de consultation : prouve que la page est vivante, donc qu'une
   capture d'ecran ne peut pas en tenir lieu. */
.recu__horodatage {
    margin-top: 15px; text-align: center;
    font-size: .74rem; color: var(--ecolax-gris);
    font-variant-numeric: tabular-nums;
}

/* ==================================================== recu introuvable === */
.vide {
    background: #fff;
    border: 1px solid var(--ecolax-filet);
    border-radius: var(--ecolax-rayon);
    box-shadow: var(--ecolax-ombre);
    padding: 32px 24px 28px;
    text-align: center;
}
.vide__pastille {
    width: 52px; height: 52px; margin: 0 auto 15px;
    border-radius: 50%;
    background: #FDF0DB; color: var(--ecolax-ambre-txt);
    display: flex; align-items: center; justify-content: center;
}
.vide h1 { font-size: 1.14rem; margin-bottom: 9px; }
.vide p { font-size: .88rem; line-height: 1.6; color: var(--ecolax-gris); }
.vide code {
    display: block; margin-top: 16px; padding: 10px 12px;
    background: var(--ecolax-fond); border-radius: 9px;
    font-family: var(--ecolax-police-chiffres);
    font-size: .8rem; font-variant-numeric: tabular-nums;
    letter-spacing: .04em; color: var(--ecolax-encre);
    word-break: break-all;
}

/* ============================================================ connexion === */
.min--connexion { max-width: 384px; }

.connexion__marque { text-align: center; margin-bottom: 22px; }
.connexion__marque img { height: 34px; width: auto; margin: 0 auto; }

.connexion {
    background: #fff;
    border: 1px solid var(--ecolax-filet);
    border-radius: var(--ecolax-rayon);
    box-shadow: var(--ecolax-ombre);
    padding: 28px 24px 26px;
}
.connexion h1 { font-size: 1.22rem; }
.connexion__sous { font-size: .85rem; color: var(--ecolax-gris); margin-top: 4px; margin-bottom: 22px; }
.connexion .form { gap: 15px; }
.connexion .ecx-btn { margin-top: 3px; }