/* Feuille commune des pages du portail (04/10/2026, audit #648) : sortie du <style> en ligne du
   gabarit (layout.php), où elle était retéléchargée à chaque page (55 Ko). Contenu inchangé, même
   place dans la cascade : avant glass_css() et appearance.css. Monter le ?v= du gabarit à chaque
   modification. */
  /* Un display: explicite (flex, grid…) l'emporte sur la règle [hidden] du navigateur :
     sans cette ligne, masquer un élément en JS via .hidden reste sans effet visuel. */
  [hidden]{display:none !important}
  /* ---------- Thème sombre (bascule html.dark, mémorisée) ---------- */
  /* --faint relevé à 4,5:1 au moins (04/10/2026, audit) : #6b7690 / #8b96ad (2,6 à 3,8:1) portaient
     des dates, des légendes et le pied de page, illisibles à faible vision ou en plein soleil. */
  html.dark{
    --bg:#10141c;--ink:#e9edf4;--ink-soft:#9aa5bb;--faint:#8c97ad;
    --card:#1b2130;--border:#2b3447;--border-strong:#39445c;
    --ring:rgba(109,139,255,.2);
    --pane:#161b26;--surface:#161b26;--card2:#232c3f;   /* jetons des briques partagées, voir :root (11/10/2026) */
  }
  html.dark body{background:var(--bg)}
  html.dark input{background:#161b26;color:var(--ink)}
  html.dark .theme-btn{background:#1b2130;border-color:#2b3447;color:#e0b34d}
  html.dark .hn-wx{background:var(--card)}
  html.dark .logout,html.dark .bc-btn.ghost{background:#1b2130;border-color:#2b3447;color:#9aa5bb}
  html.dark .fam-code{background:#161b26}
  html.dark .inv-doc{background:var(--card)}
  html.dark .stg-legend i.free{background:#161b26}
  html.dark .stg-gauge,html.dark .stg-minibar{background:#161b26}
  /* ---------- Tuiles personnalisables + carrousel mobile ---------- */
  .grid-head{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:0 0 10px}
  .tiles-hint{color:var(--faint);font-size:.8rem}
  .tiles-edit{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:9px;color:var(--ink-soft);cursor:pointer;font:inherit;font-size:.82rem;font-weight:600;padding:7px 12px}
  .tiles-edit:hover{border-color:var(--border-strong);color:var(--ink)}
  .tiles-edit.on{background:var(--accent);border-color:var(--accent);color:#fff}
  html.dark .tiles-edit{background:#1b2130;border-color:#2b3447;color:#9aa5bb}
  html.dark .tiles-edit.on{background:var(--accent);border-color:var(--accent);color:#fff}
  /* En HAUT à droite : en bas, les commandes tombaient sur la description de la
     tuile — et sur mobile, où la tuile passe en colonne, elles la recouvraient. */
  .tile-ctrl{display:none;position:absolute;inset:8px 8px auto auto;gap:4px}
  .grid.editing .tile-ctrl{display:flex}
  /* touch-action laisse les DEUX défilements (20/09/2026) : le glisser n'ayant plus lieu
     au premier mouvement mais après un appui long, le doigt doit pouvoir faire défiler la
     page pendant ce délai — et tourner les pages du carrousel, qui reste en
     personnalisation. Le glisser, lui, empêche touchmove tant qu'il dure. */
  .grid.editing .app{position:relative;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-x pan-y;-webkit-touch-callout:none}
  .grid.editing .app:active{cursor:grabbing}
  /* appui long hors personnalisation (23/08/2026) : mêmes contraintes le temps du glisser */
  .grid.quick .app{cursor:grabbing;user-select:none;-webkit-user-select:none;touch-action:none}
  .grid .app{-webkit-touch-callout:none}
  /* « Ordre enregistré · Annuler » après un appui long (03/10/2026, audit) : sous les fenêtres (1700). */
  .tile-undo{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1600;
    display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:12px;
    background:#1b2233;color:#fff;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.28)}
  .tile-undo button{background:none;border:0;color:#93c5fd;font:inherit;font-weight:700;cursor:pointer;padding:8px 10px;border-radius:8px;min-height:40px}
  .tile-undo button:hover,.tile-undo button:focus-visible{background:rgba(255,255,255,.1)}
  .grid.editing .app .arrow{display:none}
  .grid.editing .app.is-hidden{opacity:.4;filter:grayscale(.6)}
  /* Glisser (22/08/2026, même geste que le Kanban d'Opus) : la tuile d'origine
     devient une CASE VIDE en pointillé — son contenu s'efface, pas de
     transparence — et un clone opaque flotte sous le doigt (.tile-ghost). */
  .app.dragging{outline:2px dashed var(--accent);outline-offset:-2px;background:transparent!important;box-shadow:none}
  .app.dragging>*{visibility:hidden}
  /* Légèrement transparent : la grille reste devinable sous la tuile transportée. */
  .tile-ghost{position:fixed;left:0;top:0;z-index:2100;pointer-events:none;will-change:transform;opacity:.8}
  .tile-ghost .app{margin:0;cursor:grabbing;box-shadow:0 18px 40px rgba(0,0,0,.35);animation:tile-flotte 1.6s ease-in-out infinite}
  .tile-ghost .tile-ctrl{display:none}
  @keyframes tile-flotte{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(1deg) translateY(-5px)}}
  @media (prefers-reduced-motion:reduce){.tile-ghost .app{animation:none}}
  .tc-btn{display:grid;place-items:center;width:26px;height:26px;background:#fff;border:1px solid var(--border);border-radius:7px;color:var(--ink-soft);cursor:pointer;font-size:.85rem;padding:0}
  .tc-btn:hover{color:var(--accent);border-color:var(--accent)}
  html.dark .tc-btn{background:#232c3f;border-color:#39445c;color:#9aa5bb}
  /* nuancier par tuile (mode personnalisation) */
  .tc-dot{width:13px;height:13px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.15)}
  /* Fixe et rattaché à <body> : ancré dans la tuile, le nuancier était tronqué par le
     carrousel et l'appui déclenchait le glisser-déposer de la tuile (clic avalé). */
  .tc-pal{position:fixed;z-index:2000;display:grid;grid-template-columns:repeat(7,24px);
    gap:7px;padding:11px;background:var(--card);border:1px solid var(--border);border-radius:12px;
    box-shadow:0 10px 30px rgba(15,20,35,.18)}
  .tc-sw{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
  .tc-sw:hover{transform:scale(1.12)}
  .tc-sw.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}
  .tc-def{grid-column:1/-1;border:1px solid var(--border);background:none;border-radius:8px;
    padding:5px 0;font-size:.78rem;color:var(--ink-soft);cursor:pointer}
  .tc-def:hover,.tc-def.on{color:var(--accent);border-color:var(--accent)}
  /* Nuit unie des fenêtres (#161b26, 11/10/2026) au lieu du gris-bleu #232c3f ; l'anneau de la pastille choisie suit. */
  html.dark .tc-pal{background:#161b26;border-color:#2b3447}
  html.dark .tc-sw.on{box-shadow:0 0 0 2px #161b26 inset;border-color:#e8ecf5}
  /* ---------- Fond d'écran de l'accueil (19/09/2026, demandé) ----------
     Calque fixe derrière tout (z-index -1 : au-dessus du fond du canevas, sous le contenu).
     100lvh et non inset:0 : la barre d'adresse d'un téléphone qui se replie changerait la
     hauteur du calque, donc le cadrage de l'image, à chaque défilement. Thème sombre : un
     voile nuit par-dessus — les aquarelles sont claires, le texte y passe en clair. */
  .fond{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;
    background:var(--fp) center/cover no-repeat}
  @media (orientation:landscape){.fond{background-image:var(--fl)}}
  .fond[hidden]{display:none}
  .fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  html.dark .fond::after{content:"";position:absolute;inset:0;background:rgba(12,16,24,.68)}
  .tiles-fond[hidden]{display:none}
  /* Avec un fond d'écran, les textes GRIS posés à même l'image passent à l'encre (19/09/2026, demandé) : la phrase
     sous « Bonjour », la date sous l'heure, le pied de page. `--ink` suit le thème — noir le jour, clair la nuit
     (où le calque porte un voile sombre). La classe est posée par le gabarit, et par le sélecteur en direct. */
  html.avec-fond :is(.hero .sub,.hn-date,.foot){color:var(--ink)}
  /* Deux boutons et une indication dans la même rangée : les boutons ne se replient jamais sur deux lignes, et sous
     600 px l'indication passe dessous, à droite — elle écrasait « Fond d’écran » sur un téléphone. */
  .tiles-edit{white-space:nowrap;flex:0 0 auto}
  @media(max-width:600px){.grid-head{flex-wrap:wrap;row-gap:6px}.tiles-hint{order:3;flex:1 1 100%;text-align:right}}
  .fond-pal{position:fixed;z-index:2000;width:min(340px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow-y:auto;box-sizing:border-box;
    padding:12px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 38px rgba(15,20,35,.22);color:var(--ink)}
  .fond-pal[hidden]{display:none}
  /* Le voile du tiroir du panneau latéral (chrome.css : rgba(8,12,20,.45)), un cran sous le volet. */
  .fond-veil{position:fixed;inset:0;z-index:1999;background:rgba(8,12,20,.45)}
  .fond-veil[hidden]{display:none}
  /* En-tête : la barre de titre standard (.ph-barre, en fin de feuille) depuis le 11/10/2026 — icône, titre, croix
     de 34 px, filet d'un bord à l'autre ; les marges négatives rattrapent les 12 px de rembourrage du volet. */
  .fond-pal>.ph-barre{margin:-12px -12px 12px}
  .fp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .fp-c{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:4px 4px 6px;background:none;border:2px solid transparent;border-radius:12px;cursor:pointer;font:inherit;color:var(--ink)}
  .fp-c[hidden]{display:none}
  .fp-c:hover{background:var(--bg)}
  .fp-c.on{border-color:var(--accent)}
  .fp-v{display:block;aspect-ratio:9/16;border-radius:8px;border:1px solid var(--border);background:#f4f7fb center/cover no-repeat}
  .fp-aucun{background:radial-gradient(120% 60% at 12% -6%,rgba(79,110,242,.22),transparent 70%),radial-gradient(110% 60% at 92% 4%,rgba(224,120,180,.2),transparent 72%),var(--bg)}
  .fp-n{font-size:.76rem;font-weight:600;text-align:center;line-height:1.15;min-height:2.3em;overflow-wrap:anywhere}   /* deux lignes possibles : « Coucher de soleil » élargissait sa vignette */
  .fp-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .fp-import,.fp-del{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
  .fp-import:hover{border-color:var(--accent);color:var(--accent)}
  /* Sélecteur de fichier masqué à l'œil mais pas au clavier (04/10/2026, audit) : `hidden` le retirait
     de la tabulation, et l'étiquette qui l'ouvre n'est pas focalisable. */
  .vh-file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap;opacity:0}
  label:has(.vh-file){position:relative}
  label:has(.vh-file:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
  .fp-del{color:var(--ink-soft)}
  .fp-del:hover{border-color:#eec1c1;color:#dc2626}
  .fp-del[hidden]{display:none}
  .fp-hint{margin:10px 2px 0;font-size:.76rem;line-height:1.35;color:var(--faint)}
  .fp-hint.err{color:#dc2626}
  .fond-pal.occupe .fp-import,.fond-pal.occupe .fp-grid{opacity:.5;pointer-events:none}
  html.dark .fond-pal{background:#161b26;border-color:#2b3447}
  html.dark .fp-import,html.dark .fp-del{background:#1b2130;border-color:#2b3447}
  html.dark .fp-v{border-color:#2b3447}
  /* Au format téléphone, une FEUILLE DU BAS (19/09/2026) : avec neuf vignettes la carte couvrait tout l'écran et cachait le
     fond qu'on essayait. Les vignettes défilent sur UNE rangée ; au-dessus, l'accueil reste visible et change à chaque choix.
     !important : la position en ligne posée par le script (ancrage sous le bouton) ne vaut que pour les écrans larges. */
  @media(max-width:600px){
    .fond-pal{left:0!important;right:0;top:auto!important;bottom:0;width:100%;max-height:70vh;border-radius:16px 16px 0 0;border-width:1px 0 0;
      padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px rgba(15,20,35,.22)}
    .fp-grid{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
    .fp-c{flex:0 0 86px;min-width:0;scroll-snap-align:start}
  }
  /* Des pastilles de 7 px passaient inaperçues : une application reléguée en page 2
     semblait tout simplement absente. Repères plus francs, et un compteur en toutes
     lettres qui dit qu'il y a une suite. */
  .car-dots{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px 0 0}
  /* Cible de 28 px autour d'un point de 12 px (04/10/2026, audit) : le rembourrage n'est pas peint. */
  .car-dot{width:12px;height:12px;box-sizing:content-box;padding:8px;background-clip:content-box;border-radius:50%;background-color:var(--border-strong);
    border:0;cursor:pointer;transition:.2s;flex-shrink:0}
  .car-dots{gap:2px}
  /* Pages précédente / suivante (04/10/2026, audit) : à la souris, seuls les points tournaient les pages. */
  .car-nav{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--border);
    background:var(--card);color:var(--ink-soft);cursor:pointer;flex-shrink:0}
  .car-nav:hover:not(:disabled),.car-nav:focus-visible{color:var(--accent);border-color:var(--accent)}
  .car-nav:disabled{opacity:.35;cursor:default}
  .car-nav .pi{width:16px;height:16px}
  html.dark .car-nav{background:#1b2130;border-color:#2b3447}
  .car-dot:hover{background-color:var(--muted);transform:scale(1.15)}   /* -color : le raccourci rétablirait background-clip */
  .car-dot.on{background-color:var(--accent);transform:scale(1.3)}
  .car-count{font-size:.78rem;color:var(--muted);margin-left:4px;white-space:nowrap;user-select:none}
  /* overflow-x rogne AUSSI le débordement vertical : sans cette marge intérieure,
     l'ombre des tuiles (et leur soulèvement au survol) est coupée en haut et sur
     les côtés. Le padding donne l'air nécessaire, la marge négative annule le
     décalage visuel qui en résulterait. */
  .grid.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none;
    padding:10px 0 40px;margin:-10px -20px -40px}
  .grid.carousel::-webkit-scrollbar{display:none}
  .grid.carousel .car-page{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:start;padding:0 20px}
  @media(max-width:700px){
    .grid.carousel .car-page{grid-template-columns:1fr 1fr;gap:10px}
  }
  /* ---------- Installer l'app (mobile) ----------
     Volontairement réservé au mobile : c'est là que l'icône sur l'écran d'accueil change
     quelque chose. `:not([hidden])` est nécessaire, sinon ce display l'emporterait sur la
     règle [hidden] plus haut et le bandeau resterait visible même masqué en JS. */
  .pwa-cta{display:none}
  @media(max-width:700px){
    .pwa-cta:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 18px;
      padding:13px 14px;background:var(--card);border:1px solid var(--border);border-radius:16px;
      box-shadow:var(--shadow-sm)}
  }
  .pwa-ic{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
    background:linear-gradient(140deg,var(--accent-2),var(--accent));color:#fff}
  .pwa-ic .pi{width:20px;height:20px}
  .pwa-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 0}
  .pwa-tx b{font-size:.92rem;font-weight:650}
  .pwa-tx small{color:var(--ink-soft);font-size:.76rem;line-height:1.35}
  /* Pleine largeur sur sa propre ligne : à 375 px, un bouton posé à côté du texte ne
     laissait qu'une centaine de pixels à la phrase, qui partait sur dix lignes (bandeau
     mesuré à 300 px de haut). */
  .pwa-btn{flex:1 0 100%;background:var(--accent);border:0;border-radius:10px;color:#fff;cursor:pointer;
    font:inherit;font-size:.88rem;font-weight:650;padding:11px 13px}
  .pwa-btn:hover{background:var(--accent-2)}
  .pwa-x{flex:0 0 auto;display:grid;place-items:center;min-width:40px;min-height:40px;margin:-8px -8px 0 0;background:none;border:0;color:var(--faint);cursor:pointer;font-size:.9rem;padding:0}   /* 40 px au pouce (04/10/2026, audit) */
  .pwa-x:hover{color:var(--ink)}
  html.dark .pwa-cta:not([hidden]){background:#1b2130;border-color:#2b3447}

  /* ---------- Visite guidée ---------- */
  /* Au premier plan (11/10/2026, signalé) : à 899-902 la visite passait SOUS le menu Paramètres (1590) et son voile, que sa
     dernière étape ouvre. Mêmes niveaux que dans les apps (chrome.css) : au-dessus des menus, des fenêtres (1700) et des
     boîtes de dlg.js (1770). */
  .tour-blocker{position:fixed;inset:0;z-index:1800}
  .tour-hole{position:fixed;z-index:1801;border-radius:14px;box-shadow:0 0 0 20000px rgba(15,20,35,.62);pointer-events:none;transition:all .38s cubic-bezier(.4,0,.2,1)}
  .tour-ring{position:fixed;z-index:1802;border:2px solid var(--accent);border-radius:14px;pointer-events:none;box-shadow:0 0 0 4px var(--ring);transition:all .38s cubic-bezier(.4,0,.2,1),opacity .25s}
  /* La bulle a le dessin des autres fenêtres (11/10/2026, demandé : « le même type que les autres — icône couleur +
     titre en barre, fond blanc ») : carte blanche et UNIE, verre compris (nuit unie #161b26), barre de titre aux
     cotes de .ph-barre et de .dlg-h — icône à la teinte, titre gras de 1.02rem, croix de 34 px, filet d'un bord à
     l'autre, 59 px. Copie pour le portail des règles de _shared/tour.css, que les apps chargent ; balisage : tour.js. */
  .tour-bubble{position:fixed;z-index:1803;box-sizing:border-box;width:min(92vw,340px);background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:0 18px 16px;transition:top .35s cubic-bezier(.4,0,.2,1),left .35s cubic-bezier(.4,0,.2,1)}
  html.glass .tour-bubble{border-radius:18px}
  .tour-head{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:59px;margin:0 -18px 12px;padding:12px 10px 12px 18px;border-bottom:1px solid var(--border)}
  .tour-ic{flex-shrink:0;display:grid;place-items:center;color:var(--accent)}
  .tour-ic svg{display:block;width:19px;height:19px}
  .tour-title{flex:1;min-width:0;margin:0;font-size:1.02rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere;color:var(--ink)}
  .tour-x{position:relative;flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--ink-soft);font:inherit;cursor:pointer}
  .tour-x::before{content:"";position:absolute;inset:-5px}
  .tour-x:hover{background:rgba(127,127,127,.12);color:var(--ink)}
  .tour-x:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .tour-x svg{display:block;width:18px;height:18px}
  .tour-text{margin:0 0 14px;color:var(--ink-soft);font-size:.9rem;line-height:1.55}
  .tour-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px}
  .tour-step{margin:0 auto 0 0;color:var(--faint);font-size:.78rem;font-weight:600}
  .tour-btn{background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--ink-soft);cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;padding:7px 13px}
  .tour-btn:hover{border-color:var(--border-strong);color:var(--ink)}
  .tour-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .tour-btn.primary:hover{background:var(--accent-2);color:#fff}
  html.dark .tour-bubble{background:#161b26;border-color:#2b3447}
  html.dark .tour-btn:not(.primary){background:#232c3f;border-color:#39445c;color:#9aa5bb}   /* :not(.primary) : la règle sombre grisait aussi le bouton de suite */
  /* Fondu de la visite (18/10/2026, demandé) : copie des règles de _shared/tour.css, que le portail ne charge pas. */
  @keyframes tour-fondu{from{opacity:0}}
  @keyframes tour-bulle-entre{from{opacity:0;transform:translateY(6px) scale(.98)}}
  .tour-hole,.tour-ring{animation:tour-fondu .2s ease}
  .tour-bubble{animation:tour-bulle-entre .22s cubic-bezier(.2,.8,.2,1)}
  .tour-part{opacity:0!important;pointer-events:none!important;transition:opacity .18s ease!important}
  @media (prefers-reduced-motion:reduce){.tour-hole,.tour-ring,.tour-bubble{animation:none}.tour-part{transition:none!important}}
  /* ---------- Sélecteur de langue ---------- */
  .lang-sw{display:flex;gap:6px;flex-wrap:wrap}
  .lang-sw a{padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--ink-soft);font-size:.85rem;font-weight:600}
  .lang-sw a:hover{border-color:var(--border-strong);color:var(--ink)}
  .lang-sw a.on{border-color:var(--accent);color:var(--accent)}
  html.dark .lang-sw a{background:#1b2130;border-color:#2b3447;color:#9aa5bb}
  html.dark .lang-sw a.on{border-color:var(--accent);color:var(--accent-2)}
  /* 40×40 : mêmes cotes que les boutons de bannière des apps (15/08/2026) */
  .theme-btn{display:grid;place-items:center;width:40px;height:40px;background:#fff;border:1px solid var(--border);border-radius:9px;color:var(--ink-soft);cursor:pointer;font-size:1.15rem;padding:0}
  .theme-btn:hover{border-color:var(--border-strong);color:var(--ink)}
  /* Ampoule des idées (20/09/2026, demandé) : la boîte du bouton de thème, mais c'est
     un LIEN — pas de soulignement, icône à 20 px. Au pouce elle s'efface de la barre,
     son entrée vit dans le menu du profil. */
  a.home-idea{text-decoration:none}
  a.home-idea .pi{width:20px;height:20px}
  /* L'ampoule vit UNIQUEMENT dans le menu du profil (20/09/2026, demandé) : la barre
     ne porte plus que la photo. La balise reste, masquée, si elle devait y revenir. */
  a.home-idea{display:none}
  .theme-btn .t-sun{display:none}
  html.dark .theme-btn .t-sun{display:inline-flex}
  html.dark .theme-btn .t-moon{display:none}
  :root{
    --bg:#eef1f7;--ink:#1b2233;--ink-soft:#5a6683;--faint:#626d84;
    --card:#ffffff;--border:#e6eaf1;--border-strong:#d3dae6;
    --accent:#4f6ef2;--accent-2:#6d8bff;--ring:rgba(79,110,242,.16);
    --danger:#dc2626;
    /* Jetons que les briques partagées attendent (11/10/2026) : dlg.js, la boîte « limite atteinte » et la cloche
       des autres pages lisent --pane, --surface, --text, --muted et --card2, que le portail ne déclarait pas —
       leurs replis clairs donnaient une boîte blanche à l'encre sombre en thème sombre. --text et --muted suivent
       --ink et --ink-soft, donc le thème ; les surfaces sont redites sous html.dark, en tête de feuille. Le calque
       verre (glass.php) continue de poser les siennes par-dessus. */
    --pane:#fff;--surface:#fff;--card2:#f4f7fb;--text:var(--ink);--muted:var(--ink-soft);
    /* Icônes en masque (11/10/2026, demandé : plus aucun caractère en guise d'icône) : pour les pseudo-éléments,
       qui ne peuvent pas porter de <svg>. Les tracés check, down, plus et minus de icons.php ; la teinte est le fond
       de l'élément masqué. Lus aussi par les styles des vues (découvrir, support, console). */
    --pi-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --pi-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --pi-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --pi-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    /* « Inter » retiré de la pile (11/10/2026) : nommé en tête sans jamais être chargé par le portail, il ne
       servait à rien… sauf quand une police de ce nom apparaît APRÈS coup dans la page — installée sur le poste,
       ou injectée par le navigateur (vu avec Edge, une demi-seconde après le chargement). Les textes changeaient
       alors de police, donc de hauteur, et tout ce qui suit bougeait : 4 px pour les tuiles de l'accueil au
       téléphone, davantage sur PC. Le style verre a sa propre police, « InterVar », servie par glass.php. */
    --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --shadow-sm:0 1px 2px rgba(27,34,51,.05);
    --shadow:0 2px 6px rgba(27,34,51,.06),0 12px 30px rgba(27,34,51,.07);
    --shadow-lg:0 6px 14px rgba(27,34,51,.08),0 22px 48px rgba(27,34,51,.12);
  }
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%}
  /* Réserves des barres système : le portail n'inclut pas la barre d'applications
     partagée, il lui faut donc sa propre copie de cette règle. Avec `viewport-fit=cover`
     dans la balise viewport, la page est dessinée d'un bord à l'autre de la dalle et
     son haut passerait sous la barre d'état. Hors application installée, ces deux
     valeurs sont nulles et rien ne bouge. */
  body{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  body{
    font-family:var(--font);color:var(--ink);
    background:
      radial-gradient(720px 380px at 12% -6%,rgba(79,110,242,.10),transparent 70%),
      radial-gradient(680px 360px at 92% 4%,rgba(224,120,180,.09),transparent 72%),
      var(--bg);
    background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  a{color:var(--accent);text-decoration:none}

  /* ---------- Accueil ---------- */
  .wrap{max-width:960px;margin:0 auto;padding:clamp(22px,4vw,44px) 20px 64px}
  .head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(28px,5vw,48px)}
  /* Aide, fil du support, Idée et Découvrir (18/10/2026, demandé : « revoir la navigation ») : l'en-tête aussi large
     que celui des autres pages du profil (.wrap.wide), photo de profil comprise ; le contenu reste à 820 px au
     milieu. (0,3,0) : plus fort que les marges posées par les feuilles de ces pages (.sup-wrap .prof-card…). */
  .wrap.sup-wrap>:not(.head){max-width:820px;margin-left:auto;margin-right:auto}
  .brand{display:flex;align-items:center;gap:11px;font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
  /* 40×40, losange 23 px : STRICTEMENT le même dessin que la marque du bandeau
     des apps (.phead-brand .lg) — cote unique des bannières depuis le 15/08. */
  .brand .logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#fff;
    background:linear-gradient(140deg,var(--accent-2),var(--accent));box-shadow:0 4px 12px var(--ring)}
  .brand .logo .pi{width:23px;height:23px}
  /* La marque en couleurs (10/10/2026, demandé : « une boîte à outils aux couleurs de l'app ») : pico('logo') — quatre
     tuiles de couleur, une poignée bleue — sur une tuile BLANCHE, cernée d'un filet pour tenir sur un fond clair. Les
     pages qui posent une autre icône dans .logo (Liaisons) gardent le dégradé et l'icône blanche. */
  .brand .logo.marque{background:#fff;box-shadow:0 0 0 1px rgba(27,34,51,.08),0 4px 12px rgba(27,34,51,.10)}
  .brand .logo.marque .pi{width:30px;height:30px}
  /* Encart « Mise à jour disponible » de l'app Android (11/10/2026, src/appmaj.php) : dans le flux, sous l'en-tête
     de l'accueil. La marque sur sa tuile blanche, deux lignes de texte, le bouton, la croix « Plus tard ». */
  .app-maj{display:flex;align-items:center;gap:12px;margin:-14px 0 22px;padding:11px 12px 11px 14px;border-radius:14px;
    background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
  .app-maj .maj-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#fff;
    box-shadow:0 0 0 1px rgba(27,34,51,.08)}
  .app-maj .maj-ic .pi{width:28px;height:28px}
  .app-maj .maj-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:.92rem;line-height:1.3}
  .app-maj .maj-tx span{color:var(--ink-soft);font-size:.84rem}
  .app-maj .maj-go{flex:none;padding:9px 14px;border-radius:10px;background:var(--accent);color:#fff;font-weight:650;
    font-size:.88rem;text-decoration:none;white-space:nowrap}
  .app-maj .maj-non{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:none;
    color:var(--ink-soft);display:grid;place-items:center;cursor:pointer}
  .app-maj .maj-non .pi{width:18px;height:18px}
  .app-maj[hidden]{display:none}   /* né caché : la page demande d'abord au navigateur la version installée */
  /* Au téléphone — là où vit l'app —, le bouton passe sous le texte, en pleine largeur : à côté, il écrasait le
     texte sur une colonne de quelques lettres. */
  @media (max-width:560px){
    .app-maj{flex-wrap:wrap;gap:10px 12px}
    .app-maj .maj-go{order:3;flex:1 1 100%;text-align:center;padding:10px 14px}
  }
  .user{display:flex;align-items:center;gap:10px}
  a.avatar{text-decoration:none;transition:box-shadow .15s}
  a.avatar:hover{box-shadow:0 0 0 3px var(--ring)}
  .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1rem;
    color:#fff;background:linear-gradient(140deg,#8a9bff,var(--accent));box-shadow:var(--shadow-sm)}
  .who{display:flex;flex-direction:column;line-height:1.25}
  .who .n{font-size:.86rem;font-weight:600}
  .who .m{font-size:.74rem;color:var(--faint)}
  @media(max-width:560px){.who{display:none}}
  .logout{background:var(--card);border:1px solid var(--border);border-radius:9px;color:var(--ink-soft);
    cursor:pointer;padding:8px 13px;min-height:40px;font:inherit;font-size:.82rem;font-weight:500;box-shadow:var(--shadow-sm)}
  .logout:hover{color:var(--ink);border-color:var(--border-strong)}
  .auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--faint);font-size:.8rem}
  .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}
  .auth-social{display:flex;flex-direction:column;gap:9px}
  .soc-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:10px;
    background:var(--card);border:1px solid var(--border);color:var(--ink);font-weight:600;font-size:.92rem;transition:.15s}
  .soc-btn:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
  html.dark .soc-btn{background:#1b2130;border-color:#2b3447;color:#d5dbe8}
  .mfa-setup{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:10px 0 14px}
  #mfa-qr{background:#fff;padding:10px;border:1px solid var(--border);border-radius:12px;line-height:0}
  .mfa-secret{color:var(--ink-soft);font-size:.85rem;max-width:280px;word-break:break-all}
  .mfa-secret code{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 6px}
  .mfa-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:12px 0}
  .mfa-codes code{background:var(--bg);border:1px dashed var(--border-strong);border-radius:8px;padding:7px 10px;text-align:center;font-weight:700}
  /* ---------- Cloche d'activité ---------- */
  .user{position:relative}
  #notifBtn{position:relative}
  .nb-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:var(--danger);
    color:#fff;font-size:.66rem;font-weight:800;display:grid;place-items:center;padding:0 4px;pointer-events:none}
  /* z 1600 : devant le menu du profil (1590) et son voile (1584) — la cloche
     vit dans ce menu au pouce, le panneau doit passer au premier plan. */
  .notif-panel{position:absolute;top:44px;right:0;z-index:1600;width:min(94vw,380px);background:var(--card);
    border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
  /* En-tête : la barre de titre standard (.ph-barre, en fin de feuille) depuis le 11/10/2026 — cloche à la couleur
     d'accent, titre, croix. Le panneau n'a pas de rembourrage : la barre va déjà d'un bord à l'autre. */
  .np-list{max-height:min(62vh,430px);overflow-y:auto}
  .np-item{display:flex;gap:11px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--ink)}
  .np-item:last-child{border-bottom:0}
  .np-item:hover{background:var(--bg)}
  .np-ic{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#fff}
  .np-ic .pi{width:16px;height:16px}
  .np-tx{display:flex;flex-direction:column;min-width:0}
  .np-t{font-weight:600;font-size:.87rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .np-s{color:var(--ink-soft);font-size:.77rem}
  .np-s.urgent{color:var(--danger);font-weight:700}
  .np-empty{padding:24px;text-align:center;color:var(--faint);font-size:.88rem}
  .np-item.read{opacity:.5}
  .np-foot{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--border)}
  .np-act{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;padding:3px 5px}
  .np-act:hover{text-decoration:underline}
  /* « Vider » détruit (masquage définitif) : il se distingue des deux marquages */
  .np-clear{color:var(--danger)}
  html.dark .notif-panel{background:#161b26;border-color:#2b3447}   /* nuit unie des fenêtres (11/10/2026) */
  html.dark .np-item:hover{background:#232c3f}
  /* Déconnexion : icône seule sur mobile */
  .logout .lo-i{display:none}
  .logout .lo-i .pi{width:16px;height:16px;vertical-align:-3px}
  @media(max-width:560px){
    .logout .lo-t{display:none}
    .logout .lo-i{display:inline-flex}
    .logout{width:40px;height:40px;padding:0;display:grid;place-items:center}
    .logout .lo-i .pi{width:18px;height:18px;vertical-align:0}
  }
  /* Retour à l'accueil, plus léger (18/10/2026, demandé) : la pilule à pastille pleine d'accent est devenue un
     bouton de la même famille que « Se déconnecter » à côté — angle de 9 px, fond de carte, filet — avec la seule
     flèche à la couleur de l'app, comme les icônes des barres. */
  .back-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px 0 9px;
    background:var(--card);border:1px solid var(--border);border-radius:9px;color:var(--ink-soft);
    font:inherit;font-size:.82rem;font-weight:500;text-decoration:none;box-shadow:var(--shadow-sm);
    transition:border-color .15s,color .15s,background-color .15s}
  .back-btn .bi{display:grid;place-items:center;color:var(--accent);line-height:1;transition:transform .2s}
  .back-btn .bi .pi{width:18px;height:18px}
  .back-btn:hover{color:var(--ink);border-color:var(--border-strong)}
  .back-btn:hover .bi{transform:translateX(-2px)}
  /* Au pouce (05/09/2026) : la flèche seule, dans une pastille de 40 px comme
     les autres boutons de la barre — le mot « Accueil » prenait la place qui
     manque à la photo et à la déconnexion. */
  @media(max-width:560px){
    .back-btn .bt{display:none}
    .back-btn{width:40px;height:40px;padding:0;gap:0;justify-content:center}
    /* « Se connecter » des pages publiques garde son mot (03/10/2026, audit) : seule porte d'entrée. */
    .back-btn.back-txt{width:auto;padding:0 14px 0 7px;gap:8px}
    .back-btn.back-txt .bt{display:inline}
  }
  html.dark .back-btn{background:#1b2130;border-color:#2b3447;color:#9aa5bb}
  html.dark .back-btn:hover{border-color:var(--accent);color:var(--accent-2)}

  .hero{margin-bottom:26px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
  /* Le bloc de gauche prend l'espace RESTANT, jamais plus : sans cela, la
     phrase tapée par la machine à écrire élargit le bloc au fil des lettres,
     écrase l'horloge et fait passer la date sur deux lignes. */
  .hero>div:first-child{flex:1 1 0;min-width:0}
  .hero-now{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex:0 0 auto}
  .hn-time{font-size:2.6rem;font-weight:750;line-height:1;font-variant-numeric:tabular-nums}
  .hn-date{color:var(--ink-soft);font-size:1rem;text-transform:capitalize;white-space:nowrap}
  .hn-wx{margin-top:4px;font-size:1.05rem;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:7px 16px;text-decoration:none}
  .hn-wx:hover{border-color:#3aa5dc;color:#3aa5dc}
  .hn-wx>.pi{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.28em}   /* pictogramme du temps en tracé (11/10/2026) */
  /* La ville sous la température (04/10/2026, audit) : elle ne vivait que dans l'infobulle, invisible au doigt. */
  .hn-wx-c{display:block;font-size:.62em;font-weight:500;color:var(--ink-soft);line-height:1.2;max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto}
  @media (pointer:coarse){.hn-wx{padding-top:7px;padding-bottom:7px}}
  /* Au PC, la météo À GAUCHE de l'horloge (22/10/2026, demandé : « comme ça tu peux remonter le texte Bonjour et on
     gagne de la place pour l'affichage des tuiles ») : l'heure et la date restent l'une sur l'autre à droite, la
     pastille se range devant elles, centrée sur leur hauteur. Le bloc perd une rangée, rendue aux tuiles. Le
     téléphone (700 px et moins) garde sa colonne. Sans météo (pastille masquée), la colonne vide ne coûte rien. */
  @media(min-width:701px){
    .hero-now{display:grid;grid-template-columns:auto auto;grid-template-areas:"wx time" "wx date";
      column-gap:16px;row-gap:2px;align-items:center;justify-items:end}
    .hn-time{grid-area:time}
    .hn-date{grid-area:date}
    .hn-wx{grid-area:wx;margin-top:0}
  }
  /* Place gardée à la pastille (18/10/2026) : sans météo écrite par le serveur, la pastille arrivait après
     l'affichage et faisait descendre les tuiles de 40 px sur PC. Elle est rendue dès le départ, invisible, avec
     un contenu de même hauteur ; la réponse de la Météo la remplit et la montre. */
  .hn-wx-place{visibility:hidden}
  @media(max-width:560px){
    .hero{flex-wrap:nowrap;align-items:center;gap:10px}
    .hero h1{font-size:1.45rem}
    .hero .sub{font-size:.82rem}
    .hn-time{font-size:1.35rem}
    .hn-date{font-size:.7rem}
    .hn-wx{font-size:.74rem;padding:4px 10px;margin-top:2px;white-space:nowrap}
  }
  .hero h1{font-size:clamp(1.9rem,4.5vw,2.5rem);margin:0 0 6px;letter-spacing:-.02em;font-weight:680}
  .hero .sub{color:var(--ink-soft);margin:0;font-size:1.1rem}
  .hero .sub b{color:var(--ink);font-weight:600}
  /* Drapeau « Signaler » de la phrase météo écrite par l'IA (brique signaler.js, 10/10/2026) : À CÔTÉ DE « BONJOUR »
     depuis le 23/10/2026 (demandé), et non plus au bout de la phrase — la ligne du titre (.hello-l) le porte, centré
     sur le mot, et la phrase garde toute sa largeur. Sans drapeau (gabarit), rien ne change. */
  .hero .hello-l{display:flex;align-items:center;gap:6px;margin:0 0 6px}
  .hero .hello-l>h1{margin:0}
  .hero .hello-l>.sig-btn{flex:0 0 auto}
  .hero .sub-l{display:flex;align-items:baseline;gap:2px}
  .hero .sub-l>.sub{flex:0 1 auto;min-width:0}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  /* Disposition du TÉLÉPHONE à toutes les largeurs (21/10/2026, demandé : « au format PC conserve les tuiles du
     format mobile ») : l'icône en haut, le nom et la description dessous. isolation : le reflet du survol (plus bas)
     reste dans la tuile. */
  .app{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;isolation:isolate;background:var(--card);
    border:1px solid var(--border);border-radius:18px;padding:20px;text-decoration:none;color:var(--ink);--pl:20px;container-type:inline-size;
    box-shadow:0 1px 3px rgba(27,34,51,.05),0 6px 14px rgba(27,34,51,.06);overflow:hidden;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  html.dark .app{box-shadow:0 1px 3px rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.26)}
  /* Rappel de la couleur de l'app : le NOM SOULIGNÉ d'un trait court (22/10/2026, demandé : la variante 2 sur six
     propositions sobres ; elle remplace le trait de pinceau derrière l'icône, puis l'ombre teintée de la variante 6,
     restée quelques heures). Un fond de 22 × 3 px au pied du nom, dans un rembourrage de 6 px (resserré en hauteur
     calculée, home.php) : rien à ajouter au DOM. Couleur pleine de --c, lisible en verre, classique, clair et sombre.
     Pas sur la tuile « + » (.app-add), qui n'est pas une app. */
  .app .badge{position:relative}
  .app .txt .t{padding-bottom:6px;background:linear-gradient(var(--c,var(--accent)),var(--c,var(--accent))) 0 100%/22px 3px no-repeat}
  /* Ombres volontairement PEU diffuses : le conteneur des tuiles défile
     (overflow-x), il rogne donc tout débordement. Une ombre courte tient
     largement dans l'air disponible et ne peut plus être coupée. */
  .app:hover{transform:translateY(-4px);border-color:var(--border-strong);
    box-shadow:0 2px 5px rgba(27,34,51,.07),0 8px 18px rgba(27,34,51,.10)}
  html.dark .app:hover{box-shadow:0 2px 5px rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.36)}
  .app:focus-visible{outline:2px solid var(--c,var(--accent));outline-offset:2px}
  /* REFLET sur verre au survol (22/10/2026, demandé) : une bande de lumière en biais traverse la tuile une fois, de
     gauche à droite. Hors champ au repos (la tuile la rogne) ; elle ne revient pas en arrière quand la souris part,
     la transition ne vit que sur l'état survolé. À la souris seulement (au doigt, le survol reste collé après le
     toucher), jamais en personnalisation, rien en mouvement réduit. Plus discrète la nuit. */
  .app::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.7) 46%,rgba(255,255,255,.22) 53%,transparent 64%);
    transform:translateX(-110%)}
  html.dark .app::after{background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.05) 53%,transparent 64%)}
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    .grid:not(.editing) .app:hover::after{transform:translateX(110%);transition:transform .75s cubic-bezier(.3,.6,.4,1)}
  }
  .badge{width:54px;height:54px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;
    font-size:1.7rem;line-height:1;
    background:color-mix(in srgb,var(--c,var(--accent)) 15%,#fff);
    border:1px solid color-mix(in srgb,var(--c,var(--accent)) 24%,#fff)}
  .txt{min-width:0;width:100%}
  .txt .t{display:block;font-size:1.08rem;font-weight:650;letter-spacing:-.01em}
  .txt .d{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .arrow{position:absolute;right:16px;bottom:14px;color:var(--c,var(--accent));font-size:1.15rem;opacity:0;transform:translateX(-6px);
    transition:opacity .18s ease,transform .18s ease}
  .app:hover .arrow{opacity:1;transform:none}
  /* ---------- Grand écran : accueil élargi, tout sur une page ----------
     .home-wrap ne borne que l'accueil, les autres pages gardent 960 px.
     4 colonnes × 3 rangées = les 12 tuiles d'un coup, à hauteur inchangée —
     le JS de l'accueil porte la taille de page à 16 au même seuil, donc plus
     de pagination tant qu'on reste sous 17 tuiles. */
  @media(min-width:1200px){
    .home-wrap,.wrap.wide{max-width:1360px}
    .grid{grid-template-columns:repeat(4,1fr)}
    .grid.carousel .car-page{grid-template-columns:repeat(4,1fr)}
  }
  /* …et si la hauteur suit, des tuiles plus généreuses */
  @media(min-width:1200px) and (min-height:880px){
    .app{padding:26px 24px;--pl:24px;gap:18px;border-radius:20px}
    .badge{width:66px;height:66px;border-radius:18px;font-size:2.05rem}
    .txt .t{font-size:1.2rem}
    .txt .d{font-size:.93rem;margin-top:3px}
  }
  /* Tuiles hautes (JS : --tileh grandit avec l'écran, plafonné au grand
     rectangle — 2/3 de la largeur) : disposition verticale, icône en haut,
     texte en bas, flèche dans l'angle. Sans .car-page dans le sélecteur :
     la personnalisation (grille à plat) garde la même taille. */
  /* Rembourrage et pastille suivent --tileh (22/10/2026) : à 24 px et 78 px fixes, une tuile haute de 170 à 198 px
     rognait la seconde ligne d'une description (« Documents, conversion & échéances »). 24 + 78 + titre + deux
     lignes + 24, plus l'écart de 12 px, demandaient 210 px ; l'écart suit aussi, et 179 px en demandent 177.
     Deux lignes de description au plus. */
  @media(min-width:1200px){
    .grid.tiles-big .app, .grid.tiles-big .app-add{
      flex-direction:column;align-items:flex-start;justify-content:space-between;
      height:var(--tileh);padding:clamp(16px,calc(var(--tileh) * .11),24px);--pl:clamp(16px,calc(var(--tileh) * .11),24px);
      gap:clamp(4px,calc(var(--tileh) * .03),12px)}
    .grid.tiles-big .badge{width:clamp(54px,calc(var(--tileh) * .33),78px);height:clamp(54px,calc(var(--tileh) * .33),78px);
      border-radius:clamp(15px,calc(var(--tileh) * .095),20px);font-size:clamp(1.8rem,calc(var(--tileh) * .184),2.5rem)}
    .grid.tiles-big .txt{flex:0 0 auto;width:100%}
    .grid.tiles-big .txt .t{font-size:1.3rem;line-height:1.2}
    .grid.tiles-big .txt .d{white-space:normal;font-size:.95rem;margin-top:4px;line-height:1.4;
      overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
    .grid.tiles-big .arrow{position:absolute;right:20px;bottom:20px}
  }

  /* Tuile « + » (offre Gratuit) : discrète, mène à la page Abonnement.
     Volontairement hors classe .app : ni déplaçable, ni masquable en personnalisation. */
  .app-add{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:transparent;
    border:1px dashed var(--border-strong);border-radius:18px;padding:20px;text-decoration:none;
    color:var(--ink-soft);transition:color .18s ease,border-color .18s ease,background .18s ease}
  .app-add:hover{color:var(--ink);border-color:var(--accent);background:var(--card)}
  .app-add .badge{background:transparent;border:1px dashed var(--border-strong);
    color:var(--ink-soft);font-size:1.75rem;font-weight:300;line-height:1}
  .app-add:hover .badge{border-color:var(--accent);color:var(--accent)}
  /* Le « + » est le tracé `plus` (11/10/2026) : à la taille du caractère qu'il remplace. */
  .app-add .badge .pi{width:.72em;height:.72em}
  .app-add .t{display:block;font-size:1rem;font-weight:600}
  .app-add .d{display:block;font-size:.85rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(max-width:600px){
    /* La tuile « + » aux cotes des autres (22/10/2026) : même rembourrage, même écart, même hauteur. */
    .app-add{flex-direction:column;align-items:flex-start;gap:8px;padding:11px 12px;border-radius:14px}
    .app-add .t{font-size:.96rem}
    .app-add .d{white-space:normal;line-height:1.25;font-size:.74rem;min-height:2.5em;
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  }

  .pi{width:1em;height:1em;display:inline-block;vertical-align:-.13em}
  .badge{color:var(--c,var(--accent))}
  .badge .pi{width:1.35em;height:1.35em}
  .auth-logo .pi,.logo .pi{width:1.05em;height:1.05em}
  .bill-tile{margin-top:16px}
  @media(max-width:600px){.bill-tile{flex-direction:row;align-items:center}.bill-tile .d{white-space:normal}}
  .foot{margin-top:40px;color:var(--faint);font-size:.82rem;text-align:center}
  /* Point vert du pied (11/10/2026, demandé : plus de caractère en guise d'icône) : un disque dessiné, au diamètre
     et à la hauteur du rond de police qu'il remplace. */
  .foot .dot{display:inline-block;width:.44em;height:.44em;margin:0 .085em;border-radius:50%;background:#22b07d;vertical-align:.065em}
  /* Accueil mobile : marges et corps taillés — ils créaient un petit défilement
     inutile. Placé APRÈS les règles de base, sinon elles gagnent par l'ordre. */
  @media(max-width:700px){
    .wrap{padding-top:16px;padding-bottom:12px}
    /* L'accueil s'étale sur toute la hauteur : les marges ci-dessous sont des
       minimums, le reste de l'écran se répartit entre les blocs (space-between).
       Un grand téléphone respire d'autant plus, un petit garde le minimum. */
    .home-wrap{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
    .head{margin-bottom:16px}
    .hero{margin-bottom:14px}
    .hero h1{font-size:1.55rem;margin:0}
    .hero .hello-l{margin:0}
    .hero .sub{font-size:.95rem;margin:3px 0 0}
    .hn-time{font-size:1.9rem}
    .hn-date{font-size:.8rem}
    .hn-wx{font-size:.95rem;padding:5px 12px;margin-top:3px;white-space:nowrap}
    .grid-head{margin-bottom:8px}
    .car-dots{margin-top:10px}
    /* Au pouce, les pastilles seules (07/10/2026, demandé) : ni « Page 1 / 2 » ni flèches, la page se tourne
       du doigt. Chaque pastille garde son nom (« Page 1 / 2 ») pour un lecteur d'écran. */
    .car-count,.car-nav{display:none}
    .foot{margin-top:12px;margin-bottom:0;font-size:.72rem}
    .foot:has(> a){line-height:2}   /* le pied à liens de l'accueil : voir juste dessous */
    /* Liens du pied visables au doigt (04/10/2026, audit) : six liens de 11 px collés par des points. EN LIGNE depuis
       le 23/10/2026 (signalé : sur trois lignes, l'écart entre la 2e et la 3e dépassait celui entre la 1re et la 2e) :
       en bloc en ligne, leur rembourrage grandissait les lignes qui portent des liens, pas celle du texte seul. En
       ligne, il agrandit toujours la cible au doigt, sans toucher à l'interligne, réglé une fois pour toutes (2). */
    .foot a{display:inline;padding:9px 4px}
  }
  /* Nuancier au doigt : pastilles de 34 px (04/10/2026, audit). */
  @media (pointer:coarse){
    .tc-pal{grid-template-columns:repeat(7,34px);gap:6px}
    .tc-sw{width:34px;height:34px}
  }

  /* Mobile : 2 colonnes, cartes verticales compactes — cotes serrées pour que
     4 rangées + pied de page tiennent sans défilement sur ~812 px */
  @media(max-width:600px){
    .grid{grid-template-columns:repeat(2,1fr);gap:9px}
    .app{flex-direction:column;align-items:flex-start;gap:8px;padding:11px 12px;--pl:12px;border-radius:14px}
    .badge{width:42px;height:42px;border-radius:12px;font-size:1.35rem}
    /* Une tuile ne fait plus que ~183 px : à 26 px pièce, les 4 commandes
       mordaient sur l'icône. 24 px et 3 px d'écart les font tenir à côté. */
    .tile-ctrl{gap:3px}
    .tc-btn{width:24px;height:24px;border-radius:6px;position:relative}
    /* zone de toucher de 40 px de haut quand elles restent à côté de l'icône (04/10/2026, audit) */
    .tc-btn::before{content:"";position:absolute;inset:-8px -1px}
    .txt{width:100%}
    /* Toutes les tuiles à la MÊME hauteur (22/10/2026, signalé : « toutes les tuiles ne font pas la même taille au
       format mobile ») : la description a toujours la place de deux lignes, jamais plus, et le nom tient sur une.
       « Documents, conversion & échéances » faisait deux lignes et grandissait sa rangée de 15 px. */
    .txt .t{font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .txt .d{font-size:.74rem;white-space:normal;line-height:1.25;min-height:2.5em;
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
    .arrow{display:none}
  }
  /* AU DOIGT, les commandes passent EN DESSOUS, sur toute la largeur de la tuile, à 34 px (04/10/2026,
     audit #626) : à côté de l'icône elles ne tenaient qu'à 24 px. La tuile s'allonge le temps du
     rangement, la page défile déjà dans ce mode. Elles sont la dernière pièce de la tuile (home.js
     les y pose), donc au bas de sa colonne. Pas en tuiles à hauteur fixe (fenêtre étroite à la
     souris) : la rangée y serait rognée, les 24 px restent. */
  @media(max-width:600px) and (pointer:coarse){
    .grid.editing:not(.tiles-fit) .tile-ctrl{position:static;inset:auto;width:100%;justify-content:space-between;gap:4px;margin-top:2px}
    .grid.editing:not(.tiles-fit) .tc-btn{width:34px;height:34px;border-radius:9px}
  }

  /* ---------- Abonnement ---------- */
  /* Fond de CARTE et non blanc écrit en dur (18/10/2026) : en sombre, le texte clair du thème tombait sur du blanc
     — « Votre adresse email n'est pas encore confirmée » du profil était illisible. Les filets de couleur des
     variantes se mêlent à celui du thème pour tenir sur les deux fonds. */
  .bill-flash{background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:12px;padding:11px 16px;font-size:.9rem;box-shadow:var(--shadow-sm)}
  .bill-flash.ok{border-color:color-mix(in srgb,#16a34a 32%,var(--border));color:#16a34a}
  html.dark .bill-flash.ok{color:#4ade80}
  /* Coche des confirmations (11/10/2026) : dessinée ici, une fois, devant tout bandeau « ok » — le caractère a
     quitté les textes des quatre langues. */
  .bill-flash.ok::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.3em;vertical-align:-.18em;
    background:currentColor;-webkit-mask:var(--pi-check) center/contain no-repeat;mask:var(--pi-check) center/contain no-repeat}
  .bill-flash.err{border-color:color-mix(in srgb,var(--danger) 30%,var(--border));color:var(--danger)}
  /* Les messages (« Votre thème est enregistré… », paiement, famille…) : en verre, la plaque des tâches entière — leur
     fond --card l'était déjà, le flou manquait (23/10/2026, demandé : rien de transparent sans flou, partout pareil). */
  html.glass .bill-flash{-webkit-backdrop-filter:saturate(185%) blur(10px);backdrop-filter:saturate(185%) blur(10px)}
  @media (prefers-reduced-transparency:reduce){html.glass .bill-flash{-webkit-backdrop-filter:none;backdrop-filter:none}}
  .bill-tag{display:inline-block;background:#fff3cd;color:#8a6d1a;border:1px solid #eadb9e;border-radius:6px;font-size:.68rem;font-weight:700;padding:1px 7px;vertical-align:1px}
  .bill-usage{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
  .bu-row{display:flex;align-items:center;gap:14px}
  .bu-l{width:130px;font-size:.86rem;font-weight:600}
  .bu-bar{flex:1;height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
  .bu-bar span{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s}
  .bu-v{width:150px;text-align:right;font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .bill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .bill-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
  .bill-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--pc)}
  .bill-card.cur{border-color:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 14%,transparent),var(--shadow)}
  .bc-name{font-weight:700;font-size:1.05rem}
  .bc-cur{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,#fff);border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:2px}
  .bc-price{font-size:1.7rem;font-weight:750;letter-spacing:-.02em}
  .bc-price small{font-size:.8rem;font-weight:500;color:var(--ink-soft)}
  .bc-tag{color:var(--ink-soft);font-size:.85rem;margin-bottom:4px}
  .bc-perks{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.86rem}
  .bc-perks .pi{color:var(--pc);margin-right:4px}
  .bc-btn{display:block;width:100%;text-align:center;background:var(--pc,var(--accent));border:0;color:#fff;font:inherit;font-size:.9rem;font-weight:650;padding:11px;border-radius:11px;cursor:pointer;margin-top:auto}
  .bc-btn:hover{filter:brightness(1.06)}
  .bc-btn.ghost{background:#fff;border:1px solid var(--border);color:var(--ink-soft)}
  .bc-btn.ghost:hover{color:var(--danger);border-color:#eec1c1}
  .bc-btn.none{background:var(--bg);color:var(--faint);cursor:default}
  /* Bouton dessiné comme un lien (04/10/2026, audit) : la classe venait de Tempo et Lumen, jamais
     copiée ici — « Révoquer » et la console s'affichaient en bouton brut du navigateur. */
  .link-btn{background:none;border:0;padding:4px 2px;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}
  .link-btn:hover,.link-btn:focus-visible{text-decoration-thickness:2px}
  /* Vocabulaire COMMUN des pages du profil (05/09/2026). Console, Tickets et
     Support portaient chacune leurs propres cartes, onglets, boutons et
     messages — trois dessins pour une même chose. Tout passe désormais par
     prof-card / prof-hint / bc-btn / bill-flash, et par ces onglets. */
  a.bc-btn{text-decoration:none}
  .bc-btn.inline{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;padding:9px 16px;font-size:.86rem;margin-top:0}
  .bc-btn.ghost.danger:hover{color:var(--danger);border-color:#eec1c1}
  /* Cartes d'action (titre, phrase, bouton) : le bouton se cale en bas, si bien
     que deux cartes côte à côte ont leurs boutons sur la même ligne, quelle que
     soit la longueur de la phrase. */
  .prof-card.prof-act{display:flex;flex-direction:column}
  .prof-act .prof-hint{flex:1}
  .ptabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
  .ptabs a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--ink-soft);text-decoration:none;font-size:.86rem}
  .ptabs a:hover{border-color:var(--accent);color:var(--accent)}
  .ptabs a.on{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:600}
  .ptabs .n{background:rgba(128,128,128,.14);border-radius:999px;padding:1px 8px;font-size:.76rem}
  .ptabs a.on .n{background:rgba(255,255,255,.22)}
  .bill-note{color:var(--faint);font-size:.8rem;margin-top:18px}
  .bill-note code{background:var(--card);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
  .bill-h2{font-size:1.05rem;margin:34px 0 12px}
  .bill-inv{display:flex;flex-direction:column;gap:8px}
  .bi-row{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 16px;color:var(--ink);font-size:.87rem;box-shadow:var(--shadow-sm)}
  .bi-row:hover{border-color:var(--border-strong)}
  .bi-num{font-weight:650;font-variant-numeric:tabular-nums}
  .bi-plan{color:var(--ink-soft)}
  .bi-date{color:var(--faint);margin-left:auto}
  .bi-amt{font-weight:650;font-variant-numeric:tabular-nums}
  .bi-st{font-size:.72rem;color:#16a34a;font-weight:700;text-transform:uppercase}
  .inv-doc{background:#fff;border:1px solid var(--border);border-radius:18px;padding:34px;max-width:640px;margin:0 auto;box-shadow:var(--shadow)}
  .inv-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}
  .inv-title{font-size:1.3rem;font-weight:750}
  .inv-meta{text-align:right;color:var(--ink-soft);font-size:.9rem}
  .inv-to{margin-bottom:22px;color:var(--ink-soft);font-size:.9rem;line-height:1.5}
  /* Émetteur et destinataire côte à côte, comme sur une facture papier ; l'un
     sous l'autre quand la largeur ne suffit plus (30/08/2026). */
  .inv-parties{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:22px}
  .inv-parties>div{flex:1 1 210px;min-width:0;color:var(--ink-soft);font-size:.9rem;line-height:1.5;margin-bottom:0}
  .inv-lab{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:4px}
  .inv-note{margin-top:14px;font-size:.8rem;color:var(--faint);line-height:1.5}
  .inv-table{width:100%;border-collapse:collapse;font-size:.9rem}
  .inv-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:8px 10px;border-bottom:1px solid var(--border)}
  .inv-table td{padding:12px 10px;border-bottom:1px solid var(--border)}
  .inv-table .r{text-align:right}
  .inv-table .tot td{border-bottom:0;padding-top:16px}
  .inv-actions{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
  @media print{body{background:#fff}.inv-doc{border:0;box-shadow:none}.noprint{display:none}}
  /* ---------- Profil : sections rétractables ----------
     Onze tuiles à la file rendaient la page illisible. Elles sont regroupées par thème
     dans des <details> natifs : repliés/dépliés sans JavaScript, accessibles au clavier,
     et l'état est simplement mémorisé par un script (voir profil.php). */
  .prof-sec{border:1px solid var(--border);border-radius:16px;background:var(--card);
    box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden}
  .prof-sec>summary{display:flex;align-items:center;gap:13px;padding:14px 18px;cursor:pointer;
    list-style:none;user-select:none}
  /* Le triangle natif ne se stylise pas : on le retire des deux moteurs et on met
     notre propre chevron, qui pivote à l'ouverture. */
  .prof-sec>summary::-webkit-details-marker{display:none}
  .prof-sec>summary::marker{content:""}
  .prof-sec>summary:hover{background:var(--bg)}
  html.dark .prof-sec>summary:hover{background:#232c3f}
  .ps-ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
    background:var(--bg);border:1px solid var(--border);color:var(--accent)}
  .ps-ic .pi{width:17px;height:17px}
  html.dark .ps-ic{background:#161b26;border-color:#2b3447}
  .ps-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
  .ps-tx b{font-size:.96rem;font-weight:650}
  .ps-tx small{color:var(--ink-soft);font-size:.79rem;line-height:1.3}
  .ps-chev{margin-left:auto;flex:0 0 auto;color:var(--faint);font-size:1.1rem;line-height:1;
    transition:transform .2s}
  .prof-sec[open]>summary .ps-chev{transform:rotate(180deg)}
  .prof-sec[open]>summary{border-bottom:1px solid var(--border)}
  .ps-body{padding:16px 18px 18px}
  /* Les tuiles perdent leur cadre à l'intérieur d'une section : la section EST la carte,
     un cadre dans un cadre alourdirait pour rien. Leur titre suffit à les séparer. */
  /* …RÉVISÉ le 09/10/2026 (demandé : « sépare bien les différentes options, je trouve très fouillis ») : sans cadre,
     seuls les titres séparaient les options et les champs se mêlaient d'une colonne à l'autre. Chaque option a de
     nouveau sa carte, mais légère — un filet et de l'air autour, SANS fond (même jour, demandé : « laisse juste
     l'encadré, le fond en transparent ») : la section reste le contenant, et aucune ombre ne s'empile. */
  .prof-sec .prof-card{background:transparent;border:1px solid var(--border);box-shadow:none;border-radius:14px;padding:18px 18px 16px}
  .prof-sec .prof-card h2{margin-bottom:12px}
  .prof-sec .prof-card.prof-alert{border:1px solid rgba(220,38,38,.45);border-radius:14px;padding:16px}
  /* Données & compte : export et suppression centrés, sur une colonne lisible, au lieu de rester collés à gauche
     d'une rangée vide (09/10/2026, demandé). */
  .prof-sec .prof-card.prof-data{grid-column:1/-1;justify-self:center;width:100%;max-width:560px;text-align:center}
  .prof-data h2{justify-content:center}
  .prof-data form{justify-content:center}
  /* Les champs de la suppression sur toute la largeur du bloc : l'œil du mot de passe (pw.js) enveloppe le champ
     dans un .pw-wrap qui, élément souple sans consigne, restait à sa largeur propre — plus étroit que le code. */
  .prof-data form > .pw-wrap, .prof-data form > input:not([type=hidden]){flex:1 1 100%}
  /* Le lustre retiré (09/10/2026, demandé) : la carte d'identité et les sections du profil gardent leur seul cadre,
     comme les blocs des options — plus de voile blanc, de filet de lumière sur l'arête ni d'ombre portée. En verre,
     un flou simple reste derrière (rien de transparent sans flou), sans la saturation qui faisait briller le fond
     d'écran. Sélecteurs un cran plus précis que ceux de glass.php, servi APRÈS cette feuille — son :is() compte
     autant que son argument le plus lourd (« .grid .app », deux classes). */
  /* …en thème VERRE seulement (09/10/2026, demandé : « avec le thème classique, conserve l'opacité des blocs ») :
     en classique, sections et carte d'identité gardent leur fond plein et leur ombre ; les options, sans fond, y
     prennent donc le blanc de la section. */
  /* …et le fond des sections de la liste des Tâches (09/10/2026, demandé : « en thème verre, le même fond que les
     tâches en onglet liste ») : la vitre des cartes de projet d'Opus (.file, glass.php) — blanc à 34 %, nuit à 34 %,
     même flou saturé. */
  /* …puis, le 23/10/2026 (demandé : « le même fond que les tâches et les notes ; tous les blocs transparents du site
     identiques ») : la plaque des TÂCHES elle-même — --card (blanc à 58 %, nuit à 52 %) et le même flou saturé —
     pour les sections et la carte d'identité. */
  html.glass .prof-sec, html.glass .prof-top .prof-card{box-shadow:none}
  html.glass details.prof-sec, html.glass .prof-grid.prof-top .prof-card{box-shadow:none;background:var(--card);
    -webkit-backdrop-filter:saturate(185%) blur(10px);backdrop-filter:saturate(185%) blur(10px)}
  /* Les blocs d'options DANS une section : le filet --border et 12 px d'arrondi, SANS fond depuis le 23/10/2026 — la
     section porte déjà la plaque des tâches ; une seconde vitre par-dessus en aurait fait un blanc plus épais que
     partout ailleurs (comme en classique, où ils prennent le fond de la section). Pas de flou à eux : celui de la
     section, leur ancêtre, est déjà derrière (un flou sur un ancêtre annule celui du descendant). */
  html.glass .prof-sec .prof-card{background:transparent;border-color:var(--border);border-radius:12px}
  html.glass .prof-sec .prof-card.prof-alert{border-color:rgba(220,38,38,.45)}
  /* « Réduire la transparence » du système : sections et carte d'identité redeviennent pleines, comme tout le verre
     (glass.php, section 10) — leurs fonds ci-dessus sont écrits en dur et passeraient sinon devant. */
  @media (prefers-reduced-transparency: reduce){
    html.glass details.prof-sec, html.glass .prof-grid.prof-top .prof-card,
    html.glass.dark details.prof-sec, html.glass.dark .prof-grid.prof-top .prof-card{background:var(--card);
      -webkit-backdrop-filter:none;backdrop-filter:none}
  }
  /* Photo de profil : de l'air avant « Nom affiché » (09/10/2026, demandé), collé jusque-là aux boutons de la photo. */
  .prof-card .av-name{margin-top:22px}
  /* ---------- Profil ---------- */
  .prof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
  .prof-sec .prof-grid{gap:22px}
  .prof-top{margin-bottom:18px}
  .prof-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
  .prof-card.prof-alert{border-color:rgba(220,38,38,.45);background:linear-gradient(180deg,rgba(220,38,38,.05),transparent)}
  .prof-card h2{font-size:.95rem;margin:0 0 14px;display:flex;align-items:center;gap:8px}
  .prof-card h2 .pi{color:var(--accent)}
  .prof-id{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .prof-avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:750;font-size:1.6rem;background:linear-gradient(140deg,#8a9bff,var(--accent));flex-shrink:0}
  .prof-who{display:flex;flex-direction:column;gap:3px;line-height:1.35;min-width:0}
  .prof-who b{font-size:1.05rem}
  .prof-who span{color:var(--ink-soft);font-size:.86rem}
  .prof-stats{margin-left:auto;display:flex;gap:18px;color:var(--ink-soft);font-size:.84rem;flex-wrap:wrap}
  .prof-stats b{color:var(--ink);font-size:1rem;display:block;text-align:center}
  .prof-form{display:flex;flex-direction:column;gap:11px}
  .prof-form label{display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}
  .prof-hint{color:var(--ink-soft);font-size:.88rem;margin:0 0 12px}
  /* ---------- Famille ---------- */
  .fam-intro{grid-column:1/-1;max-width:600px}
  .fam-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.9rem}
  .fam-row:last-child{border-bottom:0}
  .fam-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(140deg,#8a9bff,var(--accent));flex-shrink:0;overflow:hidden}
  /* photo de profil (27/08/2026) : l'image remplit le rond, l'initiale n'est
     que le repli des comptes sans photo */
  .fam-avatar img,.avatar img,.prof-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
  .prof-avatar{overflow:hidden}   /* la photo y remplace l'initiale (04/10/2026, audit) */
  .av-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .av-big{width:64px;height:64px;font-size:1.4rem}
  .av-pick{cursor:pointer}
  /* dans la rangée, les bc-btn (blocs pleine largeur ailleurs) redeviennent
     des boutons en ligne — sans quoi ils s'étiraient et se lisaient mal */
  .av-row .bc-btn{display:inline-block;width:auto;margin-top:0;padding:9px 14px}
  .prof-hint{color:var(--ink-soft);font-size:.85rem;margin:2px 0 10px}
  .fam-mail{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .fam-mail small{color:var(--faint)}
  .fam-role{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
  .fam-role.owner{color:#0a8fa0}
  .fam-code{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;font-size:.76rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--bg);border-radius:8px;padding:8px 10px}
  .bc-btn.sm{padding:6px 12px;font-size:.8rem}
  .fam-act{display:inline-flex;align-items:center;gap:6px;width:auto;margin-top:0;white-space:nowrap}
  .fam-act .pi{width:15px;height:15px}
  @media(max-width:560px){
    .fam-inv{flex-wrap:wrap}
    .fam-inv .fam-code{flex-basis:100%;white-space:normal;overflow-wrap:anywhere}
    .fam-inv .bc-btn{min-height:40px}
  }
  /* ---------- Profil : stockage ---------- */
  .prof-storage{grid-column:1/-1}
  .stg-top{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
  .stg-top b{font-size:1.35rem}
  .stg-max{color:var(--ink-soft);font-size:.86rem}
  .stg-gauge{display:flex;height:14px;border-radius:999px;background:var(--bg);border:1px solid var(--border);overflow:hidden}
  .stg-seg{height:100%}
  .stg-seg+.stg-seg{border-left:2px solid var(--card)}
  .stg-legend{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 2px;color:var(--ink-soft);font-size:.82rem}
  .stg-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
  .stg-legend i.free{background:var(--bg);border:1px solid var(--border-strong)}
  .stg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 28px;margin-top:16px}
  .stg-cols h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin:10px 0 4px}
  .stg-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.88rem}
  .stg-row:last-child{border-bottom:0}
  .stg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
  .stg-row .lab{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stg-row .lab small{color:var(--faint)}
  .stg-row .lab.ext{font-weight:650;min-width:52px}
  .stg-minibar{flex:1;height:6px;border-radius:99px;background:var(--bg);overflow:hidden;min-width:40px}
  .stg-minibar i{display:block;height:100%;background:var(--accent);border-radius:99px}
  .stg-amt{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;line-height:1.25}
  .stg-amt b{display:block}
  .stg-amt small{color:var(--faint);font-size:.74rem}
  .stg-note{color:var(--faint);font-size:.78rem;margin:14px 0 0}
  /* ---------- Connexion / configuration ---------- */
  .auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
  .auth-box{background:var(--card);border:1px solid var(--border);border-radius:20px;
    padding:38px 34px;width:100%;max-width:390px;text-align:center;box-shadow:var(--shadow-lg)}
  /* tuile blanche et marque en couleurs, comme .brand .logo.marque (10/10/2026) */
  .auth-logo{width:52px;height:52px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center;
    font-size:1.7rem;background:#fff;box-shadow:0 0 0 1px rgba(27,34,51,.08),0 6px 16px rgba(27,34,51,.12)}
  .auth-logo .pi{width:39px;height:39px}
  .auth-box h1{font-size:1.5rem;margin:0 0 3px;letter-spacing:-.01em}
  .auth-sub{color:var(--ink-soft);margin:0 0 22px;font-size:.92rem}
  .auth-alt{margin:18px 0 0;font-size:.86rem;color:var(--ink-soft)}
  .auth-alt a{font-weight:600}
  .stack{display:flex;flex-direction:column;gap:12px;text-align:left}
  input{padding:12px 14px;border:1px solid var(--border-strong);border-radius:11px;background:#fbfcfe;
    color:var(--ink);width:100%;font:inherit;font-size:.95rem}
  input::placeholder{color:var(--faint)}
  input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
  .btn{display:inline-block;width:100%;padding:13px;border-radius:11px;border:0;
    background:linear-gradient(140deg,var(--accent-2),var(--accent));color:#fff;font-weight:650;
    cursor:pointer;font:inherit;font-size:1rem;margin-top:4px;box-shadow:0 6px 16px var(--ring)}
  .btn:hover{filter:brightness(1.05)}
  .notice{padding:10px 13px;border-radius:10px;margin-bottom:4px;background:rgba(220,38,38,.08);
    color:var(--danger);border:1px solid rgba(220,38,38,.22);font-size:.9rem}
  /* Message de réussite (03/10/2026, audit) : « un email vient de partir » s'affichait en rouge d'erreur. */
  .notice.ok{background:rgba(22,163,74,.08);color:#15803d;border-color:rgba(22,163,74,.25)}
  html.dark .notice.ok{color:#4ade80}
  /* ---------- Liaisons : la carte des liens inter-apps (06/09/2026) ---------- */
  .liai-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 12px}
  .liai-n b{font-variant-numeric:tabular-nums}
  .liai-leg{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:.82rem}
  .liai-lg{display:inline-flex;align-items:center;gap:6px}
  .liai-lg i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
  .liai-lg b{color:var(--text);font-variant-numeric:tabular-nums}
  .liai-act{margin-left:auto;display:flex;gap:8px}
  .liai-b{background:var(--card);border:1px solid var(--border);border-radius:9px;
    padding:6px 12px;font:inherit;font-size:.84rem;color:var(--text);cursor:pointer}
  .liai-b:hover{border-color:var(--border-strong)}
  /* ⚠ Hauteur EXPLICITE : Cytoscape mesure son conteneur au démarrage, et un
     conteneur de hauteur nulle rend une carte vide sans la moindre erreur.
     `min-height` en plus de `height` pour que le viewport court d'un téléphone
     ne l'écrase pas sous le seuil du lisible. */
  .liai-map{height:min(68vh,640px);min-height:380px;background:var(--card);
    border:1px solid var(--border);border-radius:14px;overflow:hidden}
  .liai-aide{color:var(--muted);font-size:.82rem;margin:8px 2px 0}
  .liai-vide{background:var(--card);border:1px solid var(--border);border-radius:14px;
    padding:22px 24px;max-width:640px}
  .liai-vide p{margin:0 0 10px}
  .liai-vide p:last-child{margin:0;color:var(--muted)}
  @media (max-width:640px){
    .liai-act{margin-left:0;width:100%}
    .liai-map{height:min(60vh,460px);min-height:320px}
  }
  /* ---------- Fenêtres du portail : fond uni et barre de titre STANDARD (11/10/2026, demandé : « toutes les
     fenêtres de dialogue avec le même dessin ») ----------
     Le portail ne charge pas chrome.css : il porte ici sa copie des deux règles des apps.
     1. Boîtes OPAQUES — blanc uni, nuit unie (#161b26) la nuit, verre compris : menu du profil, panneau des
        notifications de l'accueil, nuancier des tuiles, boîtes de dlg.js, « limite atteinte » (.qbox), recadrage
        de la photo (.crop-b). !important à dessein, comme dans chrome.css : le calque verre (glass.php, servi
        APRÈS cette feuille) pose des fonds translucides et un flou à (0,2,1) et (0,3,1), et les vues peignent
        var(--card) dans leur <style> en ligne. Le volet des fonds d'écran (.fond-pal) est déjà blanc en dur, hors
        des listes du verre ; la cloche des autres pages (.nb-panel) porte la même règle dans notif.css. */
  html body :is(.phead-menu,.notif-panel,.tc-pal,.dlg,.qbox,.crop-b){background:#fff !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  html.dark body :is(.phead-menu,.notif-panel,.tc-pal,.dlg,.qbox,.crop-b){background:#161b26 !important}
  /* …sauf le MENU DU PROFIL en verre (23/10/2026, demandé : « de la transparence floue derrière le menu du profil ») :
     le fond des tâches (58 % / 52 %, en dur) sous un flou épais, comme dans les apps (phead.php). Plus blanc en clair
     (23/10/2026, demandé : « trop gris ») : 72 % et un flou éclairci, voir phead.php. */
  html.glass body .phead-menu:not(.peek){background:rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter:saturate(160%) brightness(1.4) blur(24px) !important;backdrop-filter:saturate(160%) brightness(1.4) blur(24px) !important}
  html.glass.dark body .phead-menu:not(.peek){-webkit-backdrop-filter:saturate(185%) blur(24px) !important;backdrop-filter:saturate(185%) blur(24px) !important}
  html.glass.dark body .phead-menu:not(.peek){background:rgba(31,39,55,.52) !important}
  @media (prefers-reduced-transparency:reduce){
    html.glass body .phead-menu:not(.peek){background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
    html.glass.dark body .phead-menu:not(.peek){background:#161b26 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  }
  /* Le champ d'une saisie (Dlg.prompt) : le fond de page, comme dans les apps — la règle générale des champs du
     thème sombre, plus précise que celle de dlg.js, lui donnait la couleur exacte de la boîte. */
  html.dark .dlg input{background:var(--bg)}
  /* Sous verre CLAIR, --card2 est un blanc à 44 % : sur une boîte désormais blanche et unie, le survol de la croix
     et des choix d'une liste de dlg.js ne se voyait plus. Dans ces boîtes, le jeton reprend sa valeur pleine (sous
     verre sombre, celle du calque reste lisible sur la nuit unie). */
  html.glass:not(.dark) :is(.dlg,.qbox,.crop-b){--card2:#f4f7fb}
  /* 2. Barre de titre STANDARD — le dessin de la barre des boîtes (dlg.js, .dlg-h) et des fenêtres du bandeau des
        apps (_shared/phead.php : mêmes classes, mêmes cotes) : icône à la couleur d'accent, titre en gras, croix de
        34 px, filet dessous, d'un bord à l'autre de la carte. Menu du profil (accueil et _userbar.php), panneau des
        notifications de l'accueil, volet des fonds d'écran. Les marges négatives rattrapent le rembourrage de
        chaque carte (celle du volet des fonds est avec lui, plus haut) ; le panneau des notifications n'en a pas. */
  .ph-barre{display:flex;align-items:center;gap:10px;padding:11px 8px 11px 14px;border-bottom:1px solid var(--border)}
  .ph-barre .ph-bi{flex:none;display:grid;place-items:center;color:var(--accent)}
  .ph-barre .ph-bi .pi{width:19px;height:19px;color:inherit}
  .ph-barre .ph-bt{flex:1;min-width:0;margin:0;padding:0;font-size:1.02rem;font-weight:700;line-height:1.3;color:var(--ink)}
  .ph-barre .ph-bx{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;margin:0;border:0;border-radius:8px;
    background:none;color:var(--ink-soft);cursor:pointer}
  .ph-barre .ph-bx:hover{background:#f4f7fb;color:var(--ink)}
  .ph-barre .ph-bx:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .ph-barre .ph-bx .pi{width:18px;height:18px}
  html.dark .ph-barre .ph-bx:hover{background:#1b2130}
  .phead-menu>.ph-barre{margin:-6px -6px 6px}
  /* Un peu de couleur dans le menu « Paramètres » (11/10/2026, demandé : « aux couleurs de l'application ») : la
     règle du bandeau des apps (phead.php), pour l'accueil et les pages du profil — les cases prennent la teinte
     d'accent, tracé à sa couleur sur un fond à peine teinté. Ici les boutons rangés dans le menu portent
     .theme-btn (cloche, thème, aide de l'accueil) ou .nb-bell (cloche des pages du profil). Mélange avec du
     transparent : la même règle vaut de jour et de nuit.
     « html:root » (11/10/2026, signalé : sous verre, profil, liaisons et idée restaient blancs sur l'accueil) :
     la règle du verre qui peint .pm-ic (glass.php, « html.glass body :is(…) ») ne vaut pas (0,2,2) mais (0,3,2)
     — un :is() pèse autant que son argument le plus précis, ici « .phead-r .nb-bell » — et elle est servie APRÈS
     cette feuille : à égalité, elle gagnait le fond et le filet, pas le tracé. Dans les apps la même règle vit
     dans phead.php, après le verre, et l'égalité tournait en sa faveur. (0,4,2) ici : plus d'égalité.
     Couleurs du LOGO (18/10/2026, signalé : « le code couleur n'est pas respecté partout ») : les apps les avaient
     depuis le matin, l'accueil et les pages du profil gardaient la teinte d'accent. Mêmes teintes que phead.php, case
     par case : profil et aide bleus, abonnement et visite violets, découvrir et cloche roses, liaisons turquoise, idée
     et thème ambre. La variable se pose sur la case ; la valeur par défaut sous :where(), plus faible que les autres.
     Ici les boutons rangés dans le menu sont #notifBtn (accueil) ou .nb-bell (pages du profil), #themeBtn et #helpBtn. */
  /* UNE SEULE teinte depuis le 23/10/2026 (demandé : « bleu comme Mon profil ») : les teintes par case sont retirées. */
  html:root body .phead-menu .pm-row :where(.pm-ic,.theme-btn,.phead-theme,.nb-bell){--pmc:#4f6ef2}
  html:root body .phead-menu .pm-row :is(.pm-ic,.theme-btn,.phead-theme,.nb-bell){color:var(--pmc);
    background:color-mix(in srgb,var(--pmc) 11%,transparent);border-color:color-mix(in srgb,var(--pmc) 26%,transparent);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  html body .phead-menu a.pm-row:hover .pm-ic,html body .phead-menu .pm-row :is(.theme-btn,.phead-theme,.nb-bell):hover{color:var(--pmc);
    background:color-mix(in srgb,var(--pmc) 20%,transparent);border-color:color-mix(in srgb,var(--pmc) 40%,transparent)}
  /* ---------- Fenêtres en FONDU (11/10/2026, demandé : « mets l'affichage du menu principal et le voile noir en
     fondu également, pareil pour toutes les boîtes de dialogue ») ----------
     La copie, pour le portail, de la règle des apps (chrome.css et phead.php) : le menu du profil et son voile, le
     panneau des notifications, le volet des fonds d'écran et son voile, le nuancier des tuiles, « limite atteinte »,
     le recadrage de la photo, le voile des boîtes de dlg.js. Ils arrivaient d'un coup ; ils se fondent en 0,18 s
     chaque fois qu'ils passent de masqué à affiché. Opacité seule, rien à la fermeture. */
  @keyframes a4a-fondu{from{opacity:0}}
  html body :is(.phead-veil,.phead-menu,.fond-veil,.fond-pal,.notif-panel,.nb-panel,.tc-pal,.qbox,.crop-b,.dlg-back){animation:a4a-fondu .18s ease}
  @media (prefers-reduced-motion:reduce){html body :is(.phead-veil,.phead-menu,.fond-veil,.fond-pal,.notif-panel,.nb-panel,.tc-pal,.qbox,.crop-b,.dlg-back){animation:none}}
  /* Et à la FERMETURE (11/10/2026, demandé : « fais pareil pour la fermeture (panneau latéral, boîte de dialogue,
     etc.) ») : ces fenêtres se ferment en recevant `hidden`. La transition de `display` (allow-discrete) les garde
     affichées le temps que l'opacité tombe à zéro, sans prise au toucher — la copie de la règle des apps
     (chrome.css). Les boîtes de dlg.js, retirées de la page, portent leur sortie dans leur script. */
  html body :is(.phead-veil,.phead-menu,.fond-veil,.fond-pal,.notif-panel,.nb-panel,.tc-pal,.qbox,.crop-b){transition:opacity .18s ease,display .18s allow-discrete}
  html body :is(.phead-veil,.phead-menu,.fond-veil,.fond-pal,.notif-panel,.nb-panel,.tc-pal,.qbox,.crop-b)[hidden]{opacity:0;pointer-events:none}
  @media (prefers-reduced-motion:reduce){html body :is(.phead-veil,.phead-menu,.fond-veil,.fond-pal,.notif-panel,.nb-panel,.tc-pal,.qbox,.crop-b){transition:none}}
  /* ---------- PREMIÈRE PEINTURE de l'accueil (11/10/2026, signalé : boutons de la barre, champ de recherche et
     tuiles qui bougent à l'arrivée) ----------
     Ces règles vivaient dans les <style> écrits APRÈS le contenu de home.php, ou étaient faites par des scripts de
     bas de page : la page se peignait une première fois sans elles, puis se réarrangeait. Elles sont ici, dans la
     feuille chargée en tête ; les copies de home.php restent, à valeurs égales.
     1. Cloche, thème et aide vivent TOUJOURS dans le menu du profil (un script les y range) : tant qu'ils sont
        encore enfants directs de la barre, ils ne se montrent pas — plus de boutons qui paraissent puis partent.
     2. « Personnaliser » : sa place et son libellé masqué au pouce, dès la première peinture.
     3. Le champ de recherche et son dessin ; au téléphone il n'apparaît pas dans l'en-tête, d'où un script le range
        dans la barre des tuiles avant la première peinture (home.php).
     4. (Retiré le 23/10/2026 : la place réservée au drapeau « Signaler » au bout de la phrase — il est passé à côté
        de « Bonjour », où il ne pousse plus rien.) */
  .head .user>:is(#notifBtn,#themeBtn,#helpBtn){display:none}
  .head .head-edit{flex:0 0 auto;margin-left:2px}
  /* Verre sur « Personnaliser » et la loupe (23/10/2026, demandé, PC et téléphone) : la recette des pastilles de la
     bannière des apps (glass.php) — fond --card, bord --border, flou dépoli — au lieu du blanc plein. Allumés
     (« Terminé », recherche en cours), ils gardent l'accent plein. */
  html.glass .head .tiles-edit:not(.on){background:var(--card);border-color:var(--border);
    -webkit-backdrop-filter:saturate(170%) blur(8px);backdrop-filter:saturate(170%) blur(8px)}
  @media (prefers-reduced-transparency:reduce){html.glass .head .tiles-edit:not(.on){-webkit-backdrop-filter:none;backdrop-filter:none}}
  @media (max-width:700px){.head .head-edit span{display:none}.head .head-edit{padding:7px 9px}}
  .gs-wrap{position:relative;flex:1;max-width:340px;margin:0 14px}
  #gs-input{width:100%;padding:8px 13px;border-radius:11px;border:1px solid var(--border);background:var(--card);color:var(--text,var(--ink));font:inherit;font-size:.88rem}
  @media (max-width:720px){.head>.gs-wrap{display:none}.gs-wrap{flex:1 1 auto;max-width:none;margin:0}#gs-input{padding:10px 14px;font-size:16px}.grid-head{gap:8px}}