/* Portail Afribox — tuiles sur fond vert pâle */

:root {
    --fond: #d6e9dc;
    --encre: #1f2328;
    --gris: #6b7280;
    --bordure: rgba(46, 131, 83, .28);
    --tuile: 150px;
    --espace: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond) linear-gradient(160deg, #e3f0e6 0%, #d2e7d8 55%, #bfdcc8 100%) fixed;
    min-height: 100vh;
    color: var(--encre);
    font-family: "Segoe UI", system-ui, -apple-system, "Open Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 44px 48px 26px;
}

.titre { margin: 0; font-size: 2.6rem; font-weight: 300; letter-spacing: -.02em; }
.sous-titre { margin: 6px 0 0; color: var(--gris); font-size: .95rem; }
.marque { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

/* Colonnes de largeur fixe : les tuiles s'alignent à gauche, comme une grille Metro */
.grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--tuile));
    gap: var(--espace);
    padding: 0 48px 56px;
}

.tuile {
    height: var(--tuile);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    color: #fff;
    text-decoration: none;
    transition: transform .12s ease, filter .12s ease;
}

.tuile.large { grid-column: span 2; }

.tuile svg { width: 38px; height: 38px; fill: currentColor; }
.tuile .nom { font-size: .98rem; font-weight: 600; }
.tuile .detail { margin-top: 2px; font-size: .78rem; opacity: .85; }

.tuile:hover { filter: brightness(1.08); transform: translateY(-2px); }
.tuile:active { transform: scale(.985); }
.tuile:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

/* Emplacement réservé : visiblement inactif, sans ressembler à une tuile en panne */
.tuile.reserve {
    /* Fond plein : le moindre degré de transparence laisse deviner l'arbre sur téléphone */
    background: #f7fbf8;
    color: #6f8a78;
    border: 1px dashed var(--bordure);
    cursor: default;
}

@media (max-width: 640px) {
    :root { --tuile: 136px; }
    .entete { padding: 28px 20px 18px; }
    .grille { padding: 0 20px 40px; }
    .titre { font-size: 2rem; }
}

/* ---------- Arbre Afribox en filigrane ---------- */

/* Posé en position fixe derrière le contenu : il ne défile pas, ne capte aucun clic,
   et reste assez pâle pour ne jamais concurrencer les vraies tuiles. */
body::before {
    content: "";
    position: fixed;
    right: 4vw;
    bottom: -2vh;
    width: min(520px, 42vw);
    /* Hauteur = espace libre sous l'en-tête et la rangée de tuiles (~330px) : la cime
       commence toujours sous les tuiles. À revoir si les tuiles passent sur deux rangées. */
    height: min(620px, calc(100vh - 340px));
    background: url("arbre.svg") no-repeat right bottom / contain;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

.entete, .grille { position: relative; z-index: 1; }

@media (max-width: 640px) {
    /* Sur téléphone, les tuiles occupent la largeur : l'arbre se fait plus discret encore */
    body::before {
        right: 50%;
        transform: translateX(50%);
        width: 88vw;
        height: 70vh;
        background-position: center bottom;
        opacity: .18;
    }
}

/* ---------- Cadre centré : en-tête aligné sur les bords de la grille ---------- */

/* Largeur de 6 colonnes de tuiles : le titre démarre au-dessus de la première tuile,
   la marque se termine au-dessus de la dernière. */
.cadre {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 96px), calc(var(--tuile) * 6 + var(--espace) * 5));
    margin: 0 auto;
}

.entete { padding: 44px 0 26px; }
.grille { padding: 0 0 56px; }

@media (max-width: 640px) {
    /* Deux colonnes sur téléphone : le cadre épouse exactement leur largeur */
    .cadre { width: calc(var(--tuile) * 2 + var(--espace)); }
    .entete { padding: 28px 0 18px; }
    .grille { padding: 0 0 40px; }
}

/* ---------- Téléphone : le bloc occupe 78 % de la largeur ---------- */

@media (max-width: 640px) {
    .cadre { width: 78vw; }

    /* Deux colonnes souples au lieu de tuiles de taille fixe */
    /* minmax(0, 1fr) : sans le 0, une colonne refuse de rétrécir sous la largeur de son
       texte et les tuiles débordent du cadre sur les petits téléphones */
    .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tuile .nom, .tuile .detail { overflow-wrap: anywhere; }

    /* Tuiles carrées quelle que soit la largeur de l'écran ; la tuile large garde la
       hauteur d'une tuile simple (deux colonnes + l'espace entre elles, sur une hauteur) */
    .tuile { height: auto; aspect-ratio: 1; }
    .tuile.large { aspect-ratio: 2.06; }

    /* À 78 %, sous-titre et marque ne tiennent plus côte à côte : la marque remonte
       sur la ligne du titre, où il reste de la place, au lieu de passer à la ligne */
    .entete { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
    .marque { flex-shrink: 0; padding-top: 14px; }
    .sous-titre { font-size: .88rem; }
    /* Sur les plus petits écrans, le sous-titre passe sur deux lignes plutôt que de
       repousser la marque au-delà du bord des tuiles */
    .entete > div:first-child { min-width: 0; }
}

/* ==========================================================================
   Verrou d'entrée : saisie du code d'accès, changement de code
   ========================================================================== */
.verrou {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 32px 20px;
}

.verrou-carte {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 18px;
    padding: 34px 30px 30px;
    box-shadow: 0 24px 48px -28px rgba(20, 70, 44, .55), 0 2px 6px rgba(20, 70, 44, .06);
}

.verrou-titre { margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.verrou-texte { margin: 0 0 22px; color: var(--gris); font-size: .92rem; }

.verrou-label { display: block; margin-bottom: 6px; font-size: .84rem; font-weight: 600; }
.verrou-champ {
    width: 100%;
    margin-bottom: 16px;
    padding: .7rem .9rem;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    background: #f8fbf9;
    font-size: 1rem;
    font-family: inherit;
    color: var(--encre);
}
.verrou-champ:focus { outline: none; border-color: #2e8353; box-shadow: 0 0 0 4px rgba(46, 131, 83, .16); background: #fff; }

/* Le code lui-même : chiffres espacés, plus lisibles à la saisie sur téléphone */
.verrou-code { letter-spacing: .4em; text-align: center; font-size: 1.3rem; }

.verrou-souvenir { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; font-size: .86rem; color: var(--gris); }
.verrou-souvenir input { margin-top: 3px; }

.verrou-bouton {
    width: 100%;
    padding: .8rem 1rem;
    border: 0;
    border-radius: 999px;
    background: #2e8353;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.verrou-bouton:hover { background: #256b44; }
.verrou-bouton:disabled { background: #9db5a7; cursor: not-allowed; }

.verrou-erreur { margin: 0 0 16px; padding: .7rem .9rem; border-radius: 12px; background: #fdecec; color: #9d1c1c; font-size: .88rem; }
.verrou-succes { margin: 0 0 16px; padding: .7rem .9rem; border-radius: 12px; background: #e8f8ee; color: #12602f; font-size: .88rem; }
.verrou-bas { margin: 18px 0 0; text-align: center; font-size: .86rem; }
.verrou-bas a { color: #2e8353; }
.verrou-mention { margin: 0; color: var(--gris); font-size: .8rem; }

/* Pied du portail : refermer, ou changer le code */
.pied-portail { display: flex; align-items: center; gap: 18px; padding: 26px 48px 40px; }
.pied-form { margin: 0; }
.lien-pied {
    border: 0; background: none; padding: 0;
    color: var(--gris); font-size: .82rem; font-family: inherit; text-decoration: underline; cursor: pointer;
}
.lien-pied:hover { color: #2e8353; }
.avis-portail { margin: 26px 48px 0; color: #12602f; font-size: .88rem; font-weight: 600; }

@media (max-width: 760px) {
    .pied-portail { padding: 20px 24px 32px; }
    .avis-portail { margin: 20px 24px 0; }
}

/* Écran des codes : deux formulaires et le journal des changements */
.verrou-carte-large { max-width: 460px; }
.verrou-sous-titre { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; }
.verrou-separation { margin: 26px 0 22px; border: 0; border-top: 1px solid var(--bordure); }
.verrou-bouton-second { background: #4b5563; }
.verrou-bouton-second:hover { background: #374151; }
.verrou-journal { margin: 0; padding-left: 18px; color: var(--gris); font-size: .84rem; }
.verrou-journal li { margin-bottom: 4px; }
.verrou-ip { opacity: .75; }