/* fonctions/telephone/telephone.css — téléphone tenu debout : une liste à la fois (telephone.js) Tout est sous html.mode-telephone, posée par telephone.js. Chargé juste avant interface/surcharges.css. Les !important l'emportent sur les styles en ligne posés par la surface du tableau (positions, taille, zoom calé au pixel), qui restent ceux de la version ordinateur. */ /* ---- La rangée de listes ---- */ html.mode-telephone #boardView{overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;} html.mode-telephone #boardView::-webkit-scrollbar{display:none;} html.mode-telephone #boardRow{display:flex !important;align-items:flex-start;gap:calc(10px / var(--tel-zoom,1));width:max-content !important;min-width:0;height:calc(var(--tel-hauteur,100%) / var(--tel-zoom,1)) !important;min-height:0; padding:calc(12px / var(--tel-zoom,1)) calc(22px / var(--tel-zoom,1)) calc((64px + env(safe-area-inset-bottom,0px)) / var(--tel-zoom,1)) !important;box-sizing:border-box;} /* En bas : 64 px laissés libres pour le nom de la liste et les points (rien ne chevauche la liste). */ html.mode-telephone #boardRow > .list{position:relative !important;left:auto !important;top:auto !important;translate:none !important;transform:none !important; flex:0 0 auto;width:calc((100vw - 44px) / var(--tel-zoom,1)) !important;max-height:100% !important;scroll-snap-align:center;scroll-snap-stop:always;cursor:default;} html.mode-telephone #boardRow > .list.group-selected{outline:none;} /* Couché : deux listes par écran, cartes identiques à celles du téléphone debout (même largeur ou presque). */ html.mode-telephone.tel-couche #boardRow > .list{scroll-snap-align:start;width:calc((100vw - 54px) / 2 / var(--tel-zoom,1)) !important;} html.mode-telephone.tel-couche #boardView{scroll-padding-inline:22px;} /* Vue d'ensemble (pincer à deux doigts, telephone.js) : chaque liste est réduite d'un bloc (zoom 0,5), les cartes gardent exactement leur apparence ; défilement libre, toute la hauteur. Les cartes restent vivantes (appui : fiche ; appui long : glisser-déposer) ; un appui ailleurs sur une liste y revient. */ html.mode-telephone.tel-ensemble #boardRow > .list{zoom:var(--tel-ens,.5);max-height:calc(100% / var(--tel-ens,.5)) !important;scroll-snap-align:none;} html.mode-telephone.tel-ensemble #boardRow{gap:calc(5px / var(--tel-zoom,1));} html.mode-telephone.tel-ensemble #boardView{scroll-snap-type:none;} html.mode-telephone.tel-ensemble #boardRow > .list{cursor:zoom-in;} /* La fiche reste sur une colonne au téléphone, tenu debout ou couché. */ html.mode-telephone .modal.card-editor-modal .modal-body.add-card-columns{grid-template-columns:minmax(0,1fr) !important;} /* Pendant le pincement, la largeur suit les doigts : pas de calage sur une liste avant la fin du geste. */ html.mode-telephone.tel-pincement #boardView{scroll-snap-type:none;} /* Pendant le geste, la rangée est mise à l'échelle par telephone.js (transform) : pas d'ombre à recalculer. */ html.mode-telephone.tel-pincement #boardRow{will-change:transform;} /* Agenda, accueil des tableaux : pas de points (ils ne servent qu'aux listes). */ body.view-agenda .tel-navigation, html.tel-accueil-ouvert .tel-navigation{display:none !important;} html.mode-telephone #boardRow > .list .list-head, html.mode-telephone #boardRow > .list .list-cards{cursor:default;} /* Le doigt fait défiler la rangée dans les deux sens, même posé sur une carte ; l'appui long la soulève. */ html.mode-telephone #boardRow .list-cards, html.mode-telephone #boardRow .card{touch-action:pan-x pan-y;-webkit-touch-callout:none;} html.mode-telephone #boardRow .card{cursor:pointer;} html.mode-telephone #boardRow > .connections-layer, html.mode-telephone #boardRow > .empty-board-hint + .connections-layer{display:none;} /* Ce qui n'a pas de sens au doigt : zoom du tableau, rappel des raccourcis clavier, signatures. */ html.mode-telephone #boardZoomControls, html.mode-telephone .shortcuts-hint, html.mode-telephone .brand-signature, html.mode-telephone .tech-signature{display:none !important;} /* Pendant un glisser de carte, les flèches des bords annoncent la liste voisine. */ html.mode-telephone .card-board-edge{width:16vw;} /* ---- Pied et tête de liste (listes-telephone.js) ---- Le pied de l'ordinateur (« + Ajouter une carte », corbeille, ⋯) disparaît : le ⋯ de la tête ouvre les actions de la liste, dont « Ajouter une carte ». Le titre ne prend le clavier que par « Renommer la liste ». */ html.mode-telephone #boardRow .list-add-card-wrap{display:none !important;} html.mode-telephone #boardRow .list-cards{padding-bottom:calc(8px * var(--ui-scale-factor));} html.mode-telephone #boardRow .list-head{display:flex;align-items:center;gap:4px;} /* Titre centré : une marge à gauche égale à la place du ⋯ à droite. */ html.mode-telephone #boardRow .list-title-input{flex:1;min-width:0;pointer-events:none;margin-left:calc(28px * var(--ui-scale-factor));} html.mode-telephone #boardRow .list-title-input.tel-renomme{pointer-events:auto;} .tel-liste-menu{display:none;} html.mode-telephone #boardRow .tel-liste-menu{display:grid;place-items:center;flex:none;width:round(calc(34px * var(--ui-scale-factor)),1px);height:round(calc(34px * var(--ui-scale-factor)),1px); margin-right:calc(-6px * var(--ui-scale-factor));padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-dim);cursor:pointer;-webkit-tap-highlight-color:transparent;} html.mode-telephone #boardRow .tel-liste-menu:active{background:var(--surface-3);} .tel-liste-menu svg{width:60%;height:60%;fill:currentColor;} /* ---- Nom de la liste et points ---- */ .tel-navigation{position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:900;display:grid;justify-items:center;gap:6px;pointer-events:none;} .tel-navigation[hidden],.tel-saisie[hidden],.tel-voile[hidden]{display:none !important;} html:not(.mode-telephone) .tel-navigation{display:none !important;} /* Les points passent sous toute fenêtre ouverte (profil, notifications, discussion, panneaux, fiche…) : ils se cachent. */ html:has(.overlay:not(.hidden), .topbar-menu:not([hidden]), .discussion-panneau:not([hidden]), .tel-feuille, #settingsMenu.open, #filterLabelMenu:not([hidden]), .tel-saisie:not([hidden])) .tel-navigation{display:none !important;} /* Choix de Tris : en bas, seulement les points. Le nom de la liste et « 3 sur 7 » ne s'affichent plus ; ils restent lus par les lecteurs d'écran (aria-live). */ .tel-nom-liste{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} .tel-points{display:flex;gap:2px;pointer-events:auto;} .tel-point{width:22px;height:22px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;} .tel-point::before{content:"";width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.35);transition:width .18s ease,background-color .18s ease;} .tel-point.actif::before{width:20px;background:#fff;} /* ---- Saisie rapide, collée au-dessus du clavier ---- */ .tel-voile{position:fixed;inset:0;z-index:920;background:rgba(0,0,0,.45);} .tel-saisie{position:fixed;left:0;right:0;bottom:var(--tel-clavier,0px);z-index:930;display:grid;gap:10px;margin:0; padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.45); font:14px/1.3 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--text);} .tel-saisie-dans{font-size:12.5px;color:var(--text-dim);} .tel-saisie-dans b{color:var(--text);font-weight:600;} .tel-saisie-ligne{display:flex;gap:8px;align-items:center;} .tel-saisie-ligne input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--text);background:var(--surface-2);border:1.5px solid var(--accent);border-radius:10px;padding:10px 12px;outline:none;} .tel-saisie-ok{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;} .tel-saisie-ok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} /* ---- Barre du haut repliée (accueil.js) : ← nom · loupe filtre · discussion cloche ⋯ avatar ---- */ html:not(.mode-telephone) .tel-barre,html:not(.mode-telephone) .tel-menu,html:not(.mode-telephone) .tel-accueil{display:none !important;} html.mode-telephone .topbar{flex-wrap:wrap !important;gap:2px !important;padding:4px 6px !important;row-gap:4px !important;min-height:52px;align-items:center;} html.mode-telephone .topbar > #boardWorkspaces, html.mode-telephone .topbar > .topbar-affichage, html.mode-telephone .topbar .brand-mark, html.mode-telephone .topbar #btnSettings, html.mode-telephone .topbar #btnHistorique{display:none !important;} /* Paramètres : le bouton est caché, son panneau s'ouvre quand même (entrée « Apparence » du menu ⋯), en panneau du bas (voir plus bas, « Fenêtres en panneaux du bas »). */ html.mode-telephone .topbar .settings-wrap{position:static;} html.mode-telephone .topbar > .brand{flex:1 1 0;min-width:0;} html.mode-telephone .topbar .board-title-input{width:100% !important;max-width:none;font-size:17px;font-weight:700;white-space:pre;overflow:hidden;text-overflow:ellipsis;height:auto;padding:6px 4px;} html.mode-telephone .topbar .tb-btn,html.mode-telephone .topbar .profil-btn{min-width:38px;height:38px;} html.mode-telephone .topbar .tb-btn .tb-icone{width:19px;height:19px;} html.mode-telephone .topbar-moi{margin-left:0 !important;border-left:0 !important;padding-left:0 !important;gap:0 !important;flex:none;} .tel-barre svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .tel-retour{flex:none;} .tel-barre-outils{display:flex;flex:none;} .tel-barre-outils .tb-btn[aria-pressed="true"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);} /* Pas d'intro au téléphone (demande de Tris) : intro.js la voit masquée et la marque finie aussitôt. */ html.mode-telephone .ck-intro{display:none;} /* Un filtre est actif (« En retard », étiquettes, Mes cartes) : un point sur le bouton, même filtres repliés. */ .tel-barre-outils .tel-filtre-actif{position:relative;} .tel-barre-outils .tel-filtre-actif::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);} /* La recherche n'apparaît qu'à la demande (loupe), sur sa propre ligne, pleine largeur. */ html.mode-telephone .topbar > .topbar-ligne2{display:none !important;} html.mode-telephone.tel-recherche-ouverte .topbar > .topbar-ligne2{display:flex !important;order:20;flex:1 0 100%;padding:2px 4px 4px;} html.mode-telephone.tel-recherche-ouverte .topbar-ligne2 > :not(.topbar-search){display:none !important;} html.mode-telephone.tel-recherche-ouverte .topbar .topbar-search{flex:1 1 auto !important;width:auto !important;max-width:none !important;height:38px;padding:0 10px !important;margin:0;} html.mode-telephone.tel-recherche-ouverte .topbar .topbar-search input{width:100% !important;padding:0 6px !important;font-size:16px;} html.mode-telephone.tel-recherche-ouverte .topbar .topbar-search .search-clear.visible{display:inline-flex !important;} /* Les filtres (Toutes, Aujourd'hui, Étiquettes…) n'apparaissent qu'à la demande (bouton filtre). */ html.mode-telephone:not(.tel-filtres-ouverts) #filterBar{display:none !important;} /* Filtres au téléphone : une seule ligne de pastilles qui défile au doigt (sans « Filtrer : » ni séparateurs) ; « Étiquettes » ouvre un panneau du bas (cases larges, fermé d'un glissé vers le bas, glisse-fermer.js). */ html.mode-telephone #filterBar{flex-wrap:nowrap !important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:8px !important;padding:8px 12px !important;scroll-padding-inline:12px;} html.mode-telephone #filterBar::-webkit-scrollbar{display:none;} html.mode-telephone #filterBar :is(.filter-label,.filter-sep){display:none !important;} html.mode-telephone #filterBar .chip{flex:none;height:32px;padding:0 12px !important;gap:5px !important;border-radius:16px !important;font-size:13.5px !important;font-weight:600;white-space:nowrap; border:0 !important;} html.mode-telephone #filterBar .chip:not(.filtre-actif){background:var(--surface-3) !important;color:var(--text) !important;} html.mode-telephone #filterBar .chip.on:not(.filtre-actif){background:var(--accent) !important;color:#fff !important;} html.mode-telephone #filterBar .chip .tb-icone,html.mode-telephone #filterBar .chip svg{width:15px;height:15px;} html.mode-telephone #filterBar .filtre-caret{display:none;} html.mode-telephone #filterBar .filtre-badge{min-width:18px;height:18px;border-radius:9px;font-size:11.5px;display:inline-grid;place-items:center;} html.mode-telephone #filterLabelMenu{left:0 !important;right:0 !important;top:auto !important;bottom:var(--tel-clavier,0px) !important;width:auto !important;max-height:min(70dvh,calc(100dvh - var(--tel-clavier,0px) - 60px)) !important; padding:22px 14px calc(12px + env(safe-area-inset-bottom,0px)) !important;border-radius:20px 20px 0 0 !important;border-bottom:0 !important; box-shadow:0 0 0 100vmax rgba(0,0,0,.5),0 -12px 34px rgba(0,0,0,.5) !important;translate:0 var(--tel-glisse,0px);transition:translate .2s cubic-bezier(.2,.8,.2,1);animation:telFeuilleMonte .22s cubic-bezier(.2,.8,.2,1);} html.mode-telephone #filterLabelMenu::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--border-soft,rgba(255,255,255,.25));} html.mode-telephone #filterLabelMenu .filtre-menu-tete{gap:8px;margin-bottom:8px;} /* Étiquettes sur deux colonnes, lignes compactes (36 px) : une vingtaine se voient d'un coup. */ html.mode-telephone #filterLabelMenu .filtre-menu-recherche{height:40px;font-size:16px;border-radius:10px;padding:0 12px;} html.mode-telephone #filterLabelMenu .filtre-menu-trier{width:40px;height:40px;border-radius:10px;} html.mode-telephone #filterLabelMenu .filtre-menu-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;align-content:start;} html.mode-telephone #filterLabelMenu .filtre-ligne{min-width:0;min-height:36px;gap:8px;padding:0 8px;font-size:14.5px;border-radius:9px;touch-action:pan-y;cursor:pointer;} html.mode-telephone #filterLabelMenu .filtre-ligne > :not(.filtre-case):not(.filtre-nb){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} html.mode-telephone #filterLabelMenu .filtre-case{flex:none;width:18px;height:18px;border-radius:5px;} html.mode-telephone #filterLabelMenu .filtre-nb{font-size:12px;} html.mode-telephone #filterLabelMenu .filtre-menu-aide{display:none;} html.mode-telephone #filterLabelMenu .filtre-menu-pied{justify-content:flex-end;padding-top:6px;} html.mode-telephone #filterLabelMenu .filtre-menu-effacer{min-height:36px;font-size:14px;} /* ---- Accueil : les six tableaux en tuiles ---- */ .tel-accueil{position:fixed;inset:0;z-index:950;overflow:auto;padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;display:grid;gap:14px;align-content:start;} .tel-accueil[hidden]{display:none !important;} .tel-accueil-tete{display:flex;align-items:center;gap:12px;padding:6px 2px 4px;} .tel-accueil-tete h2{flex:1;margin:0;font-size:27px;font-weight:800;letter-spacing:-.01em;} .tel-accueil-fermer{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;background:var(--surface-3);color:var(--text);border:0;} .tel-accueil-fermer svg,.tel-tuile svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .tel-accueil-fermer svg{width:22px;height:22px;} /* Cartes en retard : bandeau ambre, pastille cloche. */ .tel-accueil-resume{margin:0;display:flex;gap:12px;align-items:center;padding:10px 14px 10px 10px;border-radius:20px;background:rgba(227,177,85,.12);font-size:14px;line-height:1.35;color:#ffd792;} .tel-accueil-resume[hidden]{display:none;} .tel-accueil-resume .tel-pastille{width:36px;height:36px;} .tel-accueil-resume .tel-pastille svg{width:18px;height:18px;} .tel-accueil-resume b{color:#ffe2a8;} /* Tuiles : fond uni, pastille carrée du tableau (son initiale), mini-listes, privé ou partagé. Appui long : actions. */ .tel-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .tel-tuile{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:10px;min-height:168px;padding:12px;border-radius:24px;border:0;text-align:left;cursor:pointer; color:var(--text);font:inherit;background:var(--surface-2);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;} .tel-tuile:active{background:var(--surface-3);} .tel-tuile.actif{box-shadow:0 0 0 2px var(--accent);} .tel-tuile-tete{display:flex;align-items:center;gap:9px;min-width:0;} .tel-tuile-tete .tel-pastille{width:38px;height:38px;border-radius:12px;font-size:16px;} .tel-tuile b{font-size:15px;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .tel-tuile-mini{display:flex;gap:4px;align-items:flex-end;height:40px;} .tel-tuile-mini i{flex:1;border-radius:4px 4px 2px 2px;background:var(--c);opacity:.85;} .tel-tuile-mini em{font-size:11.5px;color:var(--text-faint);font-style:normal;} .tel-tuile-bas{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px;color:var(--text-dim);white-space:nowrap;} .tel-tag{display:inline-flex;gap:4px;align-items:center;font:700 11px/1 system-ui,sans-serif;padding:4px 8px;border-radius:10px;white-space:nowrap;} .tel-tag svg{width:12px;height:12px;stroke-width:2.4;} .tel-tag.co{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);} .tel-tag.pr{background:rgba(154,163,181,.16);color:#9aa3b5;} .tel-tuile-nouveau{background:transparent;border:2px dashed var(--border,#3a3f4c);align-items:center;justify-content:center;color:var(--text-dim);font-weight:600;font-size:14px;} .tel-tuile-nouveau .tel-pastille{width:46px;height:46px;} /* ---- Cartes compactes (téléphone, par défaut) : seulement le nom (choix de Tris, 05/10) ---- Titre sur deux lignes au plus ; la bande de couleur de la carte reste. Étiquettes, relance, dates, checklist, discussion et description ne paraissent pas. L'entrée « Cartes complètes » du menu ⋯ les montre. */ html.mode-telephone:not(.tel-cartes-completes) #boardRow .card{padding-top:calc(5px * var(--ui-scale-factor));padding-bottom:calc(5.5px * var(--ui-scale-factor));} html.mode-telephone:not(.tel-cartes-completes) #boardRow .card :is(.card-labels,.card-relance,.card-meta,.card-discussion,.card-desc-toggle,.card-description-inline){display:none !important;} html.mode-telephone:not(.tel-cartes-completes) #boardRow .card-title{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden; } /* ---- Étiquettes moins vives au téléphone (retour de Tris, 05/10 : « ça pique les yeux ») ---- Mêmes teintes que la palette, adoucies : moins saturées et un peu plus sombres, sur les cartes, la fiche et le filtre. */ html.mode-telephone :is(.card-label-pill,.label-chip,.label-check .dot,.labels-manager [data-name-input]){filter:saturate(.6) brightness(.88);} /* ---- Cartes complètes (téléphone) : toute la largeur sert (retour de Tris, 05/10) ---- Le titre d'abord, sur toute la largeur ; puis une seule rangée qui passe à la ligne au besoin : les étiquettes (autant qu'il y en a), puis, poussés à droite, relance, échéance, checklist et discussion. Avec beaucoup d'étiquettes, elles prennent plusieurs lignes et les indicateurs se rangent à droite de la dernière. */ html.mode-telephone.tel-cartes-completes #boardRow .card{display:flex;flex-wrap:wrap;align-items:center;gap:calc(3px * var(--ui-scale-factor)) calc(4px * var(--ui-scale-factor));} html.mode-telephone.tel-cartes-completes #boardRow .card-title{order:-1;flex:1 0 100%;margin-bottom:calc(2px * var(--ui-scale-factor));} html.mode-telephone.tel-cartes-completes #boardRow .card-labels{display:contents;} html.mode-telephone.tel-cartes-completes #boardRow .card-label-pill{margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} html.mode-telephone.tel-cartes-completes #boardRow .card :is(.card-relance,.card-meta,.card-discussion){display:flex;flex-wrap:wrap;gap:calc(4px * var(--ui-scale-factor));flex:0 0 auto;margin:0;} html.mode-telephone.tel-cartes-completes #boardRow .card :is(.card-relance,.card-meta,.card-discussion):not(:is(.card-relance,.card-meta,.card-discussion) ~ *){margin-left:auto;} html.mode-telephone.tel-cartes-completes #boardRow .card-description-inline{flex:1 0 100%;} /* ---- Carte terminée (bandeau « Annuler »), fiche du bas (fiche-telephone.js) ---- */ .tel-bandeau{position:fixed;left:14px;right:14px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:960;display:flex;align-items:center;gap:12px; padding:8px 8px 8px 10px;border-radius:24px;background:#e7e9ee;color:#12141a;font-size:14.5px;font-weight:650;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:telVoile .18s ease;} .tel-bandeau[hidden]{display:none;} .tel-bandeau .tel-pastille{width:34px;height:34px;} .tel-bandeau .tel-pastille svg{width:17px;height:17px;} .tel-bandeau span:not(.tel-pastille){flex:1;} .tel-bandeau button{border:0;border-radius:18px;background:#12141a;color:#e7e9ee;font-weight:650;font-size:13.5px;line-height:1;font-family:inherit;padding:10px 14px;cursor:pointer;} html:not(.mode-telephone) .tel-bandeau{display:none !important;} /* La fiche monte du bas : pleine largeur, coins arrondis en haut, contenu qui défile, boutons du bas toujours visibles. */ html.mode-telephone #overlay:has(.card-detail-modal){align-items:flex-end;padding:0;} html.mode-telephone .modal.card-editor-modal.card-detail-modal{ position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:var(--tel-clavier,0px) !important;transform:none !important; width:100% !important;max-width:none;max-height:min(92dvh,calc(100dvh - var(--tel-clavier,0px) - 16px));margin:0;display:flex;flex-direction:column; border-radius:20px 20px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);animation:telFicheMonte .22s cubic-bezier(.2,.8,.2,1); } html.mode-telephone .card-detail-modal .modal-head{position:relative;padding-top:18px;} html.mode-telephone .card-detail-modal .modal-head::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--border-soft,rgba(255,255,255,.25));} html.mode-telephone .card-detail-modal .modal-head h2::before{display:none;} html.mode-telephone .modal.is-movable.card-detail-modal .modal-head{cursor:default;touch-action:auto;} html.mode-telephone .card-detail-modal .modal-body{flex:1 1 auto;min-height:0;overflow-x:hidden !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} html.mode-telephone .card-detail-modal .modal-foot{flex:none;border-top:1px solid var(--border-soft);background:var(--surface);} html.mode-telephone .card-detail-modal .modal-foot button{min-height:42px;padding-left:18px;padding-right:18px;} /* Champs à 16 px : sinon l'iPhone zoome la page quand on tape dedans. */ html.mode-telephone .card-detail-modal input, html.mode-telephone .card-detail-modal textarea, html.mode-telephone .card-detail-modal [contenteditable="true"]{font-size:16px !important;} /* Glissé vers le bas (fiche-telephone.js) : la fiche suit le doigt, puis remonte ou descend. */ html.mode-telephone .modal.card-editor-modal.card-detail-modal{translate:0 var(--tel-glisse,0px) !important;transition:translate .2s cubic-bezier(.2,.8,.2,1);} html.mode-telephone .modal.card-editor-modal.card-detail-modal.tel-fiche-glisse{transition:none;} html.mode-telephone .modal.card-editor-modal.card-detail-modal.tel-fiche-descend{transition:translate .16s ease-in;} @keyframes telFicheMonte{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){html.mode-telephone .modal.card-editor-modal.card-detail-modal{animation:none;}} /* Fiche « style A » (fiche-telephone.js) : la tête de feuille remplace « Détails de la carte » et sa croix ; pas de pied Annuler / Valider (enregistrement automatique) ; échéance, relance et couleur en lignes à pastille (leurs champs d'origine restent, cachés). */ html.mode-telephone .card-detail-modal{background:var(--surface);border-radius:30px 30px 0 0 !important;} html.mode-telephone .card-detail-modal .modal-head{padding:0 14px !important;border-bottom:0 !important;} html.mode-telephone .card-detail-modal .modal-head > :not(.tel-fiche-tete){display:none !important;} html.mode-telephone .card-detail-modal .tel-fiche-tete{flex:1;min-width:0;padding:22px 0 10px;touch-action:auto;} html.mode-telephone .card-detail-modal .modal-foot{display:none !important;} html.mode-telephone .card-detail-modal .modal-body{padding:4px 12px calc(16px + env(safe-area-inset-bottom,0px)) !important;} html.mode-telephone .card-detail-modal .tel-champ-cache{display:none !important;} html.mode-telephone .card-detail-modal .tel-fiche-reglages{order:-1;} html.mode-telephone .card-detail-modal .tel-fiche-reglages small.vide{color:var(--text-faint);} html.mode-telephone .card-detail-modal .tel-fiche-reglages .card-age-info{margin:8px 6px 0;font-size:12px;line-height:1.4;color:var(--text-faint);} html.mode-telephone .card-detail-modal .tel-fiche-reglages .card-age-info:empty{display:none;} /* Champs restants (titre, description, checklist, étiquettes…) : blocs arrondis comme les lignes. */ html.mode-telephone .card-detail-modal .add-card-left,html.mode-telephone .card-detail-modal .add-card-right{gap:10px !important;} html.mode-telephone .card-detail-modal .add-card-left > .field, html.mode-telephone .card-detail-modal .add-card-right > .field:not(.tel-champ-cache){padding:12px 14px;border-radius:20px;background:var(--surface-2);border:0;margin:0;} html.mode-telephone .card-detail-modal .field-label{font-size:11px !important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint) !important;} html.mode-telephone .card-detail-modal #cardTitleInput{font-size:17px !important;font-weight:650;background:transparent;border-color:transparent;padding-left:0;padding-right:0;} html.mode-telephone .card-detail-modal #cardTitleInput:focus{border-color:var(--accent);padding-left:8px;padding-right:8px;} .tel-fiche-terminer.fini .tel-pastille{background:color-mix(in srgb,#3cbf7f 22%,var(--surface-3));color:#3cbf7f;} .tel-pastille-couleur{display:block;width:22px;height:22px;border-radius:50%;} .tel-pastille-couleur.aucune{background:repeating-linear-gradient(135deg,var(--surface-3) 0 4px,var(--surface-2) 4px 8px);box-shadow:inset 0 0 0 1.5px var(--border,#555c6c);} .tel-ligne.grise .tel-pastille{opacity:.5;} .tel-ligne.grise .tel-ligne-nom{color:var(--text-dim);} /* ---- Palettes de couleurs (fenetres-telephone.js) : courtes au téléphone ---- « Aucune » et les 16 teintes franches (rang 3 de la palette) sur un seul rang, cases à la taille de celles du fond dans Apparence ; la couleur choisie reste visible même si elle est ailleurs. « Plus de nuances » déplie les 127 couleurs en 16 colonnes. */ html.mode-telephone .swatch-row, html.mode-telephone .card-editor-modal.card-editor-modal .swatch-row{grid-template-columns:repeat(17,minmax(0,1fr)) !important;width:100% !important;max-width:100% !important;min-width:0 !important;gap:3px !important;} html.mode-telephone .swatch-row .swatch{width:auto !important;height:auto !important;aspect-ratio:1;border-radius:5px !important;} html.mode-telephone .swatch-row:not(.tel-palette-ouverte) .swatch:not(.none):not(.selected):not([data-color$="-3"]):not([data-label-color$="-3"]){display:none !important;} html.mode-telephone .swatch-row.tel-palette-ouverte, html.mode-telephone .card-editor-modal.card-editor-modal .swatch-row.tel-palette-ouverte{grid-template-columns:repeat(16,minmax(0,1fr)) !important;gap:3px !important;} html.mode-telephone .swatch-row.tel-palette-ouverte .swatch{border-radius:5px !important;} .tel-plus-nuances{display:inline-flex;align-items:center;min-height:36px;margin-top:6px;padding:0 2px;border:0;background:none;color:var(--accent);font:600 14px/1.2 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;cursor:pointer;} html:not(.mode-telephone) .tel-plus-nuances{display:none !important;} /* ---- Fiche de carte : dates avant la couleur, « Gérer les étiquettes » en vrai bouton ---- */ html.mode-telephone .card-detail-modal .add-card-right{display:flex !important;flex-direction:column;gap:14px;} html.mode-telephone .card-editor-modal .manage-labels-link{display:inline-flex;align-items:center;min-height:38px;margin-top:8px;padding:0 14px;border:1px solid var(--border-soft);border-radius:10px; background:var(--surface-3);color:var(--text);font:600 14px/1.2 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;text-decoration:none;} /* ---- Fenêtres en panneaux du bas : Étiquettes, Nouvelle liste, Paramètres ---- Même allure que la fiche de carte : pleine largeur, posées en bas, au-dessus du clavier, coins arrondis en haut, voile derrière (un appui dessus ferme la fenêtre, fenetres-telephone.js). Plus de poignée de déplacement. */ html.mode-telephone #labelsOverlay, html.mode-telephone #addListOverlay{align-items:flex-end;padding:0;background:rgba(0,0,0,.5) !important;backdrop-filter:none !important;pointer-events:auto !important;} html.mode-telephone .modal.labels-manager, html.mode-telephone .modal.add-list-modal{ position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:var(--tel-clavier,0px) !important;transform:none !important;translate:0 var(--tel-glisse,0px) !important;transition:translate .2s cubic-bezier(.2,.8,.2,1); width:100% !important;max-width:none !important;max-height:min(88dvh,calc(100dvh - var(--tel-clavier,0px) - 16px));margin:0;display:flex;flex-direction:column; border-radius:20px 20px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);animation:telFicheMonte .22s cubic-bezier(.2,.8,.2,1); } html.mode-telephone :is(.labels-manager,.add-list-modal) .modal-head{position:relative;padding:20px 12px 10px 16px !important;cursor:default !important;touch-action:auto !important;} html.mode-telephone :is(.labels-manager,.add-list-modal) .modal-head::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--border-soft,rgba(255,255,255,.25));} html.mode-telephone :is(.labels-manager,.add-list-modal) .modal-head h2{font-size:17px !important;font-weight:700;} html.mode-telephone :is(.labels-manager,.add-list-modal) .modal-close{width:40px;height:40px;font-size:24px;} html.mode-telephone :is(.labels-manager,.add-list-modal) .modal-body{flex:1 1 auto;min-height:0;max-height:none !important;overflow-y:auto !important;overscroll-behavior:contain;padding:12px 16px !important;gap:14px !important;} html.mode-telephone :is(.labels-manager,.add-list-modal) .modal-foot{flex:none;padding:10px 16px 14px !important;border-top:1px solid var(--border-soft);} html.mode-telephone :is(.labels-manager,.add-list-modal) .modal-foot button{min-height:44px;padding:0 18px;font-size:15px;} html.mode-telephone :is(.labels-manager,.add-list-modal) .field-label{font-size:12px;} html.mode-telephone :is(.labels-manager,.add-list-modal) input[type=text]{font-size:16px !important;min-height:44px;} /* Étiquettes : « Nouvelle étiquette » et la palette restent en haut (on choisit la couleur sans chercher la palette), seules les étiquettes défilent, sur deux colonnes de lignes compactes (34 px). */ html.mode-telephone .labels-manager .modal-body{display:flex !important;flex-direction:column;overflow:hidden !important;gap:10px !important;} html.mode-telephone .labels-manager .label-help{display:none;} html.mode-telephone .labels-manager .label-manager-actions{order:1;flex:none;} html.mode-telephone .labels-manager .modal-body > .field{order:2;flex:none;margin:0;} html.mode-telephone .labels-manager #labelPaletteTitle{display:block;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html.mode-telephone .labels-manager .tel-plus-nuances{min-height:28px;margin-top:4px;font-size:13.5px;} html.mode-telephone .labels-manager #labelRows{order:3;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:none;padding:1px;} html.mode-telephone .labels-manager .label-row{padding:0;} html.mode-telephone .labels-manager .label-row input{height:34px;min-height:34px;font-size:16px;padding-right:30px;border-radius:8px;} html.mode-telephone .labels-manager .label-row .label-delete-btn{width:26px;height:26px;} html.mode-telephone .labels-manager .label-new-btn{width:100%;justify-content:center;min-height:40px !important;font-size:15px !important;font-weight:600 !important;border-width:1.5px !important;border-radius:10px !important;} html.mode-telephone .labels-manager .label-new-icon{font-size:16px;} html.mode-telephone .labels-manager .modal-foot{display:none !important;} html.mode-telephone .add-list-modal .add-list-tabs{display:none !important;} /* Paramètres : seul « Apparence » (accent et fond) se règle au téléphone ; cartes, listes, interface et flèches sont des réglages de l'ordinateur (la page du téléphone a sa propre présentation). Le panneau ne prend que le bas de l'écran et n'assombrit rien : le fond qu'on règle reste visible au-dessus (couché : panneau à droite, tableau à gauche). */ html.mode-telephone #settingsMenu.settings-menu{ position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;transform:none !important;translate:0 var(--tel-glisse,0px) !important;transition:translate .2s cubic-bezier(.2,.8,.2,1);width:auto !important;max-height:56dvh !important;overflow-y:auto !important; overscroll-behavior:contain;grid-template-columns:1fr !important;grid-template-areas:"title" "appearance" "reset" !important; padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px)) !important;border-radius:20px 20px 0 0 !important;border-bottom:0 !important; box-shadow:0 -12px 34px rgba(0,0,0,.55) !important;animation:telFeuilleMonte .22s cubic-bezier(.2,.8,.2,1); } html.mode-telephone #settingsMenu .settings-window-head::before{content:"";position:absolute;left:50%;top:-8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--border-soft,rgba(255,255,255,.25));} html.mode-telephone #settingsMenu .settings-window-head h3{font-size:17px !important;} html.mode-telephone #settingsMenu .settings-close-x{width:40px;height:40px;font-size:24px !important;} html.mode-telephone #settingsMenu .settings-group:is([data-settings-group="cards"],[data-settings-group="lists"],[data-settings-group="interface"]), html.mode-telephone #settingsMenu .appearance-arrow-section{display:none !important;} html.mode-telephone #settingsMenu .settings-label{font-size:14px !important;} html.mode-telephone #settingsMenu .settings-help{font-size:12.5px !important;line-height:1.4 !important;} html.mode-telephone #settingsMenu .settings-group-title{font-size:15px !important;} html.mode-telephone #settingsMenu .settings-reset .btn-ghost{min-height:44px !important;font-size:15px !important;} html.mode-telephone #settingsMenu .settings-reset::before{content:"Les réglages des cartes, des listes et de l’interface se font sur l’ordinateur.";font-size:12.5px;line-height:1.4;color:var(--text-faint);} html.mode-telephone #settingsMenu .settings-range{height:28px;} /* Panneau court : pas de titre « Apparence » (c'est le seul groupe), pas d'explication de la couleur d'accent. */ html.mode-telephone #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-heading, html.mode-telephone #settingsMenu .appearance-accent-section > .settings-help{display:none !important;} /* Apparence sur une colonne : accent, puis fond (les places en deux colonnes de l'ordinateur se chevauchaient). */ html.mode-telephone #settingsMenu .settings-group[data-settings-group="appearance"] .settings-group-content{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:6px !important;} html.mode-telephone #settingsMenu .settings-group[data-settings-group="appearance"] .settings-group-content > .settings-section{grid-column:1 !important;grid-row:auto !important;border-left:0 !important;} html.mode-telephone #settingsMenu .background-color-palette{width:auto !important;max-width:100%;box-sizing:border-box;} html.mode-telephone #settingsMenu .background-palette-swatches{grid-template-columns:repeat(16,minmax(0,1fr)) !important;grid-template-rows:none !important;gap:3px !important;width:100% !important;} html.mode-telephone #settingsMenu .background-palette-swatches > *{width:auto !important;height:auto !important;aspect-ratio:1;} /* Fond : « 1 » et « 2 » en gros boutons ; un appui en choisit un, un appui sur une case l'y pose (fenetres-telephone.js). Les repères sont plus gros, et celui qu'on glisse se voit au-dessus du doigt. */ html.mode-telephone #settingsMenu .appearance-background-section > .settings-help{font-size:0 !important;} html.mode-telephone #settingsMenu .appearance-background-section > .settings-help::after{content:"Touchez 1 ou 2, puis la couleur voulue (ou faites glisser le repère).";font-size:12.5px;line-height:1.4;} html.mode-telephone #settingsMenu .background-palette-title{font-size:13px !important;margin-bottom:10px !important;} html.mode-telephone #settingsMenu .background-palette-legend{gap:10px;} html.mode-telephone #settingsMenu .bg-legend-preview{width:38px !important;height:38px !important;border-radius:10px !important;cursor:pointer;} html.mode-telephone #settingsMenu .bg-legend-chip{font-size:16px;} html.mode-telephone #settingsMenu .bg-legend-preview.tel-repere-choisi{outline:3px solid var(--accent);outline-offset:2px;} html.mode-telephone #settingsMenu .bg-palette-marker{width:20px !important;height:20px !important;font-size:11px !important;border-width:2px;} html.mode-telephone #settingsMenu .bg-palette-marker.tel-repere-choisi{box-shadow:0 0 0 2px var(--accent),0 1px 3px rgba(0,0,0,.6);} html.mode-telephone .bg-palette-marker-ghost{width:34px;height:34px;font-size:15px;margin-top:-44px;} /* ---- Fenêtres reprises de l'ordinateur, au style A (maquette de Tris) ---- Étiquettes, Nouvelle liste, Apparence, Aide, Membres, Partager, Profil, Compte : même feuille du bas que les panneaux du téléphone (coins de 30 px, poignée), tête à pastille ronde de couleur (pictogrammes en images, --tel-pic-…, mêmes dessins que pastilles-telephone.js), croix ronde, boutons du bas ronds. Leur contenu reste celui de l'ordinateur. */ html.mode-telephone{ --tel-pic-etiquette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111318' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.6v3.6l6.2 6.2 4.7-4.7-6.2-6.2H3.6a1.1 1.1 0 0 0-1.1 1.1z'/%3E%3Ccircle cx='5.4' cy='5.4' r='.9'/%3E%3C/svg%3E"); --tel-pic-liste:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111318' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='4.5' height='11' rx='1.2'/%3E%3Cpath d='M11.5 5v6M8.5 8h6'/%3E%3C/svg%3E"); --tel-pic-apparence:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111318' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 2v12'/%3E%3Cpath d='M8 2a6 6 0 0 1 0 12z' fill='%23111318' stroke='none'/%3E%3C/svg%3E"); --tel-pic-aide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111318' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M6.3 6.2a1.8 1.8 0 1 1 2.4 1.7c-.5.2-.7.6-.7 1.1v.3M8 11.4v.01'/%3E%3C/svg%3E"); --tel-pic-partager:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111318' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='4.2' height='4.2' rx='.8'/%3E%3Crect x='9.3' y='2.5' width='4.2' height='4.2' rx='.8'/%3E%3Crect x='2.5' y='9.3' width='4.2' height='4.2' rx='.8'/%3E%3Cpath d='M9.3 9.3h1.6v1.6M13.5 9.3v.01M9.3 13.5h4.2v-1.6'/%3E%3C/svg%3E"); --tel-pic-personne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111318' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5.5' r='2.6'/%3E%3Cpath d='M3 13.5a5 5 0 0 1 10 0'/%3E%3C/svg%3E"); } html.mode-telephone :is(#overlay,#profilOverlay,#membersOverlay,#partageOverlay,#cloudAccountOverlay):has(> .modal:is(.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal)){ align-items:flex-end !important;padding:0 !important;background:rgba(8,9,13,.6) !important;backdrop-filter:none !important;} html.mode-telephone .modal:is(.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal){ position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:var(--tel-clavier,0px) !important;transform:none !important;translate:0 var(--tel-glisse,0px) !important;transition:translate .2s cubic-bezier(.2,.8,.2,1); width:100% !important;max-width:none !important;max-height:min(88dvh,calc(100dvh - var(--tel-clavier,0px) - 16px)) !important;margin:0;display:flex;flex-direction:column; padding-bottom:env(safe-area-inset-bottom,0px);animation:telFicheMonte .22s cubic-bezier(.2,.8,.2,1);} html.mode-telephone .modal.help-modal{height:calc(100dvh - 58px - env(safe-area-inset-top,0px)) !important;} html.mode-telephone .modal:is(.labels-manager,.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal), html.mode-telephone #settingsMenu.settings-menu{border-radius:30px 30px 0 0 !important;background:var(--surface) !important;border:0 !important;border-top:1px solid rgba(255,255,255,.08) !important;box-shadow:0 -20px 50px rgba(0,0,0,.5) !important;} html.mode-telephone .modal:is(.labels-manager,.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) > .modal-head{ position:relative;display:flex;align-items:center;gap:12px;padding:22px 14px 12px 16px !important;border-bottom:0 !important;cursor:default !important;touch-action:auto !important;} html.mode-telephone .modal:is(.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) > .modal-head::before{content:"";position:absolute;left:50%;top:8px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--border-soft,rgba(255,255,255,.25));} html.mode-telephone .modal:is(.labels-manager,.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) > .modal-head h2, html.mode-telephone #settingsMenu .settings-window-head h3{flex:1;min-width:0;display:flex !important;align-items:center;gap:12px;margin:0;font-size:17px !important;font-weight:700 !important;letter-spacing:0 !important;text-align:left;} html.mode-telephone .modal:is(.labels-manager,.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) > .modal-head h2::before, html.mode-telephone #settingsMenu .settings-window-head h3::before{content:"" !important;display:block !important;flex:none;width:44px;height:44px;border-radius:22px;margin:0;position:static; background:var(--tel-pic,none) center / 22px no-repeat,var(--tel-c,#9aa3b5) !important;box-shadow:none !important;opacity:1 !important;filter:none !important;} html.mode-telephone .modal.labels-manager{--tel-c:#a88bf0;--tel-pic:var(--tel-pic-etiquette);} html.mode-telephone .modal.add-list-modal{--tel-c:#3cbf7f;--tel-pic:var(--tel-pic-liste);} html.mode-telephone #settingsMenu{--tel-c:#e8789f;--tel-pic:var(--tel-pic-apparence);} html.mode-telephone .modal.help-modal{--tel-c:#9aa3b5;--tel-pic:var(--tel-pic-aide);} html.mode-telephone .modal:is(.members-modal,.partage-modal){--tel-c:#5fb3a3;--tel-pic:var(--tel-pic-partager);} html.mode-telephone .modal.members-modal{--tel-pic:var(--tel-pic-personne);} html.mode-telephone .modal:is(.profil-modal,.cloud-account-modal){--tel-c:#9aa3b5;--tel-pic:var(--tel-pic-personne);} html.mode-telephone #settingsMenu .settings-window-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 6px;} html.mode-telephone #settingsMenu .settings-window-head h3{justify-content:flex-start;} html.mode-telephone .modal:is(.labels-manager,.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) .modal-close, html.mode-telephone #settingsMenu .settings-close-x{flex:none;width:40px !important;height:40px !important;border-radius:20px !important;display:grid;place-items:center;padding:0 !important;background:var(--surface-3) !important;border:0 !important;color:var(--text) !important;font-size:22px !important;line-height:1 !important;} html.mode-telephone .modal:is(.labels-manager,.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto !important;overscroll-behavior:contain;padding:6px 14px 12px !important;} html.mode-telephone .modal:is(.labels-manager,.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) .modal-foot{flex:none;display:flex;gap:8px;padding:10px 14px 14px !important;border-top:0 !important;background:transparent !important;} html.mode-telephone .modal:is(.labels-manager,.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) .modal-foot button, html.mode-telephone #settingsMenu .settings-reset .btn-ghost{min-height:50px !important;padding:0 18px !important;border-radius:25px !important;font-size:15px !important;font-weight:650 !important;} html.mode-telephone .modal:is(.add-list-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) .modal-foot .btn-primary, html.mode-telephone .modal.add-list-modal .modal-foot button:last-child{flex:1 1 auto;background:var(--accent) !important;border-color:transparent !important;color:#0e1015 !important;} html.mode-telephone .modal:is(.add-list-modal,.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal) :is(input[type=text],input[type=email],input[type=password],input:not([type]),select,textarea){font-size:16px !important;min-height:48px;border-radius:16px !important;} html.mode-telephone .modal.add-list-modal .field,html.mode-telephone .modal.labels-manager .modal-body > .field{padding:12px 14px;border-radius:20px;background:var(--surface-2);} html.mode-telephone .modal.add-list-modal .field-label,html.mode-telephone .modal.labels-manager .field-label{font-size:11px !important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint) !important;} /* Étiquettes : lignes compactes gardées (34 px, deux colonnes, choix de Tris), coins arrondis seulement. */ html.mode-telephone .modal.labels-manager .label-row input{border-radius:12px !important;} html.mode-telephone .modal.labels-manager .label-new-btn{border-radius:20px !important;} /* Aide : onglets en puces qui défilent, texte plus grand. */ html.mode-telephone .help-modal .help-nav{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 14px 10px;border:0 !important;} html.mode-telephone .help-modal .help-nav-item{flex:none;min-height:38px;border-radius:19px !important;padding:0 14px 0 6px !important;background:var(--surface-2) !important;} html.mode-telephone .help-modal .help-nav-item[aria-selected="true"]{background:var(--accent) !important;color:#0e1015 !important;} html.mode-telephone .help-modal .help-panel{font-size:14.5px;line-height:1.5;padding:4px 14px 14px !important;} html.mode-telephone .help-modal .modal-foot{display:none !important;} /* Glissé pour fermer (glisse-fermer.js) : la fenêtre suit le doigt, puis part. */ html.mode-telephone .tel-glisse{transition:none !important;} html.mode-telephone .tel-glisse-part{transition:translate .16s ease-in !important;} /* ---- Menus du profil et de la cloche : feuilles du bas (style A) ---- Un appui sur le fond les ferme (menu-deroulant.js : appui hors du menu), un glissé vers le bas aussi. Le menu ⋯ de l'ordinateur ne s'ouvre plus au téléphone (menu-tableau.js le remplace). */ html.mode-telephone .topbar .topbar-menu{position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;margin:0 !important;height:auto;max-height:80dvh;overflow-y:auto; width:auto !important;max-width:none !important;min-width:0 !important;padding:24px 12px calc(14px + env(safe-area-inset-bottom,0px)) !important;border-radius:30px 30px 0 0 !important;border:0 !important; border-top:1px solid rgba(255,255,255,.08) !important;background:var(--surface) !important; box-shadow:0 0 0 100vmax rgba(8,9,13,.6),0 -20px 50px rgba(0,0,0,.5) !important;transform:none;translate:0 var(--tel-glisse,0px); transition:translate .2s cubic-bezier(.2,.8,.2,1);animation:telFeuilleMonte .22s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain;} html.mode-telephone .topbar .topbar-menu::before{content:"";position:absolute;left:50%;top:8px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--border-soft,rgba(255,255,255,.25));} html.mode-telephone .topbar .topbar-menu .topbar-menu-item{min-height:52px;border-radius:16px;white-space:normal;font-size:15px;background:var(--surface-2);margin-bottom:3px;} /* ---- Barre repliée ---- */ /* « Partager » (optionnels/synchro-supabase/partage.js) passe dans le menu ⋯ : la barre repliée n'a pas la place. */ html.mode-telephone .topbar #btnPartager{display:none !important;} /* ---- Agenda au téléphone (agenda.js, ui.modeTelephone) : mois compact, liste lisible dessous ---- Le mois ne montre que les numéros et des points de couleur (une carte = un point) ; la liste en dessous donne les cartes du jour choisi et des 30 jours suivants (« En retard » en tête aujourd'hui). La période (3, 6 mois, année), l'équipe, la légende et l'impression restent à l'ordinateur. */ html.mode-telephone #agendaView{overflow-y:auto !important;padding:10px 12px calc(24px + env(safe-area-inset-bottom,0px)) !important;gap:10px !important;} html.mode-telephone #agendaView .agenda-toolbar{gap:8px;} html.mode-telephone #agendaView .agenda-tools, html.mode-telephone #agendaLegend{display:none !important;} html.mode-telephone #agendaView .agenda-nav{display:flex;align-items:center;gap:6px;width:100%;} html.mode-telephone #agendaView .agenda-nav-btn{width:40px;height:40px;font-size:22px;} html.mode-telephone #agendaView .agenda-title{font-size:20px !important;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html.mode-telephone #agendaView .agenda-today-btn{min-height:40px;font-size:14px;padding:0 12px;} html.mode-telephone #agendaView .agenda-body{flex-direction:column !important;flex:none !important;gap:14px !important;} html.mode-telephone #agendaView .agenda-canvas{overflow:visible !important;flex:none;} html.mode-telephone #agendaView .span-1 .agenda-month{grid-template-rows:auto repeat(var(--rows,6),46px) !important;gap:3px !important;} html.mode-telephone #agendaView .agenda-dow{font-size:12px;} html.mode-telephone #agendaView .span-1 .agenda-cell{padding:4px 0 0 !important;display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:9px;cursor:pointer;} html.mode-telephone #agendaView .agenda-cell-head{justify-content:center;margin:0 !important;} html.mode-telephone #agendaView .agenda-num{font-size:15px;font-weight:600;} html.mode-telephone #agendaView .agenda-cell.selected{outline:2px solid var(--accent);outline-offset:-2px;} html.mode-telephone #agendaView .agenda-ovr,html.mode-telephone #agendaView .agenda-holiday{display:none;} html.mode-telephone #agendaView .agenda-dots{justify-content:center;gap:3px;min-height:6px;} html.mode-telephone #agendaView .agenda-dots i{width:6px;height:6px;} /* Liste sous le mois (à la place du panneau du jour). */ html.mode-telephone #agendaDayPanel{width:auto !important;overflow:visible !important;padding:4px 0 0 !important;background:transparent !important;border:0 !important;gap:16px !important;} .tel-agenda-jour{display:grid;gap:6px;} .tel-agenda-jour h3{display:flex;align-items:center;gap:8px;margin:0 2px 2px;font:700 15px/1.2 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--text);} .tel-agenda-jour h3 span{font-size:12px;font-weight:700;color:var(--text-faint);background:var(--surface-3);border-radius:10px;padding:2px 8px;} .tel-agenda-jour.retard h3{color:#ff8a80;} .tel-agenda-carte{display:grid;gap:3px;width:100%;min-height:56px;padding:9px 12px 9px 18px;text-align:left;cursor:pointer;position:relative; border:0;border-radius:16px;background:var(--surface-2);color:var(--text);font:inherit;} .tel-agenda-carte::before{content:"";position:absolute;left:6px;top:9px;bottom:9px;width:4px;border-radius:2px;background:var(--c,var(--border));} .tel-agenda-carte .t{font-size:15px;font-weight:600;line-height:1.3;} .tel-agenda-carte .m{font-size:12.5px;color:var(--text-dim);line-height:1.3;} .tel-agenda-carte.fini .t{text-decoration:line-through;color:var(--text-faint);} .tel-agenda-jour.retard .tel-agenda-carte{border-color:color-mix(in srgb,#ff8a80 45%,var(--border-soft));} .tel-agenda-vide{font-size:14px;color:var(--text-faint);padding:4px 2px;} .tel-agenda-ajout{min-height:50px;font-size:15px;border-radius:25px !important;} /* Lignes de l'agenda : la carte (appui = fiche) et son bouton ⋯ (agenda-telephone.js : terminer, reporter). Les relances portent une étiquette et un trait ambre ; dans le mois, un point ambre. Le planning (rythme de travail, jours colorés) reste à l'ordinateur : les cases du mois sont unies. */ .tel-agenda-ligne{display:flex;align-items:stretch;gap:6px;} .tel-agenda-ligne .tel-agenda-carte{flex:1 1 auto;min-width:0;} .tel-agenda-actions{flex:none;width:48px;display:grid;place-items:center;padding:0;border-radius:16px;border:0;background:var(--surface-2);color:var(--text-dim);cursor:pointer;} .tel-agenda-actions:active{background:var(--surface-3);} .tel-agenda-actions svg{width:20px;height:20px;fill:currentColor;} .tel-agenda-tag{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:8px;background:color-mix(in srgb,#f0b43c 22%,transparent);color:#f5c869;font-style:normal;font-size:11.5px;font-weight:800;vertical-align:2px;} .tel-agenda-ligne.relance .tel-agenda-carte::before{background:#f0b43c;} html.mode-telephone #agendaView .agenda-dots i.relance{background:#f0b43c;} html.mode-telephone #agendaView .agenda-cell{background-image:none !important;} html.mode-telephone #agendaView .agenda-cell::after{display:none !important;} html.mode-telephone #agendaView .agenda-title-year{font-size:15px;margin-left:6px;} html.mode-telephone #agendaView .agenda-cell.is-today .agenda-num{display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:50%;background:var(--accent);color:#0e1512;font-weight:800;box-shadow:none;} html.mode-telephone #agendaView .agenda-cell.is-today .agenda-num::before,html.mode-telephone #agendaView .agenda-cell.is-today .agenda-num::after{display:none;} /* ---- Panneau du bas (feuille.js), style A choisi par Tris : menu du tableau, filtres, liste, carte, dates ---- Tête : pastille de l'objet, titre et info, ronds des gestes fréquents. Corps : groupes de lignes de 56 px (pastille ronde de couleur, nom, info, chevron ou interrupteur), coins très arrondis aux extrémités de chaque groupe. Pied : gros boutons ronds. */ .tel-feuille-voile{position:fixed;inset:0;z-index:4000;background:rgba(8,9,13,.6);animation:telVoile .18s ease;} .tel-feuille{position:fixed;left:0;right:0;bottom:0;z-index:4010;display:flex;flex-direction:column;max-height:min(86dvh,calc(100dvh - 24px)); padding:0 12px calc(14px + env(safe-area-inset-bottom,0px));background:var(--surface);color:var(--text);border-radius:30px 30px 0 0; border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -20px 50px rgba(0,0,0,.5);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; transition:transform .2s cubic-bezier(.2,.8,.2,1);animation:telFeuilleMonte .22s cubic-bezier(.2,.8,.2,1);} .tel-feuille.haute{height:calc(100dvh - 58px - env(safe-area-inset-top,0px));max-height:none;} .tel-feuille-tete{position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:22px 4px 12px;touch-action:none;} .tel-feuille-tete::before{content:"";position:absolute;left:50%;top:8px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--border-soft,rgba(255,255,255,.25));} .tel-feuille-tete > .tel-pastille{width:44px;height:44px;} .tel-feuille-tete > .tel-pastille svg{width:22px;height:22px;} .tel-feuille-titre{flex:1;min-width:0;display:grid;gap:1px;} .tel-feuille-titre b{font-size:17px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;} .tel-feuille-titre span{font-size:12.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tel-feuille-corps{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:6px;align-content:start;} /* Pastille ronde de couleur, pictogramme sombre (pastilles-telephone.js). Carrée : le tableau (initiale sur son fond). */ .tel-pastille{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--c,#9aa3b5);color:#111318;font:700 14px/1 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;} .tel-pastille svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .tel-pastille b{font-size:14px;font-weight:700;} .tel-pastille.neutre{background:var(--surface-3);color:var(--text);} .tel-pastille.carre{border-radius:14px;font-size:19px;font-weight:800;color:#f6dcdc;background:linear-gradient(150deg,var(--board-bg-1,#7a3434),var(--board-bg-2,#3a2032));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);} /* Ronds de la tête (Annuler, Partager, Terminer…). */ .tel-rapide[hidden]{display:none;} .tel-rapide{flex:none;width:68px;display:grid;justify-items:center;gap:3px;padding:0;border:0;background:none;color:var(--text-dim);font:600 10.5px/1.2 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;} .tel-rapide .tel-pastille{width:44px;height:44px;} .tel-rapide > span:last-child{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tel-rapide:active .tel-pastille{filter:brightness(1.15);} .tel-rapide:disabled{opacity:.4;cursor:default;} /* Groupes de lignes. */ .tel-groupe{display:grid;min-width:0;} .tel-groupe-titre{display:flex;justify-content:space-between;padding:9px 6px 6px;font:700 11px/1.2 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);} .tel-lignes{display:grid;gap:3px;} .tel-feuille-choix.tel-ligne{gap:13px;min-height:56px;padding:8px 14px 8px 10px;border:0;border-radius:8px;background:var(--surface-2);font-weight:500;} .tel-lignes > :first-child{border-top-left-radius:20px;border-top-right-radius:20px;} .tel-lignes > :last-child{border-bottom-left-radius:20px;border-bottom-right-radius:20px;} .tel-feuille-choix.tel-ligne:active{background:var(--surface-3);} .tel-ligne-texte{flex:1;min-width:0;display:grid;} .tel-feuille-choix .tel-ligne-texte{white-space:normal;} .tel-ligne-nom{font-size:15px;font-weight:560;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tel-ligne-texte small{font-size:12px;font-weight:400;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tel-feuille-choix .tel-ligne-texte > *{flex:none;} .tel-droite{flex:none;display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:13px;font-weight:600;} .tel-droite svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--text-faint);} .tel-feuille-choix .tel-droite{flex:none;} .tel-badge{font:700 11px/1 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;padding:4px 8px;border-radius:10px;background:var(--surface-3);color:var(--text-dim);} .tel-badge.ici{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);} .tel-ligne.rouge .tel-ligne-nom{color:#f19a93;} .tel-feuille-choix.tel-ligne:disabled{opacity:1;} .tel-feuille-choix.tel-ligne:disabled .tel-pastille{opacity:.55;} /* Interrupteur. */ .tel-interrupteur{flex:none;position:relative;width:50px;height:30px;border-radius:15px;background:var(--surface-3);box-shadow:inset 0 0 0 1.5px var(--border,#555c6c);transition:background-color .18s ease;} .tel-interrupteur::after{content:"";position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:50%;background:var(--text-faint);transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease;} .tel-ligne[aria-checked="true"] .tel-interrupteur{background:var(--accent);box-shadow:none;} .tel-ligne[aria-checked="true"] .tel-interrupteur::after{left:25px;top:4px;width:22px;height:22px;background:#0e1015;} /* Puces (Quand : Toutes, Aujourd'hui…). */ .tel-puces{display:flex;flex-wrap:wrap;gap:7px;} .tel-puce{height:38px;display:flex;align-items:center;gap:6px;padding:0 15px;border:0;border-radius:19px;background:var(--surface-2);color:var(--text);font:600 14px/1 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;} .tel-puce.on{background:var(--accent);color:#0e1015;} /* Pied à gros boutons ronds. */ .tel-feuille-pied{flex:none;display:flex;gap:8px;margin-top:12px;} .tel-feuille-corps > .tel-feuille-pied{margin-top:6px;} .tel-feuille-pied.col{flex-direction:column;} .tel-feuille-pied.col .tel-gros-bouton{flex:0 0 50px;} .tel-gros-bouton{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 14px;border-radius:25px;border:0;background:var(--accent);color:#0e1015;font:650 15px/1.2 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;} .tel-gros-bouton svg{flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .tel-gros-bouton span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tel-gros-bouton.contour{background:none;box-shadow:inset 0 0 0 1px var(--border,#333a48);color:var(--text);} .tel-gros-bouton.rouge{background:#e2665e;color:#14080a;} .tel-gros-bouton.petit{height:42px;font-size:13px;font-weight:600;color:var(--text-dim);} .tel-gros-bouton:active{filter:brightness(1.12);} .tel-gros-bouton:disabled{opacity:.45;cursor:default;} /* Confirmation (supprimer) : grande pastille rouge, question, puis Supprimer / Annuler l'un sous l'autre. */ .tel-confirmer{display:grid;justify-items:center;text-align:center;gap:10px;padding:6px 10px 2px;} .tel-confirmer .tel-pastille{width:64px;height:64px;} .tel-confirmer .tel-pastille svg{width:30px;height:30px;} .tel-confirmer > b{font-size:18px;line-height:1.3;overflow-wrap:anywhere;} .tel-confirmer p{margin:0;max-width:32ch;color:var(--text-dim);font-size:14.5px;line-height:1.45;} /* Bloc qui n'est pas une ligne (couleurs d'une liste, texte) : même fond que les lignes. */ .tel-bloc{padding:14px;border-radius:20px;background:var(--surface-2);} /* Couleurs dans un panneau : pastilles rondes de 32 px sur deux rangs (« Aucune » et les 16 teintes franches). */ html.mode-telephone .tel-feuille .tel-couleurs .swatch-row:not(.tel-palette-ouverte){grid-template-columns:repeat(9,minmax(0,1fr)) !important;gap:9px 6px !important;justify-items:center;} html.mode-telephone .tel-feuille .tel-couleurs .swatch-row:not(.tel-palette-ouverte) .swatch{width:min(32px,100%) !important;border-radius:16px !important;} html.mode-telephone .tel-feuille .tel-couleurs .swatch.selected{box-shadow:0 0 0 3px var(--surface-2),0 0 0 5px #fff !important;} .tel-couleurs .tel-plus-nuances{display:flex;margin:10px auto 0;font-size:13.5px;} /* Ancienne forme (agenda : reporter une date). */ .tel-feuille-choix{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px;border-radius:16px;border:0; background:var(--surface-2);color:var(--text);font-weight:600;font-size:15px;line-height:1.2;font-family:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;} .tel-feuille-choix:active{background:var(--surface-3);} .tel-feuille-choix:not(.tel-ligne) > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tel-feuille-choix em{flex:none;font-style:normal;font-size:13.5px;font-weight:600;color:var(--text-faint);} .tel-feuille-choix > i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,transparent);box-shadow:inset 0 0 0 1.5px var(--border-soft);} .tel-feuille-choix:disabled{opacity:.5;cursor:default;} .tel-feuille-choix.danger{color:#ff8a80;} .tel-feuille-bloc{grid-column:1 / -1;padding:6px 2px 4px;} .tel-feuille-legende{display:block;margin:0 0 6px 2px;font-size:12.5px;font-weight:600;color:var(--text-dim);} .tel-feuille-texte{margin:0 4px 4px;font-size:15px;line-height:1.4;color:var(--text-dim);} @keyframes telFeuilleMonte{from{transform:translateY(100%)}to{transform:none}} @keyframes telVoile{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.tel-feuille,.tel-feuille-voile{animation:none;}} /* Feuille des dates (date-telephone.js) : raccourcis, puis le mois ; points bleus (échéances) et ambre (relances). */ .tel-date-raccourcis{margin:2px 0 6px;} .tel-mois-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .tel-mois-tete b{font-size:16px;} .tel-mois-nav{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--text-dim);font-size:24px;line-height:1;cursor:pointer;} .tel-mois-nav:active{background:var(--surface-3);} .tel-mois{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;} .tel-mois .js{height:22px;font-size:11.5px;font-weight:700;color:var(--text-faint);} .tel-jour{position:relative;height:40px;border:0;border-radius:50%;background:transparent;color:var(--text);font:500 15px/1 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;} .tel-jour.auj{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);font-weight:700;} .tel-jour.sel{background:#5b9cf5;color:#0e1015;font-weight:800;box-shadow:none;} .tel-feuille-dates.relance .tel-jour.sel{background:#e3b155;} .tel-jour.pt::after{content:"";position:absolute;bottom:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#5b9cf5;} .tel-jour.pt.remind::after{background:#e3b155;} .tel-jour.pt.les-deux::after{background:linear-gradient(90deg,#5b9cf5 50%,#e3b155 50%);} .tel-jour.sel::after{background:#0e1015;} /* Appui long (appui-long.js) : un cercle grandit sous le doigt, puis s'efface quand l'action part. */ .tel-appui-long{position:fixed;z-index:4100;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none; background:rgba(255,255,255,.16);box-shadow:0 0 0 2px rgba(255,255,255,.5);transform:scale(.3);opacity:0;} .tel-appui-long[hidden]{display:none;} .tel-appui-long.grandit{transform:scale(1);opacity:1;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .2s ease;} .tel-appui-long.part{transform:scale(1.6);opacity:0;transition:transform .25s ease-out,opacity .25s ease-out;} @media (prefers-reduced-motion:reduce){.tel-appui-long{transition:none !important;}} /* ---- Ranger les listes (listes-telephone.js, ordre-listes.js) ---- */ .tel-ordre-ligne{display:flex;align-items:center;gap:13px;min-height:56px;padding:8px 6px 8px 10px;border-radius:8px;background:var(--surface-2);transition:background-color .25s ease;} .tel-feuille-ordre .tel-feuille-corps{gap:3px;} .tel-feuille-ordre .tel-ordre-ligne:first-child{border-top-left-radius:20px;border-top-right-radius:20px;} .tel-feuille-ordre .tel-ordre-ligne:nth-last-child(1 of .tel-ordre-ligne){border-bottom-left-radius:20px;border-bottom-right-radius:20px;} .tel-ordre-ligne.evidence{background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));} .tel-feuille-ordre .tel-feuille-choix.discret{margin-top:8px;} .tel-ordre-nom{flex:1;min-width:0;font-weight:600;font-size:15px;line-height:1.2;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tel-ordre-poignee{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--text-dim);cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;} .tel-ordre-poignee svg{width:22px;height:22px;fill:currentColor;} .tel-ordre-ligne{position:relative;} .tel-ordre-en-cours .tel-ordre-ligne{transition:transform .18s cubic-bezier(.2,.8,.2,1);} .tel-ordre-en-cours .tel-ordre-ligne.soulevee{transition:none;z-index:2;border-radius:16px;box-shadow:0 12px 26px rgba(0,0,0,.5),0 0 0 2px var(--accent);background:var(--surface-3);} .tel-ordre-ligne.soulevee .tel-ordre-poignee{cursor:grabbing;color:var(--text);} .tel-feuille-choix.discret{justify-content:center;background:transparent;border:1.5px dashed var(--border,#3a3f4c);color:var(--text-dim);font-weight:600;font-size:15px;} /* ---- Téléphone couché (html.tel-couche, telephone.js) ---- Deux listes côte à côte par défaut (réglage à part), toute la hauteur pour les listes : barre du haut fine, en bas seulement les points ; fiche, panneaux et saisie centrés à une largeur confortable ; agenda en deux colonnes (mois à gauche, cartes à droite) ; accueil sur trois colonnes. */ html.mode-telephone.tel-couche .topbar{min-height:44px;padding-top:2px !important;padding-bottom:2px !important;} html.mode-telephone.tel-couche #boardRow{padding-top:calc(8px / var(--tel-zoom,1)) !important;padding-bottom:calc((30px + env(safe-area-inset-bottom,0px)) / var(--tel-zoom,1)) !important; padding-left:calc((22px + env(safe-area-inset-left,0px)) / var(--tel-zoom,1)) !important;padding-right:calc((22px + env(safe-area-inset-right,0px)) / var(--tel-zoom,1)) !important;} html.tel-couche .tel-navigation{bottom:calc(2px + env(safe-area-inset-bottom,0px));} html.tel-couche .tel-point{height:24px;} html.mode-telephone.tel-couche .modal.card-editor-modal.card-detail-modal{left:0 !important;right:0 !important;margin:0 auto;width:min(680px,100%) !important;max-height:calc(100dvh - var(--tel-clavier,0px) - 6px);} html.tel-couche .tel-feuille,html.tel-couche .tel-saisie{left:0;right:0;margin:0 auto;width:min(600px,100%);box-sizing:border-box;max-height:calc(100dvh - 10px);} html.tel-couche .tel-feuille-corps{grid-template-columns:1fr 1fr;} html.tel-couche .tel-feuille-ordre .tel-feuille-corps,html.tel-couche .tel-feuille-texte{grid-template-columns:1fr;grid-column:1 / -1;} html.mode-telephone.tel-couche :is(.modal.labels-manager,.modal.add-list-modal){left:0 !important;right:0 !important;margin:0 auto !important;width:min(600px,100%) !important;box-sizing:border-box;max-height:calc(100dvh - var(--tel-clavier,0px) - 6px) !important;} html.mode-telephone.tel-couche #settingsMenu.settings-menu{left:auto !important;right:0 !important;top:0 !important;bottom:0 !important;margin:0 !important;width:min(430px,52vw) !important;box-sizing:border-box;max-height:none !important; border-radius:20px 0 0 20px !important;padding-top:14px !important;padding-right:calc(14px + env(safe-area-inset-right,0px)) !important;box-shadow:-12px 0 34px rgba(0,0,0,.55) !important;} html.mode-telephone.tel-couche .swatch-row:not(.tel-palette-ouverte), html.mode-telephone.tel-couche .card-editor-modal.card-editor-modal .swatch-row:not(.tel-palette-ouverte){grid-template-columns:repeat(17,minmax(0,1fr)) !important;gap:3px !important;} /* Couché, les menus et les feuilles se centrent sur 600 px ; le menu du profil passe sur deux colonnes, les étiquettes (fenêtre et filtre) sur quatre ; tout tient sans défiler. */ html.mode-telephone.tel-couche .topbar .topbar-menu{left:0 !important;right:0 !important;margin:0 auto !important;width:min(600px,100%) !important;box-sizing:border-box;max-height:calc(100dvh - 10px);} html.mode-telephone.tel-couche .modal:is(.help-modal,.members-modal,.partage-modal,.profil-modal,.cloud-account-modal){left:0 !important;right:0 !important;margin:0 auto !important;width:min(600px,100%) !important;box-sizing:border-box;max-height:calc(100dvh - var(--tel-clavier,0px) - 6px) !important;} html.mode-telephone.tel-couche .modal.help-modal{height:calc(100dvh - 6px) !important;} html.mode-telephone.tel-couche .topbar .topbar-menu.profil-menu:not([hidden]){display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;} html.mode-telephone.tel-couche .topbar .topbar-menu.profil-menu > :not(.topbar-menu-item){grid-column:1 / -1;} html.mode-telephone.tel-couche .labels-manager #labelRows, html.mode-telephone.tel-couche #filterLabelMenu .filtre-menu-liste{grid-template-columns:repeat(4,minmax(0,1fr));} html.mode-telephone.tel-couche #filterLabelMenu{left:0 !important;right:0 !important;margin:0 auto;width:min(760px,100%) !important;box-sizing:border-box;max-height:calc(100dvh - var(--tel-clavier,0px) - 8px) !important;} html.tel-couche .tel-tuiles{grid-template-columns:repeat(3,1fr);} html.tel-couche .tel-tuile{min-height:118px;} html.tel-couche .tel-bandeau{left:auto;right:16px;width:min(420px,calc(100vw - 32px));bottom:calc(36px + env(safe-area-inset-bottom,0px));} /* Agenda couché : mois à gauche, cartes du jour à droite, chaque colonne défile seule. */ body.view-agenda #agendaView:is(html.mode-telephone.tel-couche *){overflow:hidden !important;display:flex !important;flex-direction:column;} html.mode-telephone.tel-couche #agendaView .agenda-body{flex-direction:row !important;flex:1 1 auto !important;min-height:0;align-items:stretch;} html.mode-telephone.tel-couche #agendaView .agenda-canvas{flex:1 1 0 !important;min-width:0;overflow-y:auto !important;} html.mode-telephone.tel-couche #agendaDayPanel{flex:1 1 0 !important;min-width:0;overflow-y:auto !important;padding-right:4px !important;} html.mode-telephone.tel-couche #agendaView .span-1 .agenda-month{grid-template-rows:auto repeat(var(--rows,6),38px) !important;} html.mode-telephone.tel-couche #agendaView .span-1 .agenda-cell{padding-top:2px !important;gap:2px;} html.mode-telephone.tel-couche #agendaView .agenda-nav-btn,html.mode-telephone.tel-couche #agendaView .agenda-today-btn{height:34px;min-height:34px;} /* ---- Apparence en pleine page (retour de Tris, 05/10) ---- La fenêtre prend toute la page (tant pis si le fond réglé ne se voit pas pendant le réglage) et se rabaisse au doigt (glisse-fermer.js). On n'y règle que : les deux couleurs du fond et sa luminosité, l'arrondi des listes et des cartes, l'effet des titres de listes. Ni couleur d'accent, ni « Réinitialiser l'apparence ». Les curseurs restent ceux de l'ordinateur (parametres/) : rien n'est recopié. */ html.mode-telephone #settingsMenu.settings-menu, html.mode-telephone.tel-couche #settingsMenu.settings-menu{top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;width:auto !important;height:auto !important;max-height:none !important; margin:0 !important;border-radius:0 !important;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px)) !important; grid-template-columns:minmax(0,1fr) !important;grid-template-areas:"title" "appearance" "lists" "cards" !important;align-content:start;gap:14px !important;} html.mode-telephone.tel-couche #settingsMenu.settings-menu{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;grid-template-areas:"title title" "appearance lists" "appearance cards" !important;} html.mode-telephone #settingsMenu .settings-group:is([data-settings-group="cards"],[data-settings-group="lists"]){display:block !important;} html.mode-telephone #settingsMenu .settings-group[data-settings-group="cards"] .settings-section:not(:has(#cardRadiusRange)), html.mode-telephone #settingsMenu .settings-group[data-settings-group="lists"] .settings-section:not(:has(#listRadiusRange,#listTitleEffectsRange)), html.mode-telephone #settingsMenu :is(.appearance-accent-section,.bg-direction-section,.bg-balance-section,.bg-softness-section,.settings-reset){display:none !important;} html.mode-telephone #settingsMenu .settings-group:is([data-settings-group="cards"],[data-settings-group="lists"]) > .settings-group-heading{display:flex !important;margin:0 0 6px;} html.mode-telephone #settingsMenu .settings-group[data-settings-group="appearance"] > .settings-group-heading{display:flex !important;margin:0 0 6px;} html.mode-telephone #settingsMenu .settings-group[data-settings-group="appearance"] .settings-group-title{font-size:0 !important;} html.mode-telephone #settingsMenu .settings-group[data-settings-group="appearance"] .settings-group-title::after{content:"Fond du tableau";font-size:15px;} html.mode-telephone #settingsMenu .settings-group{padding:12px 14px !important;border-radius:16px !important;background:var(--surface-2) !important;border:0 !important;} html.mode-telephone #settingsMenu .settings-window-head h3{font-size:0 !important;} html.mode-telephone #settingsMenu .settings-window-head h3::after{content:"Apparence";font-size:17px;} html.mode-telephone #settingsMenu .appearance-background-section > .settings-label{display:none !important;} /* ---- Agenda du téléphone (agenda-vue-telephone.js, maquette « style A ») ---- L'agenda de l'ordinateur (barre, planning, grille, panneau du jour) est caché : seule la vue du téléphone reste. */ html.mode-telephone #agendaView > :not(.tel-agenda){display:none !important;} html:not(.mode-telephone) .tel-agenda{display:none;} .tel-agenda{display:grid;gap:14px;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--text);} .tel-ag-onglets{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:16px;background:var(--surface-2);} .tel-ag-onglets button{min-height:42px;border:0;border-radius:12px;background:transparent;color:var(--text-dim);font-size:15px;font-weight:650;font-family:inherit;cursor:pointer;} .tel-ag-onglets button[aria-selected="true"]{background:var(--surface-3);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.3);} .tel-ag-bande{display:grid;grid-template-columns:28px repeat(7,1fr) 28px;align-items:center;gap:2px;} .tel-ag-fleche{min-width:28px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--text-dim);font-size:22px;cursor:pointer;} .tel-ag-jour{display:grid;justify-items:center;gap:3px;padding:7px 0 6px;border:0;border-radius:14px;background:transparent;color:var(--text);font-family:inherit;cursor:pointer;} .tel-ag-jour small{font-size:11.5px;font-weight:700;color:var(--text-faint);} .tel-ag-jour b{font-size:17px;font-weight:700;} .tel-ag-jour i,.tel-ag-case span i{display:block;width:6px;height:6px;border-radius:3px;} .tel-ag-jour.auj b{color:var(--accent);} .tel-ag-jour.choisi{background:var(--accent);color:#10131a;} .tel-ag-jour.choisi small,.tel-ag-jour.choisi b{color:#10131a;} .tel-agenda i.bleu{background:#5b9cf5;} .tel-agenda i.ambre{background:#e3b155;} .tel-agenda i.rouge{background:#e2665e;} .tel-ag-section{display:grid;gap:7px;} .tel-ag-section h3{margin:4px 4px 0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);} .tel-ag-section.retard h3{color:#ff8a80;} .tel-ag-groupe{display:grid;gap:7px;} .tel-ag-ligne{display:flex;align-items:center;gap:13px;width:100%;min-height:60px;padding:9px 12px;border:0;border-radius:18px;background:var(--surface-2);color:var(--text);text-align:left;font-family:inherit;cursor:pointer;} .tel-ag-ligne.fini{opacity:.55;} .tel-ag-ligne.fini b{text-decoration:line-through;} .tel-ag-texte{flex:1;min-width:0;display:grid;gap:2px;} .tel-ag-texte b{font-size:15.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;} .tel-ag-texte small{font-size:12.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tel-ag-vide{margin:0 4px;font-size:13.5px;color:var(--text-faint);} .tel-ag-ajout{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;border-radius:26px;background:var(--accent);color:#10131a;font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer;} .tel-ag-ajout .tel-pastille{width:28px;height:28px;background:rgba(0,0,0,.18);} .tel-ag-mois-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;} .tel-ag-mois-tete b{font-size:17px;} .tel-ag-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;} .tel-ag-grille > small{font-size:11.5px;font-weight:700;color:var(--text-faint);padding:2px 0 4px;} .tel-ag-case{display:grid;justify-items:center;gap:4px;min-height:46px;padding:6px 0 4px;border:0;border-radius:10px;background:var(--surface-2);color:var(--text);font-family:inherit;cursor:pointer;} .tel-ag-case b{font-size:14.5px;font-weight:600;} .tel-ag-case span{display:flex;gap:3px;min-height:6px;} .tel-ag-case.hors{opacity:.4;} .tel-ag-case.auj b{color:var(--accent);} .tel-ag-case.choisi{outline:2px solid var(--accent);outline-offset:-2px;} html.mode-telephone.tel-couche .tel-agenda{max-width:640px;margin:0 auto;width:100%;}