/* RSS Mail : « Votre courrier ». Jetons en tête, thème clair uniquement. */

@font-face {
    font-family: "Archivo";
    src: url("fonts/archivo-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-stretch: 62% 125%;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    src: url("fonts/archivo-latin-ext.woff2") format("woff2");
    font-weight: 400 900;
    font-stretch: 62% 125%;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --fond: #f4f5f9;
    --papier: #ffffff;
    --encre: #1b2340;
    --gris: #5d6580;
    --filet: #d9dce6;
    --rouge: #d23a45;
    --bleu: #2553c9;
    --vert: #1f7a4d;
    --ombre-bouton: #c9d2e6;

    --lisere: repeating-linear-gradient(
        -45deg,
        var(--rouge) 0 12px, var(--papier) 12px 20px,
        var(--bleu) 20px 32px, var(--papier) 32px 40px
    );
    --ressort: cubic-bezier(.2, .8, .25, 1.25);
    --rayon: 8px;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

a {
    color: inherit;
    text-underline-offset: 0.18em;
}

p {
    margin: 0;
}

:focus-visible {
    outline: 3px solid var(--bleu);
    outline-offset: 3px;
}

.masque {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sprites {
    position: absolute;
    width: 0;
    height: 0;
}

.marque {
    font-weight: 800;
    font-stretch: 112%;
    text-decoration: none;
}

/* ---------- Champs et boutons ---------- */

input,
textarea {
    font: inherit;
    color: var(--encre);
    background: var(--papier);
    border: 2px solid var(--encre);
    border-radius: 6px;
    padding: 0.7rem 0.95rem;
    min-width: 0;
}

textarea {
    resize: vertical;
}

input::placeholder {
    color: var(--gris);
}

form button[type="submit"]:not(.fermer):not(.lien) {
    font: inherit;
    font-weight: 800;
    font-stretch: 112%;
    color: var(--papier);
    background: var(--encre);
    border: 2px solid var(--encre);
    border-radius: 6px;
    padding: 0.7rem 1.3rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s var(--ressort), box-shadow .2s;
}

form button[type="submit"]:not(.fermer):not(.lien):hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ombre-bouton);
}

.lien {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: var(--gris);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.lien:hover {
    color: var(--encre);
}

/* ---------- Messages ---------- */

.message {
    max-width: 48rem;
    padding: 0.7rem 1rem;
    border: 2px solid currentColor;
    border-left-width: 6px;
    border-radius: 6px;
    background: var(--papier);
    font-weight: 600;
}

.message-ok {
    color: var(--vert);
}

.message-info {
    color: var(--bleu);
}

.message-erreur {
    color: var(--rouge);
}

/* ---------- Bandeau ---------- */

.bandeau {
    position: relative;
    display: grid;
    gap: 0.5rem;
    background: var(--papier);
    padding: 1.25rem clamp(1rem, 4vw, 3rem) 2.75rem;
}

.bandeau::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 8px;
    background: var(--lisere);
}

.bandeau-haut {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.compte {
    display: flex;
    gap: 1.25rem;
    min-width: 0;
}

.compte-adresse {
    color: var(--gris);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bandeau h1 {
    margin: 1.5rem 0 0;
    font-size: clamp(2.2rem, 7vw, 5.25rem);
    overflow-wrap: anywhere;
    line-height: 0.92;
    font-stretch: 125%;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.bandeau-resume {
    font-size: 1.15rem;
    max-width: 48ch;
}

.ajout {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0 0.25rem;
}

.ajout input {
    flex: 1 1 22rem;
    max-width: 26rem;
}

.ajout input.court {
    flex: 0 1 11rem;
}

/* ---------- Casiers ---------- */

.meuble {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
    gap: 1.75rem;
    padding: 2.5rem clamp(1rem, 4vw, 3rem) 2rem;
}

.casier {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 1rem;
    padding: 1.1rem 1.2rem 1rem;
    background: var(--papier);
    border: 2px solid var(--encre);
    border-radius: var(--rayon);
    transition: transform .3s var(--ressort), box-shadow .3s var(--ressort);
}

.meuble:not(.meuble-admin) .casier:hover,
.meuble:not(.meuble-admin) .casier:focus-within {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--encre);
}

.etiquette {
    justify-self: start;
    margin: 0.35rem 0 0;
    padding: 0.2rem 0.65rem;
    color: var(--papier);
    background: var(--encre);
    border-radius: 2px;
    font-size: 1.05rem;
    font-weight: 800;
    font-stretch: 112%;
    line-height: 1.3;
    letter-spacing: 0.01em;
    transform: rotate(-1.5deg);
    transform-origin: left center;
    transition: transform .3s var(--ressort);
}

.casier:nth-child(even) .etiquette {
    transform: rotate(1deg);
}

.casier:hover .etiquette {
    transform: rotate(0);
}

.contenu {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    min-height: 100px;
}

/* Pile d'enveloppes : une par article du jour, cinq au plus */
.pile {
    position: relative;
    flex: none;
    width: 128px;
    height: 92px;
}

.lettre {
    --i: 0;
    --r: 0;
    position: absolute;
    left: calc(var(--i) * 3px);
    bottom: calc(var(--i) * 5px);
    width: 102px;
    height: 63px;
    transform: rotate(calc(var(--r) * 1deg));
    transition: transform .35s var(--ressort);
    transition-delay: calc(var(--i) * 30ms);
}

.lettre[data-i="1"] { --i: 1; }
.lettre[data-i="2"] { --i: 2; }
.lettre[data-i="3"] { --i: 3; }
.lettre[data-i="4"] { --i: 4; }
.lettre[data-r="-5"] { --r: -5; }
.lettre[data-r="4"] { --r: 4; }
.lettre[data-r="-3"] { --r: -3; }
.lettre[data-r="2"] { --r: 2; }

.casier:hover .lettre {
    transform: translate(calc(var(--i) * 5px), calc(var(--i) * -3px)) rotate(calc(var(--r) * 2.2deg));
}

.casier:hover .lettre:last-child {
    transform: translate(calc(var(--i) * 5px + 3px), calc(var(--i) * -3px - 8px)) rotate(-2deg);
}

.enveloppe-papier { fill: var(--papier); }
.enveloppe-bordure { fill: none; stroke: url(#par-avion); stroke-width: 5; }
.enveloppe-trait { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; }
path.enveloppe-trait { stroke-width: 1.5; }
.avion-fond { fill: var(--papier); }
.avion-rouge { fill: var(--rouge); }
.avion-bleu { fill: var(--bleu); }

.compteur {
    font-size: 2.3rem;
    font-weight: 900;
    font-stretch: 125%;
    line-height: 1;
}

.compteur small {
    display: block;
    margin-top: 0.3rem;
    color: var(--gris);
    font-size: 0.85rem;
    font-weight: 500;
    font-stretch: 100%;
}

.pile-vide {
    flex: none;
    width: 102px;
    height: 63px;
    border: 2px dashed var(--filet);
    border-radius: 4px;
}

.compteur-vide {
    color: var(--gris);
}

/* Tampon de la dernière vérification */
.tampon {
    flex: none;
    align-self: center;
    width: 68px;
    height: 68px;
    margin-left: auto;
    color: var(--rouge);
    transform: rotate(-14deg);
    transition: transform .35s var(--ressort);
}

.casier:hover .tampon {
    transform: rotate(-4deg) scale(1.08);
}

.tampon-anneau { fill: none; stroke: currentColor; stroke-width: 2.5; }
.tampon-anneau-fin { fill: none; stroke: currentColor; stroke-width: 1.2; }
.tampon text { fill: currentColor; font-family: inherit; }
.tampon-haut { font-size: 7.5px; font-weight: 800; letter-spacing: 1.3px; }
.tampon-bas { font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }
.tampon-heure { font-size: 12.5px; font-weight: 900; }
.tampon-heure.tampon-date { font-size: 9px; }

/* Un seul moment à l'arrivée : les tampons se posent l'un après l'autre. */
@keyframes coup-de-tampon {
    from { transform: rotate(-30deg) scale(1.6); opacity: 0; }
    to { transform: rotate(-14deg) scale(1); opacity: 1; }
}

.meuble .tampon {
    animation: coup-de-tampon .45s var(--ressort) backwards;
    animation-delay: 200ms;
}

.casier:nth-child(2) .tampon { animation-delay: 290ms; }
.casier:nth-child(3) .tampon { animation-delay: 380ms; }
.casier:nth-child(4) .tampon { animation-delay: 470ms; }
.casier:nth-child(5) .tampon { animation-delay: 560ms; }
.casier:nth-child(6) .tampon { animation-delay: 650ms; }
.casier:nth-child(n+7) .tampon { animation-delay: 740ms; }

.dernier {
    padding-top: 0.85rem;
    border-top: 2px dashed var(--filet);
    font-size: 0.95rem;
}

.dernier span {
    display: block;
    color: var(--gris);
    font-size: 0.85rem;
}

.dernier a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    text-decoration: none;
}

.dernier a:hover {
    text-decoration: underline;
}

.pied {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    color: var(--gris);
    font-size: 0.85rem;
}

.fermer {
    font: inherit;
    color: var(--gris);
    background: none;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    margin: -0.1rem -0.4rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.fermer:hover {
    color: var(--rouge);
}

.fermer.a-confirmer {
    color: var(--rouge);
    border-color: var(--rouge);
    font-weight: 700;
    text-decoration: none;
}

.casier-vide {
    max-width: 36rem;
    color: var(--gris);
}

.pied-page {
    padding: 0 clamp(1rem, 4vw, 3rem) 4rem;
}

/* ---------- Connexion et inscription ---------- */

.page-acces {
    border-top: 8px solid transparent;
    border-image: var(--lisere) 1;
}

.acces {
    display: grid;
    gap: 1.25rem;
    width: min(100% - 2rem, 27rem);
    margin: 0 auto;
    padding: clamp(2.5rem, 9vh, 5.5rem) 0 3rem;
}

.acces h1 {
    font-size: clamp(2.1rem, 8vw, 2.8rem);
    line-height: 0.95;
    font-stretch: 125%;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 0;
}

.chapeau {
    color: var(--gris);
    margin-top: -0.5rem;
}

.formulaire {
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 1.1rem 1.4rem 1.4rem;
}

.formulaire .etiquette {
    margin-bottom: 0.9rem;
}

.formulaire label {
    font-weight: 700;
    font-size: 0.95rem;
}

.formulaire input,
.formulaire textarea {
    margin-bottom: 0.8rem;
}

.formulaire button {
    margin-top: 0.4rem;
}

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

.bascule {
    color: var(--gris);
}

/* Demande d'accès : tient dans l'écran sans défilement */
.acces-demande {
    width: min(100% - 2rem, 62rem);
    min-height: calc(100vh - 8px);
    min-height: calc(100dvh - 8px);
    align-content: center;
    gap: 1rem;
    padding: 1.25rem 0;
}

.acces-demande .intro,
.acces-demande .cote-formulaire {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

.acces-demande .chapeau {
    margin-top: 0;
    max-width: 38ch;
}

.acces-demande .formulaire {
    margin-top: 0;
    gap: 0.3rem;
}

.acces-demande textarea {
    height: 4.5rem;
}

@media (min-width: 56rem) {
    .acces-demande {
        grid-template-columns: minmax(0, 1fr) 26rem;
        column-gap: 4rem;
        align-items: center;
    }

    .acces-demande h1 {
        font-size: clamp(2.8rem, 5vw, 4rem);
    }

    .acces-demande-envoyee {
        grid-template-columns: minmax(0, 38rem);
        justify-content: center;
    }
}

@media (max-width: 55.99rem) {
    .acces-demande {
        width: min(100% - 2rem, 27rem);
    }

    .acces-demande h1 {
        font-size: 1.9rem;
        margin-top: 0.25rem;
    }

    .acces-demande .intro {
        gap: 0.6rem;
    }

    .acces-demande .formulaire {
        padding: 0.9rem 1.1rem 1.1rem;
    }

    .acces-demande .formulaire .etiquette {
        margin-bottom: 0.5rem;
    }

    .acces-demande .formulaire input,
    .acces-demande .formulaire textarea {
        margin-bottom: 0.55rem;
    }

    .acces-demande textarea {
        height: 3.4rem;
    }
}

@media (max-width: 55.99rem) and (max-height: 760px) {
    /* Après une erreur, le message remplace l'introduction déjà lue */
    .acces-demande:has(.message) .chapeau {
        display: none;
    }

    .acces-demande .message {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
    }
}

@media (max-height: 640px) {
    .acces-demande {
        padding: 0.75rem 0;
        gap: 0.75rem;
    }
}

/* ---------- Administration ---------- */

.meuble-admin {
    grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
    align-items: start;
}

.colonne {
    display: grid;
    gap: 1.75rem;
    min-width: 0;
}

.meuble-admin .etiquette,
.meuble-admin .casier:hover .etiquette {
    transform: rotate(-1deg);
}

.lignes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-top: 2px dashed var(--filet);
}

.ligne-texte {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ligne-texte q {
    font-style: italic;
}

.ligne-meta {
    color: var(--gris);
    font-size: 0.85rem;
}

.ligne-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: none;
}

.ligne-actions form button[type="submit"]:not(.fermer):not(.lien) {
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
}

.ligne-actions .fermer {
    font-size: 0.85rem;
}

.invitation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.invitation input {
    flex: 1 1 14rem;
}

.vide-admin {
    color: var(--gris);
}

.historique summary {
    cursor: pointer;
    color: var(--gris);
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

/* ---------- Petits écrans ---------- */

@media (max-width: 40rem) {
    .compte-adresse {
        display: none;
    }

    .ajout input,
    .ajout input.court {
        flex: 1 1 100%;
        max-width: none;
    }

    .ligne {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}