/* ==========================================================================
   RESPONSIVE — Adaptations tablette + mobile
   --------------------------------------------------------------------------
   Stratégie (mobile-first réaliste : desktop inchangé, dégradation douce) :
     - ≥ 1281px  : desktop (inchangé)
     - 1025–1280 : tablette paysage / petit laptop — toolbar compactée
     -  ≤ 1024px : tablette portrait — layout empilé verticalement
     -  ≤ 768px  : petite tablette portrait / grand mobile paysage
     -  ≤ 640px  : mobile large (iPhone Pro Max paysage / phablette)
     -  ≤ 480px  : mobile standard portrait (iPhone 13/14/15, Pixel)
     -  ≤ 380px  : petits mobiles (iPhone SE, anciens Android)
   En plus :
     - Pointeur coarse (tactile) : cibles agrandies, hover désactivés
     - Orientation paysage courte : header/footer aplatis
     - iOS : 100dvh + safe-area pour éviter le « jump » de la barre d'URL
   ========================================================================== */

/* ==========================================================================
   0. AJUSTEMENTS GLOBAUX iOS / viewports dynamiques
   --------------------------------------------------------------------------
   Sur iOS Safari, 100vh ne tient pas compte de la barre d'adresse rétractable
   et peut dépasser l'écran visible. 100dvh (dynamic viewport height) suit la
   hauteur réelle. On garde 100vh en fallback pour les navigateurs anciens.
   ========================================================================== */
@supports (height: 100dvh) {
    html, body { height: 100dvh; }
    .app { height: 100dvh; }
}

/* ==========================================================================
   1. TABLETTE PAYSAGE / PETIT LAPTOP — 1025px à 1280px
   (iPad Air paysage ≈ 1180px, iPad Pro 11" paysage ≈ 1194px)
   ========================================================================== */
@media (max-width: 1280px) {

    /* Header : moins de padding latéral */
    .app-header {
        padding: 0 var(--sp-4);
    }

    /* Toolbar : autorise le retour à la ligne si nécessaire */
    .toolbar {
        flex-wrap: wrap;
        gap: var(--sp-1);
        justify-content: flex-end;
    }

    /* Les boutons secondaires perdent leur label (gain de place) */
    .toolbar #btn-example span,
    .toolbar #btn-clear span,
    .toolbar #btn-shapes-ref span {
        display: none;
    }

    /* Zoom : pas d'espace supplémentaire entre les contrôles */
    .zoom-level {
        min-width: 44px;
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   2. TABLETTE PORTRAIT — ≤ 1024px
   (iPad Air portrait ≈ 820px, iPad Pro 11" portrait ≈ 834px)
   Layout empilé verticalement pour redonner de la largeur aux panneaux.
   ========================================================================== */
@media (max-width: 1024px) {

    :root {
        /* Un peu plus haut pour accueillir une toolbar sur 2 lignes */
        --header-height: auto;
        --footer-height: auto;
    }

    /* Structure : la grille devient auto (pour hauteur variable) */
    .app {
        grid-template-rows: auto 1fr auto;
    }

    /* Header : autorise le wrap complet */
    .app-header {
        flex-wrap: wrap;
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
        min-height: 56px;
    }

    .brand {
        flex: 0 0 auto;
    }

    .brand h1 {
        font-size: var(--fs-md);
    }

    .toolbar {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: wrap;
        row-gap: var(--sp-1);
    }

    /* Tous les labels de la toolbar disparaissent — icônes seules */
    .toolbar .btn span:not(.zoom-level):not(.pm-picker-text):not(.pm-picker-text *) {
        display: none;
    }

    /* Boutons plus larges pour le tactile (cible recommandée 44px) */
    .toolbar .btn {
        min-width: 40px;
        min-height: 40px;
        padding: var(--sp-2);
    }

    .toolbar .btn-icon,
    .toolbar .btn-icon-sm {
        width: 40px;
        height: 40px;
    }

    /* Dividers : réduits */
    .toolbar .divider {
        height: 20px;
        margin: 0 2px;
    }

    /* Picker projet : reste compact */
    .pm-picker {
        max-width: 220px;
        padding: var(--sp-2);
    }

    .pm-picker-project,
    .pm-picker-sep {
        display: none;
    }

    /* Workspace : empilé en lignes, splitter horizontal */
    .workspace {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(200px, 1fr) 12px minmax(200px, 1fr);
        min-height: calc(100vh - 56px - 32px); /* header + footer estimés */
    }

    .splitter {
        cursor: row-resize;
        touch-action: none;
    }

    /* Splitter plus épais pour être saisissable au doigt */
    .splitter {
        height: 12px;
    }

    .splitter::after {
        width: 48px;
        height: 4px;
        opacity: 0.6;
    }

    /* Panneau header : tabs compacts */
    .panel-header {
        padding: var(--sp-2) var(--sp-3);
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

    .panel-header-actions {
        flex-wrap: wrap;
        gap: var(--sp-1);
    }

    .panel-tabs {
        margin-right: var(--sp-1);
    }

    /* Tabs : cibles tactiles confortables */
    .tab-btn {
        padding: 6px 10px;
        min-height: 32px;
    }

    /* Bouton « Versions X/10 » : icône seule + compteur */
    #btn-versions-list {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }

    /* Footer : 1 seule ligne quand possible, avec wrap */
    .app-footer {
        flex-wrap: wrap;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
        font-size: 0.7rem;
        min-height: 32px;
    }

    /* Barre d'outils Drawflow / D3 : wrap autorisé */
    .df-toolbar,
    .d3-toolbar {
        flex-wrap: wrap;
        padding: 4px var(--sp-3);
        min-height: 36px;
    }

    .d3-search {
        width: 100%;
        order: 10;
        min-height: 32px;
        padding: 6px 10px 6px 28px;
    }

    /* Panneau de style Drawflow : wrap sur tablette */
    .df-node-style-panel {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

    /* Preview : conserve bien le scroll et le pinch */
    .preview-container {
        touch-action: none; /* on gère zoom/pan en JS */
    }

    /* Modale « Formes » : plein écran confortable */
    .shapes-ref-panel {
        width: 96vw;
        height: 94vh;
    }

    /* Modale projets (manager) : plus compacte */
    .pm-manager-body {
        grid-template-columns: 220px 1fr;
    }

    .pm-manager-shell {
        height: min(82vh, 720px);
    }

    /* Styler panel : reste 320px mais clamp à 92vw */
    .styler-panel {
        width: min(320px, 92vw);
        max-width: 92vw;
    }
}

/* ==========================================================================
   3. TABLETTE PORTRAIT ÉTROITE / GRAND MOBILE — ≤ 768px
   (iPad mini portrait ≈ 744px, Galaxy Tab A portrait, etc.)
   ========================================================================== */
@media (max-width: 768px) {

    /* Header : encore plus compact */
    .app-header {
        padding: var(--sp-2);
    }

    .brand-logo {
        height: 1.4rem;
    }

    .brand h1 {
        font-size: var(--fs-sm);
    }

    /* Picker projet : icône + diagramme uniquement */
    .pm-picker {
        max-width: 160px;
    }

    /* Niveau zoom : encore plus étroit */
    .zoom-level {
        min-width: 36px;
        font-size: 0.65rem;
    }

    /* Panneau preview : titre + tabs peuvent passer à la ligne */
    .panel-header h2 {
        font-size: 0.75rem;
    }

    .tab-btn {
        padding: 6px 8px;
        font-size: 0.7rem;
    }

    .tab-btn i {
        font-size: 0.85em;
    }

    /* Footer : on cache l'info diagramme et le lien licences pour gagner de la place */
    .app-footer .diagram-info,
    .app-footer .footer-link {
        display: none;
    }

    .app-footer {
        justify-content: space-between;
    }

    .footer-copyright {
        font-size: 0.65rem;
    }

    /* Workspace : on redescend la taille mini des panneaux */
    .workspace {
        grid-template-rows: minmax(160px, 1fr) 12px minmax(160px, 1fr);
    }

    /* Modales projets : tout en une colonne */
    .pm-manager-body {
        grid-template-columns: 1fr;
    }

    .pm-projects {
        max-height: 180px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .pm-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 2rem);
    }

    .pm-overlay {
        padding: var(--sp-3);
    }

    /* Styler panel : on l'ancre en bas de l'écran façon « bottom sheet » */
    .styler-panel {
        position: fixed;
        left: var(--sp-2);
        right: var(--sp-2);
        bottom: var(--sp-2);
        top: auto !important;
        width: auto;
        max-width: none;
    }

    /* Shapes ref modal : plein écran réel */
    .shapes-ref-overlay {
        padding: 0;
    }

    .shapes-ref-panel {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

/* ==========================================================================
   4. MOBILE LARGE — ≤ 640px
   (iPhone 14/15 Pro Max paysage ≈ 932px, mais la plupart des mobiles
    portrait tombent sous 640px : Galaxy S23 ≈ 412px, iPhone 15 ≈ 393px).
    On compacte franchement le header et le footer.
   ========================================================================== */
@media (max-width: 640px) {

    /* Header : padding minimal, pas d'ombre portée inutile */
    .app-header {
        padding: var(--sp-1) var(--sp-2);
        gap: var(--sp-1);
        min-height: 48px;
    }

    .brand {
        gap: var(--sp-2);
    }

    .brand-logo {
        height: 1.3rem;
    }

    /* Le titre « SireneFlux » disparaît — le logo suffit à identifier l'app */
    .brand h1 {
        display: none;
    }

    /* Toolbar : la toolbar est poussée sur sa propre ligne
       (flex-wrap déjà actif à 1024px) et passe en justify-content:flex-start
       pour laisser le logo seul à gauche */
    .toolbar {
        width: 100%;
        justify-content: flex-start;
        gap: 2px;
        row-gap: 4px;
    }

    /* Dividers verticaux devenus inutiles sur ligne étroite */
    .toolbar .divider {
        display: none;
    }

    /* Exemple + Effacer + Formes : on masque tant que le bouton icône porte
       l'action. Le title reste disponible en long-press. */
    .toolbar .btn {
        min-width: 36px;
        min-height: 36px;
        padding: var(--sp-1);
    }

    /* Boutons export : on masque aussi les labels SVG/PNG pour faire tenir
       toute la toolbar sur une seule ligne (l'icône download/image suffit,
       et le title reste disponible pour confirmer l'action). */
    .toolbar #btn-export-svg,
    .toolbar #btn-export-png {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
        padding: var(--sp-1);
    }

    .toolbar #btn-export-svg span,
    .toolbar #btn-export-png span {
        display: none;
    }

    /* Picker projet : ultra-compact, affiche uniquement le nom du diagramme */
    .pm-picker {
        max-width: 140px;
        padding: 4px var(--sp-2);
        gap: var(--sp-1);
    }

    .pm-picker > i:first-child {
        font-size: 0.85em;
    }

    /* Panel header : padding resserré */
    .panel-header {
        padding: var(--sp-1) var(--sp-2);
        min-height: 38px;
    }

    .panel-header h2 {
        font-size: var(--fs-xs);
    }

    /* Tabs Rendu / Layout / Graphe : icônes seules.
       Le texte "Rendu" est un nœud texte direct (pas un <span>), on masque
       donc via font-size:0 et on restaure une taille absolue sur l'icône. */
    .tab-btn {
        padding: 5px 10px;
        font-size: 0 !important;
        gap: 0;
    }

    .tab-btn i {
        font-size: 14px;
        margin: 0;
    }

    /* Status pill « Prêt » : discret */
    #editor-status {
        padding: 1px var(--sp-1);
        font-size: 0.65rem;
    }

    /* Bouton « Versions X/10 » : compteur seul */
    #btn-versions-list {
        padding: 3px 6px !important;
        font-size: 0.7rem !important;
    }

    /* Workspace : diminue encore la hauteur mini des panneaux pour que
       les deux restent visibles même sur écran court (450–580px utiles) */
    .workspace {
        grid-template-rows: minmax(120px, 1fr) 10px minmax(120px, 1fr);
    }

    .splitter {
        height: 10px;
    }

    /* Footer : version ultra-minimale, uniquement le copyright */
    .app-footer {
        padding: var(--sp-1) var(--sp-2);
        min-height: 26px;
        font-size: 0.6rem;
    }

    .app-footer > span:first-child {
        display: none;   /* liens Mermaid/Drawflow/D3 : trop bruyants ici */
    }

    .footer-copyright {
        font-size: 0.6rem;
        text-align: center;
        flex: 1;
    }

    /* Toolbars Drawflow / D3 : on permet le wrap complet */
    .df-toolbar,
    .d3-toolbar {
        padding: 4px var(--sp-2);
        min-height: 32px;
        gap: 4px;
    }

    .df-toolbar-info,
    .d3-toolbar-info {
        flex: 1 1 100%;
        font-size: 0.65rem;
    }

    /* Panneau de style Drawflow : empilement vertical,
       les range sliders rétrécissent */
    .df-node-style-panel {
        padding: 4px 0;
        width: 100%;
    }

    .df-style-item input[type="range"] {
        width: 50px;
    }

    .df-selected-node-label {
        max-width: 80px;
        font-size: 0.65rem;
    }

    /* Recherche D3 : plus petite mais toujours accessible */
    .d3-search {
        font-size: 0.7rem;
        width: 100%;
    }

    /* Modal shapes-ref : déjà fullscreen à 768px, on conserve */
    /* Modal projets : déjà empilée à 768px, on resserre encore */
    .pm-modal-header,
    .pm-modal-footer {
        padding: var(--sp-3) var(--sp-3);
    }

    .pm-modal-body {
        padding: var(--sp-3);
        gap: var(--sp-3);
    }

    .pm-modal-header h3 {
        font-size: var(--fs-sm);
    }

    /* Modale projets large : grille plus dense + picker compact */
    .pm-manager-hactions .btn span {
        display: none;
    }

    /* Grille de diagrammes : cartes plus étroites */
    .pm-diagrams-grid {
        grid-template-columns: 1fr;
        padding: var(--sp-3);
        gap: var(--sp-2);
    }

    /* Template grid : 3 colonnes max */
    .pm-template-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }

    /* Quickmenu (liste projets déroulante) : clamp à la viewport */
    .pm-quickmenu {
        min-width: auto;
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem);
        max-height: 60vh;
    }

    /* Styler panel : bottom sheet plus confortable */
    .styler-panel {
        border-radius: var(--radius-lg);
    }

    .styler-header {
        padding: var(--sp-2) var(--sp-3);
    }

    .styler-body {
        padding: var(--sp-3);
        gap: var(--sp-2);
    }

    .styler-footer {
        padding: var(--sp-2) var(--sp-3);
    }

    /* Sélecteur de couleur Pickr : bouton plus tactile */
    .pcr-button {
        width: 40px !important;
        height: 32px !important;
    }

    /* Layout modale export : colonnes empilées */
    .io-export-layout {
        flex-direction: column;
    }

    .io-export-right {
        width: 100%;
    }

    /* Toast : déborde moins */
    .io-toast {
        bottom: var(--sp-3);
        max-width: calc(100vw - 1rem);
        font-size: var(--fs-xs);
        padding: var(--sp-2) var(--sp-3);
    }
}

/* ==========================================================================
   5. MOBILE STANDARD — ≤ 480px
   (iPhone 15 ≈ 393px, Pixel 8 ≈ 412px, Galaxy S23 ≈ 412px)
   ========================================================================== */
@media (max-width: 480px) {

    /* Toolbar : encore plus serrée, boutons carrés de 34px */
    .toolbar .btn,
    .toolbar .btn-icon,
    .toolbar .btn-icon-sm {
        min-width: 34px;
        min-height: 34px;
        width: 34px;
        height: 34px;
    }

    /* Boutons export (icône seule déjà depuis 640px) : suivent la taille
       tactile 34×34 des autres boutons */
    .toolbar #btn-export-svg,
    .toolbar #btn-export-png {
        min-width: 34px;
        min-height: 34px;
        width: 34px;
        height: 34px;
        padding: 2px;
    }

    /* Niveau zoom : version courte sans unité */
    .zoom-level {
        min-width: 32px;
        font-size: 0.6rem;
        padding: 0 2px;
    }

    /* Masque zoom-reset pour gagner une case (reset via pinch out reste possible) */
    #btn-zoom-reset {
        display: none;
    }

    /* Picker projet : icône + diagramme tronqué sur ~110px */
    .pm-picker {
        max-width: 110px;
        padding: 3px 6px;
    }

    .pm-picker-text {
        font-size: 0.7rem;
    }

    /* Le label « Versions » disparaît, il ne reste que le compteur + icône */
    #versions-count {
        font-size: 0.65rem;
    }

    /* Panneau éditeur : conserve lisibilité du code mais gouttière resserrée */
    .panel-editor .panel-body .cm-editor {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .cm-lineNumbers .cm-gutterElement {
        padding: 0 var(--sp-1) 0 var(--sp-2) !important;
        font-size: 10.5px !important;
    }

    /* Placeholder d'aperçu vide : icône plus petite */
    .preview-empty i {
        font-size: 2rem;
    }

    .preview-empty {
        padding: var(--sp-4);
    }

    .preview-empty p {
        font-size: var(--fs-xs);
    }

    /* Bannière d'erreur : plus compacte, scroll interne */
    .error-banner {
        left: var(--sp-2);
        right: var(--sp-2);
        bottom: var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
        max-height: 35%;
    }

    .error-banner pre {
        font-size: 0.65rem;
    }

    /* Bouton quitter plein écran : plus petit */
    .btn-fullscreen-exit {
        top: var(--sp-2);
        right: var(--sp-2);
        width: 36px;
        height: 36px;
    }

    /* Preview container : padding réduit pour maximiser la zone de rendu */
    .preview-container {
        padding: var(--sp-2);
    }

    /* Modales : utilise tout l'écran */
    .pm-overlay {
        padding: var(--sp-2);
    }

    .pm-modal {
        width: 100%;
        max-height: calc(100dvh - 1rem);
        border-radius: var(--radius-md);
    }

    .pm-modal-header {
        padding: var(--sp-2) var(--sp-3);
    }

    .pm-modal-header h3 {
        font-size: var(--fs-sm);
        gap: 4px;
    }

    .pm-modal-footer {
        padding: var(--sp-2) var(--sp-3);
        flex-wrap: wrap;
    }

    .pm-modal-footer .btn {
        flex: 1;
    }

    /* Projects list dans le manager : hauteur réduite */
    .pm-projects {
        max-height: 140px;
    }

    .pm-project-main {
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--fs-xs);
    }

    .pm-projects-toolbar,
    .pm-diagrams-toolbar {
        padding: var(--sp-2);
    }

    .pm-projects-toolbar strong,
    .pm-diagrams-toolbar strong {
        font-size: var(--fs-xs);
    }

    .pm-diagram-card {
        padding: var(--sp-3);
    }

    .pm-diagram-card h4 {
        font-size: var(--fs-xs);
    }

    /* Arbre d'import : indentation réduite */
    .io-tree-children {
        padding-left: var(--sp-3);
    }

    .io-tree-row {
        font-size: 0.75rem;
        padding: 3px var(--sp-1);
    }

    /* Dropzone : moins verticale */
    .io-dropzone {
        padding: var(--sp-4) var(--sp-3);
    }

    .io-dropzone > i {
        font-size: 1.6rem;
    }

    /* Styler : passe à 1 colonne (label au-dessus du contrôle) */
    .styler-row {
        grid-template-columns: 1fr;
        gap: var(--sp-1);
    }

    .styler-row label {
        font-size: var(--fs-xs);
    }

    /* Shapes-ref : header encore plus compact */
    .shapes-ref-header {
        padding: var(--sp-1) var(--sp-2);
        gap: var(--sp-1);
    }

    .shapes-ref-title {
        font-size: var(--fs-xs);
        gap: 4px;
    }

    .shapes-ref-badge {
        font-size: 0.6rem;
        padding: 1px 5px;
    }

    /* Drawflow / D3 : badges « infos » passent à la ligne, ports tactiles déjà agrandis */
    .df-selected-node-label {
        display: none;
    }

    /* Panneau style Drawflow : plus compact, wrapping autorisé */
    .df-style-item {
        gap: 2px;
    }

    .df-style-item input[type="range"] {
        width: 44px;
    }

    .df-style-item output {
        min-width: 22px;
        font-size: 0.6rem;
    }

    /* Respect de la safe-area iOS (encoche, home indicator) */
    .app-header {
        padding-top: max(var(--sp-1), env(safe-area-inset-top));
        padding-left: max(var(--sp-2), env(safe-area-inset-left));
        padding-right: max(var(--sp-2), env(safe-area-inset-right));
    }

    .app-footer {
        padding-bottom: max(var(--sp-1), env(safe-area-inset-bottom));
        padding-left: max(var(--sp-2), env(safe-area-inset-left));
        padding-right: max(var(--sp-2), env(safe-area-inset-right));
    }

    .styler-panel {
        bottom: max(var(--sp-2), env(safe-area-inset-bottom));
        left: max(var(--sp-2), env(safe-area-inset-left));
        right: max(var(--sp-2), env(safe-area-inset-right));
    }
}

/* ==========================================================================
   6. PETITS MOBILES — ≤ 380px
   (iPhone SE 2e/3e gen ≈ 375px, anciens Android, montres 1ʳᵉ gen)
   Priorité : tout doit rester utilisable, quitte à être dense.
   ========================================================================== */
@media (max-width: 380px) {

    /* Toolbar : boutons encore plus serrés */
    .toolbar {
        gap: 1px;
    }

    .toolbar .btn,
    .toolbar .btn-icon,
    .toolbar .btn-icon-sm {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
        padding: 2px;
    }

    .toolbar .btn i {
        font-size: 0.85em;
    }

    /* Boutons export : 32×32 pour suivre la compacité globale ≤ 380px */
    .toolbar #btn-export-svg,
    .toolbar #btn-export-png {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
        padding: 2px;
    }

    /* Masque les boutons d'aide (Exemple/Effacer) — accessibles via le menu projets */
    #btn-example,
    #btn-clear {
        display: none;
    }

    /* Picker : encore plus étroit — le nom du diagramme doit rester lisible */
    .pm-picker {
        max-width: 92px;
        padding: 2px 4px;
    }

    /* Status pill « Prêt » masqué (info toujours visible via console/banner erreur) */
    #editor-status {
        display: none;
    }

    /* Panel header : labels minimaux */
    .panel-header h2 span,
    .panel-header h2 {
        font-size: 0.7rem;
    }

    /* Tabs : icône uniquement sans padding horizontal */
    .tab-btn {
        padding: 4px 6px;
    }

    /* Bouton copier code : plus petit */
    #btn-copy-code,
    #btn-save-version {
        width: 26px;
        height: 26px;
    }

    /* Versions : très court */
    #versions-count {
        font-size: 0.6rem;
    }

    /* Zoom-level : quasi invisible mais lisible */
    .zoom-level {
        min-width: 28px;
        font-size: 0.58rem;
    }

    /* Workspace : hauteur mini réduite pour petits écrans (≈ 560px tuiles) */
    .workspace {
        grid-template-rows: minmax(100px, 1fr) 10px minmax(100px, 1fr);
    }

    /* Modales projets : plein écran réel */
    .pm-overlay {
        padding: 0;
    }

    .pm-modal {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .pm-modal-body {
        padding: var(--sp-2);
    }

    /* Template grid : 2 colonnes */
    .pm-template-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Boutons modal footer : empilés */
    .pm-modal-footer {
        flex-direction: column-reverse;
    }

    .pm-modal-footer .btn {
        width: 100%;
    }

    /* Styler footer : boutons empilés */
    .styler-footer {
        flex-direction: column-reverse;
        gap: var(--sp-1);
    }

    .styler-footer .btn {
        width: 100%;
    }
}

/* ==========================================================================
   7. AJUSTEMENTS COMMUNS TACTILES (tout appareil coarse pointer)
   --------------------------------------------------------------------------
   Ces règles s'appliquent dès qu'un pointeur grossier (doigt) est détecté,
   indépendamment de la largeur. Utile pour iPad Pro paysage (≥ 1194px) qui
   reste en desktop mais bénéficie de cibles tactiles plus grandes.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

    /* Splitter plus épais et « grippable » */
    .splitter {
        background: var(--border-default);
    }

    .splitter::after {
        opacity: 0.8;
    }

    /* Désactive l'effet hover sur les cartes projet (persistait au tap) */
    .pm-project-row:hover {
        background: transparent;
    }

    .pm-project-row.is-selected:hover {
        background: var(--accent-soft);
    }

    /* Les actions sur une ligne projet sont toujours visibles
       (pas de hover pour les révéler) */
    .pm-project-actions {
        opacity: 1;
    }

    /* Désactive le filter hover du preview (trop visible au tap long) */
    #preview .node:hover > rect,
    #preview .node:hover > polygon,
    #preview .node:hover > circle,
    #preview .node:hover > path,
    #preview .cluster:hover > rect {
        filter: none;
    }

    /* Cibles tactiles minimales sur les boutons d'icône */
    .btn-icon-sm {
        min-width: 32px;
        min-height: 32px;
    }

    /* Inputs : hauteur confortable */
    .pm-input,
    .d3-search {
        min-height: 36px;
    }

    /* Ports Drawflow plus gros pour cibler au doigt */
    .drawflow .input,
    .drawflow .output {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ==========================================================================
   8. ORIENTATION PAYSAGE COURTE — tablettes et mobiles en paysage
   ========================================================================== */
@media (max-height: 600px) and (orientation: landscape) {

    /* Header + footer réduits pour libérer le canvas */
    .app-header {
        min-height: 48px;
        padding: var(--sp-1) var(--sp-3);
    }

    .app-footer {
        min-height: 28px;
        font-size: 0.7rem;
    }

    .brand-logo {
        height: 1.4rem;
    }

    .brand h1 {
        font-size: var(--fs-sm);
    }
}

/* ==========================================================================
   9. MOBILE PAYSAGE — retour en côte-à-côte
   --------------------------------------------------------------------------
   Sur un mobile en paysage (ex. iPhone 15 rotated : 852×393), l'empilement
   vertical imposé à ≤ 1024px coince les 2 panneaux dans ~300px de hauteur.
   Si la largeur reste > 640px et la hauteur est basse, on repasse en 2
   colonnes côte-à-côte avec un splitter vertical, plus ergonomique.
   ========================================================================== */
@media (max-width: 1024px) and (min-width: 640px) and (max-height: 500px) and (orientation: landscape) {

    .workspace {
        grid-template-columns: 1fr 6px 1fr;
        grid-template-rows: 1fr;
        min-height: 0;
    }

    .splitter {
        cursor: col-resize;
        height: 100%;
        width: 6px;
    }

    .splitter::after {
        width: 4px;
        height: 48px;
    }
}