:root {
    --fond: #f4f2ee;
    --carte: #ffffff;
    --texte: #211d19;
    --doux: #7d766c;
    --bordure: #e6e1d8;
    --bordure-forte: #d6cfc2;
    --principal: #7a4a28;
    --principal-fonce: #5c3419;
    --principal-clair: #f6ece3;
    --or: #c9963f;
    --plus: #17794a;
    --plus-fond: #e6f4ec;
    --moins: #bb2d23;
    --moins-fond: #fceae8;
    --ombre: 0 1px 2px rgba(33, 29, 25, .05), 0 6px 20px rgba(33, 29, 25, .06);
    --ombre-forte: 0 18px 50px rgba(33, 29, 25, .22);
    --rayon: 14px;
    --rayon-petit: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", "Geeza Pro", Tahoma, "Noto Sans Arabic", sans-serif;
    background: var(--fond);
    color: var(--texte);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --- Barre du haut ------------------------------------------------------- */

.barre {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1.8rem;
    padding: .7rem 1.5rem;
    background: linear-gradient(135deg, var(--principal-fonce), var(--principal));
    color: #fff;
    box-shadow: 0 2px 16px rgba(33, 29, 25, .18);
}
.marque { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.marque small { display: block; font-weight: 400; font-size: .78rem; color: rgba(255, 255, 255, .75); }

.barre nav { display: flex; flex-wrap: wrap; gap: .2rem; flex: 1; }
.barre nav a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .93rem;
    transition: background .15s, color .15s;
}
.barre nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.barre nav a.actif { background: #fff; color: var(--principal-fonce); font-weight: 600; }

.compte { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.compte a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.compte a:hover { color: #fff; text-decoration: underline; }

.badge {
    font-size: .7rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    white-space: nowrap;
}
.badge-admin { background: var(--or); color: #3b2a10; font-weight: 600; }
.badge-attente { background: var(--principal-clair); color: var(--principal); font-weight: 600; }

.carte-etroite { max-width: 460px; }
.note {
    background: var(--principal-clair);
    border-radius: var(--rayon-petit);
    padding: .75rem 1rem;
    margin: 0 0 1.2rem;
    font-size: .92rem;
    color: var(--principal-fonce);
}

/* --- Mise en page -------------------------------------------------------- */

main { max-width: 1240px; margin: 0 auto; padding: 1.6rem 1rem 4rem; }

.entete-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.01em; }
h2 { margin: 0 0 1.1rem; font-size: 1.15rem; }
.periode { display: block; font-size: .85rem; font-weight: 400; color: var(--doux); margin-top: .15rem; }

.carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.1rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--ombre);
}
.carte-connexion { max-width: 400px; margin: 3.5rem auto; padding: 2rem; text-align: center; }
.carte-connexion h1 { margin-bottom: 1.2rem; font-size: 1.25rem; }
.carte-connexion label { text-align: start; }

.image-connexion {
    display: block;
    width: 190px;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0 auto .9rem;
    border-radius: 18px;
    border: 5px solid var(--principal-clair);
    box-shadow: var(--ombre);
}
.nom-connexion { font-weight: 700; color: var(--principal); margin: 0 0 1.2rem; line-height: 1.5; }

.flash {
    padding: .7rem 1rem;
    border-radius: var(--rayon-petit);
    margin-bottom: 1rem;
    font-size: .92rem;
    border: 1px solid transparent;
}
.flash-succes { background: var(--plus-fond); color: #105936; border-color: #c5e5d3; }
.flash-erreur { background: var(--moins-fond); color: #8d1c15; border-color: #f2cdc8; }

/* --- Formulaires --------------------------------------------------------- */

label { display: block; margin-bottom: .9rem; font-weight: 600; font-size: .88rem; }
label small { font-weight: 400; color: var(--doux); }

input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    font: inherit;
    color: inherit;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--principal);
    box-shadow: 0 0 0 3px rgba(122, 74, 40, .15);
}
textarea { resize: vertical; font-family: inherit; }
select { cursor: pointer; }

fieldset {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    margin: 0 0 .9rem;
    padding: .5rem .85rem .7rem;
}
legend { font-weight: 600; font-size: .88rem; padding: 0 .3rem; }
label.choix {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 500;
    margin-block: .3rem;
    margin-inline: 0 1.2rem;
    cursor: pointer;
}
label.choix small { color: var(--doux); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem 1.05rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    background: #fff;
    color: var(--texte);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: #faf8f5; border-color: var(--principal); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(122, 74, 40, .2); }
.btn-principal {
    background: var(--principal);
    border-color: var(--principal);
    color: #fff;
    box-shadow: 0 2px 8px rgba(122, 74, 40, .25);
}
.btn-principal:hover { background: var(--principal-fonce); border-color: var(--principal-fonce); }
.btn-danger { color: var(--moins); border-color: #eec7c2; background: #fff; }
.btn-danger:hover { background: var(--moins-fond); border-color: var(--moins); }
.btn-petit { padding: .32rem .7rem; font-size: .85rem; font-weight: 500; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.boutons { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }
.ligne-ajout { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ligne-ajout input, .ligne-ajout select { margin-top: 0; width: auto; }
.filtre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filtre label { display: flex; align-items: center; gap: .5rem; margin: 0; }
.filtre select { width: auto; margin: 0; }
.outils { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

.raccourcis { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.raccourcis a {
    font-size: .85rem;
    padding: .28rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--bordure-forte);
    background: #fff;
    color: var(--doux);
    text-decoration: none;
}
.raccourcis a:hover { border-color: var(--principal); color: var(--principal); }

/* --- Fenêtres modales ---------------------------------------------------- */

dialog {
    border: none;
    border-radius: 18px;
    padding: 1.6rem;
    width: min(460px, calc(100% - 2rem));
    box-shadow: var(--ombre-forte);
    color: inherit;
    animation: apparition .18s ease-out;
}
dialog::backdrop { background: rgba(33, 24, 16, .5); backdrop-filter: blur(3px); }
@keyframes apparition {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* --- Calendrier ---------------------------------------------------------- */

.champ-date { position: relative; display: block; margin-top: .35rem; }
.filtre .champ-date { margin-top: 0; }

.date-bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    background: #fff;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.filtre .date-bouton { min-width: 10.5rem; }
.date-bouton:hover { border-color: var(--principal); }
.date-bouton.vide .date-texte { color: var(--doux); }
.date-icone { opacity: .55; flex: none; }

.calendrier {
    position: absolute;
    z-index: 40;
    inset-inline-start: 0;
    top: calc(100% + .4rem);
    width: 17.5rem;
    padding: .7rem;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
}
.calendrier.vers-haut { top: auto; bottom: calc(100% + .4rem); }
.cal-entete { display: flex; gap: .3rem; align-items: center; margin-bottom: .5rem; }
.cal-entete select {
    margin: 0;
    padding: .3rem .4rem;
    font-size: .88rem;
    font-weight: 600;
    border-radius: 8px;
    flex: 1;
}
.cal-fleche {
    border: 1px solid var(--bordure-forte);
    background: #fff;
    border-radius: 8px;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--principal);
}
.cal-fleche:hover { background: var(--principal-clair); }

.cal-jours, .cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-jours span { text-align: center; font-size: .72rem; color: var(--doux); padding: .25rem 0; }
.cal-grille button {
    border: none;
    background: none;
    border-radius: 8px;
    padding: .38rem 0;
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
    color: inherit;
}
.cal-grille button:hover { background: var(--principal-clair); }
.cal-grille button.aujourdhui { box-shadow: inset 0 0 0 1px var(--or); font-weight: 700; }
.cal-grille button.choisi { background: var(--principal); color: #fff; font-weight: 700; }
.cal-pied { display: flex; justify-content: center; margin-top: .5rem; }
.cal-aujourdhui {
    border: none;
    background: none;
    color: var(--principal);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    padding: .25rem .6rem;
    border-radius: 8px;
}
.cal-aujourdhui:hover { background: var(--principal-clair); }

/* --- Tableaux ------------------------------------------------------------ */

.tableau-defilant { overflow-x: auto; margin: -.3rem; padding: .3rem; }
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: .62rem .75rem;
    text-align: start;
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
}
thead th {
    font-size: .78rem;
    font-weight: 600;
    color: var(--doux);
    border-bottom: 1px solid var(--bordure-forte);
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: #faf8f4; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }

.nombre { text-align: end; font-variant-numeric: tabular-nums; }
.actions { text-align: end; white-space: nowrap; }
.actions form { display: inline; }
.actions .btn { margin-inline-start: .25rem; }
.notes { white-space: normal; min-width: 12rem; max-width: 22rem; color: var(--doux); font-size: .9rem; }

.plus { color: var(--plus); }
.moins { color: var(--moins); }
.neutre { color: #cfc9be; }

.statut { font-size: .78rem; padding: .18rem .6rem; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.statut-paye { background: var(--moins-fond); color: var(--moins); }
.statut-plus { background: var(--plus-fond); color: var(--plus); }

.recap tbody th { font-weight: 600; background: var(--carte); }
.recap tfoot th, .recap tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--bordure-forte);
    border-bottom: none;
    background: #fbf9f6;
}
.recap .colonne-total { background: var(--principal-clair); font-weight: 700; }

/* --- Rôle et interrupteur (page des utilisateurs) ------------------------ */

.cellule-role, .cellule-interrupteur { display: flex; align-items: center; gap: .45rem; flex-wrap: nowrap; }
.cellule-role select { margin: 0; width: auto; padding: .35rem .6rem; font-size: .9rem; }
.doux { color: var(--doux); }

.interrupteur {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #d5cec3;
    cursor: pointer;
    transition: background .18s;
}
.interrupteur:hover { background: #c6bdb0; }
.interrupteur.on { background: var(--plus); }
.interrupteur.on:hover { background: #12603a; }
.interrupteur:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(122, 74, 40, .25); }
.interrupteur .poignee {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: inset-inline-start .18s;
}
.interrupteur.on .poignee { inset-inline-start: calc(100% - 21px); }
.etat-texte { font-size: .85rem; color: var(--doux); font-weight: 600; }
.etat-texte.actif { color: var(--plus); }

.vide { color: var(--doux); text-align: center; padding: 2.5rem 0; margin: 0; }
.legende { color: var(--doux); font-size: .85rem; }

/* --- Téléphone ---------------------------------------------------------- */

@media (max-width: 760px) {
    body { font-size: 15.5px; }

    /* Barre du haut compacte : la marque et le compte sur une ligne,
       la navigation dessous, défilable horizontalement */
    .barre {
        position: static;
        gap: .5rem .8rem;
        padding: .6rem .9rem .5rem;
        padding-top: max(.6rem, env(safe-area-inset-top));
    }
    .marque { flex: 1; min-width: 0; font-size: .95rem; }
    .marque small { display: none; }
    .compte { flex-wrap: wrap; justify-content: flex-end; gap: .3rem .6rem; font-size: .82rem; }
    .barre nav {
        order: 3;
        flex: 1 0 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -.9rem;
        padding: .15rem .9rem .2rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .barre nav::-webkit-scrollbar { display: none; }
    .barre nav a { flex: none; padding: .45rem .9rem; }

    main { padding: 1rem .75rem 3rem; }
    h1 { font-size: 1.25rem; }

    .entete-page { flex-direction: column; align-items: stretch; gap: .75rem; }
    .entete-page > .btn { justify-content: center; padding-block: .75rem; }
    .outils, .filtre { width: 100%; }
    .filtre { display: grid; grid-template-columns: 1fr 1fr; }
    .filtre label { flex-direction: column; align-items: stretch; gap: .25rem; font-size: .8rem; }
    .filtre .date-bouton { min-width: 0; }
    .filtre > .btn, .outils > .btn { grid-column: 1 / -1; justify-content: center; }
    .outils > .btn { width: 100%; }

    .raccourcis { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; }
    .raccourcis::-webkit-scrollbar { display: none; }
    .raccourcis a { flex: none; padding: .4rem .85rem; }

    .carte { padding: .8rem; border-radius: 12px; }
    .carte-connexion { margin: 1.5rem auto; padding: 1.5rem 1.1rem; }
    .image-connexion { width: 140px; }

    .ligne-ajout input { flex: 1; min-width: 0; }

    /* 16px minimum : évite le zoom automatique d'iOS sur les champs */
    input[type=text], input[type=password], input[type=number], input[type=date], select, textarea, .date-bouton {
        font-size: 16px;
        padding: .7rem .8rem;
    }

    /* Fenêtres modales en panneau montant du bas de l'écran */
    dialog {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        margin: auto 0 0;
        padding: 1.3rem 1rem;
        padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        overflow-y: auto;
        animation: montee .22s ease-out;
    }
    .boutons .btn { flex: 1; justify-content: center; padding-block: .7rem; }

    /* Calendrier : pleine largeur du champ */
    .calendrier { width: min(19rem, calc(100vw - 1.5rem)); }
    .cal-grille button { padding: .55rem 0; font-size: .95rem; }

    /* Tableaux simples (liste, activités, utilisateurs) affichés en cartes */
    .tableau-cartes thead { display: none; }
    .tableau-cartes, .tableau-cartes tbody, .tableau-cartes tr, .tableau-cartes td { display: block; width: 100%; }
    .tableau-cartes tr {
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-petit);
        padding: .55rem .8rem;
        margin-bottom: .6rem;
        background: #fff;
    }
    .tableau-cartes tbody tr:hover { background: #fff; }
    .tableau-cartes tr:last-child { margin-bottom: 0; }
    .tableau-cartes td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .35rem 0;
        border-bottom: 1px dashed var(--bordure);
        white-space: normal;
        text-align: end;
    }
    .tableau-cartes td::before {
        content: attr(data-label);
        flex: none;
        color: var(--doux);
        font-size: .8rem;
        font-weight: 600;
        text-align: start;
    }
    .tableau-cartes td:last-child { border-bottom: none; }
    .tableau-cartes td.titre-carte { font-weight: 700; font-size: 1.02rem; justify-content: flex-start; flex-wrap: wrap; gap: .4rem; text-align: start; }
    .tableau-cartes td.titre-carte::before { display: none; }
    .tableau-cartes td.notes { max-width: none; min-width: 0; }
    .tableau-cartes td.nombre { font-weight: 700; }
    .tableau-cartes td.actions { justify-content: flex-end; gap: .4rem; padding-top: .6rem; }
    .tableau-cartes td.actions::before { display: none; }
    .tableau-cartes td.actions:not(:has(*)) { display: none; }
    .tableau-cartes td:has(+ td.actions:not(:has(*))) { border-bottom: none; }
    .tableau-cartes td.actions .btn { margin: 0; padding: .45rem .9rem; }

    /* Récapitulatifs : défilement horizontal, colonne des activités figée */
    .tableau-defilant { -webkit-overflow-scrolling: touch; }
    .recap th, .recap td { padding: .55rem .6rem; font-size: .9rem; }
    .recap th[scope=row], .recap thead th:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        max-width: 9rem;
        white-space: normal;
        background: var(--carte);
        box-shadow: inset 1px 0 0 var(--bordure);
    }
    .recap tfoot th[scope=row] { background: #fbf9f6; }
}

@keyframes montee {
    from { transform: translateY(40px); opacity: .4; }
    to { transform: none; opacity: 1; }
}