/* ══════════════════════════════════════════════════════════════════ tactile.css — BRICKOUTENNIS Mobile (smartphone) Activé par la classe .device-phone sur Tablette (.device-tablet) et Desktop : 0 impact ══════════════════════════════════════════════════════════════════ */ /* ── PAGE DE JEU : layout colonne plein écran ── */ body.device-phone #game-screen { flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 0; gap: 0; min-height: 0; padding-bottom: 0 !important; } /* ── TOP BAR ── */ body.device-phone #top-bar { width: 100%; max-width: 100%; padding: 6px 10px; flex-shrink: 0; } body.device-phone #tb-left, body.device-phone #tb-right { display: none !important; } body.device-phone #tb-mid { flex: 1; justify-content: center; } body.device-phone #scoreboard { padding: 6px 18px; gap: 12px; } body.device-phone .score-value { font-size: 1.6rem; } /* ── COURT BOX ── */ body.device-phone #court-box { width: 100% !important; max-width: 100% !important; aspect-ratio: unset !important; max-height: unset !important; min-height: 0 !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; flex-shrink: 0; } body.device-phone #game-canvas-3d { border-radius: 0 !important; } /* ── MASQUER ÉLÉMENTS DESKTOP ── */ body.device-phone #game-controls, body.device-phone #browser-fs-box, body.device-phone #pause-container { display: none !important; } /* ══════════════════════════════════════════ MOBILE DASHBOARD ══════════════════════════════════════════ */ #mobile-dashboard { display: none; } body.device-phone #mobile-dashboard { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; width: 100%; } .mob-row { display: flex; align-items: center; justify-content: space-between; width: 100%; } .mob-nav-row { gap: 6px; } .mob-ctrl-row { gap: 8px; align-items: stretch; } /* ── CARTOUCHES RANGÉE 1 ── Accueil=70px Sons=50px Musique=flex Aide=70px → aligné verticalement avec Pause(70) et 2D/3D(70) ── */ .mob-cartouche { height: 44px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; color: var(--accent-ocher); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.15s; -webkit-tap-highlight-color: transparent; user-select: none; padding: 0; flex-shrink: 0; } .mob-cartouche:active { background: rgba(212, 136, 62, 0.18); border-color: var(--accent-ocher); } #mob-home-btn { width: 70px; } /* = PAUSE */ #mob-aide-btn { width: 70px; } /* = 2D/3D */ #mob-sound-btn { width: 50px; } .mob-music-box { flex: 1; justify-content: space-evenly; } .mob-icon-svg { width: 20px; height: 20px; fill: currentColor; color: var(--accent-ocher); } /* Boutons player musique (espacés grâce à space-evenly sur parent) */ .mob-player-btn { background: none; border: none; cursor: pointer; color: var(--accent-ocher); padding: 4px 6px; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: color 0.15s, transform 0.1s; } .mob-player-btn:active { color: #fff; transform: scale(1.15); } .mob-player-btn svg { width: 20px; height: 20px; fill: currentColor; } /* ── RANGÉE 2 : PAUSE | PAD | 2D/3D ── */ .mob-square { width: 70px; flex-shrink: 0; height: 70px; border-radius: 14px; background: #000; border: 2px solid var(--accent-ocher); color: var(--accent-ocher); font-family: inherit; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; -webkit-tap-highlight-color: transparent; user-select: none; transition: background 0.15s, color 0.15s; } .mob-square:active { background: rgba(212, 136, 62, 0.2); } .mob-pause-sq.paused { background: var(--accent-ocher); color: var(--bg-primary); } .mob-view-sq { font-size: 0; flex-direction: row; gap: 3px; } #mob-vs-2d, #mob-vs-3d { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; color: rgba(212, 136, 62, 0.5); transition: background 0.15s, color 0.15s; } #mob-vs-2d.mob-vs-active, #mob-vs-3d.mob-vs-active { background: var(--accent-ocher); color: var(--bg-primary); } /* ── Bouton TIR (remplace 2D/3D dans rangée 2) ── */ .mob-tir-sq { flex-direction: column; gap: 2px; } /* ── Ligne 2D/3D déplacée sous le pad ── */ .mob-view-row { justify-content: center; } /* Sur phone : gap entre switch 2D/3D et icône fullscreen */ body.device-phone .mob-view-row { display: flex; align-items: center; gap: 30px; } /* Icône fullscreen : aucun fond, aucune bordure */ body.device-phone #btn-ios-modal { display: flex !important; align-items: center; justify-content: center; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Sur phone : le switch 2D/3D devient une cartouche plate centrée */ body.device-phone .mob-view-row .mob-view-sq { display: flex; align-items: center; gap: 6px; } /* Control pad */ .mob-pad { flex: 1; height: 70px; background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.14); border-radius: 14px; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; cursor: grab; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s; } .mob-pad:active { border-color: rgba(212, 136, 62, 0.4); } .mob-pad-label { font-weight: 700; font-size: 1.0rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.11); pointer-events: none; } /* ══════════════════════════════════════════ MODALE AIDE — MOBILE TABULÉE (pattern MEGATENNIS reproduit fidèlement) ══════════════════════════════════════════ */ /* Desktop : modale classique visible, modale tabulée masquée */ #modal-mobile-content { display: none !important; } /* Phone : inverse */ body.device-phone #modal-desktop-content { display: none !important; } body.device-phone #modal-mobile-content { display: flex !important; } /* Conteneur tabulé */ .modal-tabbed { flex-direction: column; width: 92%; max-width: 500px; height: auto; max-height: 80vh; background: linear-gradient(180deg, var(--box-bg-top) 0%, var(--box-bg-bottom) 100%); border: 1px solid rgba(212, 136, 62, 0.25); border-radius: 20px; backdrop-filter: blur(10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); overflow: hidden; padding: 0; position: relative; } /* Barre d'onglets */ .modal-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 12px 40px 0 12px; gap: 4px; background: rgba(0, 0, 0, 0.2); } .modal-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 12px 8px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .modal-tab:hover { color: var(--text-secondary); } .modal-tab.active { color: var(--accent-ocher-light); border-bottom-color: var(--accent-ocher); } /* Contenu des onglets */ .modal-tab-content { display: none; flex-direction: column; align-items: flex-start; gap: 14px; overflow-y: auto; padding: 16px 18px 20px; flex: 1; position: relative; } .modal-tab-content.active { display: flex; } /* Indicateur de scroll — triangle orange animé, visible UNIQUEMENT si .needs-scroll */ .modal-tab-content::after { content: ''; position: sticky; bottom: 0; align-self: flex-end; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--accent-orange); pointer-events: none; animation: scrollBreathe 0.6s ease-in-out infinite; flex-shrink: 0; opacity: 0; transition: opacity 0.2s; } .modal-tab-content.needs-scroll::after { opacity: 1; } @keyframes scrollBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ── Croix modale aide — remonter au niveau des onglets sur phone ── */ body.device-phone .modal-tabbed .modal-close-btn { top: 8px; right: 12px; } /* ══════════════════════════════════════════ RESPONSIVE TRÈS PETIT ÉCRAN (< 380px) ══════════════════════════════════════════ */ @media (max-width: 380px) { body.device-phone #mobile-dashboard { gap: 6px; padding: 6px 8px 8px; } .mob-square { width: 60px; height: 60px; font-size: 0.7rem; } #mob-home-btn, #mob-aide-btn { width: 60px; } #mob-sound-btn { width: 44px; } .mob-pad { height: 60px; } .mob-cartouche { height: 38px; } .mob-pad-label { font-size: 0.85rem; } } /* ══════════════════════════════════════════ PAGE D'ACCUEIL MOBILE — MODALE TABULÉE ══════════════════════════════════════════ */ /* Masquer le rules-container desktop sur phone */ body.device-phone #start-screen .rules-container { display: none !important; } /* Masquer le sous-titre sur phone */ body.device-phone #start-screen .subtitle { display: none !important; } /* Logo-container rétabli sur phone */ /* Masquer le bloc tabulé d'accueil sur desktop/tablet */ #home-mobile-tabbed { display: none; } /* ── Conteneur principal page d'accueil phone ── */ body.device-phone #start-screen { overflow-y: auto; justify-content: flex-start; } body.device-phone #start-screen .home-container { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 10px 0 12px; gap: 10px; } /* ── Titre : plus petit, 90% largeur ── */ body.device-phone #start-screen .game-title { font-size: clamp(1.6rem, 11vw, 2.4rem); width: 92vw; max-width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0; text-align: center; letter-spacing: 0.08em; box-sizing: border-box; } /* ── start-wrapper : colonne serrée ── */ body.device-phone #start-screen .start-wrapper { gap: 8px; margin-bottom: 10px; width: 92%; } /* ── Ligne 2 : 3 blocs flex classiques ── */ body.device-phone #start-screen .start-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0; width: 100%; } body.device-phone #start-screen .start-row-left, body.device-phone #start-screen .start-row-right { flex: 0 0 auto; flex-direction: column; align-items: center; gap: 4px; } body.device-phone #start-screen .start-row-mid { flex: 1; display: flex !important; justify-content: center; } /* ── Bouton JOUER : taille réduite ── */ body.device-phone #start-screen .start-button { padding: 11px 28px; font-size: 1.05rem; } /* ── Labels "Jeu en" en colonne au-dessus du switch ── */ body.device-phone #start-screen .start-row-label { display: block; text-align: center; } /* ── Cartouche tabulée : ligne 4 ── */ body.device-phone #home-mobile-tabbed { display: flex; flex-direction: column; width: 92%; max-width: 500px; height: auto; max-height: 80vh; background: linear-gradient(180deg, var(--box-bg-top) 0%, var(--box-bg-bottom) 100%); border: 1px solid rgba(212, 136, 62, 0.25); border-radius: 20px; backdrop-filter: blur(10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); overflow: hidden; margin: 10px auto 0; } /* ── Textes dans les onglets : alignés à gauche ── */ body.device-phone #home-mobile-tabbed .modal-tab-content { align-items: flex-start; text-align: left; } /* ══════════════════════════════════════════ PAUSE — masquer "Touche P" phone + tablet ══════════════════════════════════════════ */ body.device-phone #pause-hint, body.device-tablet #pause-hint { display: none !important; } /* ══════════════════════════════════════════ CORRECTION SUPERPOSITION SCREENS — phone + tablet #game-screen écrase position:fixed de .screen avec position:relative (desktop) On le reforce ici pour que le game-screen couvre bien le start-screen ══════════════════════════════════════════ */ body.device-phone #game-screen, body.device-tablet #game-screen { position: fixed; inset: 0; background: radial-gradient(ellipse at center, #3d4e68 0%, #1a2233 40%, #0d1118 70%, #000 100%); } /* ══════════════════════════════════════════ DÉSACTIVER SÉLECTION TEXTE — phone + tablet Ciblé sur éléments UI uniquement (body global bloque les touch events) ══════════════════════════════════════════ */ body.device-phone button, body.device-phone label, body.device-phone .mob-cartouche, body.device-phone .mob-square, body.device-phone .mob-pad-label, body.device-phone #mobile-dashboard, body.device-tablet button, body.device-tablet label, body.device-tablet .tab-cart, body.device-tablet .tab-naked-btn, body.device-tablet #tablet-dashboard { -webkit-user-select: none; user-select: none; } /* ══════════════════════════════════════════════════════════════════ TABLET — BRICKOUTENNIS Activé par la classe .device-tablet sur Smartphone (.device-phone) et Desktop : 0 impact ══════════════════════════════════════════════════════════════════ */ /* ── PAGE DE JEU : layout colonne plein écran ── */ body.device-tablet #game-screen { flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 0; gap: 0; min-height: 0; padding-bottom: 0 !important; overflow: hidden; } /* ── TOP BAR ── */ body.device-tablet #top-bar { width: 100%; max-width: 100%; padding: 6px 12px; flex-shrink: 0; } body.device-tablet #tb-left, body.device-tablet #tb-right { display: none !important; } body.device-tablet #tb-mid { flex: 1; justify-content: center; } body.device-tablet #scoreboard { padding: 6px 22px; gap: 14px; } body.device-tablet .score-value { font-size: 1.8rem; } /* ── COURT BOX ── */ body.device-tablet #court-box { width: 100% !important; max-width: 100% !important; aspect-ratio: unset !important; max-height: none !important; min-height: 100px !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; flex-shrink: 1; flex-grow: 1; } body.device-tablet #game-canvas-3d { border-radius: 0 !important; } /* ── MASQUER ÉLÉMENTS DESKTOP ── */ body.device-tablet #game-controls, body.device-tablet #browser-fs-box, body.device-tablet #pause-container, body.device-tablet #btn-canvas-zoom { display: none !important; } /* ── MASQUER MOBILE DASHBOARD ── */ body.device-tablet #mobile-dashboard { display: none !important; } /* ══════════════════════════════════════════ TABLET DASHBOARD ══════════════════════════════════════════ */ #tablet-dashboard { display: none; } body.device-tablet #tablet-dashboard { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; width: 100%; } .tab-row { display: flex; align-items: center; justify-content: space-between; width: 100%; } .tab-nav-row { gap: 6px; } /* align-items:center pour que PAUSE garde sa hauteur naturelle (padding seul) */ .tab-ctrl-row { gap: 8px; align-items: center; } /* ── CARTOUCHES RANGÉE 1 : style zoomed control-box desktop ── */ .tab-cart { flex: 1; height: 72px; background: rgba(0, 0, 0, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--text-secondary); cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; transition: all 0.15s; -webkit-tap-highlight-color: transparent; user-select: none; padding: 0 8px; white-space: nowrap; } .tab-cart:active { border-color: rgba(255, 255, 255, 0.3); } .tab-icon-svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; color: var(--accent-ocher); } .tab-cart span { color: var(--text-secondary); } /* Switch 2D/3D — 100% hérité de .tab-cart largeur = max-width des arrow-btn, spans gris/orange */ body.device-tablet .tab-view-btn { flex: 0 0 clamp(88px, 16vw, 140px); max-width: clamp(88px, 16vw, 140px); gap: 4px; } .tab-view-btn .vs-opt { color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; transition: color .2s; } .tab-view-btn .vs-opt.active { color: var(--accent-ocher); } /* Musique */ .tab-music-box { flex: 2; justify-content: space-between; gap: 0; padding: 0 20px; } .tab-music-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; color: var(--text-secondary); white-space: nowrap; } .tab-player-btn { background: none; border: none; cursor: pointer; color: var(--accent-ocher); padding: 3px 4px; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: color 0.15s, transform 0.1s; } .tab-player-btn:active { color: #fff; transform: scale(1.15); } .tab-player-btn svg { width: 16px; height: 16px; fill: currentColor; } /* ── RANGÉE 2 : ← | PAUSE | → ── */ /* Boutons fléchés — rectangulaires verticaux 1:2, même largeur que TIR (flex:1) */ .tab-arrow-btn { flex: 1; max-width: clamp(88px, 16vw, 140px); aspect-ratio: 1 / 2; border-radius: 10px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; user-select: none; transition: background 0.12s, border-color 0.12s; touch-action: none; } .tab-arrow-btn:active, .tab-arrow-btn.pressed { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); } .tab-arrow-btn svg { width: 36px; height: 36px; fill: currentColor; } /* Tab control pad — largeur = tab-music-box (flex:2), hauteur = tab-arrow-btn */ .tab-pad { flex: 1; height: clamp(176px, 32vw, 280px); background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.14); border-radius: 10px; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; cursor: grab; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s; } .tab-pad:active { border-color: rgba(212, 136, 62, 0.4); } /* Ligne PAUSE : centrée, même hauteur que tab-ctrl-row */ .tab-pause-row { justify-content: space-between; align-items: center; height: clamp(88px, 16vw, 140px); } .tab-pause-bloc { flex: 1; display: flex; align-items: center; } .tab-pause-bloc:nth-child(1) { justify-content: flex-start; } .tab-pause-bloc:nth-child(2) { justify-content: center; } .tab-pause-bloc:nth-child(3) { justify-content: flex-end; } /* Bouton PAUSE tablet — neutraliser :hover (touch garde l'état hover après tap) */ body.device-tablet .pause-btn:hover:not(.paused) { background: #000 !important; color: var(--accent-ocher) !important; box-shadow: none !important; } /* ── ACCUEIL & AIDE : boutons nus (sans cartouche) ── */ .tab-naked-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; font-family: inherit; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; color: var(--text-secondary); -webkit-tap-highlight-color: transparent; user-select: none; transition: color 0.15s; } .tab-naked-btn span { color: var(--text-secondary); } .tab-naked-btn .tab-icon-svg { color: var(--accent-ocher); fill: var(--accent-ocher); } .tab-naked-btn:active span { color: #fff; } .tab-naked-btn:active .tab-icon-svg { color: #fff; fill: #fff; } /* Aligner ACCUEIL/AIDE sur les bords extérieurs des boutons fléchés max-width arrow = clamp(88px,16vw,140px) → padding = même valeur */ .tab-pause-row .tab-pause-bloc:nth-child(1) { padding-left: 0; } .tab-pause-row .tab-pause-bloc:nth-child(3) { padding-right: 0; } /* ── RÉCAP POWER-UPS dans tab-ctrl-row ── */ .tab-pu-recap { flex: 1; overflow-y: auto; padding: 4px 10px; align-self: stretch; } .tab-pu-recap .special-shots { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .tab-pu-recap .special-shots li { font-size: 0.62rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; } .tab-pu-recap .special-shots li strong { color: var(--text-primary); } /* ── RESPONSIVE TABLET PETIT (< 768px largeur) ── */ @media (max-width: 768px) { .tab-cart { height: 56px; font-size: 0.55rem; gap: 4px; padding: 0 5px; } .tab-icon-svg { width: 14px; height: 14px; } .tab-arrow-btn svg { width: 22px; height: 22px; } .tab-music-label { display: none; } } /* ══════════════════════════════════════════ RÉGLAGES (3e onglet) — toutes plateformes ══════════════════════════════════════════ */ .settings-section { width: 100%; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; margin: 0; } .settings-label { color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; } .settings-select { background: rgba(0,0,0,0.6); color: var(--accent-ocher); border: 1px solid rgba(212,136,62,0.35); border-radius: 6px; padding: 4px 10px; font-family: inherit; font-size: 0.8rem; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23d4883e' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; } .settings-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .settings-switch input { opacity: 0; width: 0; height: 0; } .settings-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); border-radius: 22px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; } .settings-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px; background-color: var(--text-secondary); border-radius: 50%; transition: transform 0.2s, background-color 0.2s; } .settings-switch input:checked + .settings-slider { background-color: rgba(212,136,62,0.3); border-color: var(--accent-ocher); } .settings-switch input:checked + .settings-slider::before { transform: translateX(18px); background-color: var(--accent-ocher); } body.device-phone .firefly { display: none !important; } /* ============================================ MODALE IOS PLEIN ÉCRAN ============================================ */ /* Overlay modale iOS */ #ios-fullscreen-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 500; display: flex; justify-content: center; align-items: center; } #ios-fullscreen-modal.hidden { display: none !important; } .ios-fs-modal { display: flex; flex-direction: column; width: 85%; max-width: 400px; background: linear-gradient(180deg, var(--box-bg-top) 0%, var(--box-bg-bottom) 100%); border: 1px solid rgba(212, 136, 62, 0.25); border-radius: 20px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); overflow: hidden; padding: 0; position: relative; } .ios-fs-content { padding: 40px 24px 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } .ios-fs-main { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.7; } .ios-fs-instructions { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6; padding: 12px 16px; background: rgba(0, 0, 0, 0.25); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.07); width: 100%; box-sizing: border-box; } .ios-fs-instructions strong { color: var(--text-primary); } /* Boutons loupe — séparation phone / autres */ body.device-phone #btn-canvas-zoom { display: none !important; } #btn-ios-modal { display: none !important; }