/* 25-accueil-apple.css — style « Apple Design » de l'accueil.
   Se pose par-dessus 20-accueil.css, limité à #view-home. Les mouvements (appui,
   survol, pastille des onglets, arrivée des cartes) sont des ressorts pilotés par
   assets/js/accueil-apple.js ; ici : typo système, matières, ombres, onglets.
   Pour revenir en arrière : retirer ce fichier et le script de lib/assets.php. */

  /* ---- Typographie : police système (SF sur Apple), approche selon la taille. */
  #view-home{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:0;}
  #view-home .hello h1{font-size:40px;font-weight:700;line-height:1.05;letter-spacing:-.025em;font-optical-sizing:auto;}
  #view-home .hello p{font-size:17px;line-height:1.47;letter-spacing:-.012em;font-weight:400;margin-top:8px;}
  #view-home .hello #hello-sub b{font-weight:600;}
  #view-home .tile h3{font-size:15.5px;font-weight:600;letter-spacing:-.012em;line-height:1.2;}
  #view-home .tile-meta{font-size:12.5px;letter-spacing:0;font-weight:400;}
  #view-home .tile-n{font-family:ui-rounded,system-ui,-apple-system,sans-serif;font-weight:700;letter-spacing:-.02em;}
  #view-home .tile-todo .todo-eyebrow{font-weight:700;letter-spacing:.06em;}
  #view-home .grp-title{font-size:12px;font-weight:600;letter-spacing:.05em;}

  /* ---- Onglets : contrôle segmenté. La pastille blanche (.fo-ind) glisse d'un
     onglet à l'autre dès l'appui, montée en ressort par le script. */
  #view-home .folders{display:inline-flex;max-width:100%;gap:0;margin-top:24px;padding:3px;border:0;border-radius:12px;background:var(--fill);}
  #view-home .fo{padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:var(--grey-1);position:relative;z-index:1;transition:color .2s;}
  #view-home .fo::after{display:none;}
  #view-home .fo .fo-ic{font-size:15px;}
  #view-home .fo[aria-selected="true"]{color:var(--ink);}
  #view-home .fo[aria-selected="true"] .fo-ic{color:var(--accent-dk);}
  @media(hover:hover){ #view-home .fo:not([aria-selected="true"]):hover{background:none;color:var(--ink);} }
  #view-home .fo .tdot{background:transparent;color:inherit;opacity:.6;min-width:0;padding:0 0 0 2px;font-weight:600;}
  #view-home .fo[aria-selected="true"] .tdot{background:transparent;color:var(--grey-1);opacity:1;}
  /* Sans script, la pastille est portée par l'onglet lui-même. */
  #view-home .folders:not(.has-ind) .fo[aria-selected="true"]{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04);}
  .fo-ind{position:absolute;left:0;top:3px;bottom:3px;width:0;border-radius:9px;background:var(--card);
    box-shadow:0 3px 8px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.04),0 0 0 .5px rgba(0,0,0,.04);pointer-events:none;z-index:0;will-change:transform,width;}
  /* Sombre : la pastille est plus claire que son rail, comme sur iOS. */
  :root[data-theme="dark"] .fo-ind,:root[data-theme="dark"] #view-home .folders:not(.has-ind) .fo[aria-selected="true"]{background:var(--line);}
  @media(max-width:768px){ #view-home .folders{margin:20px 0 0;padding:3px;} #view-home .fo{padding:7px 11px;font-size:13px;} }
  @media(max-width:480px){ #view-home .folders{margin:18px 0 0;} }

  /* ---- Cartes : même forme, matière plus fine. Le transform appartient au
     ressort (script) : plus de transition CSS dessus, sinon elle rattrape chaque image. */
  #view-home .tile{border-radius:18px;border-color:rgba(0,0,0,.06);
    box-shadow:0 1px 1px rgba(0,0,0,.02),0 2px 8px rgba(0,0,0,.04);
    transition:box-shadow .3s cubic-bezier(.2,.8,.2,1),border-color .3s;}
  :root[data-theme="dark"] #view-home .tile{border-color:var(--line);}
  @media(hover:hover){ #view-home .tile:hover{transform:none;} }
  #view-home .tile.is-hover{box-shadow:0 2px 4px rgba(0,0,0,.03),0 14px 32px -10px rgba(0,0,0,.18);border-color:rgba(0,0,0,.08);}
  #view-home .tile.is-press{box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px -6px rgba(0,0,0,.12);transition-duration:.08s;}
  #view-home .tile-todo{box-shadow:0 2px 4px rgba(0,0,0,.04),0 12px 28px -10px rgba(0,0,0,.18);}
  #view-home .deckg{border-radius:18px;transition:transform .5s cubic-bezier(.2,.9,.25,1);}
  /* Pastilles d'icône façon icône d'app : reflet en haut, liseré intérieur. */
  #view-home .tile-ic{border-radius:11px;
    background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 55%);
    box-shadow:inset 0 0 0 .5px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.10);}
  #view-home .tile-meta .arrow{transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.25,1);transform:translateX(-4px);}
  @media(hover:hover){ #view-home .tile.is-hover .tile-meta .arrow{opacity:1;transform:none;} }
  /* Rangement (Favoris > Ranger) : le tremblement de layout.js garde la main. */
  #view-home .tiles.sorting .tile{box-shadow:none;}

  @media(max-width:640px){
    #view-home .tile{border-radius:16px;}
    #view-home .tile-ic{border-radius:10px;}
    #view-home .hello h1{font-size:34px;letter-spacing:-.022em;}
    #view-home .hello p{font-size:16px;}
  }

  /* ---- Accessibilité : contraste renforcé, transparence réduite. Le
     mouvement réduit est géré par le script (fondus seulement). */
  @media(prefers-contrast:more){
    #view-home .tile{border-color:var(--grey-2);}
    #view-home .folders{box-shadow:inset 0 0 0 1px var(--grey-2);}
    .fo-ind{box-shadow:0 0 0 1px var(--ink);}
  }
  @media(prefers-reduced-transparency:reduce){ #view-home .tile-ic{background-image:none;} }