/* 60-compte-reglages.css — Cloche et messagerie flottante, rangement des favoris, menu compte, page Réglages, Nouveautés, autocomplétion client.
   Feuille 6/7 : l'ordre de chargement (lib/assets.php) est celui des numéros, il porte la cascade. */
  /* Cloche « À traiter » (topbar) + panneau déroulant */
  /* Messagerie : bouton rond flottant (FAB) en bas à droite. */
  .msg-fab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:23px;cursor:pointer;box-shadow:var(--shadow-lg);z-index:90;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;}
  .msg-fab:hover{transform:translateY(-2px) scale(1.04);}
  .msg-fab:active{transform:scale(.96);}
  .msg-fab .tb-badge{top:0;right:0;}
  /* Messages non lus : halo pulsant + légère bascule, pour attirer l'œil. */
  .msg-fab.has-unread{animation:fabBob 2.4s ease-in-out infinite;}
  .msg-fab.has-unread::after{content:'';position:absolute;inset:0;border-radius:50%;z-index:-1;animation:fabPulse 1.9s ease-out infinite;}
  @keyframes fabPulse{0%{box-shadow:0 0 0 0 rgba(98,182,22,.55);}70%{box-shadow:0 0 0 18px rgba(98,182,22,0);}100%{box-shadow:0 0 0 0 rgba(98,182,22,0);}}
  @keyframes fabBob{0%,88%,100%{transform:translateY(0);}92%{transform:translateY(-4px);}96%{transform:translateY(-1px);}}
  @media(prefers-reduced-motion:reduce){ .msg-fab.has-unread,.msg-fab.has-unread::after{animation:none;} .msg-fab.has-unread{box-shadow:0 0 0 4px rgba(98,182,22,.35),var(--shadow-lg);} }
  @media(max-width:768px){ .msg-fab{right:16px;bottom:16px;width:54px;height:54px;} }
  /* ---- « Mes outils » : rangement personnel de l'accueil ----
     Bouton Ranger, croix de retrait, repli des outils écartés. */
  #apps-head{display:flex;align-items:center;gap:12px;}
  .edit-btn{position:relative;margin-left:auto;display:inline-flex;align-items:center;gap:6px;
            border:1px solid var(--line);background:var(--card);color:var(--grey-1);
            border-radius:980px;padding:6px 15px 6px 12px;font:inherit;font-size:11.5px;font-weight:700;
            text-transform:none;letter-spacing:0;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
  @media(hover:hover){ .edit-btn:hover{border-color:var(--line-2);color:var(--ink);} }
  .edit-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;}
  /* ⠿ = la poignée de déplacement. Elle se dandine au survol : le bouton annonce
     ce qu'il fait avant même qu'on clique. */
  .eb-ic{display:inline-block;font-size:13px;line-height:1;}
  @keyframes gripNudge{0%,100%{transform:translateX(0);}30%{transform:translateX(-1.5px);}70%{transform:translateX(1.5px);}}
  @media(hover:hover){ .edit-btn:hover .eb-ic{animation:gripNudge .5s ease-in-out;} }
  /* Première visite seulement : un halo part du bouton, trois fois, puis plus jamais
     (mémorisé sur l'appareil). Juste de quoi attirer l'œil une fois. */
  .edit-btn.attention::after{content:'';position:absolute;inset:0;border-radius:980px;pointer-events:none;
                             animation:ebPulse 2s ease-out 3;}
  @keyframes ebPulse{0%{box-shadow:0 0 0 0 var(--accent);opacity:.5;}70%{box-shadow:0 0 0 9px var(--accent);opacity:0;}100%{opacity:0;}}
  @media(prefers-reduced-motion:reduce){ .edit-btn.attention::after,.edit-btn:hover .eb-ic{animation:none;} }
  .apps-hint{font-size:12.5px;color:var(--grey-2);font-weight:600;margin:-4px 0 13px;}
  /* Croix de retrait (mode rangement) et « + » de remise en place. */
  .tile-x{position:absolute;top:11px;right:11px;width:26px;height:26px;border-radius:50%;border:none;
          background:var(--fill);color:var(--grey-1);font-size:12px;font-weight:800;line-height:1;cursor:pointer;
          display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s,color .15s;}
  @media(hover:hover){ .tile-x:hover{background:var(--ink);color:var(--card);} }
  .tile-x.add{background:var(--accent-soft);color:var(--accent-dk);font-size:15px;}
  @media(hover:hover){ .tile-x.add:hover{background:var(--accent);color:#fff;} }
  /* Pendant le rangement : la tuile se saisit, elle ne s'ouvre pas. Et elle
     frémit, comme les applications d'un iPhone qu'on réorganise — personne n'a
     besoin qu'on lui explique ce qui se passe. Trois durées et trois décalages
     légèrement différents (2n / 3n) pour que la grille ne batte pas au garde-à-vous. */
  @keyframes tileWobble{0%{transform:rotate(-.5deg);}50%{transform:rotate(.55deg);}100%{transform:rotate(-.5deg);}}
  .tiles.sorting .tile{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
                       animation:tileWobble .29s ease-in-out infinite;}
  .tiles.sorting .tile:nth-child(2n){animation-duration:.33s;animation-delay:-.09s;}
  .tiles.sorting .tile:nth-child(3n){animation-duration:.26s;animation-delay:-.17s;}
  .tiles.sorting .tile:active{cursor:grabbing;}
  .tiles.sorting .tile.dnd-src{animation:none;}   /* celle qu'on tient ne tremble pas */
  @media(prefers-reduced-motion:reduce){ .tiles.sorting .tile{animation:none;} }
  .tiles.sorting .tile .tile-meta .arrow{opacity:.35;}
  .tile.dnd-src{opacity:.35;}
  .tile.dnd-ghost{cursor:grabbing;box-shadow:var(--shadow-lg);border-color:var(--line-2);transform:rotate(1.2deg);opacity:.97;}
  /* Repli « Autres outils » */
  /* ☆ / ★ sur les tuiles des rubriques : ajouter ou retirer des favoris */
  .tile-x.star{background:var(--card);border:1px solid var(--line-2);color:var(--grey-2);font-size:14px;}
  .tile-x.star.on{background:var(--amber-soft);border-color:transparent;color:var(--amber);}
  @media(hover:hover){ .tile-x.star:hover{background:var(--amber-soft);color:var(--amber);border-color:transparent;} }
  .tb-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:980px;background:#e0683a;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  /* ---- Menu compte (avatar topbar) : identité, thème, accès ---- */
  .account-menu{position:absolute;top:calc(100% + 8px);right:0;width:276px;max-width:88vw;background:var(--card);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);z-index:200;overflow:hidden;cursor:default;text-align:left;animation:tbmenu-in .16s ease-out;}
  .am-grip{display:none;width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:8px auto 2px;}
  .account-menu-h{display:flex;align-items:center;gap:11px;padding:14px 14px 12px;}
  .am-av{width:40px;height:40px;border-radius:12px;font-size:14px;}
  .am-id{min-width:0;}
  .account-menu-h .am-name{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .account-menu-h .am-role{font-size:12px;font-weight:600;color:var(--grey-2);margin-top:1px;}
  .am-theme{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 10px 10px;}
  .account-menu .am-th{flex-direction:row;gap:6px;padding:8px 4px;border-radius:10px;border:1px solid var(--line);background:var(--fill);font-size:12px;font-weight:700;color:var(--grey-1);transform:none;transition:border-color .14s,color .14s,background .14s;}
  .account-menu .am-th .lc{font-size:15px;}
  @media(hover:hover){ .account-menu .am-th:hover{color:var(--ink);transform:none;} }
  .account-menu .am-th.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dk);}
  .theme-opts{display:flex;gap:8px;}
  .theme-opt{flex:1;border:1.6px solid var(--line-2);background:var(--card);border-radius:11px;padding:9px 4px 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;font-size:11px;font-weight:700;color:var(--grey-1);transition:border-color .14s,color .14s,transform .12s;}
  .theme-opt:hover{transform:translateY(-1px);}
  .theme-opt.active{border-color:var(--accent);color:var(--ink);}
  .theme-opt .tsw{width:100%;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.08);position:relative;overflow:hidden;}
  .theme-opt .tsw::after{content:"";position:absolute;right:5px;bottom:5px;width:11px;height:11px;border-radius:50%;background:#62b616;box-shadow:0 0 0 2px rgba(255,255,255,.55);}
  .tsw-light{background:#fbfbfb;}
  .tsw-dark{background:#0d1117;}
  .tsw-sepia{background:#fbf0d9;}
  .account-menu-foot{border-top:1px solid var(--line);padding:6px;}
  .account-menu-foot button{width:100%;text-align:left;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:none;border:none;border-radius:10px;padding:8px 10px 8px 8px;cursor:pointer;display:flex;align-items:center;gap:11px;transition:background .14s;}
  @media(hover:hover){ .account-menu-foot button:hover{background:var(--fill);} }
  .amf-ic{width:30px;height:30px;border-radius:9px;background:var(--fill);display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;}
  .amf-ic .lc{font-size:16px;}
  .amf-ic-new{color:var(--accent-dk);background:var(--accent-soft);}
  .amf-ic-out{color:#e0683a;background:rgba(224,104,58,.12);}
  .amf-go{margin-left:auto;font-size:15px;color:var(--grey-2);}
  .amf-out{color:#d0582b;}
  @media(hover:hover){ .account-menu-foot .amf-out:hover{background:rgba(224,104,58,.1);} }
  /* Mobile : les deux menus de la barre deviennent des feuilles en bas d'écran,
     avec un voile, une poignée et des lignes hautes faciles à toucher. */
  @media(max-width:560px){
    /* Pas de flou de fond sur mobile : un flou (backdrop-filter) ferait de la barre
       le repère des éléments « fixed », et les feuilles ne pourraient plus se poser
       en bas de l'écran. La barre passe au-dessus du reste tant qu'une feuille est ouverte. */
    .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);}
    .topbar.sheet-open{z-index:300;}
    .tb-scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:150;animation:tbscrim-in .18s ease-out;}
    .shop-menu,.account-menu{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;min-width:0;border-radius:22px 22px 0 0;border-bottom:0;animation:tbsheet-in .24s cubic-bezier(.2,.8,.2,1);padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
    .shop-menu{padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));}
    .shop-menu::after{display:block;}
    .am-grip{display:block;}
    .shop-opt{padding:14px 12px;font-size:15px;border-radius:12px;}
    .shop-opt.add{border-radius:0 0 12px 12px;}
    .account-menu-h{padding:12px 14px;}
    .am-av{width:46px;height:46px;font-size:16px;}
    .account-menu-h .am-name{font-size:16px;}
    .am-theme{padding:2px 10px 12px;}
    .account-menu .am-th{padding:11px 4px;font-size:13px;}
    .account-menu-foot{padding:8px 10px 4px;}
    .account-menu-foot button{padding:11px 10px 11px 8px;font-size:15px;}
    .amf-ic{width:34px;height:34px;border-radius:10px;}
  }
  /* ---- Page Réglages (liste verticale de cartes pleine largeur, uniformes :
         à gauche le titre + description, à droite le réglage) ---- */
  .set-list{display:flex;flex-direction:column;gap:16px;}
  .set-card{display:flex;gap:40px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;box-shadow:0 1px 2px rgba(16,16,16,.03);}
  .set-side{flex:0 0 300px;max-width:300px;}
  .set-side h3{font-size:16px;font-weight:800;color:var(--ink);}
  .set-side p{font-size:13.5px;color:var(--grey-1);margin-top:5px;font-weight:500;line-height:1.5;}
  .set-main{flex:1;min-width:0;}
  .set-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:14px;}
  .set-row:first-child{border-top:none;padding-top:2px;}
  .set-row .set-k{color:var(--grey-1);font-weight:600;}
  .set-row .set-v{color:var(--ink);font-weight:700;text-align:right;}
  .set-actions{margin-top:18px;}
  @media(max-width:760px){
    /* En colonne, align-items gère l'axe horizontal : il faut « stretch » pour que
       les enfants (dont set-main) occupent toute la largeur, sinon ils se réduisent
       à la largeur de leur contenu (ex. le bouton) et laissent un vide à droite. */
    .set-card{flex-direction:column;gap:16px;align-items:stretch;}
    .set-side{flex-basis:auto;max-width:none;}
  }
  /* Vignettes de thème : grille de 3 colonnes égales (remplit toujours la largeur,
     contrairement à flex qui pouvait laisser des vignettes étroites). Aperçu à ratio
     paysage constant via le hack padding-bottom (compatible partout). */
  .theme-opts-lg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:420px;}
  .theme-opts-lg .theme-opt{padding:12px 8px 10px;font-size:12.5px;gap:9px;}
  .theme-opts-lg .tsw{width:100%;height:0;padding-bottom:60%;}
  /* Mobile (cartes empilées) : les groupes de réglage occupent toute la largeur. */
  @media(max-width:760px){
    .theme-opts-lg{max-width:none;}
    .accent-opts{max-width:none;}
  }
  /* Couleur d'accentuation (pastilles) */
  .accent-opts{display:flex;flex-wrap:wrap;gap:12px;max-width:340px;}
  .accent-opt{width:40px;height:40px;border-radius:50%;border:none;background:var(--sw);cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .12s;outline:2px solid transparent;outline-offset:2px;}
  .accent-opt:hover{transform:scale(1.08);}
  .accent-opt.active{outline-color:var(--sw);}
  .accent-opt.active::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.4);}
  .accent-lock{display:flex;gap:8px;background:var(--fill);border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;font-size:12.5px;color:var(--grey-1);font-weight:600;margin-bottom:14px;max-width:360px;}
  .set-card.is-locked .accent-opts{opacity:.5;filter:grayscale(.3);}
  .set-card.is-locked .accent-opt{cursor:not-allowed;}
  .set-card.is-locked .accent-opt:hover{transform:none;}
  .demo-links{display:flex;flex-wrap:wrap;gap:10px;}
  /* Nouveautés — page dédiée (historique des évolutions) */
  /* ---- Nouveautés ----
     Chaque ligne se lit en trois temps : une étiquette (de quoi s'agit-il ?), un
     titre en gras (quoi de neuf ?), puis l'explication en gris (qu'est-ce que ça
     change ?). On peut ainsi parcourir la page en ne lisant que les gras. */
  .chlog-page{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;max-width:760px;display:flex;flex-direction:column;gap:30px;box-shadow:0 1px 2px rgba(16,16,16,.03);}
  .chlog-entry{position:relative;padding-left:18px;}
  .chlog-entry::before{content:"";position:absolute;left:0;top:5px;bottom:2px;width:3px;border-radius:3px;background:var(--accent);opacity:.55;}
  .chlog-date{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--grey-2);margin-bottom:14px;}
  .chlog-items{list-style:none;display:flex;flex-direction:column;}
  /* Filet fin entre deux nouveautés : elles ne se touchent plus. */
  .chlog-items li{padding:14px 0;}
  .chlog-items li + li{border-top:1px solid var(--line);}
  .chlog-items li:first-child{padding-top:0;}
  .chlog-items li:last-child{padding-bottom:0;}
  .ch-tag{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
          padding:3px 9px;border-radius:980px;margin-bottom:7px;}
  .ch-new{background:var(--accent-soft);color:var(--accent-dk);}
  .ch-up{background:#e3f4f4;color:#0a6f7d;}
  .ch-fix{background:#fdeee6;color:#c0561f;}
  .ch-lead{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.4;}
  /* 68 caractères par ligne environ : au-delà, l'œil perd le début de la ligne suivante. */
  .ch-tx{font-size:14px;line-height:1.6;color:var(--grey-1);font-weight:500;margin-top:4px;max-width:62ch;}
  .ch-lead + .ch-tx{margin-top:5px;}
  .ch-tx.solo{font-size:14.5px;color:var(--ink);}   /* pas de titre : le texte porte la ligne */
  /* Sombre et sépia : les deux étiquettes non vertes ont un fond en dur, on le
     rattrape pour qu'elles restent lisibles. */
  :root[data-theme="dark"] .ch-up{background:#10333a;color:#7fd4e0;}
  :root[data-theme="dark"] .lp-st.available{background:#1f3a12;color:#9fdc6a;}
  :root[data-theme="dark"] .lp-st.loaned{background:#3d2e0a;color:#f0c35a;}
  :root[data-theme="dark"] .origin-box.warn{background:#2e2410;border-color:#5a4415;}
  :root[data-theme="dark"] .origin-box.warn .ot-t{color:#f0c35a;}
  :root[data-theme="dark"] .ch-fix{background:#3a1f14;color:#f0a884;}
  @media(max-width:560px){ .chlog-page{padding:20px 18px;} .ch-tx{font-size:13.5px;} }
  .ver-close{background:none;border:none;color:rgba(255,255,255,.55);font-size:12px;cursor:pointer;padding:4px 8px;line-height:1;border-radius:999px;transition:color .15s,background .15s;}
  .ver-close:hover{color:#fff;background:rgba(255,255,255,.12);}

  /* Autocomplétion « client déjà connu » (pré-remplissage depuis PrestaShop) */
  /* overflow-x caché : overflow-y:auto rendrait l'axe X scrollable aussi, et un
     texte insécable (long e-mail…) créerait un petit scroll horizontal interne. */
  .ac-box{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--card);border:1px solid var(--line-2);border-radius:11px;box-shadow:var(--shadow-lg);margin-top:5px;max-height:250px;overflow-y:auto;overflow-x:hidden;}
  .ac-item{padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:13px;overflow-wrap:anywhere;}
  .ac-item:last-child{border-bottom:none;}
  .ac-item:hover{background:var(--fill);}
  .ac-item span{color:var(--grey-1);font-size:11.5px;}
  .ac-empty{padding:11px 13px;color:var(--grey-2);font-size:12.5px;}