/*
   Ajustements smartphone propres aux pages (le socle générique est dans site.css).
   Chaque section vient d'un chantier de vues et ne s'applique que sous 768 px.
*/

/* ===== invites ===== */
/* Ajustements mobile propres aux vues Invités / Foyers / Tableau de bord.
   Le socle .cartes-mobile (tableau -> cartes empilées sous 768px) vit dans site.css ;
   ici on ne règle que ce qui est spécifique à ces vues et que les utilitaires Bootstrap
   ne couvrent pas. */

@media (max-width: 767.98px) {
    /* La vue « Colonnes » des foyers (suivi-colonnes) est une grille pensée pour un grand
       écran ; sous 768px on la laisse défiler horizontalement plutôt que de la tasser au
       point de rendre les cartes illisibles. */
    .suivi-colonnes {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .suivi-colonnes .suivi-colonne {
        flex: 0 0 85vw;
    }

    /* La ligne d'en-tête d'un bloc-foyer (nom du foyer, actions, compteur) n'est pas une
       ligne de données comme les autres : son td colspan ne doit pas se transformer en
       carte à étiquette, juste s'empiler proprement en entête de groupe. */
    #listeInvites .entete-foyer td {
        display: block;
        width: 100%;
    }

    #listeInvites .entete-foyer .d-flex {
        justify-content: flex-start;
    }

    /* Colonne case à cocher / bouton « Modifier » : pas de libellé utile, on garde la
       ligne compacte plutôt que de réserver la place d'une étiquette vide. */
    #listeInvites td[data-libelle=""] {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}

/* ===== logistique ===== */
/* Ajustements smartphone (360-430px) pour les vues Réponses, Hébergements, Cadeaux, Menu
   et le résumé logistique d'un foyer. Ce fichier n'est volontairement pas référencé dans le
   layout : c'est au coordinateur qui pose le socle CSS commun de l'y ajouter. */

/* Cible tactile confortable pour les boutons icône seule (copier un lien, poignée de
   glisser-déposer) : sous le pouce, 44px est le minimum recommandé. */
.btn-cible-tactile {
    min-width: 44px;
    min-height: 44px;
}

/* La poignée de glisser-déposer d'une carte foyer est un simple caractère : on élargit sa
   zone cliquable sans l'agrandir visuellement, pour qu'elle reste facile à saisir au doigt. */
.poignee-couchage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}

/* ===== organisation ===== */
/* ==========================================================================
   Adaptations mobiles (360–430px) pour les vues « organisation » :
   Plan de table, Tâches et Rappels.

   Ce fichier ne touche à rien de commun (site.css, theme.css, layout) : il ne
   fait que resserrer, sous 768px, des mises en page pensées pour un écran
   large. Le coordinateur le référence dans le layout ; ici on ne fait que le
   remplir.
   ========================================================================== */

/* ---- Plan de table -------------------------------------------------------
   Le plan reste en pleine largeur (cas particulier documenté dans la
   consigne) : sous 768px, le panneau des invités et la fiche du plan passent
   d'une colonne latérale fixe à des blocs empilés au-dessus/en dessous de la
   scène, pour ne pas écraser la zone de travail sur un écran étroit. La
   scène elle-même garde son défilement au doigt (voir touch-action plus bas
   et le geste pointer déjà en place dans plan.js pour déplacer/redimensionner
   une table). */
@media (max-width: 767.98px) {
    .plan-entete {
        flex-direction: column;
        align-items: stretch;
    }

    .plan-entete > .d-flex {
        flex-wrap: wrap;
    }

    .plan-espace {
        flex-direction: column;
        height: auto;
    }

    .plan-panneau,
    .plan-fiche {
        flex: 0 0 auto;
        width: 100%;
        max-height: 40vh;
    }

    /* La scène garde une hauteur confortable même quand panneau et fiche
       sont repliés (boutons « Cacher… » déjà présents dans la page). */
    .plan-scene {
        min-height: 60vh;
    }

    /* Un jeton d'invité reste un peu petit au doigt : on agrandit la cible
       tactile sans changer sa lecture visuelle. */
    .jeton-invite {
        padding: .4rem .6rem;
        font-size: .85rem;
    }
}

/* Le défilement de la scène doit rester fluide au doigt dans les deux sens
   (la salle peut dépasser dans les deux directions selon le plan), tout en
   laissant le geste de déplacement d'une table (pointer events, voir
   .table-plan { touch-action: none } dans site.css) fonctionner sans que la
   page ne scrolle en même temps sous le doigt. */
.plan-scene {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

/* ---- Tâches ---------------------------------------------------------------
   Le tableau (vue Kanban) empile déjà ses trois colonnes sous 992px
   (site.css). Sous 768px on resserre encore les cartes et on agrandit les
   cibles tactiles (case à cocher, poignée de glisser). */
@media (max-width: 767.98px) {
    .carte-tache {
        padding: .65rem .75rem;
    }

    .meta-tache {
        font-size: .8rem;
    }

    /* La case à cocher d'une tâche (liste ou tableau) : 1.25rem est trop
       petit au doigt, on vise le minimum recommandé de 44px. */
    .btn-case {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.1rem;
    }

    .tache {
        align-items: center;
    }

    .tache-case {
        flex: 0 0 auto;
    }

    /* Un lien "Supprimer" (×) en fin de ligne : même logique de cible
       tactile que la case à cocher. */
    .tache > form:last-child .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.2rem;
    }
}

/* ---- Rappels ---------------------------------------------------------------
   Les boutons d'action (envoyer, tester, préférence) sont chacun dans leur
   propre <form> : le conteneur passe en grille (d-grid) sous le seuil, mais
   il faut aussi que le bouton remplisse son formulaire pour occuper toute la
   largeur de la cellule. */
@media (max-width: 575.98px) {
    #contenuRappels .d-grid > form {
        width: 100%;
    }

    #contenuRappels .d-grid > form > .btn {
        width: 100%;
    }
}

/* ---- Rappels (suite) -------------------------------------------------------
   Rien de spécifique : le tableau des envois passe en cartes via la classe
   utilitaire .cartes-mobile (appliquée dans _Contenu.cshtml), et les cartes
   « Envoi » / « Compte Google » sont déjà en colonnes Bootstrap (col-lg-6)
   qui s'empilent d'elles-mêmes sous le seuil lg. */

/* ===== gestion ===== */
/*
    Ajustements mobile pour les vues de gestion interne : Budget, Paiements, Prestataires,
    Briefs, Documents, Calendrier, Déroulé, Impressions, Paramètres, Utilisateurs,
    Sauvegarde, Compte. Ce fichier n'est pas référencé dans le layout : c'est volontaire,
    le coordinateur l'ajoute lui-même une fois les trois agents passés.
*/

/* Calendrier : sous md, la grille mensuelle défile horizontalement plutôt que d'être
   redessinée en liste (refonte trop lourde pour la portée de cette passe). */
@media (max-width: 767.98px) {
    .calendrier-mois {
        overflow-x: auto;
        margin: 0 -.5rem;
        padding: 0 .5rem;
        -webkit-overflow-scrolling: touch;
    }

    /* Sans largeur plancher, la grille se comprime au lieu de défiler : chaque
       colonne de jour devient illisible. 7 colonnes de 6rem restent lisibles au doigt. */
    .calendrier-mois .calendrier {
        min-width: 42rem;
    }
}

/* Calendrier : barre de navigation (mois précédent/suivant, "aujourd'hui") pleine
   largeur et boutons étirés, plutôt que des liens compressés côte à côte. */
@media (max-width: 575.98px) {
    #zoneCalendrier > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
    }

    #zoneCalendrier > .d-flex.justify-content-between > div:last-child {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Fiche prestataire : zone de dépôt de fichiers, le bouton doit rester visible et
   atteignable au doigt même sans glisser-déposer. */
@media (max-width: 767.98px) {
    .zone-depot {
        text-align: center;
    }

    .zone-depot .btn {
        width: 100%;
    }
}

/* Cibles cliquables réduites (icônes seules) : on vise au moins 44px de côté sur mobile. */
@media (max-width: 767.98px) {
    .btn-icone-seule {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Brief (tableau à quatre colonnes) : les actions d'une carte se révèlent normalement au
   survol, ce qui n'existe pas au doigt. Sur mobile elles restent visibles en permanence. */
@media (max-width: 767.98px) {
    .carte-brief .actions-carte {
        opacity: 1;
    }

    .carte-brief .actions-carte a,
    .carte-brief .actions-carte button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Déroulé : le bouton « Retirer » de chaque étape reste une cible confortable au doigt,
   même en btn-sm. */
@media (max-width: 767.98px) {
    .deroule-actions .btn {
        min-height: 44px;
    }
}