/* =========================================================================
   L'éditeur au téléphone.

   Principe : on ne réduit pas le bureau, on le REPLIE. Le plan occupe l'écran,
   et un feuillet monte du bas selon ce qu'on fait. editor-mobile.js y déplace
   les vrais boutons de la barre d'outils — rien n'est dupliqué.

   Toutes les cibles font au moins 44 px. Avant, douze boutons sur trente
   étaient en dessous : sur un plan de table, ça veut dire qu'on rate la place
   qu'on visait, et qu'on déplace un invité par erreur.
   ========================================================================= */

.mbar, .feuillet, .flotte { display: none; }

@media (max-width: 768px) {

    /* La barre d'outils du bureau est vidée par le script : on la retire du flux. */
    .editor-toolbar { display: none !important; }

    /* ─── La barre du haut ─── */
    .mbar {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 54px;
        padding: 0 10px;
        background: var(--nuit-2);
        border-bottom: 1px solid var(--border-nuit);
        color: var(--text-nuit);
        flex-shrink: 0;
    }
    .mrond {
        width: 44px; height: 44px;
        display: grid; place-items: center;
        flex: none;
        border: 1px solid var(--border-nuit-2);
        border-radius: 11px;
        color: var(--text-nuit);
        background: transparent;
        cursor: pointer;
    }
    .mbar-evt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
    .mbar-evt b {
        font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mbar-evt s {
        text-decoration: none;
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--text-nuit-light);
        letter-spacing: .04em;
    }
    .mbar-jauge {
        font-family: var(--font-mono);
        font-size: 10.5px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(242, 193, 91, .13);
        border: 1px solid rgba(242, 193, 91, .3);
        color: var(--laiton);
        letter-spacing: .03em;
        font-variant-numeric: tabular-nums;
        flex: none;
    }
    .mbar-actions { display: flex; gap: 6px; flex: none; }
    .mbar-actions .toolbar-btn {
        width: 44px; height: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
        border: 1px solid var(--border-nuit-2);
        border-radius: 11px;
        background: transparent;
        color: var(--text-nuit);
    }
    .mbar-actions .toolbar-btn:disabled { opacity: .35; }
    .mbar-actions .toolbar-btn span { display: none; }

    /* ─── Le plan prend l'écran ─── */
    .editor-layout { flex-direction: column; position: relative; }
    .editor-canvas-wrapper { order: 1; flex: 1; min-height: 0; padding-bottom: 0; }
    /* Le feuillet est en position fixe : il recouvrait le bas du canevas, qui
       continuait de croire qu'il avait toute la hauteur. « Tout voir » ajustait
       donc le plan à une zone dont un tiers était caché. */
    .editor-canvas {
        height: calc(100% - var(--feuillet-h, 168px));
        transition: height .28s cubic-bezier(.4, 0, .2, 1);
        -webkit-overflow-scrolling: touch;
    }
    .canvas-room { width: 1400px; height: 900px; margin: 16px; }

    .flotte {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: absolute;
        right: 12px; top: 12px;
        z-index: 30;
    }
    .flotte .toolbar-btn {
        width: 46px; height: 46px;
        min-width: 46px;
        padding: 0;
        justify-content: center;
        border-radius: 13px;
        background: rgba(20, 24, 33, .92);
        border: 1px solid var(--border-nuit-2);
        color: var(--text-nuit);
        backdrop-filter: blur(8px);
        box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8);
    }
    .flotte .toolbar-btn span { display: none; }
    #btn-autoplace { color: var(--laiton); }

    .canvas-controls {
        left: 12px; right: auto;
        bottom: calc(var(--feuillet-h, 168px) + 12px);
        transform: none;
        background: rgba(20, 24, 33, .92);
        border: 1px solid var(--border-nuit-2);
        backdrop-filter: blur(8px);
        border-radius: 13px;
        padding: 4px;
        gap: 2px;
        transition: bottom .28s cubic-bezier(.4, 0, .2, 1);
    }
    .canvas-ctrl-btn {
        width: 44px; height: 44px;
        border-radius: 10px;
        color: var(--text-nuit);
        background: transparent;
        border: 0;
        font-size: 17px;
    }
    .canvas-zoom-level {
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--text-nuit-light);
        padding: 0 6px;
        min-width: 40px;
        text-align: center;
    }

    /* ─── Le feuillet ─── */
    .feuillet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 45;
        background: var(--nuit-2);
        border-top: 1px solid var(--border-nuit-2);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -22px 46px -26px rgba(0, 0, 0, .8);
        color: var(--text-nuit);
        height: 40vh;
        max-height: 86vh;
        transition: height .28s cubic-bezier(.4, 0, .2, 1);
    }
    .feuillet[data-cran="bas"]  { height: 92px; }
    .feuillet[data-cran="mi"]   { height: 40vh; }
    .feuillet[data-cran="haut"] { height: 86vh; }

    .feuillet-poignee {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 16px 0 8px;
        background: transparent;
        border: 0;
        cursor: grab;
        touch-action: none;
    }
    .feuillet-poignee i {
        display: block;
        width: 40px; height: 4px;
        margin: 0 auto;
        border-radius: 99px;
        background: #3A4152;
    }

    .feuillet-onglets {
        display: flex;
        gap: 3px;
        margin: 4px 12px 0;
        padding: 3px;
        background: var(--nuit);
        border: 1px solid var(--border-nuit-2);
        border-radius: 12px;
        flex: none;
    }
    .feuillet-onglets button {
        flex: 1;
        min-height: 44px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--text-nuit-light);
        font-family: var(--font);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }
    .feuillet-onglets button.on { background: var(--nuit-3); color: var(--text-nuit); }
    .feuillet-onglets em {
        font-style: normal;
        font-family: var(--font-mono);
        font-size: 10.5px;
        opacity: .75;
    }

    .feuillet-corps { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* L'ordre du bureau n'est pas celui du téléphone : sur un écran de 46 %
       de hauteur, le formulaire d'ajout occupait tout, et la liste des invités
       — ce qu'on vient chercher — n'apparaissait jamais. */
    .feuillet-corps #sidebar-guests:not([hidden]) { display: flex; flex-direction: column; }
    /* Dans une colonne à hauteur automatique, un enfant en `flex: 1` a une base
       de 0 et aucun espace libre à prendre : il s'écrase à zéro. C'est ce qui
       faisait disparaître la liste des invités du feuillet, sans rien signaler. */
    .feuillet-corps .editor-sidebar > * { flex: none; }
    .feuillet-corps .sidebar-section--recherche { order: -3; }
    .feuillet-corps #guest-list { order: -2; }
    .feuillet-corps .sidebar-section--ajout { order: -1; }

    /* Un bouton « + » de 46 px de haut sur toute la largeur ne dit pas ce
       qu'il fait. Au téléphone il porte son libellé. */
    #btn-add-guest span { display: none; }
    #btn-add-guest em { display: inline; font-style: normal; font-weight: 600; }

    /* Les deux panneaux du bureau deviennent le contenu du feuillet. */
    .feuillet-corps .editor-sidebar {
        width: 100%;
        height: auto;
        max-height: none;
        position: static;
        transform: none;
        border: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }
    .feuillet-corps .editor-sidebar[hidden] { display: none; }
    .feuillet-corps .sidebar-header { display: none; }
    .feuillet-corps .sidebar-section { border-color: var(--border-nuit); }

    /* Le panneau « Imprimer » */
    .feuillet-panneau { padding: 14px 14px 20px; }
    .fp-titre {
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: .17em;
        text-transform: uppercase;
        color: var(--text-nuit-light);
        margin: 0 0 12px;
    }
    .fp-champs { display: grid; gap: 12px; margin-bottom: 16px; }
    /* La largeur fixe venait de la barre d'outils du bureau : dans le feuillet
       elle tronquait « Nom de l'événement » en « Nom de ». */
    .fp-champs .toolbar-field { width: 100%; display: block; }
    .fp-champs .toolbar-field input { width: 100%; }
    .fp-champs label {
        display: block;
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--text-nuit-light);
        margin-bottom: 5px;
    }
    .fp-actions { display: grid; gap: 9px; }
    .fp-actions .toolbar-btn {
        width: 100%;
        min-height: 50px;
        justify-content: center;
        border-radius: 12px;
        font-size: 15px;
        background: transparent;
        border: 1px solid var(--border-nuit-2);
        color: var(--text-nuit);
    }
    .fp-prix {
        margin: 16px 0 0;
        font-size: 13px;
        line-height: 1.6;
        color: var(--text-nuit-light);
    }
    .fp-prix b { color: var(--laiton); font-weight: 600; }

    /* ─── Les cibles : 44 px partout ─── */
    .feuillet-corps .btn,
    .feuillet-corps .toolbar-btn,
    .feuillet-corps .input-sm,
    .feuillet-corps select,
    .fp-champs input {
        min-height: 46px;
        font-size: 16px;   /* sous 16 px, iOS zoome tout seul à la saisie */
    }
    .feuillet-corps .shape-btn,
    .feuillet-corps .seats-btn,
    .feuillet-corps .incompat-item button,
    /* Le « × » qui retire un invité d'une table mesurait 12×20 : c'est
       exactement le geste qu'on rate au doigt, et le rater ici veut dire
       sortir quelqu'un de sa table sans l'avoir voulu. */
    .feuillet-corps .guest-remove,
    .feuillet-corps .table-guest-remove,
    .flash-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .feuillet-corps .guest-item { min-height: 48px; }

    /* Sur la nuit, les champs et les cartes du bureau doivent suivre. */
    .feuillet-corps .input-sm,
    .fp-champs input,
    .feuillet-corps select {
        background: var(--nuit);
        border-color: var(--border-nuit-2);
        color: var(--text-nuit);
    }
    .feuillet-corps .input-sm::placeholder,
    .fp-champs input::placeholder { color: #5A6070; }
    .feuillet-corps label,
    .feuillet-corps h4,
    .feuillet-corps .sidebar-hint { color: var(--text-nuit-light); }
    .feuillet-corps .guest-item,
    .feuillet-corps .incompat-item,
    .feuillet-corps .table-guest-item {
        background: var(--nuit-3);
        border-color: var(--border-nuit);
        color: var(--text-nuit);
    }
    .feuillet-corps .btn--outline {
        color: var(--text-nuit);
        border-color: var(--border-nuit-2);
        background: transparent;
    }
    .feuillet-corps .btn--primary,
    .fp-actions .toolbar-btn--primary {
        background: var(--laiton);
        color: var(--on-laiton);
        border-color: var(--laiton);
    }
    .feuillet-corps .no-selection p,
    .feuillet-corps .guest-list-empty { color: var(--text-nuit-light); }
    .feuillet-corps .shape-btn,
    .feuillet-corps .seats-btn {
        background: var(--nuit);
        border-color: var(--border-nuit-2);
        color: var(--text-nuit-light);
    }
    .feuillet-corps .shape-btn.active,
    .feuillet-corps .seats-btn.active {
        background: var(--nuit-3);
        border-color: var(--laiton);
        color: var(--laiton);
    }

    /* Supprimer une table n'est pas l'action principale du panneau : en aplat
       plein et pleine largeur, c'était pourtant la plus visible. Contour. */
    .feuillet-corps .btn--danger {
        background: transparent;
        color: #E8877A;
        border-color: rgba(232, 96, 60, .45);
    }

    /* Au téléphone, l'offre vit dans l'onglet « Imprimer » : la répéter dans
       la fiche de la table ferait deux fois le même discours. */
    .feuillet-corps .carte-impression { display: none; }

    .conflict-banner { left: 12px; right: 12px; top: 12px; }
}